@extends('garage.layouts.app')

@section('title', 'Payroll run')

@section('content')
@include('garage.hr.styles')

<div class="container-fluid px-3 py-3 hrx-page">
    <div class="hrx-head mb-3">
        <div>
            <div class="h4 mb-0 hrx-title">Payroll run</div>
            <div class="small hrx-sub">Month: <strong>{{ $run->month }}</strong></div>
        </div>
        <div class="d-flex flex-wrap gap-2 hrx-actions-bar">
            <a class="btn btn-sm btn-outline-dark" href="{{ route('garage.payroll.run.export.excel', $run->id) }}">
                <i class="bi bi-file-earmark-spreadsheet me-1"></i>Excel
            </a>
            <a class="btn btn-sm btn-outline-danger" href="{{ route('garage.payroll.run.export.pdf', $run->id) }}" target="_blank">
                <i class="bi bi-file-earmark-pdf me-1"></i>PDF
            </a>
            @if(!empty($run->garage_voucher_id))
                <a class="btn btn-sm btn-outline-primary" href="{{ route('garage.vouchers.show', $run->garage_voucher_id) }}" target="_blank">
                    <i class="bi bi-receipt me-1"></i>Payroll JV
                </a>
                @if(!empty($run->garage_fund_voucher_id))
                    <a class="btn btn-sm btn-outline-info" href="{{ route('garage.vouchers.show', $run->garage_fund_voucher_id) }}" target="_blank">
                        <i class="bi bi-receipt-cutoff me-1"></i>Employee Fund JV
                    </a>
                @endif
                <form method="post" action="{{ route('garage.payroll.approve', $run->id) }}">
                    @csrf
                    <button class="btn btn-sm btn-warning" onclick="return confirm('Re-post payroll JVs for current selected employees?');">
                        <i class="bi bi-arrow-repeat me-1"></i>Repost JVs
                    </button>
                </form>
            @else
                <form method="post" action="{{ route('garage.payroll.approve', $run->id) }}">
                    @csrf
                    <button class="btn btn-sm btn-success" onclick="return confirm('Approve payroll? This will post payroll JV and employee fund JV.');">
                        <i class="bi bi-check2-circle me-1"></i>Approve & post JVs
                    </button>
                </form>
            @endif
            <form method="post" action="{{ route('garage.payroll.destroy', $run->id) }}" onsubmit="return confirm('Delete this payroll run? Payslips + voucher entries will be deleted.');">
                @csrf
                <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash me-1"></i>Delete
                </button>
            </form>
            <a class="btn btn-sm btn-outline-secondary" href="{{ route('garage.payroll.index') }}">Back</a>
        </div>
    </div>

    @php
        $payslipByEmployee = [];
        foreach ($payslips as $ps) {
            $payslipByEmployee[(int) $ps->garage_employee_id] = $ps;
        }
    @endphp

    @php
        $tBasic = 0; $tAllow = 0; $tBonus = 0; $tDed = 0; $tFine = 0; $tAdvance = 0; $tNet = 0; $tFixedEmpAllow = 0; $tVarEmpAllow = 0; $tEmpFund = 0;
        foreach($payslips as $pp){
            $tBasic += (float)($pp->basic_salary ?? 0);
            $tAllow += (float)($pp->total_allowance ?? 0);
            $tBonus += (float)($pp->total_bonus ?? 0);
            $tDed += (float)($pp->total_deduction ?? 0);
            $tFine += (float)($pp->total_fine ?? 0);
            $tAdvance += (float)($pp->total_advance ?? 0);
            $tNet += (float)($pp->net_pay ?? 0);
            $tFixedEmpAllow += (float)($pp->employee_fixed_allowance ?? 0);
            $tVarEmpAllow += (float)($pp->employee_variable_allowance ?? 0);
            $tEmpFund += (float)($pp->employee_fund_deduction ?? 0);
        }
    @endphp

    <p class="small text-muted mb-2">Click a summary card or a linked amount in the table to see line-by-line breakdown.</p>
    <div class="row g-2 mb-3 payroll-run-stats">
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card hrx-card h-100 payroll-summary-detail" role="button" tabindex="0" data-category="basic" title="View all basic salary lines">
                <div class="card-body py-2">
                    <div class="small hrx-sub">Basic <i class="bi bi-box-arrow-up-right small opacity-50"></i></div>
                    <div class="fw-semibold">{{ number_format($tBasic, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card hrx-card h-100 payroll-summary-detail" role="button" tabindex="0" data-category="allowance" title="View all allowance lines">
                <div class="card-body py-2">
                    <div class="small hrx-sub">Allow <i class="bi bi-box-arrow-up-right small opacity-50"></i></div>
                    <div class="fw-semibold">{{ number_format($tAllow,2) }}</div>
                    <div class="small hrx-sub text-truncate" title="Fixed / Variable">F {{ number_format($tFixedEmpAllow, 0) }} · V {{ number_format($tVarEmpAllow, 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card hrx-card h-100 payroll-summary-detail" role="button" tabindex="0" data-category="bonus" title="View all bonus lines">
                <div class="card-body py-2">
                    <div class="small hrx-sub">Bonus <i class="bi bi-box-arrow-up-right small opacity-50"></i></div>
                    <div class="fw-semibold">{{ number_format($tBonus,2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card hrx-card h-100 payroll-summary-detail" role="button" tabindex="0" data-category="ded_combined" title="View deductions & advances">
                <div class="card-body py-2">
                    <div class="small hrx-sub">Ded <i class="bi bi-box-arrow-up-right small opacity-50"></i></div>
                    <div class="fw-semibold">{{ number_format($tDed,2) }}</div>
                    <div class="small hrx-sub text-truncate">Adv {{ number_format($tAdvance, 0) }} · Fund {{ number_format($tEmpFund, 0) }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card hrx-card h-100 payroll-summary-detail" role="button" tabindex="0" data-category="fine" title="View all fine lines">
                <div class="card-body py-2">
                    <div class="small hrx-sub">Fine <i class="bi bi-box-arrow-up-right small opacity-50"></i></div>
                    <div class="fw-semibold">{{ number_format($tFine, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card hrx-card h-100 payroll-run-net-card">
                <div class="card-body py-2">
                    <div class="small hrx-sub">Net pay</div>
                    <div class="fw-semibold text-primary">{{ number_format($tNet, 2) }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card hrx-card">
        <div class="table-responsive">
            <form id="runEmployeesActionForm" method="post" action="{{ (($run->status ?? '') === 'posted') ? route('garage.payroll.employees.add', $run->id) : route('garage.payroll.employees.replace', $run->id) }}">
                @csrf
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 p-2 border-bottom bg-light">
                    <div class="small text-muted">Checked employees are included in payroll. You can add more anytime.</div>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="runSelectAllRows">Select all</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="runSelectRemainingRows">Select remaining</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="runClearAllRows">Clear</button>
                        <span class="small text-muted"><span id="runSelectedCount">0</span> selected</span>
                        @if(in_array((string)($run->status ?? ''), ['draft','posted'], true))
                            <button type="button" class="btn btn-sm btn-primary" onclick="return confirm('{{ (($run->status ?? '') === 'posted') ? 'Add selected remaining employees in this posted payroll run?' : 'Save selected employees in this payroll run?' }}');">
                                <i class="bi bi-save me-1"></i>Save Payroll Selection
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" formaction="{{ route('garage.payroll.refresh', $run->id) }}" formmethod="post" onclick="return confirm('Refresh whole draft with latest data?');">
                                <i class="bi bi-arrow-clockwise me-1"></i>Refresh Draft
                            </button>
                        @endif
                    </div>
                </div>
                <table class="table table-sm mb-0 hrx-table align-middle">
                <thead class="table-light">
                <tr>
                    <th class="text-center" style="width:42px;">
                        <input id="runHeaderSelectAll" class="form-check-input" type="checkbox">
                    </th>
                    <th style="min-width:160px;">Employee</th>
                    <th style="min-width:120px;">Status</th>
                    <th class="text-end">Basic</th>
                    <th class="text-end">Fixed Alw</th>
                    <th class="text-end">Var Alw</th>
                    <th class="text-end">Emp Fund</th>
                    <th class="text-end">Advance</th>
                    <th class="text-end">Allow</th>
                    <th class="text-end">Bonus</th>
                    <th class="text-end">Ded</th>
                    <th class="text-end">Fine</th>
                    <th class="text-end">Net</th>
                    <th class="text-end" style="min-width:200px;">Payslip</th>
                </tr>
                </thead>
                <tbody>
                @forelse($employees as $emp)
                    @php
                        $p = $payslipByEmployee[(int) $emp->id] ?? null;
                        $included = $p !== null;
                        $jvPostedForRun = !empty($run->garage_voucher_id);
                        $hideSelector = $included && $jvPostedForRun;
                        $lineAgg = $p ? ($lineAggByPayslip[(int) $p->id] ?? null) : null;
                        $displayBasic = 0.0;
                        $displayFixed = 0.0;
                        $displayVar = 0.0;
                        $displayFund = 0.0;
                        $displayAdvance = 0.0;
                        $displayAllow = 0.0;
                        $displayBonus = 0.0;
                        $displayDed = 0.0;
                        $displayFine = 0.0;
                        $displayNet = 0.0;
                        if ($included) {
                            $displayBasic = (float) ($p->basic_salary ?? 0);
                            $displayFixed = (float) ($p->employee_fixed_allowance ?? 0);
                            $displayVar = (float) ($p->employee_variable_allowance ?? 0);
                            $displayFund = (float) ($p->employee_fund_deduction ?? 0);
                            if ($displayFund <= 0) {
                                $displayFund = (float) ($p->employee_fund_master ?? 0);
                            }
                            $displayAdvance = (float) ($p->total_advance ?? 0);
                            if ($displayAdvance <= 0) {
                                $displayAdvance = (float) ($lineAgg->line_advance ?? 0);
                            }
                            $displayAllow = (float) ($p->total_allowance ?? 0);
                            if ($displayAllow <= 0) {
                                $displayAllow = (float) ($lineAgg->line_allowance ?? 0);
                            }
                            $displayBonus = (float) ($p->total_bonus ?? 0);
                            if ($displayBonus <= 0) {
                                $displayBonus = (float) ($lineAgg->line_bonus ?? 0);
                            }
                            $displayDed = (float) ($p->total_deduction ?? 0);
                            if ($displayDed <= 0) {
                                $displayDed = (float) ($lineAgg->line_deduction ?? 0);
                            }
                            $displayFine = (float) ($p->total_fine ?? 0);
                            if ($displayFine <= 0) {
                                $displayFine = (float) ($lineAgg->line_fine ?? 0);
                            }
                            $displayNet = (float) ($p->net_pay ?? 0);
                        } else {
                            $preview = $previewByEmployee[(int) $emp->id] ?? null;
                            if ($preview) {
                                $displayBasic = (float) ($preview['basic'] ?? 0);
                                $displayFixed = (float) ($preview['fixed'] ?? 0);
                                $displayVar = (float) ($preview['var'] ?? 0);
                                $displayFund = (float) ($preview['fund'] ?? 0);
                                $displayAdvance = (float) ($preview['advance'] ?? 0);
                                $displayAllow = (float) ($preview['allow'] ?? 0);
                                $displayBonus = (float) ($preview['bonus'] ?? 0);
                                $displayDed = (float) ($preview['ded'] ?? 0);
                                $displayFine = (float) ($preview['fine'] ?? 0);
                                $displayNet = (float) ($preview['net'] ?? 0);
                            }
                        }
                    @endphp
                    <tr class="payroll-row-click {{ $included ? 'payroll-row-included' : '' }}" style="cursor: pointer;">
                        <td class="text-center">
                            @if($hideSelector)
                                <span class="text-muted small">—</span>
                            @else
                                <input class="form-check-input run-employee-checkbox" data-included="{{ $included ? '1' : '0' }}" type="checkbox" name="employee_ids[]" value="{{ $emp->id }}" {{ $included ? 'checked' : '' }}>
                            @endif
                        </td>
                        <td>
                            <div class="fw-semibold text-truncate payroll-employee-name" title="{{ $emp->name }}">
                                @if(!empty($emp->garage_ledger_id))
                                    <a class="text-decoration-none" href="{{ route('garage.ledger-reports.ledger', $emp->garage_ledger_id) }}">{{ $emp->name }}</a>
                                @else
                                    {{ $emp->name }}
                                @endif
                            </div>
                            <div class="small hrx-sub text-truncate">{{ $emp->code ?: '—' }}</div>
                        </td>
                        <td>
                            @if($included)
                                @if($hideSelector)
                                    <span class="badge bg-success-subtle text-success border border-success-subtle">Posted in JV</span>
                                @else
                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle">Included</span>
                                @endif
                            @else
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Not included</span>
                            @endif
                            @if((int)($emp->is_active ?? 1) !== 1)
                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle">Inactive</span>
                            @endif
                        </td>
                        @include('garage.payroll._amount-cell', ['amount' => $displayBasic, 'category' => 'basic', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayFixed, 'category' => 'allowance', 'filter' => 'fixed', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayVar, 'category' => 'allowance', 'filter' => 'variable', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayFund, 'category' => 'deduction', 'filter' => 'fund', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayAdvance, 'category' => 'advance', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayAllow, 'category' => 'allowance', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayBonus, 'category' => 'bonus', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayDed, 'category' => 'deduction', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        @include('garage.payroll._amount-cell', ['amount' => $displayFine, 'category' => 'fine', 'employeeId' => $emp->id, 'employeeName' => $emp->name, 'hasDetail' => (bool) $p])
                        <td class="text-end fw-semibold payroll-num-cell">{{ number_format($displayNet, 2) }}</td>
                        <td class="text-end payroll-payslip-cell" data-no-auto-actions="1">
                            @if($p)
                                <div class="btn-group btn-group-sm payroll-payslip-actions">
                                    <a class="btn btn-outline-primary" href="{{ route('garage.payroll.payslip.show', $p->id) }}">View</a>
                                    <a class="btn btn-outline-dark" href="{{ route('garage.payroll.payslip.export.excel', $p->id) }}">Excel</a>
                                    <a class="btn btn-outline-danger" href="{{ route('garage.payroll.payslip.export.pdf', $p->id) }}" target="_blank">PDF</a>
                                </div>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="14" class="text-muted p-3">No employees found.</td></tr>
                @endforelse
                </tbody>
                </table>
            </form>
        </div>
    </div>

    @include('garage.payroll._detail-modal')
</div>
@endsection

@push('styles')
<style>
    .payroll-run-stats .card { min-height: 100%; }
    .payroll-summary-detail { cursor: pointer; }
    .payroll-summary-detail:hover { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .08); }
    .payroll-run-net-card { background: linear-gradient(180deg, #f8fafc, #fff); }
    .payroll-cell-detail { text-decoration: underline; text-decoration-style: dotted; }
    tr.payroll-row-included > td { background-color: #fff5f5; }
</style>
@endpush

@push('scripts')
<script>window.payrollRunDetails = @json($payrollDetails ?? ['categories' => [], 'by_employee' => []]);</script>
<script>
    (function () {
        var categoryLabels = {
            basic: 'Basic salary',
            allowance: 'Allowances',
            bonus: 'Bonus',
            deduction: 'Deductions',
            fine: 'Fines',
            advance: 'Advances',
            ded_combined: 'Deductions & advances'
        };

        function escapeHtml(s) {
            return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        }

        function filterRows(rows, filter) {
            if (!filter) return rows;
            var f = String(filter).toLowerCase();
            if (f === 'fixed') {
                return rows.filter(function (r) { return String(r.title || '').toLowerCase().indexOf('fixed allowance') >= 0; });
            }
            if (f === 'variable') {
                return rows.filter(function (r) { return String(r.title || '').toLowerCase().indexOf('variable allowance') >= 0; });
            }
            if (f === 'fund') {
                return rows.filter(function (r) { return String(r.title || '').toLowerCase().indexOf('employee fund') >= 0; });
            }
            return rows;
        }

        function collectRows(category, employeeId, filter) {
            var d = window.payrollRunDetails || { categories: {}, by_employee: {} };
            var rows = [];
            if (employeeId) {
                var emp = d.by_employee[String(employeeId)];
                if (!emp) return [];
                if (category === 'ded_combined') {
                    rows = (emp.categories.deduction || []).concat(emp.categories.advance || []);
                } else {
                    rows = (emp.categories[category] || []).map(function (r) {
                        return {
                            employee_name: emp.employee_name,
                            employee_code: emp.employee_code,
                            title: r.title,
                            amount: r.amount,
                            notes: r.notes
                        };
                    });
                }
            } else if (category === 'ded_combined') {
                rows = (d.categories.deduction || []).concat(d.categories.advance || []);
            } else {
                rows = d.categories[category] || [];
            }
            return filterRows(rows, filter);
        }

        function openPayrollDetailModal(category, employeeId, employeeName, filter) {
            var modalEl = document.getElementById('payrollDetailModal');
            if (!modalEl || !window.bootstrap) return;
            var rows = collectRows(category, employeeId, filter);
            var label = categoryLabels[category] || category;
            var title = document.getElementById('payrollDetailModalLabel');
            var body = document.getElementById('payrollDetailModalBody');
            var totalEl = document.getElementById('payrollDetailModalTotal');
            var hint = document.getElementById('payrollDetailModalHint');
            if (title) {
                title.textContent = employeeId
                    ? (label + ' — ' + (employeeName || 'Employee'))
                    : (label + ' — all employees');
            }
            var total = 0;
            if (!rows.length) {
                body.innerHTML = '<div class="p-4 text-muted text-center">' +
                    (employeeId ? 'No line items on payslip for this category.' : 'No payslip lines in this category yet.') +
                    '</div>';
            } else {
                var html = '<div class="table-responsive"><table class="table table-sm mb-0"><thead class="table-light"><tr>';
                if (!employeeId) html += '<th>Employee</th>';
                html += '<th>Description</th><th>Notes</th><th class="text-end">Amount</th></tr></thead><tbody>';
                rows.forEach(function (r) {
                    total += parseFloat(r.amount || 0);
                    html += '<tr>';
                    if (!employeeId) {
                        html += '<td><div class="fw-semibold">' + escapeHtml(r.employee_name) + '</div>';
                        html += '<div class="small text-muted">' + escapeHtml(r.employee_code || '—') + '</div></td>';
                    }
                    html += '<td>' + escapeHtml(r.title) + '</td>';
                    html += '<td class="small text-muted">' + escapeHtml(r.notes || '—') + '</td>';
                    html += '<td class="text-end">' + Number(r.amount || 0).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2}) + '</td>';
                    html += '</tr>';
                });
                html += '</tbody></table></div>';
                body.innerHTML = html;
            }
            if (totalEl) totalEl.textContent = total.toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
            if (hint) hint.textContent = rows.length + ' line(s)';
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        document.querySelectorAll('.payroll-summary-detail').forEach(function (el) {
            el.addEventListener('click', function () {
                openPayrollDetailModal(el.getAttribute('data-category'), null, null, null);
            });
            el.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    openPayrollDetailModal(el.getAttribute('data-category'), null, null, null);
                }
            });
        });

        document.querySelectorAll('.payroll-cell-detail').forEach(function (btn) {
            btn.addEventListener('click', function (e) {
                e.stopPropagation();
                openPayrollDetailModal(
                    btn.getAttribute('data-category'),
                    btn.getAttribute('data-employee-id'),
                    btn.getAttribute('data-employee-name'),
                    btn.getAttribute('data-filter')
                );
            });
        });

        function updateCount() {
            var out = document.getElementById('runSelectedCount');
            if (!out) return;
            out.textContent = String(document.querySelectorAll('.run-employee-checkbox:checked').length);
        }

        document.querySelectorAll('.payroll-row-click').forEach(function (row) {
            row.addEventListener('click', function (e) {
                if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON' || e.target.closest('button') || e.target.closest('.payroll-cell-detail'))) return;
                var cb = row.querySelector('.run-employee-checkbox');
                if (!cb) return;
                cb.checked = !cb.checked;
                updateCount();
            });
        });

        document.querySelectorAll('.run-employee-checkbox').forEach(function (cb) {
            cb.addEventListener('change', updateCount);
        });

        var selectAllBtn = document.getElementById('runSelectAllRows');
        if (selectAllBtn) {
            selectAllBtn.addEventListener('click', function () {
                document.querySelectorAll('.run-employee-checkbox').forEach(function (cb) { cb.checked = true; });
                var header = document.getElementById('runHeaderSelectAll');
                if (header) header.checked = true;
                updateCount();
            });
        }

        var clearBtn = document.getElementById('runClearAllRows');
        if (clearBtn) {
            clearBtn.addEventListener('click', function () {
                document.querySelectorAll('.run-employee-checkbox').forEach(function (cb) { cb.checked = false; });
                var header = document.getElementById('runHeaderSelectAll');
                if (header) header.checked = false;
                updateCount();
            });
        }

        var selectRemainingBtn = document.getElementById('runSelectRemainingRows');
        if (selectRemainingBtn) {
            selectRemainingBtn.addEventListener('click', function () {
                document.querySelectorAll('.run-employee-checkbox').forEach(function (cb) {
                    if (cb.getAttribute('data-included') === '0') cb.checked = true;
                });
                var allChecked = document.querySelectorAll('.run-employee-checkbox').length > 0
                    && document.querySelectorAll('.run-employee-checkbox:checked').length === document.querySelectorAll('.run-employee-checkbox').length;
                var header = document.getElementById('runHeaderSelectAll');
                if (header) header.checked = allChecked;
                updateCount();
            });
        }

        var headerSelectAll = document.getElementById('runHeaderSelectAll');
        if (headerSelectAll) {
            headerSelectAll.addEventListener('change', function () {
                document.querySelectorAll('.run-employee-checkbox').forEach(function (cb) { cb.checked = headerSelectAll.checked; });
                updateCount();
            });
        }

        updateCount();
    })();
</script>
@endpush