<?php
// index.php - Tartu College Summer Application Form (Page 1)
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tartu College Summer Application</title>
  <link rel="stylesheet" href="assets/style.css" />
</head>
<body>
  <div class="container">
    <header>
      <img src="assets/logo.png" alt="Tartu College Logo" class="logo">
      <h1>Tartu College Summer 2025 Application</h1>
    </header>

    <form action="review.php" method="post" id="applicationForm">

      <section>
        <h2>Let's get to know you!</h2>

        <label>First Name <span class="required">*</span>
          <input type="text" name="first_name" required>
        </label>

        <label>Family/Last Name <span class="required">*</span>
          <input type="text" name="last_name" required>
        </label>

        <label>Preferred Called Name
          <input type="text" name="preferred_name">
        </label>

        <label>Birthdate <span class="required">*</span>
          <input type="date" name="birthdate" id="birthdate" required placeholder="YYYY-MM-DD">
          <span id="birthError" style="color: red; display: none;">You must be at least 18 years old on your move-in date.</span>
        </label>

        <label>Gender <span class="required">*</span>
          <select name="gender" required>
            <option value="">-- Select Gender --</option>
            <option>Male</option>
            <option>Female</option>
            <option>Genderqueer/Non-Binary</option>
          </select>
        </label>

        <label>Citizenship <span class="required">*</span>
          <select name="citizenship" required>
  <option value="">-- Select Citizenship --</option>
  <option>American</option>
  <option>British</option>
  <option>Canadian</option>
  <option>Chinese</option>
  <option>Estonian</option>
  <option>German</option>
  <option>Korean</option>
  <option disabled>──────────</option>
  <option>Afghan</option>
  <option>Albanian</option>
  <option>Algerian</option>
  <option>Andorran</option>
  <option>Angolan</option>
  <option>Antiguan and Barbudan</option>
  <option>Argentine</option>
  <option>Armenian</option>
  <option>Aruban</option>
  <option>Australian</option>
  <option>Austrian</option>
  <option>Azerbaijani</option>
  <option>Bahamian</option>
  <option>Bahraini</option>
  <option>Bangladeshi</option>
  <option>Barbadian</option>
  <option>Belarusian</option>
  <option>Belgian</option>
  <option>Belizean</option>
  <option>Beninese</option>
  <option>Bermudian</option>
  <option>Bhutanese</option>
  <option>Bissau-Guinean</option>
  <option>Bolivian</option>
  <option>Bosnian and Herzegovinian</option>
  <option>Botswana</option>
  <option>Brazilian</option>
  <option>Breton</option>
  <option>Bruneian</option>
  <option>Bulgarian</option>
  <option>Burkinabé</option>
  <option>Burundian</option>
  <option>Cambodian</option>
  <option>Cameroonian</option>
  <option>Cape Verdean</option>
  <option>Catalan</option>
  <option>Chadian</option>
  <option>Chilean</option>
  <option>Colombian</option>
  <option>Comorian</option>
  <option>Congoles</option>
  <option>Costa Rican</option>
  <option>Croatian</option>
  <option>Cuban</option>
  <option>Cypriot</option>
  <option>Czech</option>
  <option>Dane</option>
  <option>Djiboutian</option>
  <option>Dominica</option>
  <option>Dutch</option>
  <option>East Timorese</option>
  <option>Ecuadorian</option>
  <option>Egyptian</option>
  <option>Emirati</option>
  <option>Equatoguinean</option>
  <option>Eritrean</option>
  <option>Ethiopian</option>
  <option>Fijian</option>
  <option>Filipino</option>
  <option>Finn</option>
  <option>French</option>
  <option>Gabonese</option>
  <option>Gambian</option>
  <option>Georgian</option>
  <option>Ghanaian</option>
  <option>Gibraltarian</option>
  <option>Greek</option>
  <option>Greenlander</option>
  <option>Grenadian</option>
  <option>Guatemalan</option>
  <option>Guinean</option>
  <option>Guyanese</option>
  <option>Haitian</option>
  <option>Honduran</option>
  <option>Hong Konger</option>
  <option>Hungarian</option>
  <option>I-Kiribati</option>
  <option>Icelander</option>
  <option>Indian</option>
  <option>Indonesian</option>
  <option>Iranian</option>
  <option>Iraqi</option>
  <option>Irish</option>
  <option>Israeli</option>
  <option>Italian</option>
  <option>Ivorian</option>
  <option>Jamaican</option>
  <option>Japanese</option>
  <option>Jordanian</option>
  <option>Kazakh</option>
  <option>Kenyan</option>
  <option>Kittitian</option>
  <option>Kosovan</option>
  <option>Kuwaiti</option>
  <option>Kyrgyz</option>
  <option>Lao</option>
  <option>Latvian</option>
  <option>Lebanese</option>
  <option>Liberian</option>
  <option>Libyan</option>
  <option>Liechtensteiner</option>
  <option>Lithuanian</option>
  <option>Luxembourger</option>
  <option>Macedonian</option>
  <option>Malagasy</option>
  <option>Malawian</option>
  <option>Malaysian</option>
  <option>Maldivian</option>
  <option>Malian</option>
  <option>Maltese</option>
  <option>Marshallese</option>
  <option>Mauritanian</option>
  <option>Mauritian</option>
  <option>Mexican</option>
  <option>Moldovan</option>
  <option>Monacan</option>
  <option>Mongolian</option>
  <option>Montenegrin</option>
  <option>Moroccan</option>
  <option>Mosotho</option>
  <option>Mozambican</option>
  <option>Namibian</option>
  <option>Nauran</option>
  <option>Nepalese</option>
  <option>Nevisian</option>
  <option>New Zealander</option>
  <option>Nicaraguan</option>
  <option>Nigerian</option>
  <option>Nigerien</option>
  <option>Norwegian</option>
  <option>Omani</option>
  <option>Pakistani</option>
  <option>Palauan</option>
  <option>Palestinian</option>
  <option>Panamanian</option>
  <option>Papua New Guinean</option>
  <option>Paraguayan</option>
  <option>Peruvian</option>
  <option>Polish</option>
  <option>Portuguese</option>
  <option>Puerto Rican</option>
  <option>Qatari</option>
  <option>Romanian</option>
  <option>Russian</option>
  <option>Rwandan</option>
  <option>Saint Lucian</option>
  <option>Salvadoran</option>
  <option>Sammarinese</option>
  <option>Samoan</option>
  <option>Santomean</option>
  <option>Saudi</option>
  <option>Senegalese</option>
  <option>Serb</option>
  <option>Seychellois</option>
  <option>Sierra Leonean</option>
  <option>Singaporean</option>
  <option>Slovak</option>
  <option>Slovene</option>
  <option>Solomon Islander</option>
  <option>Somali</option>
  <option>South African</option>
  <option>South Sudanese</option>
  <option>Spanish</option>
  <option>Sri Lankan</option>
  <option>Sudanese</option>
  <option>Surinamese</option>
  <option>Swazi</option>
  <option>Swedish</option>
  <option>Swiss</option>
  <option>Syrian</option>
  <option>Taiwanese</option>
  <option>Tajik</option>
  <option>Tanzanian</option>
  <option>Thai</option>
  <option>Tobagonian</option>
  <option>Togolese</option>
  <option>Tongan</option>
  <option>Trinidadian</option>
  <option>Tunisian</option>
  <option>Turkish</option>
  <option>Turkish Cypriot</option>
  <option>Turkmen</option>
  <option>Tuvaluan</option>
  <option>Ugandan</option>
  <option>Ukrainian</option>
  <option>Uruguayan</option>
  <option>Uzbek</option>
  <option>Vanuatuan</option>
  <option>Venezuelan</option>
  <option>Vietnamese</option>
  <option>Vincentian</option>
  <option>Virgin Islander</option>
  <option>Yemeni</option>
  <option>Zambian</option>
  <option>Zimbabwean</option>
  <option disabled>──────────</option>
  <option>Other...</option>
