@php
    $settings = $settings ?? [];
    $payDay = $settings['payroll_pay_day'] ?? 'last_day';
    $rounding = $settings['payroll_rounding_mode'] ?? 'nearest_rupee';
    $lopBasis = $settings['payroll_lop_basis'] ?? 'gross';
    $wd = $settings['payroll_working_days_source'] ?? 'weekday_minus_holidays';
@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-teal-50/60 via-white to-sky-50/40 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-teal-100 text-teal-700">
                <i class="bi bi-gear-wide-connected text-lg"></i>
            </span>
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Setup</p>
                <h2 class="mt-0.5 text-lg font-semibold text-slate-900">Payroll Settings</h2>
                <p class="mt-1 text-sm text-slate-500">Company-level payroll policy used during payroll runs.</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' => 'payroll_settings']) }}">

        <div class="grid max-w-6xl gap-5 sm:grid-cols-2 lg:grid-cols-4">
            <div class="sm:col-span-2 rounded-2xl border border-slate-200/80 bg-slate-50/50 p-4">
                <label class="block text-sm font-semibold text-slate-800">
                    <i class="bi bi-currency-exchange mr-1 text-teal-600"></i> Currency
                </label>
                <input type="text" name="payroll_currency" value="{{ $settings['payroll_currency'] ?? 'INR' }}"
                       class="mt-2 w-40 rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-0">
                <p class="mt-1.5 text-xs text-slate-500">Default: INR. Used on payslips and payroll summaries.</p>
            </div>

            <div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm">
                <label class="block text-sm font-semibold text-slate-800">
                    <i class="bi bi-calendar3 mr-1 text-sky-600"></i> Pay day
                </label>
                <select name="payroll_pay_day" class="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm js-select2">
                    <option value="last_day" {{ $payDay === 'last_day' ? 'selected' : '' }}>Last day of month</option>
                    @foreach(range(1, 28) as $d)
                        <option value="{{ $d }}" {{ (string) $payDay === (string) $d ? 'selected' : '' }}>{{ $d }}</option>
                    @endforeach
                </select>
                <p class="mt-1.5 text-xs text-slate-500">Target day salaries are paid each month.</p>
            </div>

            <div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm">
                <label class="block text-sm font-semibold text-slate-800">
                    <i class="bi bi-arrows-collapse mr-1 text-violet-600"></i> Rounding mode
                </label>
                <select name="payroll_rounding_mode" class="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm js-select2">
                    <option value="nearest_rupee" {{ $rounding === 'nearest_rupee' ? 'selected' : '' }}>Nearest ₹1</option>
                    <option value="nearest_0_05" {{ $rounding === 'nearest_0_05' ? 'selected' : '' }}>Nearest ₹0.05</option>
                </select>
                <p class="mt-1.5 text-xs text-slate-500">How net pay amounts are rounded.</p>
            </div>

            <div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm">
                <label class="block text-sm font-semibold text-slate-800">
                    <i class="bi bi-slash-circle mr-1 text-amber-600"></i> LOP basis
                </label>
                <select name="payroll_lop_basis" class="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm js-select2">
                    <option value="gross" {{ $lopBasis === 'gross' ? 'selected' : '' }}>Gross</option>
                    <option value="basic" {{ $lopBasis === 'basic' ? 'selected' : '' }}>Basic</option>
                    <option value="earned_gross" {{ $lopBasis === 'earned_gross' ? 'selected' : '' }}>Earned Gross</option>
                </select>
                <p class="mt-1.5 text-xs text-slate-500">Salary base used when calculating loss of pay.</p>
            </div>

            <div class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm">
                <label class="block text-sm font-semibold text-slate-800">
                    <i class="bi bi-calendar-week mr-1 text-rose-600"></i> Working days source
                </label>
                <select name="payroll_working_days_source" class="mt-2 w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm js-select2">
                    <option value="weekday_minus_holidays" {{ $wd === 'weekday_minus_holidays' ? 'selected' : '' }}>Weekoff rules minus holidays</option>
                    <option value="shift_calendar" {{ $wd === 'shift_calendar' ? 'selected' : '' }}>Shift calendar (planned)</option>
                </select>
                <p class="mt-1.5 text-xs text-slate-500">
                    Each employee&apos;s assigned
                    <a href="{{ route('weekoff-rules.index', ['tab' => 'assign']) }}" class="font-medium text-primary hover:underline">Weekoff Rule</a>
                    defines weekly offs. Holidays are excluded. Join/exit dates prorate salary within the month.
                </p>
            </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>
            <a href="{{ route('payroll.index', ['tab' => 'run']) }}" class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
                Back to Run Payroll
            </a>
        </div>
    </form>
</div>