{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <h1 class="text-2xl font-bold text-slate-900">Notices & Cases</h1>
      <p class="mt-1 text-sm text-slate-500">Track GST, Income Tax, ROC, PF/ESI notices, appeals, hearings, orders and case documents.</p>
      <p class="mt-1 text-xs font-semibold uppercase tracking-wide text-slate-400">
        Showing: {% if financial_year == 'all' %}All Financial Years{% else %}FY {{ financial_year }}{% endif %}{% if assessment_year %} · AY {{ assessment_year }}{% endif %}
      </p>
    </div>
    {% if can_manage %}<a href="/notice-cases/new" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-brand-700">New Case</a>{% endif %}
  </div>

  <div class="grid gap-4 md:grid-cols-5">
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Total</div><div class="mt-1 text-2xl font-semibold">{{ summary.total }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Open</div><div class="mt-1 text-2xl font-semibold text-blue-700">{{ summary.open }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Reply Pending</div><div class="mt-1 text-2xl font-semibold text-amber-700">{{ summary.reply_pending }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Hearings</div><div class="mt-1 text-2xl font-semibold text-purple-700">{{ summary.hearing_scheduled }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-red-200"><div class="text-xs text-red-500">Overdue</div><div class="mt-1 text-2xl font-semibold text-red-700">{{ summary.overdue }}</div></div>
  </div>

  <form method="get" class="grid gap-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200 md:grid-cols-7">
    <input name="q" value="{{ q }}" placeholder="Search case/client/ref" class="rounded-lg border border-slate-300 px-3 py-2 text-sm md:col-span-2">
    <select name="department" class="rounded-lg border border-slate-300 px-3 py-2 text-sm"><option value="">All Departments</option>{% for d in departments %}<option value="{{ d }}" {% if department==d %}selected{% endif %}>{{ d }}</option>{% endfor %}</select>
    <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm"><option value="">All Status</option>{% for s in case_statuses %}<option value="{{ s }}" {% if status==s %}selected{% endif %}>{{ s|replace('_',' ')|title }}</option>{% endfor %}</select>
    <select name="financial_year" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
      <option value="all" {% if financial_year == 'all' %}selected{% endif %}>All FY</option>
      {% for fy in financial_year_options %}<option value="{{ fy.year_code }}" {% if financial_year == fy.year_code %}selected{% endif %}>FY {{ fy.year_code }}{% if fy.is_current %} (Current){% endif %}</option>{% endfor %}
    </select>
    <input name="assessment_year" value="{{ assessment_year }}" placeholder="AY optional" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
    {% if include_archived %}<input type="hidden" name="include_archived" value="true">{% endif %}
    <button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Filter</button>
  </form>

  <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500"><tr><th class="px-4 py-3">Case</th><th class="px-4 py-3">Client</th><th class="px-4 py-3">Department</th><th class="px-4 py-3">FY / AY</th><th class="px-4 py-3">Due Date</th><th class="px-4 py-3">Status</th><th class="px-4 py-3 text-right">Action</th></tr></thead>
      <tbody class="divide-y divide-slate-100">
      {% for row in rows %}
        <tr class="hover:bg-slate-50"><td class="px-4 py-3"><div class="font-semibold text-slate-900">{{ row.case_code }}</div><div class="text-slate-500">{{ row.title }}</div><div class="text-xs text-slate-400">{{ row.reference_no or row.din_ack_no or '' }}</div></td><td class="px-4 py-3">{{ row.client.client_name if row.client else '-' }}</td><td class="px-4 py-3">{{ row.department }}<div class="text-xs text-slate-400">{{ row.case_type }}</div></td><td class="px-4 py-3"><div>{{ row.financial_year or '-' }}</div><div class="text-xs text-slate-400">{{ row.assessment_year or '-' }}</div></td><td class="px-4 py-3">{{ row.due_date or '-' }}</td><td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">{{ row.status|replace('_',' ')|title }}</span></td><td class="px-4 py-3 text-right"><a href="/notice-cases/{{ row.id }}" class="font-semibold text-brand-700 hover:underline">Open</a></td></tr>
      {% else %}
        <tr><td colspan="7" class="px-4 py-8 text-center text-slate-500">No notice/case records found for the selected year/filter.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}