{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-start justify-between gap-4">
    <div><h1 class="text-2xl font-bold text-slate-900">{{ case.case_code }} - {{ case.title }}</h1><p class="mt-1 text-sm text-slate-500">{{ case.client.client_name if case.client else '' }} · {{ case.department }} · {{ case.case_type }}</p></div>
    <div class="flex gap-2"><a href="/notice-cases" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">Back</a>{% if can_manage %}<a href="/notice-cases/{{ case.id }}/edit" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Edit</a>{% endif %}</div>
  </div>
  <div class="grid gap-4 md:grid-cols-4">
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Status</div><div class="font-semibold">{{ case.status|replace('_',' ')|title }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Due Date</div><div class="font-semibold">{{ case.due_date or '-' }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">Reference</div><div class="font-semibold">{{ case.reference_no or '-' }}</div></div>
    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><div class="text-xs text-slate-500">DIN/Ack</div><div class="font-semibold">{{ case.din_ack_no or '-' }}</div></div>
  </div>

  <div class="grid gap-6 lg:grid-cols-2">
    <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><h2 class="font-bold">Issue Summary</h2><p class="mt-3 whitespace-pre-wrap text-sm text-slate-700">{{ case.issue_summary or 'No issue summary captured.' }}</p></section>
    <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><h2 class="font-bold">Assignments</h2><dl class="mt-3 grid grid-cols-2 gap-3 text-sm"><dt class="text-slate-500">Partner</dt><dd>{{ case.assigned_partner.full_name if case.assigned_partner else '-' }}</dd><dt class="text-slate-500">Manager</dt><dd>{{ case.assigned_manager.full_name if case.assigned_manager else '-' }}</dd><dt class="text-slate-500">Staff</dt><dd>{{ case.assigned_staff.full_name if case.assigned_staff else '-' }}</dd><dt class="text-slate-500">FY/AY</dt><dd>{{ case.financial_year or '-' }} / {{ case.assessment_year or '-' }}</dd></dl></section>
  </div>

  <div class="grid gap-6 lg:grid-cols-2">
    <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><h2 class="font-bold">Add Timeline Event</h2><form method="post" action="/notice-cases/{{ case.id }}/events" class="mt-4 space-y-3"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><div class="grid gap-3 md:grid-cols-3"><select name="event_type" class="rounded-lg border px-3 py-2 text-sm">{% for e in event_types %}<option>{{ e }}</option>{% endfor %}</select><input type="date" name="event_date" class="rounded-lg border px-3 py-2 text-sm"><input type="date" name="next_due_date" class="rounded-lg border px-3 py-2 text-sm" title="Next due date"></div><textarea name="description" rows="3" required placeholder="Event details" class="w-full rounded-lg border px-3 py-2 text-sm"></textarea><button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white">Add Event</button></form></section>
    <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><h2 class="font-bold">Timeline</h2><div class="mt-4 space-y-3">{% for e in case.events %}<div class="border-l-2 border-brand-600 pl-3"><div class="text-sm font-semibold">{{ e.event_type }} · {{ e.event_date }}</div><div class="whitespace-pre-wrap text-sm text-slate-600">{{ e.description }}</div>{% if e.next_due_date %}<div class="text-xs text-slate-400">Next due: {{ e.next_due_date }}</div>{% endif %}</div>{% else %}<p class="text-sm text-slate-500">No timeline events.</p>{% endfor %}</div></section>
  </div>

  <div class="grid gap-6 lg:grid-cols-2">
    <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><h2 class="font-bold">Hearings</h2><form method="post" action="/notice-cases/{{ case.id }}/hearings" class="mt-4 grid gap-3 md:grid-cols-2"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><input type="date" name="hearing_date" required class="rounded-lg border px-3 py-2 text-sm"><input name="hearing_time" placeholder="Time" class="rounded-lg border px-3 py-2 text-sm"><input name="venue_or_mode" placeholder="Venue / Online mode" class="rounded-lg border px-3 py-2 text-sm"><input name="officer_name" placeholder="Officer name" class="rounded-lg border px-3 py-2 text-sm"><select name="status" class="rounded-lg border px-3 py-2 text-sm">{% for s in hearing_statuses %}<option value="{{ s }}">{{ s|title }}</option>{% endfor %}</select><textarea name="agenda" placeholder="Agenda" class="rounded-lg border px-3 py-2 text-sm md:col-span-2"></textarea><button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white md:col-span-2">Add Hearing</button></form><div class="mt-4 space-y-2 text-sm">{% for h in case.hearings %}<div class="rounded-lg bg-slate-50 p-3"><b>{{ h.hearing_date }}</b> {{ h.hearing_time or '' }} · {{ h.status|title }}<br>{{ h.venue_or_mode or '' }} {{ h.officer_name or '' }}</div>{% endfor %}</div></section>
    <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><h2 class="font-bold">Orders</h2><form method="post" action="/notice-cases/{{ case.id }}/orders" class="mt-4 grid gap-3 md:grid-cols-2"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><select name="order_type" class="rounded-lg border px-3 py-2 text-sm">{% for o in order_types %}<option>{{ o }}</option>{% endfor %}</select><input name="order_no" placeholder="Order No" class="rounded-lg border px-3 py-2 text-sm"><input type="date" name="order_date" required class="rounded-lg border px-3 py-2 text-sm"><input type="date" name="appeal_due_date" class="rounded-lg border px-3 py-2 text-sm"><input name="tax_amount" placeholder="Tax" type="number" class="rounded-lg border px-3 py-2 text-sm"><input name="interest_amount" placeholder="Interest" type="number" class="rounded-lg border px-3 py-2 text-sm"><input name="penalty_amount" placeholder="Penalty" type="number" class="rounded-lg border px-3 py-2 text-sm"><input name="demand_amount" placeholder="Total Demand" type="number" class="rounded-lg border px-3 py-2 text-sm"><textarea name="summary" placeholder="Order summary" class="rounded-lg border px-3 py-2 text-sm md:col-span-2"></textarea><label class="text-sm md:col-span-2"><input type="checkbox" name="appeal_filed" value="1"> Appeal filed</label><button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white md:col-span-2">Add Order</button></form><div class="mt-4 space-y-2 text-sm">{% for o in case.orders %}<div class="rounded-lg bg-slate-50 p-3"><b>{{ o.order_type }}</b> · {{ o.order_date }} · Demand: {{ o.demand_amount }}<br>{{ o.summary or '' }}</div>{% endfor %}</div></section>
  </div>

  <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200"><div class="flex items-center justify-between"><h2 class="font-bold">Case Documents</h2></div>{% if upload_error %}<div class="mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700">{{ upload_error }}</div>{% endif %}{% if can_upload %}<form method="post" enctype="multipart/form-data" action="/notice-cases/{{ case.id }}/documents/upload" class="mt-4 grid gap-3 md:grid-cols-5"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><input name="title" placeholder="Title" class="rounded-lg border px-3 py-2 text-sm"><select name="document_type" class="rounded-lg border px-3 py-2 text-sm">{% for d in case_document_types %}<option value="{{ d }}">{{ d }}</option>{% endfor %}</select><input name="description" placeholder="Description" class="rounded-lg border px-3 py-2 text-sm"><input type="file" name="file" required accept="{{ upload_policy.accept if upload_policy else '.pdf,.jpg,.jpeg,.png,.xlsx,.xls,.docx,.zip' }}" class="rounded-lg border px-3 py-2 text-sm"><button class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Upload</button><p class="text-xs text-slate-500 md:col-span-5">Allowed file types: {{ upload_policy.allowed_ext_csv if upload_policy else 'pdf,jpg,jpeg,png,xlsx,xls,docx,zip' }}. Maximum size: {{ upload_policy.max_file_mb if upload_policy else 25 }} MB.</p></form>{% endif %}<div class="mt-4 overflow-hidden rounded-lg border"><table class="min-w-full divide-y divide-slate-200 text-sm"><thead class="bg-slate-50"><tr><th class="px-3 py-2 text-left">Document</th><th class="px-3 py-2">Type</th><th class="px-3 py-2">Uploaded</th><th class="px-3 py-2 text-right">Action</th></tr></thead><tbody class="divide-y divide-slate-100">{% for d in case.documents if not d.is_deleted %}<tr><td class="px-3 py-2"><div class="font-semibold">{{ d.title }}</div><div class="text-xs text-slate-500">{{ d.original_filename }}</div></td><td class="px-3 py-2 text-center">{{ d.document_type }}</td><td class="px-3 py-2 text-center">{{ d.uploaded_at_utc.date() if d.uploaded_at_utc else '' }}</td><td class="px-3 py-2 text-right"><a href="/notice-cases/documents/{{ d.id }}/download" class="font-semibold text-brand-700">Download</a>{% if can_delete_documents %}<form method="post" action="/notice-cases/documents/{{ d.id }}/delete" class="inline"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="ml-3 text-red-600" onclick="return confirm('Delete this document?')">Delete</button></form>{% endif %}</td></tr>{% else %}<tr><td colspan="4" class="px-3 py-6 text-center text-slate-500">No documents uploaded.</td></tr>{% endfor %}</tbody></table></div></section>
</div>
{% endblock %}