{% extends 'partials/base.html' %} {% load static %} {% block content %}

{% load custom_filters %}
<!-- Page Wrapper -->

<style>
  /* Your provided CSS */
  #countdown {
    width: 174px;
    height: 60px;
    text-align: center;
    background: #222;
    background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
    background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
    background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
    background-image: -o-linear-gradient(top, #222, #333, #333, #222);
    border: 1px solid #111;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
    margin: auto;
    padding: 24px 0;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #countdown:before,
  #countdown:after {
    content: "";
    width: 8px;
    height: 50px;
    background: #444;
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
    background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
    background-image: -o-linear-gradient(top, #555, #444, #444, #555);
    border: 1px solid #111;
    display: block;
    position: absolute;
    top: 6px;
  }

  #countdown:before {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    left: -10px;
  }

  #countdown:after {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    right: -10px;
  }

  #countdown #tiles {
    position: relative;
    z-index: 1;
    top: -15px;
  }

  #countdown #tiles>span {
    width: 37px;
    max-width: 37px;
    font: bold 26px 'Droid Sans', Arial, sans-serif;
    text-align: center;
    color: #111;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(top, #bbb, #eee);
    background-image: -moz-linear-gradient(top, #bbb, #eee);
    background-image: -ms-linear-gradient(top, #bbb, #eee);
    background-image: -o-linear-gradient(top, #bbb, #eee);
    border-top: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    margin: 0 7px;
    padding: 1px 0;
    display: inline-block;
    position: relative;
  }

  #countdown #tiles>span:before {
    content: "";
    width: 100%;
    height: 13px;
    background: #111;
    display: block;
    padding: 0 3px;
    position: absolute;
    top: 41%;
    left: -3px;
    z-index: -1;

  }

  #countdown #tiles>span:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #eee;
    border-top: 1px solid #333;
    display: block;
    position: absolute;
    top: 48%;
    left: 0;
  }

  #countdown .labels {
    width: 100%;
    height: 0px;
    text-align: center;
    position: absolute;
    bottom: 8px;
  }

  #countdown .labels li {
    width: 50px;
    font: bold 19px 'Droid Sans', Arial, sans-serif;
    color: #f47321;
    text-shadow: 1px 1px 0px #000;
    text-align: center;
    text-transform: uppercase;
    display: inline-block;
  }
