{% extends "base.html" %}
{% load static %}

{% block page_title %}Class Attendance Report{% endblock page_title %}

{% block content %}
<div class="row">
  <div class="col-md-12">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-users"></i> Class Attendance Report</h2>
        <ul class="nav navbar-right panel_toolbox">
          <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <!-- Filter Form -->
        <form method="get" class="form-inline mb-3">
          <div class="form-group mr-2">
            <label for="class_stream">Class Stream:</label>
            <select name="class_stream" id="class_stream" class="form-control ml-2" onchange="this.form.submit()">
              <option value="">-- Select Class --</option>
              {% for cs in class_streams %}
              <option value="{{ cs.id }}" {% if selected_class_stream.id == cs.id %}selected{% endif %}>
                {{ cs }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group mr-2">
            <label for="subject">Subject (Optional):</label>
            <select name="subject" id="subject" class="form-control ml-2" onchange="this.form.submit()">
              <option value="">-- All Subjects --</option>
              {% for subj in subjects %}
              <option value="{{ subj.id }}" {% if selected_subject.id == subj.id %}selected{% endif %}>
                {{ subj.name }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group mr-2">
            <label for="date_from">From:</label>
            <input type="date" name="date_from" id="date_from" class="form-control ml-2" 
                   value="{{ date_from }}" onchange="this.form.submit()">
          </div>
          <div class="form-group mr-2">
            <label for="date_to">To:</label>
            <input type="date" name="date_to" id="date_to" class="form-control ml-2" 
                   value="{{ date_to }}" onchange="this.form.submit()">
          </div>
        </form>

        {% if selected_class_stream %}
        
        <!-- Summary Cards -->
        <div class="row mb-4">
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="card text-white bg-primary mb-3" style="border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
              <div class="card-body">
                <div class="flex-row d-flex justify-content-between align-items-center">
                  <div>
                    <h2 class="mb-0">{{ sessions.count }}</h2>
                    <p class="mb-0 text-white-50">Total Sessions</p>
                  </div>
                  <div><i class="fa fa-calendar-check-o fa-3x opacity-50"></i></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="card text-white bg-success mb-3" style="border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
              <div class="card-body">
                <div class="flex-row d-flex justify-content-between align-items-center">
                  <div>
                    <h2 class="mb-0">{{ student_summary|length }}</h2>
                    <p class="mb-0 text-white-50">Total Students</p>
                  </div>
                  <div><i class="fa fa-users fa-3x opacity-50"></i></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="card text-white bg-info mb-3" style="border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
              <div class="card-body">
                <div class="flex-row d-flex justify-content-between align-items-center">
                  <div>
                    <h2 class="mb-0">{{ total_present }}</h2>
                    <p class="mb-0 text-white-50">Total Present</p>
                  </div>
                  <div><i class="fa fa-check fa-3x opacity-50"></i></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="card text-white bg-danger mb-3" style="border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
              <div class="card-body">
                <div class="flex-row d-flex justify-content-between align-items-center">
                  <div>
                    <h2 class="mb-0">{{ total_absent }}</h2>
                    <p class="mb-0 text-white-50">Total Absent</p>
                  </div>
                  <div><i class="fa fa-times fa-3x opacity-50"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Student Summary Table -->
        <div class="row">
          <div class="col-md-12">
            <div class="x_panel">
              <div class="x_title">
                <h4><i class="fa fa-list"></i> Student Attendance Summary 
                  <small>(Sorted by attendance % - lowest first)</small>
                </h4>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <div class="table-responsive">
                  <table class="table table-striped table-bordered" id="studentTable">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Student Name</th>
                        <th>Student ID</th>
                        <th>Present</th>
                        <th>Absent</th>
                        <th>Total</th>
                        <th>Attendance %</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for summary in student_summary %}
                      <tr {% if summary.percentage < 75 %}class="danger"{% endif %}>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ summary.student.student_name }}</td>
                        <td>{{ summary.student.reg_no }}</td>
                        <td class="success">{{ summary.present }}</td>
                        <td class="danger">{{ summary.absent }}</td>
                        <td>{{ summary.total }}</td>
                        <td>
                          {% if summary.percentage >= 75 %}
                          <span class="label label-success">{{ summary.percentage }}%</span>
                          {% elif summary.percentage >= 50 %}
                          <span class="label label-warning">{{ summary.percentage }}%</span>
                          {% else %}
                          <span class="label label-danger">{{ summary.percentage }}%</span>
                          {% endif %}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% else %}
        <div class="alert alert-warning">Please select a class stream to view the attendance report.</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% endblock %}