@extends('layouts.app')

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

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Payroll Settings</h1>
            <p class="text-xs text-muted-foreground">Configure payroll rules, statutory deductions and tax brackets</p>
        </div>

        @include('partials.flashes')

        <div class="overflow-x-auto rounded-xl border border-border bg-card">
            <div class="flex min-w-max gap-1 border-b px-2">
                @foreach ($tabs as $key => $label)
                    <a href="{{ route('payroll.settings', ['tab' => $key]) }}"
                       class="whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium
                              {{ $tab === $key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>

        <form method="post" action="{{ $action }}" class="flex flex-col gap-4">
            @csrf

            @if ($tab === 'general')
                <div class="grid gap-4 rounded-xl border border-border bg-card p-4 md:grid-cols-3">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-medium text-muted-foreground">Payslip Number Prefix *</label>
                        <input type="text" name="payslip_prefix" required
                               value="{{ old('payslip_prefix', $settings->payslip_prefix) }}" placeholder="e.g. PAY"
                               class="h-9 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 font-medium text-muted-foreground">Currency</label>
                        <select name="currency" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (['KES' => 'KES — Kenya Shilling', 'USD' => 'USD — US Dollar', 'UGX' => 'UGX — Uganda Shilling', 'TZS' => 'TZS — Tanzania Shilling'] as $code => $label)
                                <option value="{{ $code }}" @selected(old('currency', $settings->currency) === $code)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-medium text-muted-foreground">Organization Name *</label>
                        <input type="text" name="org_name" required
                               value="{{ old('org_name', $settings->org_name) }}" placeholder="e.g. Greenville Academy"
                               class="h-9 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 font-medium text-muted-foreground">KRA PIN *</label>
                        <input type="text" name="kra_pin" required
                               value="{{ old('kra_pin', $settings->kra_pin) }}" placeholder="e.g. P051234567Q"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm font-mono outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-medium text-muted-foreground">NSSF Employer No</label>
                        <input type="text" name="nssf_employer_no"
                               value="{{ old('nssf_employer_no', $settings->nssf_employer_no) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm font-mono outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-medium text-muted-foreground">SHIF Employer No</label>
                        <input type="text" name="shif_employer_no"
                               value="{{ old('shif_employer_no', $settings->shif_employer_no) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm font-mono outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5 md:col-span-3">
                        <label class="text-xs font-medium text-muted-foreground">Address</label>
                        <input type="text" name="address" required
                               value="{{ old('address', $settings->address) }}"
                               class="h-9 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 md:col-span-3">
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" name="auto_approve" value="1" @checked(old('auto_approve', $settings->auto_approve))
                                   class="size-4 rounded border-input">
                            Automatically approve newly generated payroll runs
                        </label>
                    </div>
                </div>

            @elseif ($tab === 'paye')
                <div class="rounded-xl border border-border bg-card p-4">
                    <p class="text-sm font-semibold">PAYE Bands</p>
                    <p class="mt-1 text-xs text-muted-foreground">Tax is applied band by band on taxable income. Leave the upper bound blank on the final band.</p>
                    <div class="mt-3 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-2 py-2 font-medium">Lower (KES)</th>
                                    <th class="px-2 py-2 font-medium">Upper (KES, blank = above)</th>
                                    <th class="px-2 py-2 font-medium">Rate (%)</th>
                                    <th class="px-2 py-2"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($brackets as $i => $b)
                                    <tr class="border-b last:border-0">
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" name="rows[{{ $i }}][min]"
                                                   value="{{ old("rows.$i.min", $b->min) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" name="rows[{{ $i }}][max]"
                                                   value="{{ old("rows.$i.max", $b->max) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" max="100" name="rows[{{ $i }}][rate]"
                                                   value="{{ old("rows.$i.rate", $b->rate) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <span class="text-xs tabular-nums text-muted-nowrap text-muted-foreground">
                                                {{ $b->max === null ? 'No ceiling' : number_format($b->max - $b->min, 0) }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            @elseif ($tab === 'nssf')
                <div class="grid gap-4 md:grid-cols-3">
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Effective Year</label>
                        <input type="text" name="effective_year" required value="{{ old('effective_year', $nssf->effective_year) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                </div>
                <div class="rounded-xl border border-border bg-card p-4">
                    <p class="text-sm font-semibold">Contribution Tiers</p>
                    <div class="mt-3 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-2 py-2 font-medium">Tier</th>
                                    <th class="px-2 py-2 font-medium">Lower Limit (KES)</th>
                                    <th class="px-2 py-2 font-medium">Upper Limit (KES)</th>
                                    <th class="px-2 py-2 font-medium">Employee (%)</th>
                                    <th class="px-2 py-2 font-medium">Employer (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tiers as $i => $t)
                                    <tr class="border-b last:border-0">
                                        <td class="px-2 py-2">
                                            <input type="text" name="tiers[{{ $i }}][label]" required value="{{ old("tiers.$i.label", $t->label) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" name="tiers[{{ $i }}][lower_limit]"
                                                   value="{{ old("tiers.$i.lower_limit", $t->lower_limit) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" name="tiers[{{ $i }}][upper_limit]"
                                                   value="{{ old("tiers.$i.upper_limit", $t->upper_limit) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" max="100" name="tiers[{{ $i }}][employee_rate]"
                                                   value="{{ old("tiers.$i.employee_rate", $t->employee_rate) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                        <td class="px-2 py-2">
                                            <input type="number" step="0.01" min="0" max="100" name="tiers[{{ $i }}][employer_rate]"
                                                   value="{{ old("tiers.$i.employer_rate", $t->employer_rate) }}"
                                                   class="h-9 w-full rounded-lg border border-input bg-transparent px-2 text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            @elseif ($tab === 'shif')
                <div class="grid gap-4 md:grid-cols-2">
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Contribution Rate (% of gross)</label>
                        <input type="number" step="0.01" min="0" max="100" name="rate" required value="{{ old('rate', $shif->rate) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm tabular-nums outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Minimum Monthly Contribution (KES)</label>
                        <input type="number" step="0.01" min="0" name="min_monthly_contribution" required
                               value="{{ old('min_monthly_contribution', $shif->min_monthly_contribution) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm tabular-nums outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Effective Date</label>
                        <input type="date" name="effective_date" required
                               value="{{ old('effective_date', $shif->effective_date?->toDateString()) }}"
                               class="h-9 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 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Tax Treatment</label>
                        <label class="flex items-center gap-2 text-sm">
                            <input type="checkbox" name="allowable_deduction" value="1" @checked(old('allowable_deduction', $shif->allowable_deduction))
                                   class="size-4 rounded border-input">
                            Allowable for PAYE
                        </label>
                    </div>
                    <div class="rounded-xl border border-border bg-card p-4 md:col-span-2">
                        <p class="text-xs text-muted-foreground">
                            Preview on KES {{ number_format($previewGross, 2) }} gross:
                            <span class="font-medium tabular-nums">
                                {{ number_format(max($shif->min_monthly_contribution, ($previewGross * $shif->rate) / 100), 2) }}
                            </span>
                        </p>
                    </div>
                </div>

            @elseif ($tab === 'housing')
                <div class="grid gap-4 md:grid-cols-2">
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Employee Rate (%)</label>
                        <input type="number" step="0.01" min="0" max="100" name="employee_rate" required
                               value="{{ old('employee_rate', $housingLevy->employee_rate) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm tabular-nums outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Employer Rate (%)</label>
                        <input type="number" step="0.01" min="0" max="100" name="employer_rate" required
                               value="{{ old('employer_rate', $housingLevy->employer_rate) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm tabular-nums outline-none focus-visible:border-ring">
                    </div>
                </div>

            @elseif ($tab === 'pension')
                <div class="grid gap-4 md:grid-cols-3">
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Default Contribution Rate (%)</label>
                        <input type="number" step="0.01" min="0" max="100" name="default_rate" required
                               value="{{ old('default_rate', $pension->default_rate) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm tabular-nums outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Maximum Allowable (KES)</label>
                        <input type="number" step="0.01" min="0" name="max_allowable" required
                               value="{{ old('max_allowable', $pension->max_allowable) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm tabular-nums outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5 rounded-xl border border-border bg-card p-4">
                        <label class="text-xs font-medium text-muted-foreground">Fund Name</label>
                        <input type="text" name="fund_name" required value="{{ old('fund_name', $pension->fund_name) }}"
                               class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                </div>
            @endif

            <div class="flex items-center justify-end gap-2">
                <a href="{{ route('payroll.settings', ['tab' => $tab]) }}"
                   class="rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Cancel</a>
                <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Save {{ $tabs[$tab] }} Settings
                </button>
            </div>
        </form>
    </div>
@endsection