<div class="col-lg-6 mb-4">
  <% if (classes.length > 0) { %>
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="text-primary fw-bold m-0">Subjects</h6>
    </div>
  </div>
  <form action="/attendance-form" method="post">
    <input type="hidden" id="status-value" name="status" value="present" />
    <div class="btn-group">
      <a
        class="btn btn-primary status-btn"
        name="status-button"
        onclick="setStatus('present')"
        >Present</a
      >
      <a
        class="btn btn-default status-btn"
        name="'status-button"
        onclick="setStatus('absent')"
        >Absent</a
      >
    </div>

    <ul class="list-group">
      <!-- create the buttons -->
      <% classes.forEach(element => { %>
      <li class="list-group-item">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            id="<%= element.ClassName.replace(/\s/g, '') %>"
            name="<%= element.ClassID %>"
          />
          <%= console.log(element.ClassName.replace(/\s/g, '')) %>
          <label
            class="form-check-label"
            for="<%= element.ClassName.replace(/\s/g, '') %>"
          >
            <%= element.ClassName %>
          </label>
        </div>
      </li>
      <% }) %>
      <!-- skipReason textbox -->
      <input
        type="text"
        class="form-control visually-hidden skip-btn"
        placeholder="Skip Reason"
        name="skipReason"
      />
      <button type="submit" class="btn btn-primary">Submit</button>
    </ul>
  </form>
  <% } else { %>
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="text-primary fw-bold m-0">
        Enter the timetable to select Subjects here!
      </h6>
    </div>
  </div>
  <% } %>
  <script>
    document.querySelectorAll(".status-btn").forEach((btn) => {
      btn.addEventListener("click", function (e) {
        // Remove 'btn-primary' class from all buttons
        document.querySelectorAll(".status-btn").forEach((btn) => {
          btn.classList.remove("btn-primary");
          btn.classList.add("btn-default"); // Revert to default style for all the buttons
        });

        // Add 'btn-primary' class to the clicked button
        this.classList.remove("btn-default");
        console.log(this.getAttribute("value"));
        this.classList.add("btn-primary");

        document.querySelector(".skip-btn").classList.toggle("visually-hidden"); // Toggle the visibility of the skipReason textbox
      });
    });

    function setStatus(value) {
      document.getElementById("status-value").value = value;
    }
  </script>
</div>

<!--

* template
<li class="list-group-item">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="formCheck-4" /><label
      class="form-check-label"
      for="formCheck-4"
      >option-title</label
    >
  </div>
</li>
-->
