@extends('layouts.app')

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

@section('content')
    <x-card>
        <p class="mb-4 text-slate-600">Select month and year to generate or re-generate payroll. Attendance and leaves will be used to compute LOP and paid/unpaid leave days.</p>

        @if(isset($stats))
            <div class="mb-5 rounded-lg border border-slate-200 bg-slate-50 p-4">
                <div class="grid gap-3 sm:grid-cols-4">
                    <div>
                        <p class="text-xs uppercase text-slate-500">Salary Groups</p>
                        <p class="text-lg font-semibold text-slate-900">{{ (int) ($stats['total_groups'] ?? 0) }}</p>
                    </div>
                    <div>
                        <p class="text-xs uppercase text-slate-500">Active Staff</p>
                        <p class="text-lg font-semibold text-slate-900">{{ (int) ($stats['total_staff'] ?? 0) }}</p>
                    </div>
                    <div>
                        <p class="text-xs uppercase text-slate-500">With Group</p>
                        <p class="text-lg font-semibold text-emerald-700">{{ (int) ($stats['with_salary_group'] ?? 0) }}</p>
                    </div>
                    <div>
                        <p class="text-xs uppercase text-slate-500">Without Group</p>
                        <p class="text-lg font-semibold {{ (int) ($stats['without_salary_group'] ?? 0) > 0 ? 'text-amber-700' : 'text-slate-900' }}">{{ (int) ($stats['without_salary_group'] ?? 0) }}</p>
                    </div>
                </div>
                @if((int) ($stats['total_groups'] ?? 0) === 0)
                    <p class="mt-3 text-sm text-red-700">No salary groups found. Please create one before running payroll.</p>
                @elseif((int) ($stats['without_salary_group'] ?? 0) > 0)
                    <p class="mt-3 text-sm text-amber-700">Some employees are not assigned to a salary group. They may still be processed using basic salary if available.</p>
                @endif
            </div>
        @endif

        @php
            $currentYear = (int) date('Y');
            $currentMonth = (int) date('n');
            $selectedYear = max(2020, min((int) old('year', $year ?? $currentYear), min(2030, $currentYear)));
            $selectedMonth = max(1, min(12, (int) old('month', $month ?? $currentMonth)));
        @endphp

        <form action="{{ route('payroll.generate.store') }}" method="POST" class="max-w-sm space-y-4">
            @csrf
            <div>
                <label for="year" class="block text-sm font-medium text-slate-700">Year</label>
                <input type="number" id="year" name="year" value="{{ $selectedYear }}" min="2020" max="{{ min(2030, $currentYear) }}" required
                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                @error('year')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="month" class="block text-sm font-medium text-slate-700">Month</label>
                <select id="month" name="month" required class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 js-select2">
                    @foreach(range(1, 12) as $m)
                        <option
                            value="{{ $m }}"
                            @selected($selectedMonth === $m)
                            @disabled($selectedYear === $currentYear && $m > $currentMonth)
                        >{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                    @endforeach
                </select>
                @if($selectedYear === $currentYear)
                    <p class="mt-1 text-xs text-slate-500">Future months are disabled for the current year.</p>
                @endif
                @error('month')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="flex items-center gap-2">
                    <input type="hidden" name="async" value="0">
                    <input type="checkbox" name="async" value="1" {{ old('async') === '1' ? 'checked' : '' }} class="rounded border-slate-300">
                    <span class="text-sm text-slate-700">Run in background (queue)</span>
                </label>
                <p class="mt-1 text-xs text-slate-500">Use for large teams; you can leave the page and refresh the payroll list later.</p>
            </div>
            <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Generate / Re-generate Payroll</button>
        </form>
    </x-card>
@endsection