{% extends "base.html" %}
{% block title %}SLA Compliance{% endblock %}
{% block extra_css %}
<style>
  .compliance-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; }
</style>
{% 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-shield-check text-success me-2"></i>SLA Compliance</h2>
    <p class="text-muted mb-0">{{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}</p>
  </div>
  <a href="{{ url_for('reports.export_sla_compliance', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d'), facility_id=facility_id_filter or '') }}"
     class="btn btn-sm btn-outline-success">
    <i class="bi bi-file-earmark-excel me-1"></i>Export Excel
  </a>
</div>

{# ── Filters ── #}
<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-2">
        <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-2">
        <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>
      {% if projects %}
      <div class="col-md-2">
        <label class="form-label small mb-1">Contract</label>
        <select id="sla_contract_sel" class="form-select form-select-sm">
          <option value="">All Contracts</option>
          {% for p in projects %}
          <option value="{{ p.id }}">{{ p.name }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
      <div class="col-md-3">
        <label class="form-label small mb-1">Facility</label>
        <select id="sla_facility_sel" name="facility_id" class="form-select form-select-sm">
          <option value="">All Facilities</option>
          {% for f in facilities %}
          <option value="{{ f.id }}" {{ 'selected' if facility_id_filter == f.id }}>{{ f.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <button class="btn btn-sm btn-primary">Apply</button>
        <a href="{{ url_for('reports.sla_compliance') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
      </div>
    </form>
  </div>
</div>

{% if projects %}
<script>
(function () {
  var contractSel = document.getElementById('sla_contract_sel');
  var facSel = document.getElementById('sla_facility_sel');
  if (!contractSel || !facSel) return;
  var allOpts = Array.from(facSel.options).map(function (o) { return {v: o.value, t: o.text}; });
  contractSel.addEventListener('change', function () {
    var pid = this.value;
    facSel.innerHTML = '<option value="">All Facilities</option>';
    if (!pid) {
      allOpts.slice(1).forEach(function (o) {
        var opt = document.createElement('option'); opt.value = o.v; opt.text = o.t;
        facSel.appendChild(opt);
      });
      return;
    }
    fetch('/inspections/facilities_for_project/' + pid)
      .then(function (r) { return r.json(); })
      .then(function (data) {
        data.forEach(function (f) {
          var opt = document.createElement('option'); opt.value = f.id; opt.text = f.name;
          facSel.appendChild(opt);
        });
      });
  });
}());
</script>
{% endif %}

{% if total == 0 %}
<div class="alert alert-info">
  <i class="bi bi-info-circle me-2"></i>No resolved issues found for this period and filter.
</div>
{% else %}

{# ── Overall KPI ── #}
<div class="row g-3 mb-4 align-items-stretch">
  <div class="col-md-3">
    <div class="card shadow-sm h-100 text-center"
         style="border-left:6px solid {{ '#16a34a' if overall_pct and overall_pct >= 90 else '#d97706' if overall_pct and overall_pct >= 70 else '#dc2626' }};">
      <div class="card-body d-flex flex-column align-items-center justify-content-center py-4">
        <div class="text-muted small fw-semibold mb-1">Overall Compliance</div>
        <div class="display-4 fw-bold
          {{ 'text-success' if overall_pct and overall_pct >= 90 else 'text-warning' if overall_pct and overall_pct >= 70 else 'text-danger' }}">
          {{ overall_pct|round(1) if overall_pct is not none else '—' }}{% if overall_pct is not none %}%{% endif %}
        </div>
        <div class="text-muted small mt-1">{{ met }}/{{ total }} resolved on time</div>
      </div>
    </div>
  </div>

  {# ── Per-severity compliance cards ── #}
  {% for sev, color_cls in [('critical','danger'),('high','danger'),('medium','warning'),('low','secondary')] %}
  {% set d = by_severity[sev] %}
  <div class="col-6 col-md">
    <div class="card shadow-sm h-100">
      <div class="card-body text-center">
        <div class="mb-1"><span class="badge bg-{{ color_cls }} {{ 'text-dark' if color_cls == 'warning' else '' }} px-2">
          {{ sev|title }}
        </span></div>
        <div class="small text-muted mb-1">SLA: {{ d.sla_hours }}h window</div>
        <div class="fs-3 fw-bold
          {{ 'text-success' if d.pct and d.pct >= 90 else 'text-warning' if d.pct and d.pct >= 70 else 'text-danger' if d.pct is not none else 'text-muted' }}">
          {{ d.pct|round(1) if d.pct is not none else '—' }}{% if d.pct is not none %}%{% endif %}
        </div>
        <div class="small text-muted">{{ d.met }}/{{ d.total }}</div>
        {% if d.total > 0 %}
        <div class="progress mt-2" style="height:4px;">
          <div class="progress-bar bg-{{ 'success' if d.pct and d.pct >= 90 else 'warning' if d.pct and d.pct >= 70 else 'danger' }}"
               style="width:{{ d.pct or 0 }}%;"></div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>

{# ── Facility breakdown ── #}
{% if by_facility %}
<div class="card shadow-sm">
  <div class="card-header bg-light fw-semibold">
    <i class="bi bi-building me-1"></i>Compliance by Facility
    <span class="badge bg-secondary ms-1">{{ by_facility|length }}</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead class="table-light">
        <tr>
          <th>Facility</th>
          <th class="text-center">Resolved Issues</th>
          <th class="text-center">Met SLA</th>
          <th class="text-center">Compliance %</th>
          <th>Progress</th>
        </tr>
      </thead>
      <tbody>
        {% for row in by_facility %}
        {% set pct_val = row.pct or 0 %}
        {% set bar_class = 'bg-success' if pct_val >= 90 else 'bg-warning' if pct_val >= 70 else 'bg-danger' %}
        <tr>
          <td class="fw-semibold">{{ row.name }}</td>
          <td class="text-center">{{ row.total }}</td>
          <td class="text-center">{{ row.met }}</td>
          <td class="text-center">
            {% if row.pct is not none %}
            <span class="badge bg-{{ 'success' if row.pct >= 90 else 'warning text-dark' if row.pct >= 70 else 'danger' }} px-3">
              {{ row.pct }}%
            </span>
            {% else %}—{% endif %}
          </td>
          <td style="min-width:120px;">
            <div class="progress" style="height:8px;">
              <div class="progress-bar {{ bar_class }}" style="width:{{ row.pct or 0 }}%;"></div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

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