<div class="space-y-5">
    @php
        $ctx = $runContext ?? [];
        $runTab = app(\App\Services\Payroll\PayrollRunTabService::class);
        $currency = $ctx['currency'] ?? config('app.currency_symbol', '₹');
        $runSummary = $ctx['summary'] ?? [];
        $workflow = $ctx['workflow'] ?? [];
        $readiness = $ctx['readiness'] ?? [];
        $cycleReady = ! empty($cycle->id);
        $canRunActions = $cycleReady && empty($isFutureMonth) && $cycle->canEdit();
        $periodLabel = $ctx['period_label'] ?? '';
        $cycleStatus = $cycle->status ?? 'draft';
        $monthName = date('F', mktime(0, 0, 0, $month, 1));
        $statusBadge = match (true) {
            ! empty($isFutureMonth) => ['Future', 'bg-slate-100 text-slate-700 ring-slate-200'],
            $cycle->isLocked() => ['Locked', 'bg-slate-200 text-slate-800 ring-slate-300'],
            $cycleCompleted => ['Completed', 'bg-emerald-100 text-emerald-800 ring-emerald-200'],
            $cycleStatus === 'processing' => ['Processing', 'bg-sky-100 text-sky-800 ring-sky-200'],
            ($runSummary['calculated'] ?? 0) > 0 => ['In review', 'bg-amber-100 text-amber-800 ring-amber-200'],
            default => ['Not calculated', 'bg-slate-100 text-slate-600 ring-slate-200'],
        };
    @endphp

    {{-- Period navigator --}}
    <div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
        <div class="flex flex-wrap items-center 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-4">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Payroll cycle</p>
                <div class="mt-1 flex flex-wrap items-center gap-3">
                    <h2 class="text-xl font-semibold text-slate-900">{{ $periodLabel ?: ($monthName.' '.$year) }}</h2>
                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 {{ $statusBadge[1] }}">{{ $statusBadge[0] }}</span>
                    @if($cycle->completed_at)
                        <span class="text-xs text-slate-500">Completed {{ $cycle->completed_at->format('d M Y, H:i') }}</span>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-2 py-1.5 shadow-sm">
                <a href="{{ route('payroll.index', array_merge(['tab' => 'run', 'year' => $year - 1, 'month' => $month], $filters)) }}"
                   class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition hover:bg-slate-100 hover:text-slate-800"
                   aria-label="Previous year">
                    <i class="bi bi-chevron-left"></i>
                </a>
                <span class="min-w-[3.5rem] text-center text-sm font-semibold text-slate-900">{{ $year }}</span>
                <a href="{{ route('payroll.index', array_merge(['tab' => 'run', 'year' => $year + 1, 'month' => $month], $filters)) }}"
                   class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition hover:bg-slate-100 hover:text-slate-800"
                   aria-label="Next year">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </div>
        </div>

        <div class="px-5 py-4">
            <div class="flex flex-wrap gap-2">
                @foreach(range(1, 12) as $m)
                    @php
                        $status = $monthStatuses[$m] ?? 'pending';
                        $isActive = (int) $month === $m;
                        $dotClass = $status === 'completed' ? 'bg-emerald-500' : ($status === 'current' ? 'bg-orange-500' : ($status === 'future' ? 'bg-slate-300' : 'bg-amber-500'));
                    @endphp
                    <a href="{{ route('payroll.index', array_merge(['tab' => 'run', 'year' => $year, 'month' => $m], $filters)) }}"
                       class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition {{ $isActive ? 'bg-primary text-white shadow-sm' : 'border border-slate-200 bg-white text-slate-700 hover:border-teal-200 hover:bg-teal-50/60 hover:text-teal-800' }}">
                        <span class="h-2 w-2 shrink-0 rounded-full {{ $isActive ? 'bg-white' : $dotClass }}"></span>
                        {{ date('M', mktime(0, 0, 0, $m, 1)) }}
                    </a>
                @endforeach
            </div>
            <div class="mt-3 flex flex-wrap items-center gap-4 text-xs text-slate-500">
                <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-500"></span> Done</span>
                <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-500"></span> Open</span>
                <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-slate-300"></span> Future</span>
            </div>
        </div>
    </div>

    {{-- Actions + workflow --}}
    <div class="rounded-2xl border border-slate-200/80 bg-white shadow-sm">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
            <div>
                <p class="text-sm font-semibold text-slate-900">Run workspace</p>
                <p class="text-xs text-slate-500">Calculate, review, finalize, and export this cycle.</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                @if($canRunActions)
                    <form action="{{ route('payroll.cycles.run', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Recalculate payroll for all eligible employees?');">
                        @csrf
                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-primary-hover">
                            <i class="bi bi-calculator"></i> Calculate payroll
                        </button>
                    </form>
                    @if(! $cycleCompleted && ($runSummary['calculated'] ?? 0) > 0)
                        <form action="{{ route('payroll.cycles.complete', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Mark this month as complete? Payslips will be finalized for payout.');">
                            @csrf
                            <button type="submit" class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-800 transition hover:bg-emerald-100">
                                <i class="bi bi-check2-circle"></i> Mark complete
                            </button>
                        </form>
                    @endif
                @endif
                @if($cycleReady && $cycle->status === 'completed' && ! $cycle->isLocked())
                    <form action="{{ route('payroll.cycles.lock', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Lock this cycle? No further edits will be allowed.');">
                        @csrf
                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
                            <i class="bi bi-lock"></i> Lock cycle
                        </button>
                    </form>
                @endif
                @if($cycleReady && $cycle->isLocked())
                    <form action="{{ route('payroll.cycles.unlock', $cycle) }}" method="POST" class="inline" onsubmit="return confirm('Unlock this cycle? Use with caution.');">
                        @csrf
                        <button type="submit" class="inline-flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100">
                            <i class="bi bi-unlock"></i> Unlock
                        </button>
                    </form>
                @endif
                @if($cycleReady && $payrolls->total() > 0)
                    <a href="{{ route('payroll.cycles.export', $cycle) }}" class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
                        <i class="bi bi-download"></i> Export
                    </a>
                    <a href="{{ route('payroll.cycles.bank-export', $cycle) }}" class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-3.5 py-2 text-sm font-medium text-emerald-800 transition hover:bg-emerald-100">
                        <i class="bi bi-bank"></i> NEFT file
                    </a>
                @endif
            </div>
        </div>

        @if(count($workflow) > 0)
            <div class="border-b border-slate-100 px-5 py-4">
                <ol class="flex flex-wrap items-center gap-2">
                    @foreach($workflow as $index => $step)
                        @php
                            $stepClass = match ($step['state'] ?? '') {
                                'done' => 'bg-emerald-50 text-emerald-800 ring-emerald-200',
                                'current' => 'bg-teal-50 text-teal-800 ring-teal-300',
                                default => 'bg-slate-50 text-slate-500 ring-slate-200',
                            };
                        @endphp
                        <li class="flex items-center gap-2">
                            <div class="flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold ring-1 {{ $stepClass }}" title="{{ $step['hint'] ?? '' }}">
                                @if(($step['state'] ?? '') === 'done')
                                    <i class="bi bi-check-lg"></i>
                                @elseif(($step['state'] ?? '') === 'current')
                                    <span class="h-1.5 w-1.5 rounded-full bg-current"></span>
                                @else
                                    <span class="flex h-4 w-4 items-center justify-center rounded-full bg-slate-200 text-[10px] text-slate-600">{{ $index + 1 }}</span>
                                @endif
                                {{ $step['label'] }}
                            </div>
                            @if($index < count($workflow) - 1)
                                <i class="bi bi-chevron-right text-xs text-slate-300"></i>
                            @endif
                        </li>
                    @endforeach
                </ol>
            </div>
        @endif

        @foreach($readiness as $alert)
            <div class="mx-5 mt-4 rounded-xl border px-4 py-3 text-sm {{ ($alert['type'] ?? '') === 'warning' ? 'border-amber-200 bg-amber-50 text-amber-900' : 'border-sky-200 bg-sky-50 text-sky-900' }}">
                <div class="flex gap-2">
                    <i class="bi {{ ($alert['type'] ?? '') === 'warning' ? 'bi-exclamation-triangle' : 'bi-info-circle' }} mt-0.5 shrink-0"></i>
                    <div>
                        {{ $alert['message'] }}
                        @if(! empty($ctx['missing_bank_preview']))
                            <p class="mt-1 text-xs opacity-90">Examples: {{ implode(', ', $ctx['missing_bank_preview']) }}@if(($runSummary['missing_bank_count'] ?? 0) > 5) … @endif</p>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach

        {{-- KPI cards --}}
        <div class="grid gap-4 p-5 sm:grid-cols-2 xl:grid-cols-5">
            <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-sky-50/40 to-slate-50 p-4 pl-5 shadow-sm">
                <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-sky-500" aria-hidden="true"></span>
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-sky-100 text-sky-600">
                        <i class="bi bi-people"></i>
                    </span>
                    <div class="min-w-0">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Eligible</p>
                        <p class="mt-1 text-2xl font-bold tabular-nums text-slate-900">{{ $runSummary['eligible'] ?? 0 }}</p>
                    </div>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-emerald-50/40 to-slate-50 p-4 pl-5 shadow-sm">
                <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-emerald-500" aria-hidden="true"></span>
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
                        <i class="bi bi-check2-all"></i>
                    </span>
                    <div class="min-w-0">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Calculated</p>
                        <p class="mt-1 text-2xl font-bold tabular-nums text-emerald-700">{{ $runSummary['calculated'] ?? 0 }}</p>
                    </div>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-slate-50 to-white p-4 pl-5 shadow-sm">
                <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-slate-400" aria-hidden="true"></span>
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-600">
                        <i class="bi bi-cash-stack"></i>
                    </span>
                    <div class="min-w-0">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Gross payout</p>
                        <p class="mt-1 truncate text-xl font-bold tabular-nums text-slate-900">{{ $currency }}{{ number_format($runSummary['gross_payroll'] ?? 0, 2) }}</p>
                    </div>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 bg-gradient-to-br from-white via-rose-50/30 to-slate-50 p-4 pl-5 shadow-sm">
                <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-rose-500" aria-hidden="true"></span>
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-rose-600">
                        <i class="bi bi-dash-circle"></i>
                    </span>
                    <div class="min-w-0">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Deductions</p>
                        <p class="mt-1 truncate text-xl font-bold tabular-nums text-rose-700">{{ $currency }}{{ number_format($runSummary['total_deductions'] ?? 0, 2) }}</p>
                    </div>
                </div>
            </div>
            <div class="relative overflow-hidden rounded-2xl border border-violet-200/70 bg-gradient-to-br from-white via-violet-50/40 to-slate-50 p-4 pl-5 shadow-sm">
                <span class="absolute inset-y-0 left-0 w-1.5 rounded-l-2xl bg-violet-500" aria-hidden="true"></span>
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-violet-100 text-violet-600">
                        <i class="bi bi-wallet2"></i>
                    </span>
                    <div class="min-w-0">
                        <p class="text-xs font-semibold uppercase tracking-wider text-violet-700">Net payout</p>
                        <p class="mt-1 truncate text-xl font-bold tabular-nums text-violet-900">{{ $currency }}{{ number_format($runSummary['net_payroll'] ?? 0, 2) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters + table --}}
    <div id="payroll-run-filters" class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm scroll-mt-24">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
            <div>
                <p class="text-sm font-semibold text-slate-900">Employee payroll</p>
                <p class="text-xs text-slate-500">{{ $payrolls->total() }} row(s) in this cycle</p>
            </div>
            <form
                method="GET"
                action="{{ route('payroll.index') }}#payroll-run-filters"
                class="flex flex-1 flex-nowrap items-center justify-end gap-2 sm:max-w-3xl"
                id="payroll-run-filter-form"
                onsubmit="try { sessionStorage.setItem('payroll-run-scroll', String(window.scrollY || window.pageYOffset || 0)); } catch (e) {}"
            >
                <input type="hidden" name="tab" value="run">
                <input type="hidden" name="year" value="{{ $year }}">
                <input type="hidden" name="month" value="{{ $month }}">
                <div class="relative min-w-[12rem] flex-1">
                    <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="search" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search name or email…"
                           class="w-full rounded-full border border-slate-200 bg-slate-50/80 py-2 pl-9 pr-3 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-0">
                </div>
                <select name="department" class="rounded-full border border-slate-200 bg-slate-50/80 py-2 pl-3 pr-8 text-sm js-select2" style="min-width: 160px;" onchange="try { sessionStorage.setItem('payroll-run-scroll', String(window.scrollY || window.pageYOffset || 0)); } catch (e) {} this.form.submit()">
                    <option value="">All departments</option>
                    @foreach($departments as $d)
                        <option value="{{ $d->id }}" {{ ($filters['department'] ?? '') == (string) $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                    @endforeach
                </select>
                <select name="status" class="rounded-full border border-slate-200 bg-slate-50/80 py-2 pl-3 pr-8 text-sm js-select2" style="min-width: 140px;" onchange="try { sessionStorage.setItem('payroll-run-scroll', String(window.scrollY || window.pageYOffset || 0)); } catch (e) {} this.form.submit()">
                    <option value="">All rows</option>
                    <option value="pending" {{ ($filters['status'] ?? '') === 'pending' ? 'selected' : '' }}>Not finalized</option>
                    <option value="paid" {{ ($filters['status'] ?? '') === 'paid' ? 'selected' : '' }}>Finalized month</option>
                </select>
                <button type="submit" class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50">
                    <i class="bi bi-funnel"></i> Filter
                </button>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50/80">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Employee</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Department</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Gross</th>
                        <th class="hidden px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500 md:table-cell">Deductions</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Net</th>
                        <th class="hidden px-4 py-3 text-center text-xs font-semibold uppercase tracking-wide text-slate-500 lg:table-cell">Days</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th>
                        <th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse($payrolls as $p)
                        @php
                            $deductionsSum = (float) ($p->total_deductions ?? abs($p->components->where('category', 'deduction')->sum('amount')));
                            $empId = $p->user?->employee_number ?? 'EMP' . str_pad((string) ($p->user_id ?? 0), 3, '0', STR_PAD_LEFT);
                            $statusLabel = $runTab->employeeStatusLabel($cycle, $p->status);
                            $statusVariant = $runTab->employeeStatusVariant($cycle, $p->status);
                            $badgeClass = match ($statusVariant) {
                                'success' => 'bg-emerald-100 text-emerald-800 ring-emerald-200',
                                'info' => 'bg-sky-100 text-sky-800 ring-sky-200',
                                'neutral' => 'bg-slate-100 text-slate-700 ring-slate-200',
                                default => 'bg-amber-100 text-amber-800 ring-amber-200',
                            };
                            $missingBank = $p->user && ((float) $p->net_monthly > 0) && (empty($p->user->account_number) || empty($p->user->ifsc_code));
                        @endphp
                        <tr class="transition hover:bg-teal-50/30">
                            <td class="whitespace-nowrap px-5 py-3.5">
                                <div class="flex items-center gap-3">
                                    @if($p->user)<x-user-avatar :user="$p->user" size="sm" class="shrink-0" />@endif
                                    <div>
                                        <p class="font-medium text-slate-900">{{ $p->user?->name ?? '—' }}</p>
                                        <p class="text-xs text-slate-500">{{ $empId }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-sm text-slate-600">{{ $p->user?->department?->name ?? '—' }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-right text-sm tabular-nums text-slate-700">{{ $currency }}{{ number_format((float) ($p->gross_monthly ?? 0), 2) }}</td>
                            <td class="hidden whitespace-nowrap px-4 py-3.5 text-right text-sm tabular-nums text-rose-700 md:table-cell">{{ $currency }}{{ number_format($deductionsSum, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3.5 text-right text-sm font-semibold tabular-nums text-slate-900">{{ $currency }}{{ number_format($p->net_monthly ?? 0, 2) }}</td>
                            <td class="hidden whitespace-nowrap px-4 py-3.5 text-center text-xs text-slate-600 lg:table-cell">
                                <span class="rounded-full bg-slate-100 px-2 py-0.5 font-medium">{{ (int) ($p->paid_days ?? 0) }}/{{ (int) ($p->working_days ?? 0) }}</span>
                                @if((float) ($p->lop_days ?? 0) > 0)
                                    <span class="mt-1 block text-amber-600">LOP {{ number_format((float) $p->lop_days, 1) }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-4 py-3.5">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 {{ $badgeClass }}">{{ $statusLabel }}</span>
                                @if($missingBank)
                                    <span class="mt-1 flex items-center gap-1 text-xs text-amber-600" title="Missing bank details for NEFT">
                                        <i class="bi bi-exclamation-circle"></i> No bank
                                    </span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-5 py-3.5 text-right text-sm">
                                @if($cycleReady)
                                    <div class="inline-flex items-center gap-1">
                                        <a href="{{ route('payroll.cycles.payslips.show', [$cycle, $p]) }}"
                                           class="inline-flex items-center gap-1 rounded-full border border-teal-200 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-800 transition hover:bg-teal-100">
                                            <i class="bi bi-file-earmark-text"></i> Payslip
                                        </a>
                                        <a href="{{ route('payroll.cycles.employees.show', [$cycle, $p]) }}"
                                           class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-medium text-slate-600 transition hover:bg-slate-50">
                                            Details
                                        </a>
                                    </div>
                                @else
                                    —
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-14 text-center">
                                <div class="mx-auto max-w-md">
                                    <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
                                        <i class="bi bi-people text-2xl"></i>
                                    </span>
                                    <p class="mt-4 text-sm font-semibold text-slate-800">No payroll rows for this month</p>
                                    <p class="mt-1 text-sm text-slate-500">
                                        @if($canRunActions)
                                            Click <strong>Calculate payroll</strong> to process eligible employees for {{ $monthName }} {{ $year }}.
                                        @elseif(! empty($isFutureMonth))
                                            Select the current month or an earlier period.
                                        @else
                                            Check employee eligibility (joining date, active status, salary setup).
                                        @endif
                                    </p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($payrolls->hasPages())
            <div class="border-t border-slate-100 bg-slate-50/60 px-5 py-3">{{ $payrolls->links() }}</div>
        @endif
    </div>
</div>

<script>
    (function () {
        function restorePayrollRunScroll() {
            var saved = null;
            try {
                saved = sessionStorage.getItem('payroll-run-scroll');
                if (saved !== null) {
                    sessionStorage.removeItem('payroll-run-scroll');
                }
            } catch (e) {}

            var target = document.getElementById('payroll-run-filters');
            if (saved !== null) {
                var y = parseInt(saved, 10);
                if (!Number.isNaN(y)) {
                    window.scrollTo(0, y);
                    return;
                }
            }

            if (window.location.hash === '#payroll-run-filters' && target) {
                target.scrollIntoView({ block: 'start' });
            }
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function () {
                requestAnimationFrame(restorePayrollRunScroll);
            });
        } else {
            requestAnimationFrame(restorePayrollRunScroll);
        }
    })();
</script>
