@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Bulk Create Employee Bonus'))
@section('content')
    <style>
        .ebb-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; margin-bottom: 0; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
        .ebb-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; font-size: 14px; }
        .ebb-wrap label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .ebb-section-body { padding: 18px 20px; }
        .ebb-calc-panel { display: none; }
        .ebb-calc-panel.active { display: block; }

        /* Stepper */
        .ebb-stepper { display: flex; flex-wrap: wrap; gap: 0; background: #fff; border: 1px solid #edf0f6; border-radius: 14px; padding: 18px 12px; margin-bottom: 18px; }
        .ebb-step { flex: 1 1 140px; text-align: center; position: relative; padding: 0 8px; cursor: default; }
        .ebb-step:not(:last-child)::after {
            content: ''; position: absolute; top: 17px; left: calc(50% + 22px); width: calc(100% - 44px); height: 2px;
            background: #e2e8f0; z-index: 0;
        }
        .ebb-step.done:not(:last-child)::after { background: #22c55e; }
        .ebb-step.active:not(:last-child)::after { background: linear-gradient(90deg, #4f46e5 0%, #e2e8f0 100%); }
        .ebb-step-dot {
            width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 13px; background: #f1f5f9; color: #64748b; border: 2px solid #e2e8f0;
            position: relative; z-index: 1; transition: all .2s;
        }
        .ebb-step.active .ebb-step-dot { background: #4f46e5; color: #fff; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
        .ebb-step.done .ebb-step-dot { background: #22c55e; color: #fff; border-color: #22c55e; }
        .ebb-step-label { margin-top: 8px; font-size: 12px; font-weight: 700; color: #64748b; line-height: 1.3; }
        .ebb-step.active .ebb-step-label { color: #4f46e5; }
        .ebb-step.done .ebb-step-label { color: #166534; }
        .ebb-step.clickable { cursor: pointer; }

        .ebb-step-pane { display: none; animation: ebbFade .25s ease; }
        .ebb-step-pane.active { display: block; }
        @keyframes ebbFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

        /* Stats & selection */
        .ebb-stat { background: linear-gradient(135deg, #f8fafc 0%, #fff 100%); border: 1px solid #edf0f6; border-radius: 12px; padding: 14px 16px; height: 100%; }
        .ebb-stat .val { font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
        .ebb-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.5); }
        .ebb-toolbar { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; padding: 14px 16px; }
        .ebb-select-banner {
            display: none; background: linear-gradient(135deg, rgba(79,70,229,.08) 0%, rgba(34,197,94,.08) 100%);
            border: 1px solid rgba(79,70,229,.18); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px;
        }
        .ebb-select-banner.show { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
        .ebb-select-banner .icon { width: 44px; height: 44px; border-radius: 12px; background: #4f46e5; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .ebb-select-banner .title { font-weight: 800; font-size: 15px; color: #1e293b; }
        .ebb-select-banner .sub { font-size: 13px; color: #64748b; }

        .ebb-staff-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; background: #fff; border-top: 0; }
        .ebb-staff-table tbody tr { cursor: pointer; }
        .ebb-staff-table tbody tr.selected { background: rgba(79,70,229,.06) !important; }
        .ebb-staff-table tbody tr:hover { background: #fbfcff; }
        .ebb-staff-table tbody tr.ebb-hidden { display: none; }

        .ebb-preview-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
        .ebb-preview-table tbody tr.selected { background: rgba(79,70,229,.06); }

        .ebb-nav-footer { border-top: 1px solid #edf0f6; padding: 16px 20px; background: #fafbfc; border-radius: 0 0 14px 14px; }
        .ebb-review-item { padding: 10px 0; border-bottom: 1px dashed #edf0f6; }
        .ebb-review-item:last-child { border-bottom: 0; }
        .ebb-review-item .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; }
        .ebb-review-item .v { font-weight: 700; color: #1e293b; }
    </style>

    <div class="container-fluid ebb-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">{{ __('Bulk Create Employee Bonus') }}</h4>
                    <p class="text-muted mb-0">{{ __('Create bonuses for multiple employees in a few simple steps.') }}</p>
                </div>
                <a href="{{ route('employee.bonus') }}" class="btn btn-light">{{ __('Back to list') }}</a>
            </div>

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

            <div class="col-12">
                {{-- Stepper --}}
                <div class="ebb-stepper" id="ebb_stepper">
                    @foreach([
                        1 => __('Select Employees'),
                        2 => __('Basic Information'),
                        3 => __('Bonus Calculation'),
                        4 => __('Status & Review'),
                    ] as $num => $label)
                        <div class="ebb-step @if($num === 1) active @endif" data-step="{{ $num }}">
                            <div class="ebb-step-dot">{{ $num }}</div>
                            <div class="ebb-step-label">{{ $label }}</div>
                        </div>
                    @endforeach
                </div>

                <form action="{{ route('employee.bonus.bulk_store') }}" method="POST" id="ebb_form">
                    @csrf
                    <div id="ebb_staff_ids_container"></div>
                    <input type="hidden" name="select_all" id="ebb_select_all_input" value="0">
                    <input type="hidden" name="branch_id" id="ebb_branch_input" value="{{ request('branch_id') }}">
                    <input type="hidden" name="department_id" id="ebb_department_input" value="{{ request('department_id') }}">

                    <div class="card">
                        {{-- STEP 1: Select Employees --}}
                        <div class="ebb-step-pane active" data-step="1">
                            <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                                <span><i class="mdi mdi-account-multiple-outline text-primary"></i> {{ __('Select Employees') }}</span>
                                <span class="badge badge-primary badge-pill px-3 py-2" id="ebb_selected_badge">0 {{ __('selected') }}</span>
                            </div>
                            <div class="ebb-section-body">
                                <div class="row mb-3">
                                    <div class="col-6 col-md-3 mb-2">
                                        <div class="ebb-stat">
                                            <div class="lbl">{{ __('Available') }}</div>
                                            <div class="val text-primary" id="ebb_stat_available">{{ count($staffOptions) }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3 mb-2">
                                        <div class="ebb-stat">
                                            <div class="lbl">{{ __('Selected') }}</div>
                                            <div class="val text-success" id="ebb_stat_selected">0</div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 mb-2">
                                        <div class="ebb-stat d-flex align-items-center h-100">
                                            <div>
                                                <div class="lbl">{{ __('Filter scope') }}</div>
                                                <div class="val text-dark" style="font-size:1rem;" id="ebb_filter_scope">
                                                    {{ request('branch_id') ? ($branches->firstWhere('id', (int) request('branch_id'))?->name ?? __('All branches')) : __('All branches') }}
                                                    ·
                                                    {{ request('department_id') ? ($departments->firstWhere('id', (int) request('department_id'))?->name ?? __('All departments')) : __('All departments') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ebb-toolbar mb-3">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-4 col-lg-3 mb-md-0">
                                            <label>{{ __('Branch') }}</label>
                                            <select id="ebb_branch_id" class="form-control select2" data-placeholder="{{ __('All branches') }}">
                                                <option value="">{{ __('All branches') }}</option>
                                                @foreach($branches as $branch)
                                                    <option value="{{ $branch->id }}" @selected((string) request('branch_id') === (string) $branch->id)>{{ $branch->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-4 col-lg-3 mb-md-0">
                                            <label>{{ __('Department') }}</label>
                                            <select id="ebb_department_id" class="form-control select2" data-placeholder="{{ __('All departments') }}">
                                                <option value="">{{ __('All departments') }}</option>
                                                @foreach($departments as $dept)
                                                    <option value="{{ $dept->id }}" @selected((string) request('department_id') === (string) $dept->id)>{{ $dept->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group col-md-4 col-lg-4 mb-md-0">
                                            <label>{{ __('Search employees') }}</label>
                                            <input type="search" id="ebb_staff_search" class="form-control" placeholder="{{ __('Name, ID, department, branch...') }}">
                                        </div>
                                        <div class="form-group col-md-12 col-lg-2 mb-0">
                                            <label class="d-flex align-items-center mb-2" style="text-transform:none;letter-spacing:0;font-weight:600;">
                                                <input type="checkbox" id="ebb_select_all" class="mr-2">
                                                {{ __('Select all') }}
                                            </label>
                                            <button type="button" class="btn btn-outline-secondary btn-block btn-sm" id="ebb_clear_selection">
                                                {{ __('Clear') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="ebb-select-banner" id="ebb_select_all_banner">
                                    <div class="icon"><i class="mdi mdi-check-all"></i></div>
                                    <div>
                                        <div class="title" id="ebb_banner_title">{{ __('All employees selected') }}</div>
                                        <div class="sub" id="ebb_banner_sub"></div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-light ml-auto" id="ebb_banner_clear">{{ __('Change selection') }}</button>
                                </div>

                                <div class="table-responsive" style="max-height:400px;overflow:auto;" id="ebb_staff_table_wrap">
                                    <table class="table table-sm table-hover ebb-staff-table mb-0">
                                        <thead class="thead-light" style="position:sticky;top:0;z-index:1;">
                                        <tr>
                                            <th style="width:40px;">
                                                <input type="checkbox" id="ebb_check_all_visible" title="{{ __('Select all visible') }}">
                                            </th>
                                            <th>{{ __('Employee') }}</th>
                                            <th>{{ __('Department') }}</th>
                                            <th>{{ __('Branch') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody id="ebb_staff_body">
                                        @forelse($staffOptions as $row)
                                            <tr data-staff-id="{{ $row['staff_id'] }}"
                                                data-search="{{ strtolower($row['staff_name'].' '.$row['user_id'].' '.$row['department_name'].' '.$row['branch_name']) }}">
                                                <td onclick="event.stopPropagation();">
                                                    <input type="checkbox" class="ebb-staff-check" value="{{ $row['staff_id'] }}">
                                                </td>
                                                <td>
                                                    <strong>{{ $row['staff_name'] }}</strong>
                                                    <small class="text-muted d-block">ID: {{ $row['user_id'] }}</small>
                                                </td>
                                                <td>{{ $row['department_name'] }}</td>
                                                <td>{{ $row['branch_name'] }}</td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="4" class="text-center text-muted py-4">{{ __('No employees with salary setup match your filters.') }}</td></tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                <p class="text-muted small mb-0 mt-2" id="ebb_visible_count"></p>
                            </div>
                        </div>

                        {{-- STEP 2: Basic Information --}}
                        <div class="ebb-step-pane" data-step="2">
                            <div class="card-header"><i class="mdi mdi-information-outline text-primary"></i> {{ __('Basic Information') }}</div>
                            <div class="ebb-section-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>{{ __('Bonus type') }} *</label>
                                        <select name="bonus_type" class="form-control" required>
                                            @foreach($bonusTypes as $code => $label)
                                                <option value="{{ $code }}" @selected(old('bonus_type') === $code)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>{{ __('Title / occasion') }}</label>
                                        <input type="text" name="title" class="form-control" value="{{ old('title') }}"
                                               placeholder="{{ __('Eid-ul-Fitr bonus, Q4 performance, etc.') }}">
                                    </div>
                                    <div class="form-group col-md-12 mb-0">
                                        <label>{{ __('Description') }}</label>
                                        <textarea name="description" class="form-control" rows="4" placeholder="{{ __('Describe the bonus...') }}">{{ old('description') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- STEP 3: Bonus Calculation --}}
                        <div class="ebb-step-pane" data-step="3">
                            <div class="card-header"><i class="mdi mdi-calculator text-primary"></i> {{ __('Bonus Calculation') }}</div>
                            <div class="ebb-section-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>{{ __('Calculation type') }} *</label>
                                        <select name="calculation_type" id="ebb_calculation_type" class="form-control" required>
                                            @foreach($calculationTypes as $code => $label)
                                                <option value="{{ $code }}" @selected(old('calculation_type', 'percentage') === $code)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6 ebb-calc-panel active" id="ebb_panel_percentage">
                                        <label>{{ __('Percentage') }} *</label>
                                        <div class="input-group">
                                            <input type="number" step="0.01" min="0" max="500" name="percentage" id="ebb_percentage"
                                                   class="form-control" value="{{ old('percentage', '50') }}" placeholder="50">
                                            <div class="input-group-append"><span class="input-group-text">%</span></div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-6 ebb-calc-panel active" id="ebb_panel_component">
                                        <label>{{ __('Salary component') }} *</label>
                                        <select name="salary_component" id="ebb_salary_component" class="form-control">
                                            @foreach($salaryComponents as $code => $label)
                                                <option value="{{ $code }}" @selected(old('salary_component', 'gross_salary') === $code)>{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6 ebb-calc-panel" id="ebb_panel_fixed">
                                        <label>{{ __('Fixed amount (each employee)') }} *</label>
                                        <input type="number" step="0.01" min="0" name="fixed_amount" id="ebb_fixed_amount"
                                               class="form-control" value="{{ old('fixed_amount') }}">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>{{ __('Bonus date') }} *</label>
                                        <input type="date" name="bonus_date" id="ebb_bonus_date" class="form-control"
                                               value="{{ old('bonus_date', now()->format('Y-m-d')) }}" required>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>{{ __('Period year') }} *</label>
                                        <input type="number" name="bonus_year" class="form-control" min="2000" max="2100"
                                               value="{{ old('bonus_year', date('Y')) }}" required>
                                    </div>
                                    <div class="form-group col-md-4 mb-0">
                                        <label>{{ __('Period month') }}</label>
                                        <select name="bonus_month" class="form-control">
                                            <option value="">{{ __('Use bonus date month') }}</option>
                                            @for($m = 1; $m <= 12; $m++)
                                                <option value="{{ $m }}" @selected((int) old('bonus_month') === $m)>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- STEP 4: Status & Review --}}
                        <div class="ebb-step-pane" data-step="4">
                            <div class="card-header"><i class="mdi mdi-clipboard-check-outline text-primary"></i> {{ __('Status & Review') }}</div>
                            <div class="ebb-section-body">
                                <div class="row">
                                    <div class="col-lg-5 mb-3">
                                        <div class="form-row">
                                            <div class="form-group col-12">
                                                <label>{{ __('Status') }} *</label>
                                                <select name="status" class="form-control" required>
                                                    <option value="pending" @selected(old('status', 'pending') === 'pending')>{{ __('Pending') }}</option>
                                                    <option value="approved" @selected(old('status') === 'approved')>{{ __('Approved') }}</option>
                                                    <option value="paid" @selected(old('status') === 'paid')>{{ __('Paid') }}</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-12">
                                                <label>{{ __('Payment date') }}</label>
                                                <input type="date" name="payment_date" class="form-control" value="{{ old('payment_date') }}">
                                            </div>
                                            <div class="form-group col-12 mb-0">
                                                <label>{{ __('Remarks') }}</label>
                                                <textarea name="remarks" class="form-control" rows="3">{{ old('remarks') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="mt-3 p-3 rounded" style="background:#f8fafc;border:1px solid #edf0f6;">
                                            <div class="font-weight-bold mb-2 small text-uppercase text-muted">{{ __('Summary') }}</div>
                                            <div class="ebb-review-item"><div class="k">{{ __('Employees') }}</div><div class="v" id="ebb_review_employees">—</div></div>
                                            <div class="ebb-review-item"><div class="k">{{ __('Bonus type') }}</div><div class="v" id="ebb_review_type">—</div></div>
                                            <div class="ebb-review-item"><div class="k">{{ __('Calculation') }}</div><div class="v" id="ebb_review_calc">—</div></div>
                                            <div class="ebb-review-item"><div class="k">{{ __('Bonus date') }}</div><div class="v" id="ebb_review_date">—</div></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
                                            <span class="font-weight-bold small text-uppercase text-muted">{{ __('Amount preview') }}</span>
                                            <button type="button" class="btn btn-sm btn-outline-primary" id="ebb_preview_btn">
                                                <i class="mdi mdi-refresh"></i> {{ __('Load preview') }}
                                            </button>
                                        </div>
                                        <div class="table-responsive rounded border" style="max-height:340px;overflow:auto;">
                                            <table class="table table-sm table-hover ebb-preview-table mb-0">
                                                <thead class="thead-light" style="position:sticky;top:0;z-index:1;">
                                                <tr>
                                                    <th>{{ __('Employee') }}</th>
                                                    <th>{{ __('Department') }}</th>
                                                    <th class="text-right">{{ __('Salary base') }}</th>
                                                    <th class="text-right">{{ __('Bonus') }}</th>
                                                </tr>
                                                </thead>
                                                <tbody id="ebb_preview_body">
                                                <tr><td colspan="4" class="text-center text-muted py-4">{{ __('Click Load preview to see amounts') }}</td></tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="text-muted small mt-2" id="ebb_preview_summary"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Navigation --}}
                        <div class="ebb-nav-footer d-flex flex-wrap justify-content-between align-items-center">
                            <button type="button" class="btn btn-light" id="ebb_btn_back" style="visibility:hidden;">
                                <i class="mdi mdi-arrow-left"></i> {{ __('Back') }}
                            </button>
                            <span class="text-muted small" id="ebb_step_indicator">{{ __('Step 1 of 4') }}</span>
                            <button type="button" class="btn btn-primary px-4" id="ebb_btn_next">
                                {{ __('Next') }} <i class="mdi mdi-arrow-right"></i>
                            </button>
                            <button type="submit" class="btn btn-success px-4 d-none" id="ebb_btn_submit">
                                <i class="mdi mdi-flash"></i> {{ __('Create bonuses') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        (function () {
            var staffOptions = @json($staffOptions);
            var bonusTypeLabels = @json($bonusTypes);
            var calcTypeLabels = @json($calculationTypes);
            var componentLabels = @json($salaryComponents);
            var filterUrl = @json(route('employee.bonus.bulk_create'));
            var previewUrl = @json(route('employee.bonus.bulk_preview'));
            var csrf = @json(csrf_token());

            var currentStep = 1;
            var totalSteps = 4;
            var selectAllMode = false;

            function fmt(n) {
                return Number(n).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }

            function syncCalcPanels() {
                var isPct = $('#ebb_calculation_type').val() === 'percentage';
                $('#ebb_panel_percentage, #ebb_panel_component').toggleClass('active', isPct);
                $('#ebb_panel_fixed').toggleClass('active', !isPct);
            }

            function visibleStaffRows() {
                return $('#ebb_staff_body tr[data-staff-id]').not('.ebb-hidden');
            }

            function allStaffIds() {
                return staffOptions.map(function (r) { return String(r.staff_id); });
            }

            function selectedStaffIds() {
                if (selectAllMode) {
                    return allStaffIds();
                }
                var ids = [];
                $('.ebb-staff-check:checked').each(function () { ids.push(String($(this).val())); });
                return ids;
            }

            function syncStaffIdInputs() {
                var $container = $('#ebb_staff_ids_container').empty();
                selectedStaffIds().forEach(function (id) {
                    $('<input>', { type: 'hidden', name: 'staff_ids[]', value: id }).appendTo($container);
                });
                var count = selectedStaffIds().length;
                $('#ebb_stat_selected').text(count);
                $('#ebb_selected_badge').text(count + ' {{ __('selected') }}');
                $('#ebb_select_all_input').val(selectAllMode ? '1' : '0');
                syncSelectAllUI();
            }

            function syncSelectAllUI() {
                var count = selectedStaffIds().length;
                var total = staffOptions.length;
                var branchText = $('#ebb_branch_id option:selected').text() || '{{ __('All branches') }}';
                var deptText = $('#ebb_department_id option:selected').text() || '{{ __('All departments') }}';

                if (selectAllMode && total > 0) {
                    $('#ebb_select_all_banner').addClass('show');
                    $('#ebb_staff_table_wrap').hide();
                    $('#ebb_banner_title').text(count + ' {{ __('employees selected') }}');
                    $('#ebb_banner_sub').text(branchText + ' · ' + deptText);
                    $('#ebb_select_all').prop('checked', true);
                } else {
                    $('#ebb_select_all_banner').removeClass('show');
                    $('#ebb_staff_table_wrap').show();
                    $('#ebb_select_all').prop('checked', count > 0 && count === total);
                }

                $('.ebb-staff-check').each(function () {
                    var id = String($(this).val());
                    var checked = selectAllMode || $(this).is(':checked');
                    $(this).prop('checked', checked);
                    $(this).closest('tr').toggleClass('selected', checked);
                });

                var visible = visibleStaffRows();
                var visibleChecked = visible.find('.ebb-staff-check:checked').length;
                $('#ebb_check_all_visible').prop('checked', visible.length > 0 && visibleChecked === visible.length);
                updateVisibleCount();
            }

            function updateVisibleCount() {
                var visible = visibleStaffRows().length;
                var total = $('#ebb_staff_body tr[data-staff-id]').length;
                if (selectAllMode) {
                    $('#ebb_visible_count').text('');
                    return;
                }
                if (visible < total) {
                    $('#ebb_visible_count').text('{{ __('Showing') }} ' + visible + ' {{ __('of') }} ' + total);
                } else {
                    $('#ebb_visible_count').text('');
                }
            }

            function filterStaffTable() {
                var q = ($('#ebb_staff_search').val() || '').toLowerCase().trim();
                $('#ebb_staff_body tr[data-staff-id]').each(function () {
                    var hay = $(this).data('search') || '';
                    $(this).toggleClass('ebb-hidden', q !== '' && hay.indexOf(q) === -1);
                });
                syncSelectAllUI();
            }

            function reloadStaffOptions() {
                var branchId = $('#ebb_branch_id').val() || '';
                var deptId = $('#ebb_department_id').val() || '';
                var params = new URLSearchParams();
                if (branchId) params.set('branch_id', branchId);
                if (deptId) params.set('department_id', deptId);
                window.location = filterUrl + (params.toString() ? ('?' + params.toString()) : '');
            }

            function updateStepper() {
                $('.ebb-step').each(function () {
                    var s = parseInt($(this).data('step'), 10);
                    $(this).removeClass('active done clickable');
                    if (s < currentStep) {
                        $(this).addClass('done clickable');
                    } else if (s === currentStep) {
                        $(this).addClass('active');
                    }
                    if (s < currentStep) {
                        $(this).find('.ebb-step-dot').html('<i class="mdi mdi-check"></i>');
                    } else {
                        $(this).find('.ebb-step-dot').text(s);
                    }
                });

                $('.ebb-step-pane').removeClass('active');
                $('.ebb-step-pane[data-step="' + currentStep + '"]').addClass('active');

                $('#ebb_step_indicator').text('{{ __('Step') }} ' + currentStep + ' {{ __('of') }} ' + totalSteps);
                $('#ebb_btn_back').css('visibility', currentStep > 1 ? 'visible' : 'hidden');
                $('#ebb_btn_next').toggleClass('d-none', currentStep >= totalSteps);
                $('#ebb_btn_submit').toggleClass('d-none', currentStep < totalSteps);

                if (currentStep === 4) {
                    updateReviewSummary();
                }
            }

            function updateReviewSummary() {
                var count = selectedStaffIds().length;
                $('#ebb_review_employees').text(count + ' {{ __('employee(s)') }}');
                var typeCode = $('select[name="bonus_type"]').val();
                $('#ebb_review_type').text(bonusTypeLabels[typeCode] || typeCode);
                var calcType = $('#ebb_calculation_type').val();
                if (calcType === 'percentage') {
                    $('#ebb_review_calc').text($('#ebb_percentage').val() + '% {{ __('of') }} ' + (componentLabels[$('#ebb_salary_component').val()] || ''));
                } else {
                    $('#ebb_review_calc').text('{{ __('Fixed') }}: ' + fmt($('#ebb_fixed_amount').val() || 0) + ' {{ __('each') }}');
                }
                $('#ebb_review_date').text($('#ebb_bonus_date').val() || '—');
            }

            function validateStep(step) {
                if (step === 1) {
                    if (selectedStaffIds().length === 0) {
                        alert('{{ __('Select at least one employee.') }}');
                        return false;
                    }
                    return true;
                }
                if (step === 2) {
                    if (!$('select[name="bonus_type"]').val()) {
                        alert('{{ __('Please choose a bonus type.') }}');
                        return false;
                    }
                    return true;
                }
                if (step === 3) {
                    var calcType = $('#ebb_calculation_type').val();
                    if (calcType === 'percentage') {
                        var pct = parseFloat($('#ebb_percentage').val());
                        if (!pct || pct <= 0) {
                            alert('{{ __('Enter a valid percentage.') }}');
                            return false;
                        }
                    } else {
                        var amt = parseFloat($('#ebb_fixed_amount').val());
                        if (!amt || amt <= 0) {
                            alert('{{ __('Enter a valid fixed amount.') }}');
                            return false;
                        }
                    }
                    if (!$('#ebb_bonus_date').val()) {
                        alert('{{ __('Bonus date is required.') }}');
                        return false;
                    }
                    return true;
                }
                return true;
            }

            function renderPreview(rows, total) {
                var $body = $('#ebb_preview_body').empty();
                if (!rows.length) {
                    $body.append('<tr><td colspan="4" class="text-center text-muted py-4">{{ __('No preview rows') }}</td></tr>');
                    $('#ebb_preview_summary').text('');
                    return;
                }
                rows.forEach(function (row) {
                    $body.append(
                        '<tr>' +
                        '<td><strong>' + row.staff_name + '</strong><br><small class="text-muted">' + row.department_name + '</small></td>' +
                        '<td>' + row.branch_name + '</td>' +
                        '<td class="text-right">' + fmt(row.salary_base) + '</td>' +
                        '<td class="text-right text-success font-weight-bold">' + fmt(row.amount) + '</td>' +
                        '</tr>'
                    );
                });
                $('#ebb_preview_summary').text(rows.length + ' {{ __('employees') }} · {{ __('Total') }}: ' + fmt(total));
            }

            function loadPreview() {
                syncStaffIdInputs();
                var formData = new FormData(document.getElementById('ebb_form'));
                formData.append('_token', csrf);
                $('#ebb_preview_btn').prop('disabled', true).html('<i class="mdi mdi-loading mdi-spin"></i> {{ __('Loading...') }}');
                fetch(previewUrl, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } })
                    .then(function (r) { return r.json(); })
                    .then(function (data) { renderPreview(data.rows || [], data.total_amount || 0); })
                    .catch(function () { alert('{{ __('Preview failed') }}'); })
                    .finally(function () {
                        $('#ebb_preview_btn').prop('disabled', false).html('<i class="mdi mdi-refresh"></i> {{ __('Load preview') }}');
                    });
            }

            // Events
            $('#ebb_calculation_type').on('change', syncCalcPanels);
            syncCalcPanels();

            $('#ebb_branch_id, #ebb_department_id').on('change', function () {
                $('#ebb_branch_input').val($('#ebb_branch_id').val() || '');
                $('#ebb_department_input').val($('#ebb_department_id').val() || '');
                reloadStaffOptions();
            });

            $('#ebb_staff_search').on('input', filterStaffTable);

            $('#ebb_select_all').on('change', function () {
                selectAllMode = this.checked;
                if (selectAllMode) {
                    $('.ebb-staff-check').prop('checked', true);
                } else {
                    $('.ebb-staff-check').prop('checked', false);
                }
                syncStaffIdInputs();
            });

            $('#ebb_clear_selection, #ebb_banner_clear').on('click', function () {
                selectAllMode = false;
                $('#ebb_select_all').prop('checked', false);
                $('.ebb-staff-check').prop('checked', false);
                syncStaffIdInputs();
            });

            $('#ebb_check_all_visible').on('change', function () {
                selectAllMode = false;
                var checked = this.checked;
                visibleStaffRows().each(function () {
                    $(this).find('.ebb-staff-check').prop('checked', checked);
                });
                syncStaffIdInputs();
            });

            $(document).on('change', '.ebb-staff-check', function () {
                selectAllMode = false;
                syncStaffIdInputs();
            });

            $(document).on('click', '#ebb_staff_body tr[data-staff-id]', function (e) {
                if ($(e.target).is('input')) return;
                var $cb = $(this).find('.ebb-staff-check');
                $cb.prop('checked', !$cb.prop('checked'));
                selectAllMode = false;
                syncStaffIdInputs();
            });

            $('#ebb_btn_next').on('click', function () {
                if (!validateStep(currentStep)) return;
                syncStaffIdInputs();
                currentStep++;
                updateStepper();
                if (currentStep === 4) {
                    loadPreview();
                }
            });

            $('#ebb_btn_back').on('click', function () {
                if (currentStep > 1) {
                    currentStep--;
                    updateStepper();
                }
            });

            $('#ebb_stepper').on('click', '.ebb-step.done', function () {
                var target = parseInt($(this).data('step'), 10);
                if (target >= currentStep) return;
                currentStep = target;
                updateStepper();
            });

            $('#ebb_preview_btn').on('click', loadPreview);

            $('#ebb_form').on('submit', function () {
                syncStaffIdInputs();
                if (selectedStaffIds().length === 0) {
                    alert('{{ __('Select at least one employee.') }}');
                    return false;
                }
            });

            $('#ebb_branch_id, #ebb_department_id').select2({ width: '100%', allowClear: true });
            updateStepper();
            syncStaffIdInputs();
        })();
    </script>
@endsection