<%- include('../partials/auth-head.ejs') %> <% if (warning && warning.length) {
  %>
  <div
    class="
      myAlert-bottom
      alert alert-warning
      d-flex
      flex-row
      justify-content-between
      align-items-center
    "
  >
    <div class="d-flex flex-row justify-content-between align-items-center">
      <svg
        class="bi flex-shrink-0 me-2 mr-3"
        width="24"
        height="24"
        role="img"
        aria-label="Warning:"
      >
        <use xlink:href="#exclamation-triangle-fill" />
      </svg>
      <%= warning %>
    </div>
    <a href="#" class="close mb-1" data-dismiss="alert" aria-label="close"
      >&times;</a
    >
  </div>
  <% } %>
  
  <button onclick="location.href='/' " class="btn1">
    <i class="fa fa-home"></i>
  </button>
  
  <div class="main d-flex flex-column justify-content-center align-items-center">
    <div class="form-cont row">
      <div class="reg col-6 d-flex flex-column">
        <img src="/images/toplogo.png" alt="logo" class="logo" />
        <div class="login-title text-center">Allocate Rooms</div>
  
        <form class="row" action="./allocateroom" method="POST">

          <div class="form-floating col-lg-12">
            <label for="patient">Patient</label>
            <select class="form-select form-control" id="patient" name="patient" required>
              <option selected value="placeholder" disabled>
                Select a patient
              </option>
                <% for( let j of pat ) { %>
                <option value="<%= j.pat_id %> ">
                  <%= j.p_fname + ' ' + j.p_lname %>
                </option>
                <% } %>
            </select>
          </div>
          <div class="form-floating col-lg-12">
            <label for="patient">Room</label>
            <select class="form-select form-control" id="room" name="room" required>
              <option selected value="placeholder" disabled>
                Select a room
              </option>
                <% for( let i of rooms ) { %>
                <option value="<%= i.roomid %> ">
                  <%= i.roomid %>
                </option>
                <% } %>
            </select>
          </div>
          <div class="col-12 mt-4">
            <button type="submit" class="btn btn-primary finalBtn">Allocate</button>
          </div>
        </form>
        <div class="des mt-4 text-center">
          <a href="/admin/dashboard">Back to dashboard</a>
        </div>
      </div>
      <div class="col-6 image-part"></div>
    </div>
  
    <script>
      const form = document.querySelector(".reg");
  
      window.addEventListener("load", () => {
        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");
        }
      });
  
      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");
        }
      });
      
      mainForm = document.querySelector("form")

      const patient = document.querySelector("#patient")
      let patValue = "placeholder"
      patient.addEventListener("change", () => {
        const val = patient.value
        patValue = val
      })

      const room = document.querySelector("#room")
      let roomValue = "placeholder"
      room.addEventListener("change", () => {
        const val = room.value
        roomValue = val
      })

      const finalBtn = document.querySelector(".finalBtn")
      finalBtn.addEventListener("click", (e) => {
        e.preventDefault()
        if(patValue==="placeholder"){
          alert("Please select a patient")
        } else if(roomValue==="placeholder") {
          alert("Please select a room")
        } else {
          mainForm.submit()
        }
      })
    </script>
  
    <%- include('../partials/foot.ejs') %>
  </div>
  