</style>
<div class="page-wrapper">
  {% include 'partials/error-meg.html' %}
  <div class="content">
    <!-- Page Header -->
    {% block pagetitle %}
    {% include 'partials/page-title.html' with pagetitle='Dashboard' title='All Attendance' %}
    {% endblock %}
    <!-- /Page Header -->

  

    <!-- Teacher-Profile -->
    <div class="row">
      <div class="col-xxl-12 col-xl-12">
        <div class="row">
          <div class="col-xxl-12 col-xl-12 d-flex">
            <div class="card flex-fill">
              <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                <h4 class="card-title mb-0">All Attendance</h4>
                <div class="d-flex flex-wrap align-items-center gap-2">
                    <form method="get" class="form-inline d-flex align-items-center mb-0" style="gap: 0.5rem;">
                        <label for="start_date" class="mr-2 mb-0">Start:</label>
                        <input type="date" id="start_date" name="start_date" class="form-control mr-2"
                               value="{{ request.GET.start_date }}">
                        <label for="end_date" class="mr-2 mb-0">End:</label>
                        <input type="date" id="end_date" name="end_date" class="form-control mr-2"
                               value="{{ request.GET.end_date }}">
                        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                    </form>
                    <a href="{% url 'showallattendance' %}" class="btn btn-secondary btn-sm ml-2">Clear Filter</a>
                </div>
            </div>
            
              <div class="card-body px-0">
                <div class="custom-datatable-filter table-responsive">
                 <table class="table"> 
                     <thead class="thead-light">
                        <tr>
                          <th>ID</th>
                          <th>Date</th>
                          <th>Intake Year</th>
                          <th>Class Name</th>
                          <th>Start / End Time</th>
                          <th>Check-in Time</th>
                          <th>Check-out Time</th>
                          <th>Duration</th>
                          <th>Login Location</th>
                          <th>Logout Location</th>
                          <th>View Image</th>
                          <th>Regularize</th>
                        </tr>
                    </thead>
                
                    <tbody>
                      {% for day in days %}
                        {% for item in day.lectures %}
                          <tr>
                            {% if forloop.first %}
                            <td rowspan="{{ day.lectures|length }}">{{ forloop.parentloop.counter }}</td>
                            {% endif %}
                            {% if forloop.first %}
                              <td rowspan="{{ day.lectures|length }}">{{ day.date }}</td>
                            {% endif %}
                    
                            {% if item.lecture %}
                              <td>{{ item.lecture.intake }}</td>
                              <td>{{ item.lecture.class_assigned }} ({{ item.lecture.class_assigned.section_name }})</td>
                              <td>{{ item.lecture.start_time|time:"H:i" }} - {{ item.lecture.end_time|time:"H:i" }}</td>
                            {% else %}
                            <td class="text-muted">No Lecture Scheduled</td>
                            <td></td>
                            <td></td>
                            {% endif %}
                    
                            {% if item.attendance %}
                              <td>{{ item.attendance.lecture_login_time|time:"H:i" }}</td>
                              <td>{{ item.attendance.lecture_logout_time|date:" H:i Y-m-d"|default:"Not Checked Out" }}</td>
                              <td>{% if item.duration %} {{ item.duration }}{% else %} — {% endif %}</td>
                              <td>  <span data-bs-toggle="tooltip" title="{{ item.attendance.login_location_name }}">
                                {{ item.attendance.login_location_name|truncatechars:20|default:"—" }}
                              </span></td>
                              <td>
                                <span data-bs-toggle="tooltip" title="{{ item.attendance.logout_location_name }}">
                                  {{ item.attendance.logout_location_name|truncatechars:20|default:"—" }}
                                </span></td>
                              <td>
                                {% if item.attendance.login_image %}
                                  <a href="{{ item.attendance.login_image.url }}" target="_blank">Login</a><br>
                                {% endif %}
                                {% if item.attendance.logout_image %}
                                  <a href="{{ item.attendance.logout_image.url }}" target="_blank">Logout</a>
                                {% endif %}
                              </td>
                              {% if item.show_regularize or item.regularization %}
                                <td>
                                  {%if not item.regularization%}
                                  <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#regularizeModal" 
                                    data-timetable="{{ item.lecture.id|base64_encode }}">Regularize {{ item.show_regularize.status }}</button>
                                    {%else%}
                                    {% if item.regularization.status == 'pending' %}
                                      <span class="badge bg-warning text-dark">Pending</span>
                                    {% elif item.regularization.status == 'approved' %}
                                      <span class="badge bg-success">Approved</span>
                                    {% elif item.regularization.status == 'rejected' %}
                                      <span class="badge bg-danger">Rejected</span>
                                    {% else %}
                                      <span class="text-muted">—</span>
                                    {% endif %}
                                    {%endif%}
                                </td>
                              {% else %}
                                
                                <td>✓</td>
                              
                              {% endif %}
                            {% else %}
                            <td class="text-muted text-center">No Attendance</td><td></td><td></td><td></td><td></td><td></td>  
                              {% if item.lecture  %}  
                                <td>
                                  {%if not item.regularization%}
                                  <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#regularizeModal" 
                                    data-timetable="{{ item.lecture.id|base64_encode }}">Regularize </button>
                                    {%else%}
                                    {% if item.regularization.status == 'pending' %}
                                      <span class="badge bg-warning text-dark">Pending</span>
                                    {% elif item.regularization.status == 'approved' %}
                                      <span class="badge bg-success">Approved</span>
                                    {% elif item.regularization.status == 'rejected' %}
                                      <span class="badge bg-danger">Rejected</span>
                                    {% else %}
                                      <span class="text-muted">—</span>
                                    {% endif %}
                                    {%endif%}
                                </td>
                              {% else  %}
                              <td></td>
                              {%endif%}
                              
                            {% endif %}
                          </tr>
                        {% endfor %}
                      {% endfor %}
                    </tbody>
                    
                  
                 </table> 


                </div>
              </div>
            </div>
            <!-- <div class="card bg-dark position-relative flex-fill">
                <div class="card-body pb-1">
                  <div class="d-sm-flex align-items-center justify-content-between row-gap-3">
                    <div class="d-flex align-items-center overflow-hidden mb-3">
                      <div class="avatar avatar-xxl rounded flex-shrink-0 border border-2 border-white me-3">
                        <img src="{% static 'assets/img/teachers/teacher-05.jpg' %}" alt="Img" />
                      </div>
                      <div class="overflow-hidden">
                        <span class="badge bg-transparent-primary text-primary mb-1">#T594651</span>
                        <h3 class="text-white mb-1 text-truncate">Henriques Morgan</h3>
                        <div class="d-flex align-items-center flex-wrap text-light row-gap-2">
                          <span class="me-2">Classes : I-A, V-B</span>
                          <span class="d-flex align-items-center"><i class="ti ti-circle-filled text-warning fs-7 me-1"></i>Physics</span>
                        </div>
                      </div>
                    </div>
                    <a href="{% url 'edit_teacher' %}" class="btn btn-primary flex-shrink-0 mb-3">Edit Profile</a>
                  </div>
                  <div class="student-card-bg">
                    <img src="{% static 'assets/img/bg/circle-shape.png' %}" alt="Bg" />
                    <img src="{% static 'assets/img/bg/shape-02.png' %}" alt="Bg" />
                    <img src="{% static 'assets/img/bg/shape-04.png' %}" alt="Bg" />
                    <img src="{% static 'assets/img/bg/blue-polygon.png' %}" alt="Bg" />
                  </div>
                </div>
              </div> -->

          </div>
         
        </div>

        <!-- Today's Class -->

        <!-- /Today's Class -->


      </div>

      <!-- Schedules -->
      <!-- <div class="col-xxl-4 col-xl-12 d-flex">
        <div class="card flex-fill">
          <div class="card-header d-flex align-items-center justify-content-between">
            <h4 class="card-title">Schedules</h4>
            <a href="#" class="link-primary fw-medium me-2" data-bs-toggle="modal" data-bs-target="#add_event"><i class="ti ti-square-plus me-1"></i>Add New</a>
          </div>
          <div class="card-body">
            <div class="datepic mb-4"></div>

          </div>
        </div>
      </div> -->
      <!-- /Schedules -->
    </div>
    <!-- Teacher-profile -->

    <!-- Syllabus -->

    <!-- /Syllabus -->


  </div>
</div>
<!-- /Page Wrapper -->
<div class="modal fade" id="regularizeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form id="RegularizationForm">
      {% csrf_token %}
      <input type="hidden" name="timetable_id" id="reg_timetable_id">
      <div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">Regularize Attendance</h5></div>
        <div class="modal-body">
          <label>Start Time</label>
          <input type="time" name="start_time" required class="form-control">
          <label>End Time</label>
          <input type="time" name="end_time" required class="form-control">
          <label>Remark</label>
          <textarea name="remark" required class="form-control"></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" id="submitRegularization" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>




{% endblock %}

{% block javascript %}
{{ block.super }}
<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.forEach(function (tooltipTriggerEl) {
    new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  var modal = document.getElementById('regularizeModal');
  modal.addEventListener('show.bs.modal', function (event) {
    var button = event.relatedTarget;
    var timetableId = button.getAttribute('data-timetable');
    document.getElementById('reg_timetable_id').value = timetableId;
  });
});
</script>
{% endblock %}