@extends('layouts.app')

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

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Generate Payroll</h1>
            <p class="text-xs text-muted-foreground">Run a new payroll cycle for a period</p>
        </div>

        @include('partials.flashes')

        <form method="post" action="{{ route('payroll.generate.store') }}" id="generate-form" class="flex flex-col gap-4">
            @csrf

            <div 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">Month</label>
                    <select name="month" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach ($months as $m)
                            <option value="{{ $m }}" @selected($month === $m)>{{ $m }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Year</label>
                    <select name="year" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        @foreach ($years as $y)
                            <option value="{{ $y }}" @selected($year === $y)>{{ $y }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Mode</label>
                    <select name="mode" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                        <option value="all">All active staff</option>
                        <option value="specific">Specific employees</option>
                    </select>
                </div>
                <button type="button" onclick="syncPreview()"
                        class="h-9 rounded-lg border border-border px-3 text-sm hover:bg-accent">Preview Computation</button>
                <button type="submit" class="h-9 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Generate Payroll
                </button>
            </div>

            <div class="rounded-xl border border-border bg-card p-4">
                <div class="flex items-center justify-between">
                    <p class="text-sm font-semibold">Select Employees</p>
                    <div class="flex gap-2">
                        <button type="button" onclick="checkAll(true)" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Select All</button>
                        <button type="button" onclick="checkAll(false)" class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Clear</button>
                    </div>
                </div>
                <div class="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($all as $s)
                        <label class="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm">
                            <input type="checkbox" name="staff[]" value="{{ $s->id }}"
                                   @checked($selectedIds->contains($s->id)) class="staff-check size-4 rounded border-input">
                            <span class="flex flex-col">
                                <span class="font-medium">{{ $s->full_name }}</span>
                                <span class="text-xs text-muted-foreground">{{ $s->role }} · {{ $s->staff_no }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
                <p class="mt-3 text-xs text-muted-foreground">
                    <span id="selected-count">{{ $selectedIds->count() }}</span> of {{ $all->count() }} selected ·
                    Basic salary total <span id="basic-total">—</span>
                </p>
            </div>
        </form>

        @if ($preview && count($computations) > 0)
            <div class="flex flex-col gap-4">
@php
    $previewPaye = collect($computations)->sum(fn ($c) => $c['paye']);
    $previewNet = collect($computations)->sum(fn ($c) => $c['netPay']);
@endphp

                <div class="grid gap-3 sm:grid-cols-4">
                    <div class="rounded-xl border border-border bg-card p-4">
                        <span class="text-xs font-medium text-muted-foreground">Employees</span>
                        <span class="mt-1 block text-2xl font-semibold tabular-nums">{{ count($computations) }}</span>
                    </div>
                    <div class="rounded-xl border border-border bg-card p-4">
                        <span class="text-xs font-medium text-muted-foreground">Total Gross</span>
                        <span class="mt-1 block text-2xl font-semibold tabular-nums text-emerald-600">{{ number_format($totalGross, 2) }}</span>
                    </div>
                    <div class="rounded-xl border border-border bg-card p-4">
                        <span class="text-xs font-medium text-muted-foreground">Total PAYE</span>
                        <span class="mt-1 block text-2xl font-semibold tabular-nums">{{ number_format($previewPaye, 2) }}</span>
                    </div>
                    <div class="rounded-xl border border-border bg-card p-4">
                        <span class="text-xs font-medium text-muted-foreground">Total Net</span>
                        <span class="mt-1 block text-2xl font-semibold tabular-nums">{{ number_format($previewNet, 2) }}</span>
                    </div>
                </div>

                <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">
                                    <th class="px-3 py-2 font-medium">Employee</th>
                                    <th class="px-3 py-2 text-right font-medium">Basic</th>
                                    <th class="px-3 py-2 text-right font-medium">Gross</th>
                                    <th class="px-3 py-2 text-right font-medium">NSSF</th>
                                    <th class="px-3 py-2 text-right font-medium">SHIF</th>
                                    <th class="px-3 py-2 text-right font-medium">Housing Levy</th>
                                    <th class="px-3 py-2 text-right font-medium">Taxable</th>
                                    <th class="px-3 py-2 text-right font-medium">PAYE</th>
                                    <th class="px-3 py-2 text-right font-medium">Total Deductions</th>
                                    <th class="px-3 py-2 text-right font-medium">Net Pay</th>
                                    <th class="px-3 py-2 text-right font-medium">Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($computations as $comp)
                                    <tr class="border-b last:border-0">
                                        <td class="px-3 py-2">
                                            <span class="font-medium">{{ $comp['staff']->full_name }}</span>
                                            <span class="block text-xs text-muted-foreground">{{ $comp['staff']->staff_no }}</span>
                                        </td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['basicSalary'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['grossPay'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['nssfEmployee'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['shif'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['housingLevy'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['taxablePay'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['paye'], 2) }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ number_format($comp['totalDeductions'], 2) }}</td>
                                        <td class="px-3 py-2 text-right font-medium tabular-nums">{{ number_format($comp['netPay'], 2) }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <button type="button" onclick="document.getElementById('breakdown-{{ $comp['staff']->id }}').classList.toggle('hidden')"
                                                    class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Breakdown</button>
                                        </td>
                                    </tr>
                                    <tr class="hidden" id="breakdown-{{ $comp['staff']->id }}">
                                        <td colspan="11" class="bg-muted/30 px-3 py-4">
                                            @include('payroll.partials.breakdown', ['comp' => $comp])
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @elseif ($preview)
            <div class="rounded-xl border border-border bg-card px-4 py-10 text-center text-sm text-muted-foreground">
                Select at least one employee to preview the computation.
            </div>
        @endif
    </div>

    <script>
        function checkAll(state) {
            document.querySelectorAll('.staff-check').forEach(function (el) { el.checked = state; });
            updateCount();
        }

        function updateCount() {
            var boxes = Array.prototype.slice.call(document.querySelectorAll('.staff-check'));
            var picked = boxes.filter(function (b) { return b.checked; });
            document.getElementById('selected-count').textContent = picked.length;

            var total = 0;
            picked.forEach(function (b) {
                var id = b.value;
                total += window.__basic[id] ? window.__basic[id] : 0;
            });
            document.getElementById('basic-total').textContent = total.toLocaleString(undefined, { minimumFractionDigits: 2 });
        }

        function syncPreview() {
            var form = document.getElementById('generate-form');
            var url = new URL(window.location.href);
            url.searchParams.set('preview', '1');
            url.searchParams.set('month', form.querySelector('[name=month]').value);
            url.searchParams.set('year', form.querySelector('[name=year]').value);
            document.querySelectorAll('.staff-check').forEach(function (b) {
                if (b.checked) { url.searchParams.append('staff[]', b.value); }
            });
            window.location.href = url.toString();
        }

        window.__basic = {
            @foreach ($all as $s)
                "{{ $s->id }}": {{ (float) $s->basic_salary }},
            @endforeach
        };
        document.querySelectorAll('.staff-check').forEach(function (b) { b.addEventListener('change', updateCount); });
        updateCount();
    </script>
@endsection