{% extends 'partials/base.html' %} {% load static %} {% block content %}
  {% load custom_filters %}
  <!-- Page Wrapper -->

  <div class="page-wrapper">
    {% include 'partials/error-meg.html' %}
    <div class="content">
      <!-- Page Header -->
       <div class="d-md-flex d-block align-items-center justify-content-between mb-3">
      {% block pagetitle %}
        {% include 'partials/page-title.html' with pagetitle='Dashboard' title='All Attendance' %}
      {% endblock %}
       </div>
      <!-- /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 'studentattendance' id=request.user.id|base64_encode %}" 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 table-bordered">
                      <thead>
                        <tr>
                          <th>Date</th>
                          <th>Course</th>
                          <th>Module</th>
                          <th>Time</th>
                          <th>Status</th>
                          <th>Notes</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for date, lectures in grouped_rows.items %}
                          {% if lectures %}
                            {% for lec in lectures %}
                              <tr>
                                {% if forloop.first %}
                                  <td rowspan="{{ lectures|length }}">{{ date|date:'l, j F Y' }}</td>
                                {% endif %}
                                <td>{{ lec.course }}</td>
                                <td>{{ lec.module }}</td>
                                <td>{{ lec.time }}</td>
                                <td>{{ lec.status }}</td>
                                <td>{{ lec.notes }}</td>
                              </tr>
                            {% endfor %}
                          {% else %}
                            <tr>
                              <td>{{ date|date:'l, j F Y' }}</td>
                              <td colspan="5" class="text-muted">No lectures scheduled</td>
                            </tr>
                          {% endif %}
                        {% 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 -->
{% 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>
{% endblock %}