{% extends "basic/base_template.html" %}


{% block pageName %}
Attendance
{% endblock pageName %}

{% block content %}
<style>
  .reason-field {
    display: none;
    transition: display 1s ease-out;
  }

  .attendance-card {
    border: 1px solid #ddd;
    padding: 15px;
    {% comment %} margin-bottom: 10px; {% endcomment %}
    border-radius: 5px;
  }

  /* Custom toggle switch */
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 30px;
      transition: all .5s ease-out;
    }
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
      transition: all .5s ease-out;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: red;
      transition: 0.4s;
      border-radius: 30px;
      transition: all .5s ease-out;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
      transition: all .5s ease-out;

    }
    .slider.pd:before{
      width: 30px;
      left: -3px;
    }
    input:checked + .slider {
      background-color: blue; /* Blue for Present */
    }
    input:checked + .slider.pd {
      background-color: orange; /* Present with Deployment */
    }
    input:checked + .slider:before {
      transform: translateX(30px);
    }
    .slider:after {
      content: "A";
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: black;
      font-weight: bold;
    }
    input:checked + .slider:after {
      content: "P";
      left: auto;
      right: 10px;
    }
    input:checked + .slider.pd:after {
      content: "PD";
      right: 7px;
      left: auto;
    }




</style>
<div class="container-fluid">
  <h4 id="current-date-time" class="text-center my-3 bg-secondary py-3 text-white"></h4>
  <form action="" method="post">
    {% csrf_token %}
  <!-- Attendance Card 1 -->
   {% for member in members %}
   {% if member.id in leave_member_ids %}
   
  <div class="attendance-card">
    <div class="row">
      <div class="col-2 col-md-1">
        <strong class="d-block">No:</strong> {{member.army_no}}
      </div>
      <div class="col-2 col-md-1">
        <strong class="d-block">Rank:</strong> {{member.rank.name}}
      </div>
      <div class="col-6 col-md-4">
        <strong class="d-block">Name:</strong> {{member.name}}
      </div>
      <div class="col-3 col-md-1">
        <strong class="d-block">Status:</strong>
        <label class="switch">
          <input type="checkbox" class="attendance-toggle" name="attendance_{{ member.id }}" />
          <span class="slider"></span>
        </label>
      </div>
      <div class="col-6 col-md-3 reason-field p-0 m-0">
        <strong class="d-block">Reason:</strong>
        <div class="reason-field">
          {% for leave in leaves %}
            {% if leave.member.id == member.id %}
            <select class="form-select" name="reason_{{ member.id }}" id="reason_{{ member.id }}">
                <option selected value="" >Choose...</option>
                {% for i in reasons %}
                <option {% if i.id == leave.reason.id %} selected {% endif %} value={{ i.id}}>{{ i.text }}</option>
                {% endfor %}
            </select>
            {% endif %} 
          {% endfor %}
        </div>
      </div>
      <div class="col-6 col-md-2 reason-field p-0 m-0">
        <strong class="d-block">Leave Type:</strong>
        <select class="form-select" name="leave_type_{{ member.id }}">
          {% for leaveType in leaveTypes %}
          <option value={{ leaveType.id }}
            {% for l in leaves %}
              {% if l.leave_type.id == leaveType.id and l.member.id == member.id %}
                selected
              {% endif %}
            {% endfor %}
          >{{ leaveType.showName }}</option>
        {% endfor %}
        </select>
      </div>
    </div>
  </div>
  {% else %}
  <div class="attendance-card">
    <div class="row">
      <div class="col-2 col-md-1">
        <strong class="d-block">No:</strong> {{member.army_no}}
      </div>
      <div class="col-2 col-md-1">
        <strong class="d-block">Rank:</strong> {{member.rank.name}}
      </div>
      <div class="col-6 col-md-4">
        <strong class="d-block">Name:</strong> {{member.name}}
      </div>
      <div class="col-3 col-md-1">
        <strong class="d-block">Status:</strong>
        <label class="switch">
          <input checked="checked" type="checkbox" class="attendance-toggle" name="attendance_{{ member.id }}" />
          <span class="slider {% if member.ops_depl %} pd {% endif %}"></span>
        </label>
      </div>
      <div class="col-6 col-md-3 reason-field p-0 m-0">
        <strong class="d-block">Reason:</strong>
        <div class="reason-field">
          <select class="form-select" name="reason_{{ member.id }}" id="reason_{{ member.id }}">
              <option selected value="" >Choose...</option>
              {% for i in reasons %}
              <option value={{ i.id}}>{{ i.text }}</option>
              {% endfor %}
          </select>
        </div>
      </div>
      <div class="col-6 col-md-2 reason-field p-0 m-0">
        <strong class="d-block">Leave Type:</strong>
        <select class="form-select" name="leave_type_{{ member.id }}">
          {% for leave in main_leave_types %}
          <option value="{{ leave.id }}">{{ leave.showName }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}
  <button type="submit" class="btn btn-primary mt-3">Submit Attendance</button>
</form>

  <!-- Add more cards as needed -->
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
  // Handle the attendance toggle and reason/leave type visibility
  document.querySelectorAll('.attendance-toggle').forEach(toggle => {
    const card = toggle.closest('.attendance-card');
    if (toggle.checked) {
      card.querySelectorAll('.reason-field').forEach(field => {
        field.style.display = 'none'; // Hide Reason and Leave Type fields if present
      });
    } else {
      card.querySelectorAll('.reason-field').forEach(field => {
        field.style.display = 'block'; // Show Reason and Leave Type fields if absent
      });
    }

    toggle.addEventListener('change', function () {
      if (this.checked) {
        card.querySelectorAll('.reason-field').forEach(field => {
          field.style.display = 'none'; // Hide fields when toggled to present
        });
      } else {
        card.querySelectorAll('.reason-field').forEach(field => {
          field.style.display = 'block'; // Show fields when toggled to absent
        });
      }
    });
  });
});
</script>



<script>
  function updateDateTime() {
      // Create a new Date object to get the current date and time
      const currentDate = new Date();
      
      // Format the date and time as a string
      const formattedDateTime = currentDate.toLocaleString(); // Format as per user's locale

      // Display the current date and time in the paragraph with id 'current-date-time'
      document.getElementById("current-date-time").innerText = formattedDateTime;
  }

  // Update the date and time immediately on page load
  updateDateTime();

  // Update the date and time every second (1000 ms)
  setInterval(updateDateTime, 1000);
</script>


{% endblock content %}