@extends('layouts.app')
@section('title', 'Payroll Settings — Statutory Rates')
@section('styles')
<style>
.rate-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px}
.rate-card.active{border-color:#5c1269;border-width:2px;background:linear-gradient(180deg,#fdfaff,#fff)}
.band-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:end}
</style>
@endsection
@section('content')

<div class="mb-3"><a href="{{ route('payroll.index') }}" class="text-xs text-gray-500 hover:underline">← Back to Payroll</a></div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    {{-- LEFT: Current rates + history --}}
    <div class="lg:col-span-1 space-y-4">
        <div>
            <h3 class="text-xs font-bold uppercase text-gray-600 mb-2">Currently Active</h3>
            @if($current)
            <div class="rate-card active">
                <p class="text-xs uppercase font-bold" style="color:#5c1269">Effective from {{ $current->effective_from->format('d M Y') }}</p>
                <table class="w-full text-xs mt-3">
                    <tr><td class="py-1 text-gray-500">Personal Relief</td><td class="text-right font-medium">{{ number_format($current->personal_relief) }}</td></tr>
                    <tr><td class="py-1 text-gray-500">SHIF Rate</td><td class="text-right font-medium">{{ number_format($current->shif_rate * 100, 2) }}% (min {{ number_format($current->shif_minimum) }})</td></tr>
                    <tr><td class="py-1 text-gray-500">NSSF Tier I / II</td><td class="text-right font-medium">{{ number_format($current->nssf_tier1_limit) }} / {{ number_format($current->nssf_tier2_limit) }}</td></tr>
                    <tr><td class="py-1 text-gray-500">NSSF Rate (E/E)</td><td class="text-right font-medium">{{ number_format($current->nssf_employee_rate * 100) }}% / {{ number_format($current->nssf_employer_rate * 100) }}%</td></tr>
                    <tr><td class="py-1 text-gray-500">NSSF Cap (E/E)</td><td class="text-right font-medium">{{ number_format($current->nssf_max_employee) }} / {{ number_format($current->nssf_max_employer) }}</td></tr>
                    <tr><td class="py-1 text-gray-500">Housing Levy</td><td class="text-right font-medium">{{ number_format($current->housing_levy_rate * 100, 2) }}% each side</td></tr>
                </table>
                <div class="mt-3 pt-3 border-t">
                    <p class="text-xs font-semibold mb-2">PAYE Bands</p>
                    @foreach($current->paye_bands as $b)
                    <div class="text-xs flex justify-between py-0.5">
                        <span class="text-gray-500">@if($b['threshold']) Up to {{ number_format($b['threshold']) }}@else Above @endif</span>
                        <span class="font-medium">{{ number_format($b['rate'] * 100, 2) }}%</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <div class="rate-card text-center text-gray-400 text-sm py-6">No rates configured</div>
            @endif
        </div>

        <div>
            <h3 class="text-xs font-bold uppercase text-gray-600 mb-2">Rate History</h3>
            <div class="space-y-2">
            @foreach($rows as $r)
                <div class="rate-card flex justify-between items-center">
                    <div>
                        <p class="text-xs font-semibold">From {{ $r->effective_from->format('d M Y') }}</p>
                        <p class="text-xs text-gray-500">{{ $r->notes ?? 'No notes' }}</p>
                    </div>
                    <form method="POST" action="{{ route('payroll.settings.delete', $r->id) }}" onsubmit="return confirm('Delete this rate set?')">@csrf @method('DELETE')
                        <button class="text-xs text-red-600 hover:underline">Delete</button>
                    </form>
                </div>
            @endforeach
            </div>
        </div>
    </div>

    {{-- RIGHT: Add new rates --}}
    <div class="lg:col-span-2 bg-white rounded-xl border p-5">
        <h3 class="text-base font-bold mb-1">Add New Statutory Rates</h3>
        <p class="text-xs text-gray-500 mb-4">Saving creates a new versioned rate set. Set <span class="font-semibold">Effective From</span> to a future date to schedule a rate change. Older rate sets remain active for historical payroll runs.</p>

        <form method="POST" action="{{ route('payroll.settings.store') }}">@csrf

            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="form-label">Effective From *</label>
                    <input type="date" name="effective_from" class="form-input" value="{{ now()->format('Y-m-d') }}" required>
                </div>
                <div>
                    <label class="form-label">Personal Relief (KES/month)</label>
                    <input type="number" step="0.01" min="0" name="personal_relief" class="form-input" value="2400" required>
                </div>
            </div>

            {{-- PAYE Bands --}}
            <h4 class="text-xs font-bold uppercase text-gray-600 mb-2 mt-4">PAYE Bands (Progressive)</h4>
            <p class="text-xs text-gray-500 mb-2">Leave the threshold blank for the top band.</p>
            <div id="bands-list">
                <div class="band-row">
                    <div><label class="form-label">Up to (KES)</label><input type="number" step="0.01" min="0" name="paye_thresholds[]" class="form-input" value="24000"></div>
                    <div><label class="form-label">Rate (decimal)</label><input type="number" step="0.0001" min="0" max="1" name="paye_rates[]" class="form-input" value="0.10" required></div>
                    <button type="button" onclick="this.parentElement.remove()" class="btn-danger text-xs">×</button>
                </div>
                <div class="band-row">
                    <div><input type="number" step="0.01" min="0" name="paye_thresholds[]" class="form-input" value="32333"></div>
                    <div><input type="number" step="0.0001" min="0" max="1" name="paye_rates[]" class="form-input" value="0.25" required></div>
                    <button type="button" onclick="this.parentElement.remove()" class="btn-danger text-xs">×</button>
                </div>
                <div class="band-row">
                    <div><input type="number" step="0.01" min="0" name="paye_thresholds[]" class="form-input" value="500000"></div>
                    <div><input type="number" step="0.0001" min="0" max="1" name="paye_rates[]" class="form-input" value="0.30" required></div>
                    <button type="button" onclick="this.parentElement.remove()" class="btn-danger text-xs">×</button>
                </div>
                <div class="band-row">
                    <div><input type="number" step="0.01" min="0" name="paye_thresholds[]" class="form-input" value="800000"></div>
                    <div><input type="number" step="0.0001" min="0" max="1" name="paye_rates[]" class="form-input" value="0.325" required></div>
                    <button type="button" onclick="this.parentElement.remove()" class="btn-danger text-xs">×</button>
                </div>
                <div class="band-row">
                    <div><input type="number" step="0.01" min="0" name="paye_thresholds[]" class="form-input" placeholder="(top band — blank)"></div>
                    <div><input type="number" step="0.0001" min="0" max="1" name="paye_rates[]" class="form-input" value="0.35" required></div>
                    <button type="button" onclick="this.parentElement.remove()" class="btn-danger text-xs">×</button>
                </div>
            </div>
            <button type="button" onclick="addBand()" class="btn-secondary text-xs mb-4">+ Add Band</button>

            {{-- SHIF --}}
            <h4 class="text-xs font-bold uppercase text-gray-600 mb-2 mt-4">SHIF / SHA</h4>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div><label class="form-label">SHIF Rate (decimal)</label><input type="number" step="0.0001" min="0" max="1" name="shif_rate" class="form-input" value="0.0275" required></div>
                <div><label class="form-label">SHIF Minimum (KES)</label><input type="number" step="0.01" min="0" name="shif_minimum" class="form-input" value="300" required></div>
            </div>

            {{-- NSSF --}}
            <h4 class="text-xs font-bold uppercase text-gray-600 mb-2 mt-4">NSSF</h4>
            <div class="grid grid-cols-3 gap-3 mb-3">
                <div><label class="form-label">Tier I Limit</label><input type="number" step="0.01" min="0" name="nssf_tier1_limit" class="form-input" value="9000" required></div>
                <div><label class="form-label">Tier II Limit</label><input type="number" step="0.01" min="0" name="nssf_tier2_limit" class="form-input" value="108000" required></div>
                <div><label class="form-label">Penalty Rate (decimal)</label><input type="number" step="0.0001" min="0" max="1" name="penalty_rate" class="form-input" value="0.05" required></div>
            </div>
            <div class="grid grid-cols-2 gap-3 mb-3">
                <div><label class="form-label">Employee Rate (decimal)</label><input type="number" step="0.0001" min="0" max="1" name="nssf_employee_rate" class="form-input" value="0.06" required></div>
                <div><label class="form-label">Employer Rate (decimal)</label><input type="number" step="0.0001" min="0" max="1" name="nssf_employer_rate" class="form-input" value="0.06" required></div>
            </div>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div><label class="form-label">Max Employee (KES/month)</label><input type="number" step="0.01" min="0" name="nssf_max_employee" class="form-input" value="6480" required></div>
                <div><label class="form-label">Max Employer (KES/month)</label><input type="number" step="0.01" min="0" name="nssf_max_employer" class="form-input" value="6480" required></div>
            </div>

            {{-- AHL --}}
            <h4 class="text-xs font-bold uppercase text-gray-600 mb-2 mt-4">Affordable Housing Levy</h4>
            <div class="mb-4">
                <label class="form-label">Rate (decimal — applied to employee AND employer)</label>
                <input type="number" step="0.0001" min="0" max="1" name="housing_levy_rate" class="form-input" value="0.015" required>
            </div>

            {{-- Due Days --}}
            <h4 class="text-xs font-bold uppercase text-gray-600 mb-2 mt-4">Statutory Due Days (Day of Following Month)</h4>
            <div class="grid grid-cols-3 md:grid-cols-5 gap-3 mb-4">
                <div><label class="form-label">PAYE</label><input type="number" min="1" max="28" name="paye_due_day" class="form-input" value="9" required></div>
                <div><label class="form-label">SHIF</label><input type="number" min="1" max="28" name="shif_due_day" class="form-input" value="9" required></div>
                <div><label class="form-label">NSSF</label><input type="number" min="1" max="28" name="nssf_due_day" class="form-input" value="9" required></div>
                <div><label class="form-label">AHL</label><input type="number" min="1" max="28" name="ahl_due_day" class="form-input" value="9" required></div>
                <div><label class="form-label">HELB</label><input type="number" min="1" max="28" name="helb_due_day" class="form-input" value="15" required></div>
            </div>

            <div class="mb-4">
                <label class="form-label">Notes</label>
                <textarea name="notes" class="form-input" rows="2" placeholder="e.g. Aligned with Finance Act 2024 effective Dec 27, 2024"></textarea>
            </div>

            <div class="flex justify-end gap-2 border-t pt-4">
                <button type="submit" class="btn-primary">Save Statutory Rates</button>
            </div>
        </form>
    </div>
</div>

<script>
function addBand() {
    const list = document.getElementById('bands-list');
    const div = document.createElement('div');
    div.className = 'band-row';
    div.innerHTML = `
        <div><input type="number" step="0.01" min="0" name="paye_thresholds[]" class="form-input" placeholder="threshold or blank for top"></div>
        <div><input type="number" step="0.0001" min="0" max="1" name="paye_rates[]" class="form-input" placeholder="rate" required></div>
        <button type="button" onclick="this.parentElement.remove()" class="btn-danger text-xs">×</button>
    `;
    list.appendChild(div);
}
</script>
@endsection