{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-4xl rounded-2xl bg-white p-6 shadow-soft">
  <div class="flex items-start justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Add Due Date Extension</h2>
      <p class="mt-1 text-sm text-slate-500">{{ catalogue.service_name }} · {{ catalogue.service_code }}</p>
    </div>
    <a href="/services/catalogue/{{ catalogue.id }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a>
  </div>

  <form method="post" class="mt-6 grid gap-5 md:grid-cols-2">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Due Date Rule</label>
      <select name="due_date_rule_id" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        <option value="">Use first active rule</option>
        {% for rule in rules %}<option value="{{ rule.id }}">{{ rule.rule_name }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Financial Year</label>
      <input type="text" name="financial_year" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="2025-26">
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Assessment Year</label>
      <input type="text" name="assessment_year" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="2026-27">
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Period Label</label>
      <input type="text" name="period_label" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="Apr / Q1 / 2026-04">
      <p class="mt-1 text-xs text-slate-500">Leave blank for annual services.</p>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Extended Due Date</label>
      <input type="date" name="extended_due_date" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Notification Date</label>
      <input type="date" name="notification_date" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
    </div>
    <div class="md:col-span-2">
      <label class="mb-2 block text-sm font-medium text-slate-700">Notification / Circular Reference</label>
      <input type="text" name="notification_reference" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="CBDT Circular / GST Notification reference">
    </div>
    <div class="md:col-span-2">
      <label class="mb-2 block text-sm font-medium text-slate-700">Remarks</label>
      <textarea name="remarks" rows="3" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm"></textarea>
    </div>
    <div class="md:col-span-2 rounded-xl bg-amber-50 p-4 text-sm text-amber-800">
      This extension will be stored as a new sequence. Matching unlocked engagements for the active audit firm will be updated to the new current due date. Locked engagements will be skipped.
    </div>
    <div class="md:col-span-2 flex items-center justify-end gap-3">
      <a href="/services/catalogue/{{ catalogue.id }}" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save Extension</button>
    </div>
  </form>
</div>
{% endblock %}