<%- include('../partials/auth-head.ejs') %>

<button onclick="location.href='/' " class="btn1">
  <i class="fa fa-home"></i>
</button>
<div class="appbook"></div>
<div class="main d-flex flex-column justify-content-center align-items-center">
  <div class="form-cont row">
    <div class="col-6 image-part"></div>

    <div class="apt col-6 reg d-flex flex-column">
      <img src="/images/toplogo.png" alt="logo" class="logo" />
      <div class="login-title text-center">Appointment</div>
      <form method="POST" action="/patient/appointment">
        <div class="row">
          <div class="form-floating col-lg-6">
            <label for="OPD">OPD</label>
            <select class="form-select form-control" id="OPD" name = "OPD" required>
              <option value="placeholder" selected disabled hidden>
                Select a department
              </option>
              <option value="Cardiology">Cardiology</option>
              <option value="Orthopaedic">Orthopaedic</option>
              <option value="Neurologist">Neurologist</option>
              <option value="Pharmacology">Pharmacology</option>
              <option value="Physiology">Physiology</option>
              <option value="Psychiatry">Psychiatry</option>
            </select>
          </div>

          <div class="form-floating col-lg-6">
            <label for="doctors">Doctors</label>
            <select class="form-select form-control" id="doctors" name="doctor" required>
              <option selected value="placeholder" disabled>
                Select a doctor
              </option>
              <% for (let i of departments) { %>
              <optgroup label="<%= i.name %>" class="hide group">
                <% for( let j of i.doctors ) { %>
                <option value="<%= j.name + ' ' + j.fees + ' ' + i.name + ' ' + j.id %> ">
                  <%= j.name %>
                </option>
                <% } %>
              </optgroup>
              <% } %>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="form-floating col-lg-6">
            <label for="date">Date</label>
            <input type="date" name = "date" class="form-control" id="date" required />
          </div>

          <div class="form-floating col-lg-6">
            <label for="time">Timings</label>
            <select class="form-select form-control" id="time" name ="time" required>
              <option value="placeholder" selected disabled hidden>
                --:-- --
              </option>
              <option value="1">9:30 AM</option>
              <option value="2">12:30 PM</option>
              <option value="3">3:30 PM</option>
              <option value="4">5:00 PM</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div class="form-floating col-lg-12">
            <label for="address">Address</label>
            <input
              type="text"
              class="form-control"
              id="address"
              name = "address"
              placeholder="eg. 122, downing street"
              required
            />
          </div>
        </div>

        <div class="row">
          <div class="form-floating col-lg-6">
            <label for="Phone"> Phone</label>
            <input
              type="text"
              id="Phone"
              name = "phone"
              class="form-control"
              placeholder="+91 9999 99 9999"
              required
            />
          </div>

          <div class="form-floating col-lg-6">
            <label for="age">Your Age</label>
            <select class="form-select form-control" name="age" id="age" required>
              <option value="placeholder" selected disabled hidden>Age</option>
              <option value="1">0-6y</option>
              <option value="2">6-18y</option>
              <option value="3">18-45y</option>
              <option value="4">45+</option>
            </select>
          </div>
        </div>

        <div class="input-group mt-4">
          <span class="input-group-text">Details (if any)</span>
          <textarea class="form-control" name="Details" id="Details" aria-label="With textarea"></textarea>
        </div>

        <div class="mt-4">
          <button class="btn btn-primary disabled nextBtn" type="submit">
            Pay &#8377;<span class="fees">0</span> and continue
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  const form = document.querySelector(".reg");
  window.addEventListener("resize", () => {
    if (window.innerWidth <= 1200) {
      form.classList.add("col-12");
      form.classList.remove("col-6");
      form.classList.add("align-items-center");
    } else {
      form.classList.add("col-6");
      form.classList.remove("col-12");
      form.classList.remove("align-items-center");
    }
  });

  // validation
  const fees = document.querySelector(".fees");
  const doctor = document.querySelector("#doctors");
  const nextBtn = document.querySelector(".nextBtn");
  const groups = document.querySelectorAll(".group");
  const opd = document.querySelector("#OPD");
  const age = document.querySelector("#age");
  const time = document.querySelector("#time");
  const date = document.querySelector("#date");
  mainForm = document.querySelector("form");

  const today = new Date().toISOString().split("T")[0];
  date.setAttribute("min", today);

  let opdVal = "placeholder";
  opd.addEventListener("change", () => {
    const val = opd.value;
    opdVal = val;
    for (let i of groups) {
      if (i.label === val) {
        console.log("Show");
        i.classList.remove("hide");
      } else {
        i.classList.add("hide");
      }
    }
  });

  let docValue = "placeholder";

  doctor.addEventListener("change", () => {
    docValue = doctor.value.split(" ")[3];
    if (doctor.value != "placeholder") {
      nextBtn.classList.remove("disabled");
      const val = doctor.value.split(" ");
      fees.innerText = val[2];
    } else {
      nextBtn.classList.add("disabled");
      fees.innerText = 0;
    }
  });

  let ageVal = "placeholder";

  age.addEventListener("change", () => {
    ageVal = age.value;
  });

  let selectedDate = "";
  date.addEventListener("change", () => {
    selectedDate = date.value;
  });

  nextBtn.addEventListener("click", (e) => {
    e.preventDefault();

    const currentDate = new Date();
    const inDate = new Date(selectedDate);

    if (docValue !== opdVal) {
      alert("The doctor does not belong to selected Dept.");
    } else if (ageVal === "placeholder") {
      alert("Please select your age");
    } else if (time.value === "placeholder") {
      alert("Please select a time for the appointment.");
    } else if (inDate < currentDate) {
      alert("Please enter a future date.");
    } else {
      mainForm.submit();
    }
  });
</script>

<%- include('../partials/foot.ejs') %>
