@php
    $ptSlabs = $ptSlabs ?? collect();
@endphp

<div class="space-y-5">
    <div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-100 bg-gradient-to-r from-amber-50/50 via-white to-orange-50/30 px-5 py-5">
            <div class="flex items-start gap-3">
                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-700">
                    <i class="bi bi-receipt text-lg"></i>
                </span>
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Statutory</p>
                    <h2 class="mt-0.5 text-lg font-semibold text-slate-900">PT Settings</h2>
                    <p class="mt-1 text-sm text-slate-500">State-wise Professional Tax slabs (India).</p>
                </div>
            </div>
        </div>

        <form action="{{ route('payroll.pt-slabs.store') }}" method="POST" class="grid gap-3 border-b border-slate-100 bg-slate-50/40 p-5 sm:grid-cols-6">
            @csrf
            <input type="hidden" name="redirect_to" value="{{ route('payroll.index', ['tab' => request('tab', 'advanced'), 'sub' => 'pt']) }}">
            <div class="sm:col-span-2">
                <label class="block text-xs font-medium text-slate-500">State</label>
                <input name="state" required class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-0" placeholder="e.g. Telangana">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Min Gross</label>
                <input type="number" step="0.01" name="min_gross" value="0" required class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-0">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Max Gross</label>
                <input type="number" step="0.01" name="max_gross" class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-0" placeholder="(blank = no max)">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">PT Amount</label>
                <input type="number" step="0.01" name="amount" value="0" required class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-0">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Effective From</label>
                <input type="date" name="effective_from" class="mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-0">
            </div>
            <div class="sm:col-span-6 flex justify-end">
                <button type="submit" class="inline-flex items-center gap-1.5 rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-primary-hover">
                    <i class="bi bi-plus-lg"></i> Add slab
                </button>
            </div>
        </form>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50/80">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">State</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Min</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Max</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Amount</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Effective</th>
                        <th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($ptSlabs as $slab)
                        <tr class="transition hover:bg-teal-50/30">
                            <td class="whitespace-nowrap px-5 py-3.5 text-sm text-slate-700">{{ $slab->state }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-right text-sm tabular-nums text-slate-700">{{ number_format((float) $slab->min_gross, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-right text-sm tabular-nums text-slate-700">{{ $slab->max_gross === null ? '—' : number_format((float) $slab->max_gross, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-right text-sm font-semibold tabular-nums text-slate-900">{{ number_format((float) $slab->amount, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-sm text-slate-600">{{ $slab->effective_from?->format('Y-m-d') ?? '—' }}</td>
                            <td class="whitespace-nowrap px-5 py-3.5 text-right text-sm">
                                <form action="{{ route('payroll.pt-slabs.destroy', $slab) }}" method="POST" onsubmit="return confirm('Delete this slab?');" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="redirect_to" value="{{ route('payroll.index', ['tab' => request('tab', 'advanced'), 'sub' => 'pt']) }}">
                                    <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-5 py-12 text-center text-sm text-slate-500">No PT slabs yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>