</select>
        </label>

        <label>Are you a student? <span class="required">*</span>
          <select name="student_status" required>
            <option value="">-- Select --</option>
            <option>Student</option>
            <option>Non Student</option>
          </select>
        </label>
      </section>

      <section>
        <h2>Contact Information</h2>
        <label>Telephone <span class="required">*</span>
          <input type="tel" name="phone" required>
        </label>

        <label>Email Address <span class="required">*</span>
          <input type="email" name="email" required>
        </label>
      </section>

      <section>
        <h2>Your Current Home Address</h2>
        <label>Street Address <span class="required">*</span>
          <input type="text" name="address" required>
        </label>

        <label>City/Town <span class="required">*</span>
          <input type="text" name="city" required>
        </label>

        <label>Country <span class="required">*</span>
          <select name="country" id="country" required>
            <option value="">-- Select Country --</option>
         <option>American</option>
  <option>British</option>
  <option>Canadian</option>
  <option>Chinese</option>
  <option>Estonian</option>
  <option>German</option>
  <option>Korean</option>
  <option disabled>──────────</option>
  <option>Afghan</option>
  <option>Albanian</option>
  <option>Algerian</option>
  <option>Andorran</option>
  <option>Angolan</option>
  <option>Antiguan and Barbudan</option>
  <option>Argentine</option>
  <option>Armenian</option>
  <option>Aruban</option>
  <option>Australian</option>
  <option>Austrian</option>
  <option>Azerbaijani</option>
  <option>Bahamian</option>
  <option>Bahraini</option>
  <option>Bangladeshi</option>
  <option>Barbadian</option>
  <option>Belarusian</option>
  <option>Belgian</option>
  <option>Belizean</option>
  <option>Beninese</option>
  <option>Bermudian</option>
  <option>Bhutanese</option>
  <option>Bissau-Guinean</option>
  <option>Bolivian</option>
  <option>Bosnian and Herzegovinian</option>
  <option>Botswana</option>
  <option>Brazilian</option>
  <option>Breton</option>
  <option>Bruneian</option>
  <option>Bulgarian</option>
  <option>Burkinabé</option>
  <option>Burundian</option>
  <option>Cambodian</option>
  <option>Cameroonian</option>
  <option>Cape Verdean</option>
  <option>Catalan</option>
  <option>Chadian</option>
  <option>Chilean</option>
  <option>Colombian</option>
  <option>Comorian</option>
  <option>Congoles</option>
  <option>Costa Rican</option>
  <option>Croatian</option>
  <option>Cuban</option>
  <option>Cypriot</option>
  <option>Czech</option>
  <option>Dane</option>
  <option>Djiboutian</option>
  <option>Dominica</option>
  <option>Dutch</option>
  <option>East Timorese</option>
  <option>Ecuadorian</option>
  <option>Egyptian</option>
  <option>Emirati</option>
  <option>Equatoguinean</option>
  <option>Eritrean</option>
  <option>Ethiopian</option>
  <option>Fijian</option>
  <option>Filipino</option>
  <option>Finn</option>
  <option>French</option>
  <option>Gabonese</option>
  <option>Gambian</option>
  <option>Georgian</option>
  <option>Ghanaian</option>
  <option>Gibraltarian</option>
  <option>Greek</option>
  <option>Greenlander</option>
  <option>Grenadian</option>
  <option>Guatemalan</option>
  <option>Guinean</option>
  <option>Guyanese</option>
  <option>Haitian</option>
  <option>Honduran</option>
  <option>Hong Konger</option>
  <option>Hungarian</option>
  <option>I-Kiribati</option>
  <option>Icelander</option>
  <option>Indian</option>
  <option>Indonesian</option>
  <option>Iranian</option>
  <option>Iraqi</option>
  <option>Irish</option>
  <option>Israeli</option>
  <option>Italian</option>
  <option>Ivorian</option>
  <option>Jamaican</option>
  <option>Japanese</option>
  <option>Jordanian</option>
  <option>Kazakh</option>
  <option>Kenyan</option>
  <option>Kittitian</option>
  <option>Kosovan</option>
  <option>Kuwaiti</option>
  <option>Kyrgyz</option>
  <option>Lao</option>
  <option>Latvian</option>
  <option>Lebanese</option>
  <option>Liberian</option>
  <option>Libyan</option>
  <option>Liechtensteiner</option>
  <option>Lithuanian</option>
  <option>Luxembourger</option>
  <option>Macedonian</option>
  <option>Malagasy</option>
  <option>Malawian</option>
  <option>Malaysian</option>
  <option>Maldivian</option>
  <option>Malian</option>
  <option>Maltese</option>
  <option>Marshallese</option>
  <option>Mauritanian</option>
  <option>Mauritian</option>
  <option>Mexican</option>
  <option>Moldovan</option>
  <option>Monacan</option>
  <option>Mongolian</option>
  <option>Montenegrin</option>
  <option>Moroccan</option>
  <option>Mosotho</option>
  <option>Mozambican</option>
  <option>Namibian</option>
  <option>Nauran</option>
  <option>Nepalese</option>
  <option>Nevisian</option>
  <option>New Zealander</option>
  <option>Nicaraguan</option>
  <option>Nigerian</option>
  <option>Nigerien</option>
  <option>Norwegian</option>
  <option>Omani</option>
  <option>Pakistani</option>
  <option>Palauan</option>
  <option>Palestinian</option>
  <option>Panamanian</option>
  <option>Papua New Guinean</option>
  <option>Paraguayan</option>
  <option>Peruvian</option>
  <option>Polish</option>
  <option>Portuguese</option>
  <option>Puerto Rican</option>
  <option>Qatari</option>
  <option>Romanian</option>
  <option>Russian</option>
  <option>Rwandan</option>
  <option>Saint Lucian</option>
  <option>Salvadoran</option>
  <option>Sammarinese</option>
  <option>Samoan</option>
  <option>Santomean</option>
  <option>Saudi</option>
  <option>Senegalese</option>
  <option>Serb</option>
  <option>Seychellois</option>
  <option>Sierra Leonean</option>
  <option>Singaporean</option>
  <option>Slovak</option>
  <option>Slovene</option>
  <option>Solomon Islander</option>
  <option>Somali</option>
  <option>South African</option>
  <option>South Sudanese</option>
  <option>Spanish</option>
  <option>Sri Lankan</option>
  <option>Sudanese</option>
  <option>Surinamese</option>
  <option>Swazi</option>
  <option>Swedish</option>
  <option>Swiss</option>
  <option>Syrian</option>
  <option>Taiwanese</option>
  <option>Tajik</option>
  <option>Tanzanian</option>
  <option>Thai</option>
  <option>Tobagonian</option>
  <option>Togolese</option>
  <option>Tongan</option>
  <option>Trinidadian</option>
  <option>Tunisian</option>
  <option>Turkish</option>
  <option>Turkish Cypriot</option>
  <option>Turkmen</option>
  <option>Tuvaluan</option>
  <option>Ugandan</option>
  <option>Ukrainian</option>
  <option>Uruguayan</option>
  <option>Uzbek</option>
  <option>Vanuatuan</option>
  <option>Venezuelan</option>
  <option>Vietnamese</option>
  <option>Vincentian</option>
  <option>Virgin Islander</option>
  <option>Yemeni</option>
  <option>Zambian</option>
  <option>Zimbabwean</option>
  <option disabled>──────────</option>
  <option>Other...</option>
          </select>
        </label>

        <label>Province/State <span class="required">*</span>
          <input type="text" name="region" id="region" required>
        </label>

        <label>Postal/Zip Code <span class="required">*</span>
          <input type="text" name="postal" required>
        </label>
      </section>

      <section>
        <h2>Emergency Contact</h2>
        <label>Emergency Contact Name <span class="required">*</span>
          <input type="text" name="emergency_name" required>
        </label>

        <label>Telephone <span class="required">*</span>
          <input type="tel" name="emergency_phone" required>
        </label>

        <label>Email Address <span class="required">*</span>
          <input type="email" name="emergency_email" required>
        </label>
      </section>

      <section>
        <h2>Occupancy & Preferences</h2>
        <label for="room_type">Preferred Room Type <span class="required">*</span></label>
