@section('title', get_setting('site_name') . ' | Salary Reviews')

@push('css')
    <style>
        .sr-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; }
        .sr-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; }
        .sr-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .sr-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .sr-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .sr-filters .form-group { margin-bottom: 0; } }
        .sr-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .sr-badge.applied { background: rgba(34,197,94,.12); color: #166534; }
        .sr-badge.pending { background: rgba(14,165,233,.12); color: #0369a1; }
        .sr-badge.rejected { background: rgba(239,68,68,.12); color: #991b1b; }
        .sr-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; }
        .sr-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .sr-bulk-bar { background: #f0f4ff; border-bottom: 1px solid #dbe4ff; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
        .sr-bulk-bar .count { font-weight: 700; color: #4338ca; margin-right: 8px; }
    </style>
@endpush

<div class="container-fluid sr-wrap">
    <div class="row mt-3">
        <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-2">
            <div>
                <h4 class="page-title mb-0">Salary Reviews</h4>
                <p class="text-muted mb-0">Create Reviews, Filter History, And Apply Approved Changes.</p>
            </div>
            @can('SalaryReview-create')
                <div class="sr-header-actions">
                    <button type="button" class="btn btn-outline-secondary" wire:click="openSettings">
                        <i class="mdi mdi-cog"></i> {{ __('Settings') }}
                    </button>
                    <a class="btn btn-primary" href="{{ route('admin.hr.salary_review.create') }}">{{ __('New Review') }}</a>
                </div>
            @endcan
        </div>

        @if (session()->has('message'))
            <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
        @endif
        @if (session()->has('error'))
            <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
        @endif

        @if($workflowEnabled)
            <div class="col-12">
                <div class="alert alert-info py-2 mb-2">
                    <i class="fas fa-info-circle mr-1"></i>
                    {{ __('Approval workflow is enabled. Approve selected reviews here when it is your turn, or use the') }}
                    <a href="{{ route('approval.center') }}" class="alert-link font-weight-bold">{{ __('Approval Center') }}</a>.
                </div>
            </div>
        @endif

        @if($showBulkApproveModal)
            <div class="col-12">
                <div class="modal fade show d-block" tabindex="-1" style="background: rgba(15,23,42,.45);" wire:keydown.escape.window="closeBulkApprove">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <form wire:submit.prevent="confirmBulkApprove">
                                <div class="modal-header">
                                    <h5 class="modal-title"><i class="mdi mdi-check-all text-success mr-1"></i> {{ __('Bulk approve reviews') }}</h5>
                                    <button type="button" class="close" wire:click="closeBulkApprove"><span>&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <p class="text-muted small mb-2">{{ __(':count review(s) selected. Only pending reviews where you are the current approver will be approved.', ['count' => count($selectedReviewIds)]) }}</p>
                                    <div class="form-group mb-0">
                                        <label>{{ __('Approval comment') }} <span class="text-danger">*</span></label>
                                        <textarea class="form-control" rows="3" wire:model.defer="bulkApproveNote" required minlength="3" placeholder="{{ __('Approval note...') }}"></textarea>
                                        @error('bulkApproveNote') <span class="text-danger small d-block">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" wire:click="closeBulkApprove">{{ __('Cancel') }}</button>
                                    <button type="submit" class="btn btn-success">{{ __('Approve selected') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($showApproveModal)
            <div class="col-12">
                <div class="modal fade show d-block" tabindex="-1" style="background: rgba(15,23,42,.45);" wire:keydown.escape.window="closeApproveModal">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <form wire:submit.prevent="confirmApprove">
                                <div class="modal-header">
                                    <h5 class="modal-title"><i class="mdi mdi-check-circle text-success mr-1"></i> {{ __('Approve salary review') }}</h5>
                                    <button type="button" class="close" wire:click="closeApproveModal"><span>&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group mb-0">
                                        <label>{{ __('Approval comment') }} <span class="text-danger">*</span></label>
                                        <textarea class="form-control" rows="3" wire:model.defer="approveNote" required minlength="3" placeholder="{{ __('Approval note...') }}"></textarea>
                                        @error('approveNote') <span class="text-danger small d-block">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" wire:click="closeApproveModal">{{ __('Cancel') }}</button>
                                    <button type="submit" class="btn btn-success">{{ __('Approve') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($showSettingsModal)
            <div class="col-12">
                <div class="modal fade show d-block" tabindex="-1" style="background: rgba(15,23,42,.45);" wire:keydown.escape.window="closeSettings">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <form wire:submit.prevent="saveSettings">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ __('Salary Review Settings') }}</h5>
                                    <button type="button" class="close" wire:click="closeSettings"><span>&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label>{{ __('Min job age (years)') }}</label>
                                            <input type="number" step="0.1" min="0" max="50" class="form-control" wire:model.defer="cfgMinJobYears">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('Increment on basic (%)') }}</label>
                                            <input type="number" step="0.01" min="0" max="100" class="form-control" wire:model.defer="cfgIncrementPercent">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('Increment basis') }}</label>
                                            <select class="form-control" wire:model.defer="cfgIncrementBasis">
                                                <option value="basic_only">{{ __('Basic only') }}</option>
                                                <option value="gross_scale">{{ __('Scale all components') }}</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('Increment mode') }}</label>
                                            <select class="form-control" wire:model.defer="cfgIncrementMode">
                                                <option value="percentage">{{ __('Percentage') }}</option>
                                                <option value="fixed">{{ __('Fixed') }}</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('Review type') }}</label>
                                            <input type="text" class="form-control" wire:model.defer="cfgReviewType">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>{{ __('Tenure basis') }}</label>
                                            <select class="form-control" wire:model.defer="cfgTenureBasis">
                                                <option value="company">{{ __('Company joining date') }}</option>
                                                <option value="branch">{{ __('Current branch tenure') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-6">
                                            <label class="d-flex align-items-center mb-0">
                                                <input type="checkbox" class="mr-2" wire:model.defer="cfgSkipPending">
                                                {{ __('Skip staff with pending review') }}
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="d-flex align-items-center mb-0">
                                                <input type="checkbox" class="mr-2" wire:model.defer="cfgSkipReviewedCurrentYear">
                                                {{ __('Skip if already reviewed this year') }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" wire:click="closeSettings">{{ __('Cancel') }}</button>
                                    <button type="submit" class="btn btn-primary">{{ __('Save settings') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($showBulkRejectModal)
            <div class="col-12">
                <div class="modal fade show d-block" tabindex="-1" style="background: rgba(15,23,42,.45);" wire:keydown.escape.window="closeBulkReject">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <form wire:submit.prevent="bulkReject">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ __('Bulk reject reviews') }}</h5>
                                    <button type="button" class="close" wire:click="closeBulkReject"><span>&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    <p class="text-muted small">
                                        @if($workflowEnabled)
                                            {{ __(':count review(s) selected. Only pending reviews where you are the current approver will be rejected.', ['count' => count($selectedReviewIds)]) }}
                                        @else
                                            {{ __(':count review(s) selected', ['count' => count($selectedReviewIds)]) }}
                                        @endif
                                    </p>
                                    <div class="form-group mb-0">
                                        <label>{{ __('Rejection reason') }} *</label>
                                        <textarea class="form-control" rows="4" wire:model.defer="bulkRejectReason" required minlength="5" placeholder="{{ __('Enter reason for rejection...') }}"></textarea>
                                        @error('bulkRejectReason') <span class="text-danger small d-block">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" wire:click="closeBulkReject">{{ __('Cancel') }}</button>
                                    <button type="submit" class="btn btn-danger">{{ __('Reject selected') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <span>Filters</span>
                    <div class="d-flex flex-wrap align-items-center" style="gap:8px;">
                        <a class="btn btn-sm btn-success"
                           href="{{ route('admin.hr.salary_review.export', $exportQuery) }}">
                            <i class="fas fa-file-excel"></i> {{ __('Export Excel') }}
                        </a>
                        <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearFilters">Clear Filters</button>
                    </div>
                </div>
                <div class="sr-filters">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Review Type') }}</label>
                            <select class="form-control" wire:model.live="filterReviewType">
                                <option value="">{{ __('All Types') }}</option>
                                @foreach($reviewTypes as $t)
                                    <option value="{{ $t }}">{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Branch') }}</label>
                            <input type="hidden" wire:model="filterBranchId" id="sr_filter_branch_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_filter_branch" data-placeholder="{{ __('All branches') }}">
                                    <option value="">{{ __('All branches') }}</option>
                                    @foreach($branches as $b)
                                        <option value="{{ $b->id }}" @selected((int) $filterBranchId === (int) $b->id)>{{ $b->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Department') }}</label>
                            <input type="hidden" wire:model="filterDepartmentId" id="sr_filter_department_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_filter_department" data-placeholder="{{ __('All departments') }}">
                                    <option value="">{{ __('All departments') }}</option>
                                    @foreach($departments as $d)
                                        <option value="{{ $d->id }}" @selected((int) $filterDepartmentId === (int) $d->id)>{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-3">
                            <label>{{ __('Employee') }}</label>
                            <input type="hidden" wire:model="filterStaffId" id="sr_filter_staff_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_filter_staff" data-placeholder="{{ __('All Employees') }}">
                                    <option value="">{{ __('All Employees') }}</option>
                                    @foreach($staffOptions as $s)
                                        <option value="{{ $s->id }}" @selected((int) $filterStaffId === (int) $s->id)>
                                            {{ $s->user?->name ?? 'Staff #'.$s->id }} ({{ $s->user_id }}) — {{ $s->department?->name ?? __('No Department') }} / {{ $s->warehouse?->name ?? __('No Branch') }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-1">
                            <label>{{ __('Status') }}</label>
                            <select class="form-control" wire:model.live="filterStatus">
                                <option value="">{{ __('All Status') }}</option>
                                <option value="{{ \App\Models\SalaryReview::STATUS_APPROVED }}">{{ __('Applied') }}</option>
                                <option value="{{ \App\Models\SalaryReview::STATUS_PENDING }}">{{ __('Pending') }}</option>
                                <option value="{{ \App\Models\SalaryReview::STATUS_REJECTED }}">{{ __('Rejected') }}</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Search') }}</label>
                            <input type="text" class="form-control" wire:model.live.debounce.400ms="search" placeholder="{{ __('Name, branch, dept...') }}">
                        </div>
                    </div>
                    <div class="form-row align-items-end mt-lg-2">
                        <div class="form-group col-md-6 col-lg-2 mb-lg-0">
                            <label>{{ __('Date From') }}</label>
                            <input type="date" class="form-control" wire:model.live="filterDateFrom">
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-lg-0">
                            <label>{{ __('Date To') }}</label>
                            <input type="date" class="form-control" wire:model.live="filterDateTo">
                        </div>
                    </div>
                </div>

                @if(count($selectedReviewIds) > 0)
                    <div class="sr-bulk-bar no-print">
                        <span class="count">{{ count($selectedReviewIds) }} {{ __('selected') }}</span>
                        @can('SalaryReview-Approve')
                            @if(!$workflowEnabled)
                                <button type="button" class="btn btn-sm btn-success"
                                        wire:click="bulkApply"
                                        wire:confirm="{{ __('Apply salary changes for all selected pending reviews?') }}">
                                    <i class="mdi mdi-check-all"></i> {{ __('Bulk apply') }}
                                </button>
                                <button type="button" class="btn btn-sm btn-warning" wire:click="openBulkReject">
                                    <i class="mdi mdi-close-circle-outline"></i> {{ __('Bulk reject') }}
                                </button>
                            @else
                                <button type="button" class="btn btn-sm btn-success" wire:click="openBulkApprove">
                                    <i class="mdi mdi-check-all"></i> {{ __('Bulk approve') }}
                                </button>
                                <button type="button" class="btn btn-sm btn-warning" wire:click="openBulkReject">
                                    <i class="mdi mdi-close-circle-outline"></i> {{ __('Bulk reject') }}
                                </button>
                                <span class="small text-muted">{{ __('Only “Your turn” pending reviews are processed.') }}</span>
                            @endif
                        @endcan
                        @if($canDeleteReviews)
                            <button type="button" class="btn btn-sm btn-danger"
                                    wire:click="bulkDelete"
                                    wire:confirm="{{ __('Delete selected reviews? Pending/rejected only. Approval Center requests will also be removed. Applied reviews will be skipped.') }}">
                                <i class="mdi mdi-delete-outline"></i> {{ __('Bulk delete') }}
                            </button>
                        @endif
                        <button type="button" class="btn btn-sm btn-outline-secondary ml-auto" wire:click="clearSelection">{{ __('Clear') }}</button>
                    </div>
                @endif

                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0 sr-table">
                        <thead>
                            <tr>
                                <th style="width:36px">
                                    <input type="checkbox" wire:model.live="selectAllOnPage" title="{{ __('Select all on page') }}">
                                </th>
                                <th>{{ __('Staff') }}</th>
                                <th>{{ __('Department') }}</th>
                                <th>{{ __('Branch') }}</th>
                                <th>{{ __('Review Type') }}</th>
                                <th>Increment Mode</th>
                                <th>Increment Value</th>
                                <th>Effective From</th>
                                <th>Status</th>
                                @if($workflowEnabled)
                                    <th>{{ __('Current approver') }}</th>
                                @endif
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reviews as $r)
                                <tr @if(in_array($r->id, $selectedReviewIds, true)) class="table-active" @endif>
                                    <td>
                                        <input type="checkbox"
                                               @checked(in_array($r->id, $selectedReviewIds, true))
                                               wire:click="toggleReview({{ $r->id }})">
                                    </td>
                                    <td>
                                        {{ $r->staff?->user?->name ?? '—' }}<br>
                                        <small class="text-muted">ID: {{ $r->staff?->user_id ?? '—' }}</small>
                                    </td>
                                    <td>{{ $r->staff?->department?->name ?? '—' }}</td>
                                    <td>{{ $r->staff?->warehouse?->name ?? '—' }}</td>
                                    <td>{{ $r->review_type ?? '—' }}</td>
                                    <td>{{ $r->increment_mode ? ucfirst($r->increment_mode) : '—' }}</td>
                                    <td>{{ $r->increment_value !== null ? number_format((float) $r->increment_value, 2) : '—' }}</td>
                                    <td>{{ $r->effective_date?->format('M d, Y') ?? '—' }}</td>
                                    <td>
                                        @if($r->status === \App\Models\SalaryReview::STATUS_APPROVED)
                                            <span class="sr-badge applied">Applied</span>
                                        @elseif($r->status === \App\Models\SalaryReview::STATUS_REJECTED)
                                            <span class="sr-badge rejected">Rejected</span>
                                        @else
                                            <span class="sr-badge pending">Pending</span>
                                        @endif
                                    </td>
                                    @if($workflowEnabled)
                                        <td>
                                            @if($r->status === \App\Models\SalaryReview::STATUS_PENDING)
                                                @if($r->approvalRequest && $r->approvalRequest->status === 'pending')
                                                    <span class="font-weight-semibold">{{ user_display_label($r->approvalRequest->currentApprover) }}</span>
                                                    @if((int) $r->approvalRequest->current_approver_id === (int) auth()->id())
                                                        <br><span class="small text-success font-weight-bold">{{ __('Your turn') }}</span>
                                                    @endif
                                                @else
                                                    <span class="text-muted small">{{ __('Not submitted') }}</span>
                                                @endif
                                            @else
                                                —
                                            @endif
                                        </td>
                                    @endif
                                    <td class="text-right text-nowrap">
                                        <a class="btn btn-sm btn-light" href="{{ route('admin.hr.salary_review.show', $r->id) }}">View</a>
                                        @if($r->status === \App\Models\SalaryReview::STATUS_APPROVED)
                                            <a class="btn btn-sm btn-outline-primary" href="{{ route('admin.hr.salary_review.letter', $r->id) }}" target="_blank" title="{{ __('Review Letter') }}">
                                                <i class="fas fa-print"></i>
                                            </a>
                                        @endif
                                        @can('SalaryReview-create')
                                            @if($workflowEnabled && $r->status === \App\Models\SalaryReview::STATUS_PENDING && (! $r->approvalRequest || $r->approvalRequest->status !== 'pending'))
                                                <button type="button" class="btn btn-sm btn-outline-primary" wire:click="submitForApproval({{ $r->id }})">
                                                    {{ __('Send for approval') }}
                                                </button>
                                            @endif
                                        @endcan
                                        @can('SalaryReview-Approve')
                                            @if($r->status === \App\Models\SalaryReview::STATUS_PENDING && ! $workflowEnabled)
                                                <button type="button" class="btn btn-sm btn-success" wire:click="approve({{ $r->id }})">Apply</button>
                                            @elseif($workflowEnabled && $r->status === \App\Models\SalaryReview::STATUS_PENDING && $r->approvalRequest && (int) $r->approvalRequest->current_approver_id === (int) auth()->id())
                                                <button type="button" class="btn btn-sm btn-success" wire:click="openApproveModal({{ $r->id }})">{{ __('Approve') }}</button>
                                            @endif
                                        @endcan
                                        @if($canDeleteReviews && $r->status !== \App\Models\SalaryReview::STATUS_APPROVED)
                                            <button type="button"
                                                    class="btn btn-sm btn-outline-danger"
                                                    wire:click="deleteReview({{ $r->id }})"
                                                    wire:confirm="{{ __('Delete this salary review? It will also be removed from Approval Center.') }}">
                                                <i class="mdi mdi-delete-outline"></i> {{ __('Delete') }}
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="{{ $workflowEnabled ? 11 : 10 }}" class="text-center text-muted py-4">No Records Found</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="card-footer d-flex flex-wrap justify-content-between align-items-center" style="gap:10px;">
                    <div class="d-flex align-items-center" style="gap:8px;">
                        <label class="mb-0 small text-muted text-nowrap" for="sr_per_page">{{ __('Per page') }}</label>
                        <select id="sr_per_page" class="form-control form-control-sm" style="width:auto; min-width:4.5rem;" wire:model.live="perPage">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <span class="small text-muted">
                            {{ __('Showing :from–:to of :total', [
                                'from' => $reviews->total() ? $reviews->firstItem() : 0,
                                'to' => $reviews->total() ? $reviews->lastItem() : 0,
                                'total' => $reviews->total(),
                            ]) }}
                        </span>
                    </div>
                    <div>{{ $reviews->links() }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script>
        function srDestroySelect2($el) {
            if ($el.length && $el.hasClass('select2-hidden-accessible')) {
                $el.off('.srindex');
                $el.select2('destroy');
            }
        }

        function srInitSelect2($el, opts) {
            if (!$el.length) return;
            srDestroySelect2($el);
            $el.select2($.extend({ width: '100%', allowClear: true }, opts || {}));
        }

        function srInitBranchFilterSelect2() {
            var $el = $('#sr_filter_branch');
            srInitSelect2($el, { placeholder: $el.data('placeholder') || 'All branches' });
            $el.on('change.srindex', function () {
                var v = $(this).val();
                @this.set('filterBranchId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_filter_branch_hidden').val() || '').toString();
            $el.val(cur).trigger('change.select2');
        }

        function srInitDepartmentFilterSelect2() {
            var $el = $('#sr_filter_department');
            srInitSelect2($el, { placeholder: $el.data('placeholder') || 'All departments' });
            $el.on('change.srindex', function () {
                var v = $(this).val();
                @this.set('filterDepartmentId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_filter_department_hidden').val() || '').toString();
            $el.val(cur).trigger('change.select2');
        }

        function srInitStaffFilterSelect2() {
            var $el = $('#sr_filter_staff');
            srInitSelect2($el, { placeholder: $el.data('placeholder') || 'All Employees' });
            $el.on('change.srindex', function () {
                var v = $(this).val();
                @this.set('filterStaffId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_filter_staff_hidden').val() || '').toString();
            if (cur) $el.val(cur).trigger('change.select2');
            else $el.val('').trigger('change.select2');
        }

        function srInitIndexFilters() {
            srInitBranchFilterSelect2();
            srInitDepartmentFilterSelect2();
            srInitStaffFilterSelect2();
        }

        document.addEventListener('livewire:init', () => {
            srInitIndexFilters();
            Livewire.hook('message.processed', () => srInitIndexFilters());
            Livewire.on('hr-salary-index-filters-reset', () => {
                $('#sr_filter_branch').val('').trigger('change.select2');
                $('#sr_filter_department').val('').trigger('change.select2');
                $('#sr_filter_staff').val('').trigger('change.select2');
            });
            Livewire.on('hr-salary-index-scope-changed', () => {
                $('#sr_filter_staff').val('').trigger('change.select2');
            });
        });
    </script>
@endsection