@extends('layouts.app')

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

@section('content')
    <x-card>
        <p class="mb-4 text-slate-600">Configure deductions and rules used during payroll generation.</p>
        <form action="{{ route('payroll.settings.store') }}" method="post" class="max-w-xl space-y-4">
            @csrf
            <div id="pf-esi" class="space-y-4">
            <div class="space-y-2">
                <label class="flex items-center gap-2">
                    <input type="hidden" name="payroll_pf_enabled" value="0">
                    <input type="checkbox" name="payroll_pf_enabled" value="1" {{ ($settings['payroll_pf_enabled'] ?? '0') === '1' ? 'checked' : '' }} class="rounded border-slate-300">
                    <span class="text-sm font-medium text-slate-700">Enable PF (Provident Fund) deduction</span>
                </label>
                <div class="ml-6 flex flex-wrap gap-4 text-sm">
                    <label>Rate % <input type="number" name="payroll_pf_rate" step="0.01" min="0" max="100" value="{{ $settings['payroll_pf_rate'] ?? '12' }}" class="w-20 rounded border border-slate-300 px-2 py-1"></label>
                    <label>Cap (basic) <input type="number" name="payroll_pf_cap" min="0" value="{{ $settings['payroll_pf_cap'] ?? '15000' }}" class="w-24 rounded border border-slate-300 px-2 py-1"></label>
                </div>
            </div>
            <div class="space-y-2">
                <label class="flex items-center gap-2">
                    <input type="hidden" name="payroll_esi_enabled" value="0">
                    <input type="checkbox" name="payroll_esi_enabled" value="1" {{ ($settings['payroll_esi_enabled'] ?? '0') === '1' ? 'checked' : '' }} class="rounded border-slate-300">
                    <span class="text-sm font-medium text-slate-700">Enable ESI deduction</span>
                </label>
                <div class="ml-6 flex flex-wrap gap-4 text-sm">
                    <label>Rate % <input type="number" name="payroll_esi_rate" step="0.01" min="0" max="100" value="{{ $settings['payroll_esi_rate'] ?? '0.75' }}" class="w-20 rounded border border-slate-300 px-2 py-1"></label>
                    <label>Wage cap <input type="number" name="payroll_esi_cap" min="0" value="{{ $settings['payroll_esi_cap'] ?? '21000' }}" class="w-24 rounded border border-slate-300 px-2 py-1"></label>
                </div>
            </div>
            </div>
            <div id="pt" class="space-y-2">
                <label class="flex items-center gap-2">
                    <input type="hidden" name="payroll_pt_enabled" value="0">
                    <input type="checkbox" name="payroll_pt_enabled" value="1" {{ ($settings['payroll_pt_enabled'] ?? '0') === '1' ? 'checked' : '' }} class="rounded border-slate-300">
                    <span class="text-sm font-medium text-slate-700">Enable Professional Tax</span>
                </label>
                <div class="ml-6 flex flex-wrap gap-4 text-sm">
                    <label>Amount <input type="number" name="payroll_pt_amount" min="0" value="{{ $settings['payroll_pt_amount'] ?? '200' }}" class="w-24 rounded border border-slate-300 px-2 py-1"></label>
                </div>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white">Save</button>
                <a href="{{ route('payroll.index') }}" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Back to Payroll</a>
            </div>
        </form>
    </x-card>
@endsection