<select name="room_type" id="room_type" required>
  <option value="">-- Select --</option>
  <option value="Standard">Standard</option>
  <option value="Prime">Prime</option>
  <option value="Premium">Premium</option>
</select>

<label for="room_option" id="room_option_label" style="display:none;">Preferred Room Option <span class="required">*</span></label>
<select name="room_option" id="room_option" style="display:none;" required>
  <option value="">-- Select Option --</option>
</select>


        <label>I would like to share a suite with:
          <input type="text" name="suite_share">
        </label>

        <label>
          <input type="checkbox" name="gender_neutral"> I am gender neutral friendly.
        </label>

        <label>Move-in Date (May 6–Aug 25) <span class="required">*</span>
          <input type="date" name="move_in" required>
        </label>

        <label>Move-out Date <span class="required">*</span>
          <input type="date" name="move_out" required>
        </label>

        <label>Comments (700 chars max)
          <textarea name="comments" maxlength="700"></textarea>
        </label>

        <label>Where did you hear about us?
          <input type="text" name="referral">
        </label>

        <label>
          <input type="checkbox" name="agree_rules" required>
          I confirm that I have read, understood, and agree to the <a href="https://www.tartucollege.ca/for-applicants/occupancy-rules-regulations" target="_blank">Occupancy Rules & Regulations</a> <span class="required">*</span>
        </label>
