{% extends "dashboard/base_dashboard.html" %}
{% load humanize %}

{% block dashboard_section_content %}
<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Attendance Today</h4>
        <h3>{{ attendance_today_rate|floatformat:1 }}%</h3>
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill success" style="width: {{ attendance_today_rate|floatformat:0 }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Present/Late share today</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Attendance This Week</h4>
        <h3>{{ attendance_week_rate|floatformat:1 }}%</h3>
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill" style="width: {{ attendance_week_rate|floatformat:0 }}%;"></span>
          </div>
          <div class="kpi-mini-caption">7-day attendance health</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Classes Not Submitted</h4>
        <h3>{{ attendance_classes_not_submitted_count|intcomma }}</h3>
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill danger" style="width: {{ attendance_class_pending_rate|floatformat:0 }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Submission gap: {{ attendance_class_pending_rate|floatformat:1 }}%</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="x_panel control-kpi-card">
      <div class="x_content">
        <h4 style="margin-top: 0;">Teachers Not Submitted</h4>
        <h3>{{ attendance_teachers_absent_today|intcomma }}</h3>
        <div class="kpi-mini-chart">
          <div class="kpi-mini-track">
            <span class="kpi-mini-fill warn" style="width: {{ attendance_teacher_pending_rate|floatformat:0 }}%;"></span>
          </div>
          <div class="kpi-mini-caption">Teacher submission gap: {{ attendance_teacher_pending_rate|floatformat:1 }}%</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-check-square-o"></i> Class Submission Status</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Class</th>
              <th>Stream</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for row in attendance_class_submission_rows %}
            <tr>
              <td>{{ row.class_name }}</td>
              <td>{{ row.stream_name }}</td>
              <td>
                {% if row.submitted %}
                <span class="label label-success">Submitted</span>
                {% else %}
                <span class="label label-danger">Pending</span>
                {% endif %}
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="3" class="text-center text-muted">No class submission data.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-bar-chart"></i> Attendance by Class Stream</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Class</th>
              <th>Stream</th>
              <th>Rate</th>
            </tr>
          </thead>
          <tbody>
            {% for row in attendance_class_rows %}
            <tr>
              <td>{{ row.class_name }}</td>
              <td>{{ row.stream_name }}</td>
              <td>{{ row.rate|floatformat:1 }}%</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="3" class="text-center text-muted">No class attendance data.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-7">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-user-times"></i> Chronic Absentee Students</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Student</th>
              <th>Class</th>
              <th>Attendance</th>
              <th>Sessions</th>
            </tr>
          </thead>
          <tbody>
            {% for row in attendance_chronic_absentee_rows %}
            <tr>
              <td>{{ row.student_name }}<br><small class="text-muted">{{ row.reg_no }}</small></td>
              <td>{{ row.class_name }}</td>
              <td>{{ row.rate|floatformat:1 }}%</td>
              <td>{{ row.total_sessions|intcomma }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted">No chronic absentee students found.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <div class="x_panel">
      <div class="x_title">
        <h2><i class="fa fa-calendar"></i> Weekly Trend</h2>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Day</th>
              <th>Date</th>
              <th>Rate</th>
            </tr>
          </thead>
          <tbody>
            {% for row in attendance_weekly_trend_rows %}
            <tr>
              <td>{{ row.label }}</td>
              <td>{{ row.date|date:"M d, Y" }}</td>
              <td>{{ row.rate|floatformat:1 }}%</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="3" class="text-center text-muted">No weekly trend data.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}