{% extends "pos/base.html" %}
{% load humanize %}
{% block title %}Finance Dashboard — Workshop{% 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;--c-purple:#5856d6;--r-card:14px;--r-inp:9px;
  --shadow:0 2px 14px rgba(0,0,0,.08);--shadow-h:0 4px 22px rgba(0,0,0,.13);}
body{background:var(--c-bg)!important;}

.sf-page-hd{background:linear-gradient(135deg,#fff4e6,#ffe8cc);border-radius:var(--r-card);
  padding:.9rem 1.3rem;color:#1c1c1e;margin-bottom:1rem;box-shadow:var(--shadow);border:1px solid #ffd29a;}

.sf-card{background:var(--c-card);border-radius:var(--r-card);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:1rem;}
.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-card-bd{padding:1rem 1.2rem;}

.sf-inp{height:38px;border:1px solid var(--c-border);border-radius:var(--r-inp)!important;
  font-size:.85rem;color:var(--c-text);padding:0 .7rem;background:#fff;
  outline:none;transition:border-color .15s,box-shadow .15s;}
.sf-inp:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,122,255,.13);}
select.sf-inp{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;padding-right:26px!important;}

.sf-btn{height:38px;border:none;border-radius:var(--r-inp);font-size:.85rem;font-weight:700;
  padding:0 1.1rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem;}
