@extends('layouts.app')

@section('title', 'Payroll Summary')
@section('heading', 'Payroll Summary')

@section('content')
    <x-card>
        <form method="GET" class="mb-6 flex flex-wrap items-end gap-2">
            <div>
                <label class="block text-xs font-medium text-slate-500">Year</label>
                <input type="number" name="year" value="{{ $year }}" min="2020" max="2030" class="mt-1 w-24 rounded-lg border border-slate-300 px-3 py-1.5 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Month (optional)</label>
                <select name="month" class="mt-1 rounded-lg border border-slate-300 px-3 py-1.5 text-sm">
                    <option value="">All months</option>
                    @foreach(range(1, 12) as $m)<option value="{{ $m }}" {{ $month !== null && $month === $m ? 'selected' : '' }}>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>@endforeach
                </select>
            </div>
            <button type="submit" class="rounded-lg bg-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-300">Apply</button>
        </form>

        <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Headcount</p>
                <p class="mt-1 text-xl font-semibold text-slate-900">{{ $headcount }}</p>
            </div>
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Total Gross</p>
                <p class="mt-1 text-xl font-semibold text-slate-900">{{ number_format($totalGross, 2) }}</p>
            </div>
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Total Deductions</p>
                <p class="mt-1 text-xl font-semibold text-slate-900">{{ number_format($totalDeductions, 2) }}</p>
            </div>
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                <p class="text-xs font-medium uppercase text-slate-500">Total Net</p>
                <p class="mt-1 text-xl font-semibold text-slate-900">{{ number_format($totalNet, 2) }}</p>
            </div>
        </div>

        @if($byMonth->isNotEmpty())
            <table class="min-w-full divide-y divide-slate-200 rounded-lg border border-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Month</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Headcount</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Gross</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Deductions</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Net</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    @foreach($byMonth as $row)
                        <tr>
                            <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $row['month_name'] }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ $row['headcount'] }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($row['gross'], 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($row['deductions'], 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($row['net'], 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p class="py-8 text-center text-sm text-slate-500">No payroll data for the selected period.</p>
        @endif

        <div class="mt-4">
            <a href="{{ route('payroll.index') }}" class="text-sm text-indigo-600 hover:underline">Back to Payroll</a>
        </div>
    </x-card>
@endsection