{% extends "base.html" %}
{% block title %}Follow-up Closure Rate{% endblock %}
{% block content %}

{# ── Sub-nav ── #}
{% include 'reports/_subnav.html' %}

<div class="d-flex justify-content-between align-items-start mb-4">
  <div>
    <h2><i class="bi bi-arrow-repeat text-purple me-2" style="color:#7c3aed;"></i>Follow-up Closure Rate</h2>
    <p class="text-muted mb-0">
      {{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}
      &nbsp;·&nbsp; Inspections flagged for follow-up and whether a re-inspection was completed.
    </p>
  </div>
  <a href="{{ url_for('reports.export_followup_closure', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
     class="btn btn-sm btn-outline-success">
    <i class="bi bi-file-earmark-excel me-1"></i>Export Excel
  </a>
</div>

{# ── Date filter ── #}
<div class="card shadow-sm mb-4">
  <div class="card-body py-2">
    <form method="get" class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label small mb-1">From</label>
        <input type="date" name="start" class="form-control form-control-sm" value="{{ start.strftime('%Y-%m-%d') }}">
      </div>
      <div class="col-md-3">
        <label class="form-label small mb-1">To</label>
        <input type="date" name="end" class="form-control form-control-sm" value="{{ end.strftime('%Y-%m-%d') }}">
      </div>
      <div class="col-auto">
        <button class="btn btn-sm btn-primary">Apply</button>
        <a href="{{ url_for('reports.followup_closure') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
      </div>
    </form>
  </div>
</div>

{# ── KPI row ── #}
<div class="row g-3 mb-4">
  <div class="col-6 col-md-4">
    <div class="card shadow-sm h-100" style="border-left:5px solid #7c3aed;">
      <div class="card-body">
        <div class="text-muted small fw-semibold mb-1">Flagged for Follow-up</div>
        <div class="fs-1 fw-bold" style="color:#7c3aed;">{{ total }}</div>
        <div class="text-muted small">inspections in period</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card shadow-sm h-100" style="border-left:5px solid #16a34a;">
      <div class="card-body">
        <div class="text-muted small fw-semibold mb-1">Re-inspected</div>
        <div class="fs-1 fw-bold text-success">{{ closed }}</div>
        <div class="text-muted small">follow-up completed</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card shadow-sm h-100"
         style="border-left:5px solid {{ '#16a34a' if rate and rate >= 80 else '#d97706' if rate and rate >= 50 else '#dc2626' }};">
      <div class="card-body">
        <div class="text-muted small fw-semibold mb-1">Closure Rate</div>
        <div class="fs-1 fw-bold
          {{ 'text-success' if rate and rate >= 80 else 'text-warning' if rate and rate >= 50 else 'text-danger' if rate is not none else 'text-muted' }}">
          {{ rate|round(1) if rate is not none else '—' }}{% if rate is not none %}%{% endif %}
        </div>
        <div class="text-muted small">of flagged inspections re-done</div>
      </div>
    </div>
  </div>
</div>

{% if total == 0 %}
<div class="alert alert-info">
  <i class="bi bi-info-circle me-2"></i>No inspections were flagged for follow-up in this period.
</div>
{% else %}

{# ── By facility ── #}
{% if by_facility %}
<div class="card shadow-sm mb-4">
  <div class="card-header bg-light fw-semibold">
    <i class="bi bi-building me-1"></i>Closure Rate by Facility
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th>Facility</th>
          <th class="text-center">Flagged</th>
          <th class="text-center">Re-inspected</th>
          <th class="text-center">Closure Rate</th>
          <th>Progress</th>
        </tr>
      </thead>
      <tbody>
        {% for row in by_facility %}
        <tr>
          <td class="fw-semibold">{{ row.name }}</td>
          <td class="text-center">{{ row.total }}</td>
          <td class="text-center">{{ row.closed }}</td>
          <td class="text-center">
            <span class="badge bg-{{ 'success' if row.rate >= 80 else 'warning text-dark' if row.rate >= 50 else 'danger' }} px-3">
              {{ row.rate }}%
            </span>
          </td>
          <td style="min-width:120px;">
            <div class="progress" style="height:8px;">
              <div class="progress-bar bg-{{ 'success' if row.rate >= 80 else 'warning' if row.rate >= 50 else 'danger' }}"
                   style="width:{{ row.rate }}%;"></div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{# ── Detail table ── #}
<div class="card shadow-sm">
  <div class="card-header bg-light d-flex justify-content-between">
    <span class="fw-semibold"><i class="bi bi-list-ul me-1"></i>Inspection Detail</span>
    <span class="text-muted small">{{ total }} flagged</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover table-sm mb-0">
      <thead class="table-light">
        <tr>
          <th>ID</th>
          <th>Date</th>
          <th>Facility</th>
          <th>Template</th>
          <th>Inspector</th>
          <th class="text-center">Score</th>
          <th>Note</th>
          <th class="text-center">Re-inspected?</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for insp in flagged %}
        <tr class="{{ '' if insp._has_followup else 'table-warning' }}">
          <td class="text-muted small">#{{ insp.id }}</td>
          <td class="small">{{ insp.inspection_date.strftime('%Y-%m-%d') if insp.inspection_date else '—' }}</td>
          <td class="small">{{ insp.facility.name if insp.facility else '—' }}</td>
          <td class="small">{{ insp.template.name if insp.template else '—' }}</td>
          <td class="small">{{ insp.inspector.display_name if insp.inspector else '—' }}</td>
          <td class="text-center">
            {% if insp.overall_score %}
            <span class="badge bg-{{ 'success' if insp.overall_score >= 80 else 'warning text-dark' if insp.overall_score >= 60 else 'danger' }}">
              {{ insp.overall_score|round(1) }}%
            </span>
            {% else %}—{% endif %}
          </td>
          <td class="small text-muted">
            {{ insp.follow_up_note[:60] if insp.follow_up_note else '—' }}
            {% if insp.follow_up_note and insp.follow_up_note|length > 60 %}…{% endif %}
          </td>
          <td class="text-center">
            {% if insp._has_followup %}
            <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Yes</span>
            {% else %}
            <span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>No</span>
            {% endif %}
          </td>
          <td>
            <a href="{{ url_for('inspections.view', inspection_id=insp.id) }}"
               class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-eye"></i>
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endif %}{# end total == 0 #}
{% endblock %}