@php
    $settings = $settings ?? [];
@endphp

<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
    <div class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-100 bg-gradient-to-r from-sky-50/50 via-white to-violet-50/30 px-5 py-5">
        <div class="flex items-start gap-3">
            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sky-100 text-sky-700">
                <i class="bi bi-journal-check text-lg"></i>
            </span>
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Tax</p>
                <h2 class="mt-0.5 text-lg font-semibold text-slate-900">Declaration Settings</h2>
                <p class="mt-1 text-sm text-slate-500">Configure declaration window and proof submission requirements.</p>
            </div>
        </div>
    </div>

    <form action="{{ route('payroll.settings.store') }}" method="post" class="p-5">
        @csrf
        <input type="hidden" name="redirect_to" value="{{ route('payroll.index', ['tab' => request('tab', 'advanced'), 'sub' => 'declaration_settings']) }}">

        <div class="grid max-w-4xl gap-5">
            <div class="rounded-2xl border border-slate-200/80 bg-slate-50/40 p-5 space-y-4">
                <label class="flex items-center gap-2">
                    <input type="hidden" name="payroll_declaration_window_enabled" value="0">
                    <input type="checkbox" name="payroll_declaration_window_enabled" value="1" {{ ($settings['payroll_declaration_window_enabled'] ?? '0') === '1' ? 'checked' : '' }} class="rounded border-slate-300 text-primary focus:ring-primary">
                    <span class="text-sm font-medium text-slate-700">Enable declaration window</span>
                </label>

                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-800">Monthly window: From day</label>
                        <input type="number" name="declaration_from_day" min="1" max="31" value="{{ $settings['declaration_from_day'] ?? 1 }}" class="mt-1.5 w-32 rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-0">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-800">Monthly window: To day</label>
                        <input type="number" name="declaration_to_day" min="1" max="31" value="{{ $settings['declaration_to_day'] ?? 25 }}" class="mt-1.5 w-32 rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-0">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-800">Yearly window: Start date</label>
                        <input type="date" name="declaration_year_from" value="{{ $settings['declaration_year_from'] ?? '' }}" class="mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-0">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-800">Yearly window: End date</label>
                        <input type="date" name="declaration_year_to" value="{{ $settings['declaration_year_to'] ?? '' }}" class="mt-1.5 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-0">
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm space-y-4">
                <label class="flex items-center gap-2">
                    <input type="hidden" name="proof_mandatory" value="0">
                    <input type="checkbox" name="proof_mandatory" value="1" {{ ($settings['proof_mandatory'] ?? '0') === '1' ? 'checked' : '' }} class="rounded border-slate-300 text-primary focus:ring-primary">
                    <span class="text-sm font-medium text-slate-700">Mandatory proof submission</span>
                </label>

                <label class="flex items-center gap-2">
                    <input type="hidden" name="payroll_tds_enabled" value="0">
                    <input type="checkbox" name="payroll_tds_enabled" value="1" {{ ($settings['payroll_tds_enabled'] ?? '0') === '1' ? 'checked' : '' }} class="rounded border-slate-300 text-primary focus:ring-primary">
                    <span class="text-sm font-medium text-slate-700">Enable monthly TDS deduction in payroll run</span>
                </label>

                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-800">Income tax plan — Old regime</label>
                        <select name="income_tax_plan_old_id" class="mt-1.5 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm js-select2">
                            <option value="">— Auto-detect —</option>
                            @foreach($incomeTaxPlans ?? [] as $plan)
                                <option value="{{ $plan->id }}" {{ (string) ($settings['income_tax_plan_old_id'] ?? '') === (string) $plan->id ? 'selected' : '' }}>{{ $plan->plan_name }} ({{ $plan->plan_code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-800">Income tax plan — New regime</label>
                        <select name="income_tax_plan_new_id" class="mt-1.5 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm js-select2">
                            <option value="">— Auto-detect —</option>
                            @foreach($incomeTaxPlans ?? [] as $plan)
                                <option value="{{ $plan->id }}" {{ (string) ($settings['income_tax_plan_new_id'] ?? '') === (string) $plan->id ? 'selected' : '' }}>{{ $plan->plan_name }} ({{ $plan->plan_code }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-6 flex flex-wrap gap-2 border-t border-slate-100 pt-5">
            <button type="submit" class="inline-flex items-center gap-1.5 rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-primary-hover">
                <i class="bi bi-check-lg"></i> Save settings
            </button>
        </div>
    </form>
</div>