.sf-btn-primary{background:var(--c-accent);color:#fff;}
.sf-btn-xl{background:linear-gradient(135deg,#34c759,#218838);color:#fff;}
.sf-btn-outline{background:#fff;color:var(--c-accent);border:1.5px solid var(--c-accent);}

.stat-box{border-radius:12px;padding:.9rem 1.1rem;background:var(--c-card);box-shadow:var(--shadow);
  border-top:3px solid var(--c-accent);}
.stat-box .val{font-size:1.4rem;font-weight:800;line-height:1.1;}
.stat-box .lbl{font-size:.72rem;color:var(--c-sub);margin-top:3px;}
.stat-box.b-services{border-top-color:#ff3b30;}
.stat-box.b-parts{border-top-color:#34c759;}
.stat-box.b-tax{border-top-color:#ff9f0a;}
.stat-box.b-disc{border-top-color:#5856d6;}
.stat-box.b-net{border-top-color:#007aff;}

.sf-tbl{width:100%;font-size:.83rem;border-collapse:collapse;}
.sf-tbl thead th{background:#f0f0f5;font-size:.71rem;font-weight:700;color:var(--c-sub);
  padding:.5rem .7rem;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:2px solid var(--c-border);white-space:nowrap;}
.sf-tbl tbody td{padding:.45rem .7rem;border-bottom:1px solid #f0f0f0;vertical-align:middle;}
.sf-tbl tbody tr:hover td{background:#fafafe;}

.bb-row{background:var(--c-card);border-radius:10px;padding:.6rem .9rem;display:flex;
  justify-content:space-between;align-items:center;margin-bottom:.4rem;box-shadow:var(--shadow);}
</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">
        <i class="bi bi-graph-up-arrow me-2" style="color:#cc7a00;"></i>
        Finance Dashboard — Workshop
      </h5>
      <small style="color:#555;">Read-only financial overview &nbsp;·&nbsp; {{ jobs|length }} job{{ jobs|length|pluralize }} in range</small>
    </div>
    <a href="{% url 'workshop:job_list' %}" class="sf-btn sf-btn-outline">
      <i class="bi bi-list-ul"></i> All Jobs
    </a>
  </div>

  {# ── Filters ── #}
  <div class="sf-card">
    <div class="sf-card-bd">
      <form method="GET" class="row g-2 align-items-end">
        <div class="col-md-2">
          <label class="form-label small fw-semibold mb-1">From</label>
          <input type="date" name="date_from" value="{{ date_from }}" class="sf-inp w-100">
        </div>
        <div class="col-md-2">
          <label class="form-label small fw-semibold mb-1">To</label>
          <input type="date" name="date_to" value="{{ date_to }}" class="sf-inp w-100">
        </div>
        <div class="col-md-3">
          <label class="form-label small fw-semibold mb-1">Billing Type</label>
          <select name="billing_type" class="sf-inp w-100">
            <option value="">— All —</option>
            {% for val, label in billing_types %}
            <option value="{{ val }}" {% if billing_f == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3">
          <label class="form-label small fw-semibold mb-1">Status</label>
          <select name="status" class="sf-inp w-100">
            <option value="all" {% if status_f == "all" %}selected{% endif %}>— All —</option>
            {% for val, label in status_choices %}
            <option value="{{ val }}" {% if status_f == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2 d-flex gap-2">
          <button type="submit" class="sf-btn sf-btn-primary flex-grow-1">
            <i class="bi bi-funnel"></i> Filter
          </button>
        </div>
      </form>
      <div class="mt-2 d-flex justify-content-end">
        {% if has_openpyxl %}
        <a href="{% url 'workshop:finance_dashboard_excel' %}?{{ request.GET.urlencode }}" class="sf-btn sf-btn-xl">
          <i class="bi bi-file-earmark-excel"></i> Export Excel
        </a>
        {% endif %}
      </div>
    </div>
  </div>

  {# ── Summary stat cards ── #}
  <div class="row g-2 mb-3">
    <div class="col-6 col-md">
      <div class="stat-box b-services">
        <div class="val text-danger">{{ totals.services_net|floatformat:0|intcomma }}</div>
        <div class="lbl">Services Net</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="stat-box b-parts">
        <div class="val text-success">{{ totals.parts_net|floatformat:0|intcomma }}</div>
        <div class="lbl">Parts Net</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="stat-box b-tax">
        <div class="val" style="color:var(--c-warn);">{{ totals.services_tax_amt|add:totals.parts_tax_amt|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Tax</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="stat-box b-disc">
        <div class="val" style="color:var(--c-purple);">{{ totals.counter_discount_amt|floatformat:0|intcomma }}</div>
        <div class="lbl">Counter Discount</div>
      </div>
    </div>
    <div class="col-6 col-md">
      <div class="stat-box b-net">
        <div class="val text-primary">{{ totals.net_amount|floatformat:0|intcomma }}</div>
        <div class="lbl">Total Net Billed</div>
      </div>
    </div>
  </div>

  {# ── Billing type breakdown ── #}
  {% if by_billing %}
  <div class="sf-card">
    <div class="sf-card-hd"><i class="bi bi-pie-chart me-1"></i>By Billing Type</div>
    <div class="sf-card-bd">
      {% for bt, data in by_billing.items %}
      <div class="bb-row">
        <span class="fw-semibold">{{ bt }} <span class="text-muted">({{ data.count }} job{{ data.count|pluralize }})</span></span>
        <span class="fw-bold text-primary">Rs. {{ data.net_amount|floatformat:0|intcomma }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# ── Job-wise table ── #}
  <div class="sf-card">
    <div class="sf-card-hd"><i class="bi bi-list-ul me-1"></i>Job-wise Detail</div>
    <div class="table-responsive">
      <table class="sf-tbl">
        <thead>
          <tr>
            <th>Job #</th><th>Date</th><th>Reg. No.</th><th>Billing</th>
            <th class="text-end">Services Net</th><th class="text-end">Parts Net</th>
            <th class="text-end">Counter Disc.</th><th class="text-end">Net Amount</th>
            <th class="text-center">Status</th><th>Invoice #</th>
          </tr>
        </thead>
        <tbody>
          {% for j in jobs %}
          <tr>
            <td><a href="{% url 'workshop:job_detail' j.job_no %}" class="fw-bold text-decoration-none">#{{ j.job_no }}</a></td>
            <td>{{ j.job_date|date:"d-M-y" }}</td>
            <td class="fw-semibold">{{ j.vehicle.reg_no }}</td>
            <td>{{ j.get_billing_type_display }}</td>
            <td class="text-end">{{ j.services_net|floatformat:0|intcomma }}</td>
            <td class="text-end">{{ j.parts_net|floatformat:0|intcomma }}</td>
            <td class="text-end text-danger">{% if j.counter_discount_amt %}-{{ j.counter_discount_amt|floatformat:0|intcomma }}{% else %}—{% endif %}</td>
            <td class="text-end fw-bold">{{ j.net_amount|floatformat:0|intcomma }}</td>
            <td class="text-center">
              <span class="small">{{ j.get_status_display }}</span>
            </td>
            <td class="text-muted small">{{ j.invoice_no|default:"—" }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="10" class="text-center text-muted py-4">No jobs found in this range / filter.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}