<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hesed Academy Admission Form</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background: #eef2f7;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 20px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    form {
      background: #fff;
      padding: 30px 40px;
      width: 100%;
      max-width: 700px;
      border-radius: 10px;
      box-sizing: border-box;
      box-shadow: 0 0 12px rgba(0,0,0,0.1);
      overflow-y: auto;
      max-height: 90vh;
    }

    h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #333;
    }

    label {
      font-weight: bold;
      margin-top: 15px;
      display: block;
      color: #444;
    }

    input[type="text"],
    input[type="date"],
    input[type="email"],
    select,
    textarea,
    input[type="file"] {
      width: 100%;
      padding: 10px 12px;
      margin-top: 6px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      box-sizing: border-box;
      resize: vertical;
      font-family: inherit;
    }

    textarea {
      min-height: 80px;
    }

    input[type="submit"] {
      background: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 18px;
      padding: 12px 0;
      margin-top: 25px;
      border-radius: 6px;
      transition: background-color 0.3s ease;
      width: 100%;
      box-sizing: border-box;
    }

    input[type="submit"]:hover {
      background: #0056b3;
    }

    /* Responsive layout for wider screens */
    @media (min-width: 768px) {
      form {
        padding: 40px 50px;
      }
    }
  </style>
</head>
<body>
  <form action="submit_admission.php" method="post" enctype="multipart/form-data">
    <h2>Hesed Academy Admission Form</h2>

    <!-- Student Information -->
    <label for="full_name">Full Name:</label>
    <input id="full_name" type="text" name="full_name" required />

    <label for="dob">Date of Birth:</label>
    <input id="dob" type="date" name="dob" required />

    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
      <option value="">Select Gender</option>
      <option>Male</option>
      <option>Female</option>
    </select>

    <label for="nationality">Nationality:</label>
    <input id="nationality" type="text" name="nationality" required />

    <label for="state">State of Origin:</label>
    <input id="state" type="text" name="state" required />

    <label for="lga">LGA:</label>
    <input id="lga" type="text" name="lga" required />

    <label for="religion">Religion:</label>
    <input id="religion" type="text" name="religion" required />

    <!-- Academic Background -->
    <label for="previous_school">Previous School:</label>
    <input id="previous_school" type="text" name="previous_school" required />

    <label for="last_class">Last Class Completed:</label>
    <input id="last_class" type="text" name="last_class" required />

    <label for="class_intended">Class Intended:</label>
    <select id="class_intended" name="class_intended" required>
      <option value="">Select Class</option>
      <option value="JSS 1">JSS 1</option>
      <option value="JSS 2">JSS 2</option>
      <option value="JSS 3">JSS 3</option>
      <option value="SSS 1">SSS 1</option>
      <option value="SSS 2">SSS 2</option>
      <option value="SSS 3">SSS 3</option>
    </select>

    <label for="performance">Academic Performance:</label>
    <input id="performance" type="text" name="performance" required />

    <!-- Parent Information -->
    <label>Parent/Guardian Information:</label>

    <label for="parent_name">Name:</label>
    <input id="parent_name" type="text" name="parent_name" required />

    <label for="parent_phone">Phone Number:</label>
    <input id="parent_phone" type="text" name="parent_phone" required />

    <label for="email">Email Address:</label>
    <input id="email" type="email" name="email" required />

    <label for="occupation">Occupation:</label>
    <input id="occupation" type="text" name="occupation" required />

    <label for="relationship">Relationship to Student:</label>
    <input id="relationship" type="text" name="relationship" required />

    <label for="address">Home Address:</label>
    <textarea id="address" name="address" required></textarea>

    <!-- Uploads -->
    <label>Upload only correct documents:</label>

    <label for="passport">Passport Photograph:</label>
    <input id="passport" type="file" name="passport" accept=".jpg,.jpeg,.png" required />

    <label for="birth_certificate">Birth Certificate:</label>
    <input id="birth_certificate" type="file" name="birth_certificate" accept=".pdf,.jpg,.jpeg,.png" required />

    <label for="academic_result">Academic Result/Transfer Letter:</label>
    <input id="academic_result" type="file" name="academic_result" accept=".pdf,.jpg,.jpeg,.png" required />

    <label for="receipt">Payment Receipt <br>
      <i>Hesed... <br> Account No:  <br> Bank: </i>:
    </label>
    <input id="receipt" type="file" name="receipt" accept=".pdf,.jpg,.jpeg,.png" required />

    <input type="submit" value="Submit Application" />
  </form>
</body>
</html>
