{% 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 Documents</h2><p class="text-sm text-slate-500">Upload, review and archive employee documents with audit firm/branch scope.</p></div>
    <a href="/employees/document-types" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Document Types</a>
  </div>

  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
    <h3 class="mb-4 font-semibold text-slate-900">Upload Document</h3>
    <form method="post" enctype="multipart/form-data" action="/employees/{{ selected_employee_id or (employees[0].id if employees else 0) }}/documents/upload" onsubmit="if(!document.getElementById('upload_employee_id').value){return false;} this.action='/employees/'+document.getElementById('upload_employee_id').value+'/documents/upload';" 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">Employee</label><select id="upload_employee_id" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" required>{% for emp in employees %}<option value="{{ emp.id }}" {% if selected_employee_id==emp.id %}selected{% endif %}>{{ emp.employee_code }} - {{ emp.full_name }}</option>{% endfor %}</select></div>
      <div><label class="text-xs font-semibold text-slate-500">Type</label><select name="document_type_id" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"><option value="">General</option>{% for dt in document_types %}<option value="{{ dt.id }}">{{ dt.code }} - {{ dt.name }}</option>{% endfor %}</select></div>
      <div><label class="text-xs font-semibold text-slate-500">Title</label><input name="title" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">File</label><input type="file" name="document_file" accept="{{ employee_upload_accept }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2" required><p class="mt-1 text-xs text-slate-500">{{ employee_upload_help }}</p></div>
      <div><label class="text-xs font-semibold text-slate-500">Document No</label><input name="document_no" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">Issue Date</label><input type="date" name="issue_date" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">Expiry Date</label><input type="date" name="expiry_date" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></div>
      <div><label class="text-xs font-semibold text-slate-500">Visibility</label><select name="visibility" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"><option value="employee_and_hr">Employee and HR</option><option value="hr_only">HR Only</option></select></div>
      <div class="md:col-span-4"><label class="text-xs font-semibold text-slate-500">Remarks</label><input name="remarks" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></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">Upload Document</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">Employee</th><th class="px-4 py-3">Document</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Dates</th><th class="px-4 py-3">Review</th></tr></thead>
      <tbody class="divide-y divide-slate-100">{% for row in rows %}<tr>
        <td class="px-4 py-3">{{ row.employee.employee_code if row.employee else '' }}<div class="font-medium">{{ row.employee.full_name if row.employee else '' }}</div></td>
        <td class="px-4 py-3"><div class="font-medium">{{ row.title }}</div><div class="text-xs text-slate-500">{{ row.document_type.code if row.document_type else 'GENERAL' }} • {{ row.original_filename }} • {{ row.file_size_bytes or 0 }} bytes</div><div class="text-xs text-slate-400">{{ row.storage_path }}</div></td>
        <td class="px-4 py-3"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs">{{ row.status }}</span><div class="text-xs text-slate-500">{{ row.visibility }}</div></td>
        <td class="px-4 py-3 text-xs">Issue: {{ row.issue_date or '-' }}<br>Expiry: {{ row.expiry_date or '-' }}</td>
        <td class="px-4 py-3">
          {% if row.status != 'archived' %}
          <form method="post" action="/employees/documents/{{ row.id }}/review" class="mb-2 flex gap-2"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><input name="verification_notes" placeholder="Notes" class="w-32 rounded-lg border border-slate-300 px-2 py-1"><button name="status" value="verified" class="rounded-lg bg-emerald-600 px-2 py-1 text-xs text-white">Verify</button><button name="status" value="rejected" class="rounded-lg bg-red-600 px-2 py-1 text-xs text-white">Reject</button></form>
          <form method="post" action="/employees/documents/{{ row.id }}/archive"><input type="hidden" name="csrf_token" value="{{ csrf_token }}"><button class="text-xs text-red-700">Archive</button></form>
          {% endif %}
        </td>
      </tr>{% else %}<tr><td colspan="5" class="px-4 py-6 text-center text-slate-500">No documents found.</td></tr>{% endfor %}</tbody>
    </table>
  </div>
</div>
{% endblock %}