{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% if errors %}<div class="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">{{ errors|join(', ') }}</div>{% endif %}
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">Employee Document Types</h2>
      <p class="text-sm text-slate-500">Maintain branch-wise document categories like PAN, Aadhaar, certificates and bank proof.</p>
    </div>
    <form method="post" action="/employees/document-types/defaults">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Create Defaults</button>
    </form>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
    <h3 class="mb-4 font-semibold text-slate-900">Add Document Type</h3>
    <form method="post" action="/employees/document-types" class="grid gap-4 md:grid-cols-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div><label class="text-xs font-semibold text-slate-500">Code</label><input name="code" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" required></div>
      <div><label class="text-xs font-semibold text-slate-500">Name</label><input name="name" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" required></div>
      <div><label class="text-xs font-semibold text-slate-500">Description</label><input name="description" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div class="grid grid-cols-2 gap-2 text-sm">
        <label class="flex items-center gap-2"><input type="checkbox" name="is_mandatory" value="1"> Mandatory</label>
        <label class="flex items-center gap-2"><input type="checkbox" name="allow_employee_upload" value="1" checked> Employee Upload</label>
        <label class="flex items-center gap-2"><input type="checkbox" name="requires_verification" value="1" checked> Verify</label>
        <label class="flex items-center gap-2"><input type="checkbox" name="is_active" value="1" checked> Active</label>
      </div>
      <div class="md:col-span-4"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Save Type</button></div>
    </form>
  </div>

  <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
    <table class="min-w-full divide-y divide-slate-200 text-sm">
      <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500"><tr><th class="px-4 py-3">Code</th><th class="px-4 py-3">Name</th><th class="px-4 py-3">Rules</th><th class="px-4 py-3">Edit</th></tr></thead>
      <tbody class="divide-y divide-slate-100">
        {% for row in rows %}
        <tr>
          <td class="px-4 py-3 font-medium">{{ row.code }}</td><td class="px-4 py-3">{{ row.name }}<div class="text-xs text-slate-500">{{ row.description or '' }}</div></td>
          <td class="px-4 py-3 text-xs text-slate-600">{% if row.is_mandatory %}Mandatory{% else %}Optional{% endif %} • {% if row.allow_employee_upload %}Employee upload{% else %}HR upload only{% endif %} • {% if row.requires_verification %}Verification{% else %}No verification{% endif %} • {% if row.is_active %}Active{% else %}Inactive{% endif %}</td>
          <td class="px-4 py-3">
            <details><summary class="cursor-pointer text-brand-700">Edit</summary>
              <form method="post" action="/employees/document-types/{{ row.id }}/edit" class="mt-3 grid gap-2 rounded-xl border border-slate-200 p-3">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input name="name" value="{{ row.name }}" class="rounded-lg border border-slate-300 px-3 py-2">
                <input name="description" value="{{ row.description or '' }}" class="rounded-lg border border-slate-300 px-3 py-2">
                <label><input type="checkbox" name="is_mandatory" value="1" {% if row.is_mandatory %}checked{% endif %}> Mandatory</label>
                <label><input type="checkbox" name="allow_employee_upload" value="1" {% if row.allow_employee_upload %}checked{% endif %}> Employee upload allowed</label>
                <label><input type="checkbox" name="requires_verification" value="1" {% if row.requires_verification %}checked{% endif %}> Requires verification</label>
                <label><input type="checkbox" name="is_active" value="1" {% if row.is_active %}checked{% endif %}> Active</label>
                <button class="rounded-lg bg-slate-900 px-3 py-2 text-white">Update</button>
              </form>
            </details>
          </td>
        </tr>
        {% else %}<tr><td colspan="4" class="px-4 py-6 text-center text-slate-500">No document types found.</td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}