{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Insurance Department — Dashboard{% endblock %}

{% block stylesheets %}
<style>
:root{--c-bg:#f2f2f7;--c-card:#fff;--c-border:#d1d1d6;--c-accent:#007aff;
  --c-text:#1c1c1e;--c-sub:#6e6e73;--c-success:#34c759;--c-warn:#ff9f0a;
  --c-danger:#ff3b30;--r-card:14px;--shadow:0 2px 14px rgba(0,0,0,.08);}
body{background:var(--c-bg)!important;}
.sf-card{background:var(--c-card);border-radius:var(--r-card);box-shadow:var(--shadow);
  margin-bottom:1.1rem;overflow:hidden;}
.sf-card-hd{padding:.6rem 1.2rem;border-bottom:1px solid var(--c-border);
  font-size:.76rem;font-weight:700;color:#222;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(0,0,0,.02);}
.sf-page-hd{background:linear-gradient(135deg,#fff6e6,#fff0d5);border-radius:var(--r-card);
  padding:.9rem 1.3rem;color:#1c1c1e;margin-bottom:1rem;box-shadow:var(--shadow);
  border:1px solid #f0d9a0;}
.sf-stat{border-radius:10px;padding:.9rem 1rem;text-align:center;}
.sf-stat .val{font-size:1.3rem;font-weight:700;line-height:1.2;}
.sf-stat .lbl{font-size:.72rem;color:var(--c-sub);margin-top:2px;}
.co-row{transition:background .15s;cursor:pointer;}
.co-row:hover{background:#f8f9fb;}
.badge-out{background:rgba(255,59,48,.12);color:var(--c-danger);}
.badge-clear{background:rgba(52,199,89,.12);color:var(--c-success);}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3 px-4">

  {% for m in messages %}
  <div class="alert alert-{{ m.tags }} alert-dismissible fade show border-0 shadow-sm py-2">
    {{ m }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  {% endfor %}

  <div class="sf-page-hd d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
      <h5 class="mb-0 fw-bold">
        <span class="badge me-2" style="background:rgba(0,0,0,.07);color:#a15c00;font-size:.75rem;font-weight:700;">
          <i class="bi bi-shield-check me-1"></i>Insurance Department
        </span>
        Companies — Overall Summary
      </h5>
      <small style="color:#444;">Under Insurance receivables, company-wise and overall</small>
    </div>
    {% if has_openpyxl %}
    <a href="{% url 'workshop:insurance_dashboard_excel' %}" class="btn btn-sm btn-outline-dark">
      <i class="bi bi-file-earmark-excel me-1"></i>Export Excel
    </a>
    {% endif %}
  </div>

  <div class="row g-3 mb-1">
    <div class="col-md-4">
      <div class="sf-stat" style="background:#fff;border:1px solid var(--c-border);">
        <div class="val" style="color:var(--c-accent);">{{ total_billed|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Billed (Under Insurance)</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sf-stat" style="background:#f5fff8;border:1px solid #b2dfdb;">
        <div class="val text-success">{{ total_received|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Received</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sf-stat" style="background:#fff8f8;border:1px solid #ffd0d0;">
        <div class="val text-danger">{{ total_outstanding|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Outstanding</div>
      </div>
    </div>
  </div>

  <div class="sf-card">
    <div class="sf-card-hd"><i class="bi bi-building me-1"></i>Insurance Companies</div>
    <div class="table-responsive">
      <table class="table table-hover mb-0 align-middle">
        <thead class="table-light">
          <tr>
            <th>Company</th>
            <th class="text-center">Jobs</th>
            <th class="text-end">Billed (U/Insurance)</th>
            <th class="text-end">Received</th>
            <th class="text-end">Outstanding</th>
            <th class="text-center">Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
          <tr class="co-row" onclick="window.location='{% url 'workshop:insurance_company_detail' row.area.id %}'">
            <td class="fw-semibold">{{ row.area.area_name }}</td>
            <td class="text-center">{{ row.job_count }}</td>
            <td class="text-end">{{ row.billed|floatformat:0|intcomma }}</td>
            <td class="text-end text-success">{{ row.received|floatformat:0|intcomma }}</td>
            <td class="text-end text-danger fw-semibold">{{ row.outstanding|floatformat:0|intcomma }}</td>
            <td class="text-center">
              {% if row.outstanding <= 0 %}
              <span class="badge badge-clear">Cleared</span>
              {% else %}
              <span class="badge badge-out">Pending</span>
              {% endif %}
            </td>
            <td class="text-end">
              <a href="{% url 'workshop:insurance_company_detail' row.area.id %}" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-arrow-right"></i>
              </a>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="text-center text-muted py-4">No Insurance companies set up yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}