{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div><h2 class="text-xl font-semibold text-slate-900">Salary Structures</h2><p class="text-sm text-slate-500">Maintain branch-wise employee salary structures for payroll generation.</p></div>
    <a href="/employees" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Employees</a>
  </div>
  {% if errors %}<div class="rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-700">{{ errors|join(', ') }}</div>{% endif %}
  <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
    <h3 class="font-semibold text-slate-900">Add Salary Structure</h3>
    <form method="post" action="/employees/payroll/structures" class="mt-4 grid gap-3 md:grid-cols-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <select name="employee_id" required class="rounded-xl border border-slate-300 px-3 py-2 text-sm md:col-span-2"><option value="">Select Employee</option>{% for emp in employees %}<option value="{{ emp.id }}">{{ emp.employee_code }} - {{ emp.full_name }}</option>{% endfor %}</select>
      <input type="date" name="effective_from" required class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input type="date" name="effective_to" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="monthly_ctc_amount" type="number" min="0" step="1" placeholder="Monthly CTC" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="basic_amount" type="number" min="0" step="1" placeholder="Basic" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="hra_amount" type="number" min="0" step="1" placeholder="HRA" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="allowance_amount" type="number" min="0" step="1" placeholder="Other Allowance" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="employee_pf_amount" type="number" min="0" step="1" placeholder="PF" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="employee_esi_amount" type="number" min="0" step="1" placeholder="ESI" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="professional_tax_amount" type="number" min="0" step="1" placeholder="Professional Tax" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="tds_amount" type="number" min="0" step="1" placeholder="TDS" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="other_deduction_amount" type="number" min="0" step="1" placeholder="Other Deduction" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
      <input name="remarks" placeholder="Remarks" class="rounded-xl border border-slate-300 px-3 py-2 text-sm md:col-span-2">
      <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" checked> Active</label>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Save Structure</button>
    </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"><tr><th class="px-4 py-3 text-left">Employee</th><th class="px-4 py-3 text-left">Effective</th><th class="px-4 py-3 text-right">Gross</th><th class="px-4 py-3 text-right">Deductions</th><th class="px-4 py-3 text-right">Net</th><th class="px-4 py-3 text-left">Status</th></tr></thead><tbody class="divide-y divide-slate-100">
      {% for row in rows %}{% set gross = row.basic_amount + row.hra_amount + row.allowance_amount %}{% set ded = row.employee_pf_amount + row.employee_esi_amount + row.professional_tax_amount + row.tds_amount + row.other_deduction_amount %}<tr><td class="px-4 py-3 font-medium">{{ row.employee.employee_code if row.employee else row.employee_id }} - {{ row.employee.full_name if row.employee else '' }}</td><td class="px-4 py-3">{{ row.effective_from }}{% if row.effective_to %} to {{ row.effective_to }}{% endif %}</td><td class="px-4 py-3 text-right">{{ gross }}</td><td class="px-4 py-3 text-right">{{ ded }}</td><td class="px-4 py-3 text-right font-semibold">{{ gross - ded }}</td><td class="px-4 py-3">{{ 'Active' if row.is_active else 'Inactive' }}</td></tr>{% else %}<tr><td colspan="6" class="px-4 py-6 text-center text-slate-500">No salary structures available.</td></tr>{% endfor %}
    </tbody></table>
  </div>
</div>
{% endblock %}