</section>

      <!-- submit button -->
      <div class="form-actions">
        <button type="submit">Next to Review Page</button>
      </div>
    </form>
  </div>
  
<script>
const roomOptions = {
  Standard: [
    "Standard Single Room",
    "Standard Double-Shared room"
  ],
  Prime: [
    "Prime Single Room",
    "Prime Corner Room",
    "Prime Corner Room XL"
  ],
  Premium: [
    "Premium Single Room",
    "Premium Corner Room"
  ]
};

const roomType = document.getElementById("room_type");
const roomOption = document.getElementById("room_option");
const roomOptionLabel = document.getElementById("room_option_label");

roomType.addEventListener("change", () => {
  const selected = roomType.value;
  roomOption.innerHTML = '';
  if (roomOptions[selected]) {
    roomOption.innerHTML = '<option value="">-- Select Option --</option>';
    roomOptions[selected].forEach(optText => {
      const opt = document.createElement("option");
      opt.value = opt.textContent = optText;
      roomOption.appendChild(opt);
    });
    roomOption.style.display = "block";
    roomOptionLabel.style.display = "block";
  } else {
    roomOption.style.display = "none";
    roomOptionLabel.style.display = "none";
  }
});
</script>
  <script>
    // Restrict birthdate field to max = today minus 18 years
    window.addEventListener('DOMContentLoaded', () => {
      const birthInput = document.getElementById('birthdate');
      const today = new Date();
      const year = today.getFullYear() - 18;
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');

      const maxDate = `${year}-${month}-${day}`;
      birthInput.max = maxDate;
      birthInput.value = ''; // Keep blank initially

      birthInput.addEventListener('change', () => {
        const enteredDate = new Date(birthInput.value);
        const ageLimitDate = new Date(maxDate);
        const errorEl = document.getElementById('birthError');

        if (enteredDate > ageLimitDate) {
          errorEl.style.display = 'inline';
          birthInput.classList.add('error-field');
        } else {
          errorEl.style.display = 'none';
          birthInput.classList.remove('error-field');
        }
      });
    });
  </script>

  <style>
    input.error-field {
      border-color: red;
    }
  </style>
</body>
</html>
