{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">

  <!-- Header -->
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-alarm me-2"></i> Late Report Summary
      </h4>
      <div class="text-muted small">
        Range: <b>{{ start_date }}</b> to <b>{{ end_date }}</b>
        · Grace: <b>{{ grace_minutes }} min</b>
        · Min late: <b>{{ min_late_minutes }} min</b>
      </div>
    </div>

    <div class="d-flex flex-wrap gap-2 align-items-center">
      <span class="badge bg-secondary">Rows: {{ total_in_page }}</span>
      <span class="badge bg-danger">Late: {{ late_count }}</span>
      <span class="badge bg-info text-dark">Avg Late: {{ avg_late }} min</span>

      <!-- ✅ PDF Download (exports with current filters) -->
      <a class="btn btn-outline-danger btn-sm"
         href="{{ url_for('attendance_summary.late_report_summary_pdf') }}?{{ request.query_string.decode('utf-8') }}">
        <i class="bi bi-filetype-pdf me-1"></i> Download PDF
      </a>
    </div>
  </div>

  <!-- Filters -->
  <form method="GET" class="card shadow-sm mb-3">
    <div class="card-body">
      <div class="row g-3 align-items-end">

        <div class="col-md-2">
          <label class="form-label">Month (YYYY-MM)</label>
          <input type="month" name="month" value="{{ month }}" class="form-control">
        </div>

        <div class="col-md-2">
          <label class="form-label">From</label>
          <input type="date" name="from_date" value="{{ from_date }}" class="form-control">
        </div>

        <div class="col-md-2">
          <label class="form-label">To</label>
          <input type="date" name="to_date" value="{{ to_date }}" class="form-control">
        </div>

        <div class="col-md-3">
          <label class="form-label">Search</label>
          <input type="text" name="q" value="{{ q }}" class="form-control"
                 placeholder="Name / Code / Email">
        </div>

        <div class="col-md-3">
          <label class="form-label">Employee</label>
          <select class="form-select" name="employee_id">
            <option value="">All</option>
            {% for e in employees %}
              <option value="{{ e.id }}" {% if employee_id|int == e.id %}selected{% endif %}>
                {{ e.employee_code }} — {{ e.full_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Department</label>
          <select class="form-select" name="department_id">
            <option value="">All</option>
            {% for d in departments %}
              <option value="{{ d.id }}" {% if department_id|int == d.id %}selected{% endif %}>
                {{ d.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Location</label>
          <select class="form-select" name="location">
            <option value="">All</option>
            {% for loc in locations %}
              <option value="{{ loc }}" {% if location == loc %}selected{% endif %}>{{ loc }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-3">
          <label class="form-label">Reporting Manager</label>
          <select class="form-select" name="manager_id">
            <option value="">All</option>
            {% for m in managers %}
              <option value="{{ m.id }}" {% if manager_id|int == m.id %}selected{% endif %}>
                {{ m.employee_code }} — {{ m.full_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Work Mode</label>
          <select class="form-select" name="work_mode">
            <option value="">All</option>
            {% for wm in work_modes %}
              <option value="{{ wm }}" {% if work_mode == wm %}selected{% endif %}>{{ wm }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Status</label>
          <select class="form-select" name="status">
            <option value="">All</option>
            {% for s in statuses %}
              <option value="{{ s }}" {% if status == s %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Source</label>
          <select class="form-select" name="source">
            <option value="">All</option>
            {% for s in sources %}
              <option value="{{ s }}" {% if source == s %}selected{% endif %}>{{ s }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2">
          <label class="form-label">Grace (mins)</label>
          <input type="number" min="0" name="grace_minutes" value="{{ grace_minutes }}" class="form-control">
        </div>

        <div class="col-md-2">
          <label class="form-label">Min Late (mins)</label>
          <input type="number" min="0" name="min_late_minutes" value="{{ min_late_minutes }}" class="form-control">
        </div>

        <div class="col-md-2">
          <label class="form-label">Per Page</label>
          <select class="form-select" name="per_page">
            {% for n in [25,50,100,200] %}
              <option value="{{ n }}" {% if per_page == n %}selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-2 form-check ms-2">
          <input class="form-check-input" type="checkbox" name="late_only" value="1" id="late_only"
                 {% if late_only %}checked{% endif %}>
          <label class="form-check-label" for="late_only">
            Late Only
          </label>
        </div>

        <div class="col-md-12 d-flex gap-2 mt-2">
          <button class="btn btn-primary">
            <i class="bi bi-funnel me-1"></i> Apply Filters
          </button>
          <a class="btn btn-outline-secondary"
             href="{{ url_for('attendance_summary.late_report_summary') }}">
            Reset
          </a>
        </div>

      </div>
    </div>
  </form>

  <!-- Table -->
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover table-striped mb-0 align-middle">
          <thead class="table-dark">
            <tr>
              <th>Date</th>
              <th>Emp</th>
              <th>Department</th>
              <th>Location</th>
              <th>Mode</th>
              <th>Shift Start</th>
              <th>Shift End</th>
              <th>Check In</th>
              <th>Check Out</th>
              <th>Status</th>
              <th>Source</th>
              <th class="text-end">Late (min)</th>
              <th>Remarks</th>
            </tr>
          </thead>
          <tbody>
            {% if rows|length == 0 %}
              <tr>
                <td colspan="13" class="text-center text-muted p-4">
                  No records found for selected filters.
                </td>
              </tr>
            {% endif %}

            {% for r in rows %}
              {% set emp = r.employee %}
              {% set att = r.attendance %}
              <tr class="{% if r.is_late %}table-danger{% endif %}">
                <td><b>{{ att.date }}</b></td>
                <td>
                  <div class="fw-semibold">{{ emp.full_name }}</div>
                  <div class="text-muted small">{{ emp.employee_code }}</div>
                </td>
                <td class="text-muted">
                  {{ emp.department.name if emp.department else '-' }}
                </td>
                <td class="text-muted">{{ emp.location or '-' }}</td>
                <td><span class="badge bg-light text-dark">{{ emp.work_mode or '-' }}</span></td>

                <td>{{ r.shift_start.strftime('%H:%M') if r.shift_start else '-' }}</td>
                <td>{{ r.shift_end.strftime('%H:%M') if r.shift_end else '-' }}</td>

                <!-- ✅ Check-in will show for TODAY as route now fills fallback -->
                <td>{{ att.check_in_time.strftime('%H:%M') if att.check_in_time else '-' }}</td>
                <td>{{ att.check_out_time.strftime('%H:%M') if att.check_out_time else '-' }}</td>

                <td>
                  <span class="badge bg-secondary">{{ att.status }}</span>
                </td>
                <td class="text-muted">{{ att.source or '-' }}</td>

                <td class="text-end">
                  {% if r.late_minutes is none %}
                    <span class="text-muted">-</span>
                  {% else %}
                    {% set mins = r.late_minutes|int %}
                    {% set hh = (mins // 60) %}
                    {% set mm = (mins % 60) %}
                    <b class="{% if r.is_late %}text-danger{% endif %}">
                      {{ "%02d"|format(hh) }}:{{ "%02d"|format(mm) }}
                    </b>
                  {% endif %}
                </td>

                <td class="text-muted">{{ att.remarks or '-' }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    <div class="card-footer d-flex justify-content-between align-items-center">
      <div class="text-muted small">
        Page {{ pagination.page }} of {{ pagination.pages }} · Total: {{ pagination.total }}
      </div>

      <div class="btn-group">
        {% if pagination.has_prev %}
          {% set qs_prev = request.query_string.decode('utf-8') %}
          {% if qs_prev %}
            {% if 'page=' in qs_prev %}
              {% set qs_prev = qs_prev|replace('page=' ~ page, 'page=' ~ pagination.prev_num) %}
            {% else %}
              {% set qs_prev = qs_prev ~ '&page=' ~ pagination.prev_num %}
            {% endif %}
          {% else %}
            {% set qs_prev = 'page=' ~ pagination.prev_num %}
          {% endif %}
          <a class="btn btn-outline-secondary btn-sm"
             href="{{ url_for('attendance_summary.late_report_summary') }}?{{ qs_prev }}">
            Prev
          </a>
        {% else %}
          <button class="btn btn-outline-secondary btn-sm" disabled>Prev</button>
        {% endif %}

        {% if pagination.has_next %}
          {% set qs_next = request.query_string.decode('utf-8') %}
          {% if qs_next %}
            {% if 'page=' in qs_next %}
              {% set qs_next = qs_next|replace('page=' ~ page, 'page=' ~ pagination.next_num) %}
            {% else %}
              {% set qs_next = qs_next ~ '&page=' ~ pagination.next_num %}
            {% endif %}
          {% else %}
            {% set qs_next = 'page=' ~ pagination.next_num %}
          {% endif %}
          <a class="btn btn-outline-secondary btn-sm"
             href="{{ url_for('attendance_summary.late_report_summary') }}?{{ qs_next }}">
            Next
          </a>
        {% else %}
          <button class="btn btn-outline-secondary btn-sm" disabled>Next</button>
        {% endif %}
      </div>
    </div>

  </div>
</div>
{% endblock %}