@extends('layouts.app')

@section('title', 'Payroll Deductions')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Payroll Deductions</h1>
                <p class="text-xs text-muted-foreground">Add and manage deductions applied to staff pay</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('payroll.deductions.csv') }}"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">Export CSV</a>
                <button type="button" onclick="document.getElementById('deduction-new').open = true"
                        class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Add Deduction
                </button>
            </div>
        </div>

        @include('partials.flashes')

        <form method="get" action="{{ route('payroll.deductions') }}"
              class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Search</label>
                <input type="search" name="q" value="{{ $q }}" placeholder="Name or notes"
                       class="h-9 w-64 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Type</label>
                <select name="type" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="All" @selected($type === 'All')>All</option>
                    @foreach ($types as $t)
                        <option value="{{ $t }}" @selected($type === $t)>{{ $t }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Applies To</label>
                <select name="applies_to" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="All" @selected($appliesTo === 'All')>All</option>
                    @foreach ($appliesOptions as $a)
                        <option value="{{ $a }}" @selected($appliesTo === $a)>{{ $a }}</option>
                    @endforeach
                </select>
            </div>
            <input type="hidden" name="sort" value="{{ $sort }}"><input type="hidden" name="dir" value="{{ $dir }}">
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            <a href="{{ route('payroll.deductions') }}"
               class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
            <span class="ml-auto text-xs text-muted-foreground">{{ $rows->total() }} deduction(s)</span>
        </form>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            @php
                                $sortLink = function (string $key) use ($sort, $dir, $q, $type, $appliesTo) {
                                    return route('payroll.deductions', ['q' => $q, 'type' => $type, 'applies_to' => $appliesTo,
                                        'sort' => $key, 'dir' => $sort === $key && $dir === 'asc' ? 'desc' : 'asc']);
                                };
                            @endphp
                            <th class="px-3 py-2 font-medium"><a href="{{ $sortLink('name') }}">Name</a></th>
                            <th class="px-3 py-2 font-medium"><a href="{{ $sortLink('type') }}">Type</a></th>
                            <th class="px-3 py-2 text-right font-medium"><a href="{{ $sortLink('amount') }}">Amount</a></th>
                            <th class="px-3 py-2 font-medium">Pre-Tax</th>
                            <th class="px-3 py-2 font-medium">Applies To</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr class="border-b last:border-0">
                                <td class="px-3 py-2 font-medium">{{ $row->name }}</td>
                                <td class="px-3 py-2 text-xs">{{ $row->type }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ number_format($row->amount, 2) }}</td>
                                <td class="px-3 py-2">
                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $row->is_pre_tax ? 'bg-emerald-500/15 text-emerald-700' : 'bg-slate-500/15 text-slate-600' }}">
                                        {{ $row->is_pre_tax ? 'Pre-tax' : 'Post-tax' }}
                                    </span>
                                </td>
                                <td class="px-3 py-2">
                                    <span class="text-xs">{{ $row->applies_to }}</span>
                                    @if ($row->applies_to === 'Specific Employee')
                                        <span class="block text-xs text-muted-foreground">{{ $row->employee?->full_name ?? '—' }}</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2">
                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $row->status === 'Active' ? 'bg-sky-500/15 text-sky-700' : 'bg-slate-500/15 text-slate-600' }}">
                                        {{ $row->status }}
                                    </span>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <button type="button"
                                                onclick="document.getElementById('deduction-{{ $row->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                        <form method="post" action="{{ route('payroll.deductions.destroy', $row) }}"
                                              onsubmit="return confirm('Delete deduction {{ $row->name }}?')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="deduction-{{ $row->id }}">
                                <td colspan="7" class="bg-muted/30 px-3 py-4">
                                    @include('payroll.partials.deduction-form', [
                                        'action' => route('payroll.deductions.update', $row),
                                        'method' => 'PUT',
                                        'prefix' => 'deduction',
                                        'row' => $row,
                                        'types' => $types,
                                        'appliesOptions' => $appliesOptions,
                                        'staff' => $staff,
                                    ])
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-3 py-10 text-center text-sm text-muted-foreground">No deductions match your filter.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($rows->hasPages())
                <div class="flex items-center justify-between border-t px-4 py-2">
                    <span class="text-xs text-muted-foreground">
                        Showing {{ $rows->firstItem() }}–{{ $rows->lastItem() }} of {{ $rows->total() }}
                    </span>
                    <div class="flex gap-2">
                        <a href="{{ $rows->previousPageUrl() }}" class="rounded-md border border-border px-2 py-1 text-xs opacity-50 hover:bg-accent">Previous</a>
                        <a href="{{ $rows->nextPageUrl() }}" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Next</a>
                    </div>
                </div>
            @endif
        </div>

        <details id="deduction-new" class="rounded-xl border border-border bg-card p-4">
            <summary class="cursor-pointer text-sm font-semibold">Add new deduction</summary>
            <div class="mt-3">
                @include('payroll.partials.deduction-form', [
                    'action' => route('payroll.deductions.store'),
                    'method' => 'POST',
                    'prefix' => 'deduction',
                    'row' => null,
                    'types' => $types,
                    'appliesOptions' => $appliesOptions,
                    'staff' => $staff,
                ])
            </div>
        </details>
    </div>
@endsection