{% 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">{% if mode == 'edit' %}Edit Due Date Rule{% else %}Add Due Date Rule{% endif %}</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">Rule Name</label>
      <input type="text" name="rule_name" value="{{ rule.rule_name if rule else '' }}" required class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="Tax Audit due date">
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Period Type</label>
      <select name="period_type" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        {% for value, label in due_period_types %}<option value="{{ value }}" {% if rule and rule.period_type == value %}selected{% elif not rule and value == 'yearly' %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Due Year Basis</label>
      <select name="due_year_basis" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
        {% for value, label in due_year_basis_choices %}<option value="{{ value }}" {% if rule and rule.due_year_basis == value %}selected{% elif not rule and value == 'assessment_year_start' %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
      <p class="mt-1 text-xs text-slate-500">For Tax Audit AY 2026-27 due 30 Sep 2026, use assessment year start year.</p>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Due Day</label>
        <input type="number" min="1" max="31" name="due_day" value="{{ rule.due_day if rule and rule.due_day else '' }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="30">
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-slate-700">Due Month</label>
        <input type="number" min="1" max="12" name="due_month" value="{{ rule.due_month if rule and rule.due_month else '' }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="9">
      </div>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Due Month Offset</label>
      <input type="number" name="due_month_offset" value="{{ rule.due_month_offset if rule else 0 }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
      <p class="mt-1 text-xs text-slate-500">For monthly GST 20th of next month, use period type Monthly, due day 20, offset 1.</p>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Days After Event</label>
      <input type="number" name="days_offset_after_event" value="{{ rule.days_offset_after_event if rule and rule.days_offset_after_event is not none else '' }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="30">
      <p class="mt-1 text-xs text-slate-500">For event-based rules like 30 days from AGM. Event-date calculation can be handled later.</p>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Renewal Days Before Expiry</label>
      <input type="number" min="0" name="renewal_days_before_expiry" value="{{ rule.renewal_days_before_expiry if rule and rule.renewal_days_before_expiry is not none else '' }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm" placeholder="30">
      <p class="mt-1 text-xs text-slate-500">For renewal-before-expiry services like DSC/FSSAI. Due date = engagement expiry date minus these days.</p>
    </div>
    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Sort Order</label>
      <input type="number" name="sort_order" value="{{ rule.sort_order if rule else 100 }}" class="w-full rounded-xl border border-slate-300 px-4 py-2 text-sm">
    </div>
    <div class="flex items-center gap-3 pt-7 text-sm text-slate-700">
      <label class="inline-flex items-center gap-2"><input type="checkbox" name="is_active" {% if not rule or rule.is_active %}checked{% endif %}> Active</label>
    </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">{{ rule.remarks if rule else '' }}</textarea>
    </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 Rule</button>
    </div>
  </form>
</div>
{% endblock %}