@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Employee Bonus'))
@section('content')
    <style>
        .eb-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .eb-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .eb-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .eb-filters label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .eb-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) { .eb-filters .form-group { margin-bottom: 0; } }
        .eb-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .eb-stat .num { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
        .eb-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .eb-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .eb-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .eb-badge.pending { background: rgba(245,158,11,.12); color: #b45309; }
        .eb-badge.approved { background: rgba(14,165,233,.12); color: #0369a1; }
        .eb-badge.paid { background: rgba(34,197,94,.12); color: #166534; }
        .eb-badge.rejected { background: rgba(239,68,68,.12); color: #991b1b; }
        .eb-type { display: inline-flex; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(79,70,229,.08); color: #4338ca; }
        .eb-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid #edf0f6; background: #f8fafc; }
        .eb-bulk-bar .eb-selected-count { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
        .eb-row-actions .dropdown-toggle::after { display: none; }
        .eb-row-actions .btn-action-toggle { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
        .eb-row-actions .dropdown-menu { min-width: 10rem; border-radius: 10px; border: 1px solid #edf0f6; box-shadow: 0 8px 24px rgba(15,23,42,.08); padding: .35rem 0; }
        .eb-row-actions .dropdown-item { font-size: 13px; font-weight: 600; padding: .45rem 1rem; }
        .eb-row-actions .dropdown-item i { width: 18px; margin-right: .35rem; }
        .eb-row-actions .dropdown-divider { margin: .25rem 0; }
    </style>

    <div class="container-fluid eb-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">{{ __('Employee Bonus') }}</h4>
                    <p class="text-muted mb-0">{{ __('Manage and track all types of employee bonuses (Festival, Performance, Special, etc.)') }}</p>
                </div>
                @canany(['Salary-create', 'Salary-edit'])
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('employee.bonus.export', request()->query()) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-file-export"></i> {{ __('Export') }}
                        </a>
                        <a href="{{ route('employee.bonus.bulk_create') }}" class="btn btn-success">
                            <i class="fas fa-users"></i> {{ __('Bulk Create') }}
                        </a>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#employee_bonus_modal" id="eb_add_btn">
                            <i class="fas fa-plus"></i> {{ __('Add Bonus') }}
                        </button>
                    </div>
                @elsecan('Salary-list')
                    <a href="{{ route('employee.bonus.export', request()->query()) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-file-export"></i> {{ __('Export') }}
                    </a>
                @endcanany
            </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

            <div class="col-12 mb-3">
                <div class="form-row">
                    <div class="col-6 col-md-2 mb-2"><div class="eb-stat"><div class="num text-primary">{{ (int) ($stats->total ?? 0) }}</div><div class="lbl">{{ __('Total') }}</div></div></div>
                    <div class="col-6 col-md-2 mb-2"><div class="eb-stat"><div class="num text-warning">{{ (int) ($stats->pending ?? 0) }}</div><div class="lbl">{{ __('Pending') }}</div></div></div>
                    <div class="col-6 col-md-2 mb-2"><div class="eb-stat"><div class="num text-info">{{ (int) ($stats->approved ?? 0) }}</div><div class="lbl">{{ __('Approved') }}</div></div></div>
                    <div class="col-6 col-md-2 mb-2"><div class="eb-stat"><div class="num text-success">{{ (int) ($stats->paid ?? 0) }}</div><div class="lbl">{{ __('Paid') }}</div></div></div>
                    <div class="col-6 col-md-2 mb-2"><div class="eb-stat"><div class="num">{{ number_format((float) ($stats->total_amount ?? 0), 0) }}</div><div class="lbl">{{ __('Total amount') }}</div></div></div>
                    <div class="col-6 col-md-2 mb-2"><div class="eb-stat"><div class="num text-success">{{ number_format((float) ($stats->disbursed_amount ?? 0), 0) }}</div><div class="lbl">{{ __('Disbursed') }}</div></div></div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                        <span>{{ __('Filters') }}</span>
                        <a href="{{ route('employee.bonus') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear Filters') }}</a>
                    </div>
                    <form method="get">
                        <div class="eb-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>{{ __('Year') }}</label>
                                    <select name="year" class="form-control">
                                        @for($y = date('Y') + 1; $y >= 2020; $y--)
                                            <option value="{{ $y }}" @selected($filterYear === $y)>{{ $y }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>{{ __('Month') }}</label>
                                    <select name="month" class="form-control">
                                        <option value="0">{{ __('All months') }}</option>
                                        @for($m = 1; $m <= 12; $m++)
                                            <option value="{{ $m }}" @selected($filterMonth === $m)>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                        @endfor
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>{{ __('Bonus type') }}</label>
                                    <select name="bonus_type" class="form-control">
                                        <option value="">{{ __('All types') }}</option>
                                        @foreach(\App\Support\EmployeeBonusTypes::options() as $code => $label)
                                            <option value="{{ $code }}" @selected(request('bonus_type') === $code)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>{{ __('Status') }}</label>
                                    <select name="status" class="form-control">
                                        <option value="">{{ __('All status') }}</option>
                                        <option value="pending" @selected(request('status') === 'pending')>{{ __('Pending') }}</option>
                                        <option value="approved" @selected(request('status') === 'approved')>{{ __('Approved') }}</option>
                                        <option value="paid" @selected(request('status') === 'paid')>{{ __('Paid') }}</option>
                                        <option value="rejected" @selected(request('status') === 'rejected')>{{ __('Rejected') }}</option>
                                    </select>
                                </div>
                                @if($branches->isNotEmpty())
                                    <div class="form-group col-md-6 col-lg-2">
                                        <label>{{ __('Branch') }}</label>
                                        <select name="branch_id" class="form-control select2">
                                            <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>
                                @endif
                                <div class="form-group col-md-6 col-lg-2">
                                    <label>{{ __('Department') }}</label>
                                    <select name="department_id" class="form-control select2">
                                        <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>
                            <div class="form-row align-items-end mt-lg-2">
                                <div class="form-group col-md-6 col-lg-4 mb-lg-0">
                                    <label>{{ __('Employee') }}</label>
                                    <select name="staff_id" class="form-control select2">
                                        <option value="">{{ __('All employees') }}</option>
                                        @foreach($staffList as $staff)
                                            <option value="{{ $staff->id }}" @selected((string) request('staff_id') === (string) $staff->id)>
                                                {{ $staff->user?->name ?? 'Staff #'.$staff->id }} ({{ $staff->user_id }}) — {{ $staff->department?->name ?? __('No Department') }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6 col-lg-4 mb-lg-0">
                                    <label>{{ __('Search') }}</label>
                                    <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="{{ __('Title, remarks, name...') }}">
                                </div>
                                <div class="form-group col-md-6 col-lg-2 mb-lg-0">
                                    <label>&nbsp;</label>
                                    <button type="submit" class="btn btn-primary btn-block">{{ __('Apply') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    @php
                        $canBulkApprove = auth()->user()->can('Salary-Approve') || auth()->user()->can('Salary-edit');
                        $canBulkMarkPaid = $canBulkApprove;
                        $canBulkDelete = auth()->user()->can('Salary-delete');
                        $showBulkBar = $canBulkApprove || $canBulkDelete;
                    @endphp

                    @if($showBulkBar)
                        <div class="eb-bulk-bar">
                            <span class="eb-selected-count"><span id="eb_selected_count">0</span> {{ __('selected') }}</span>
                            @if($canBulkApprove)
                                <button type="button" class="btn btn-sm btn-success" id="eb_bulk_approve_btn" disabled>
                                    <i class="fas fa-check"></i> {{ __('Bulk Approve') }}
                                </button>
                            @endif
                            @if($canBulkMarkPaid)
                                <div class="d-flex flex-wrap align-items-center">
                                    <input type="date" id="eb_bulk_payment_date" class="form-control form-control-sm mr-1"
                                           value="{{ date('Y-m-d') }}" title="{{ __('Payment date') }}">
                                    <button type="button" class="btn btn-sm btn-primary" id="eb_bulk_mark_paid_btn" disabled>
                                        <i class="fas fa-money-bill-wave"></i> {{ __('Bulk Mark Paid') }}
                                    </button>
                                </div>
                            @endif
                            @if($canBulkDelete)
                                <button type="button" class="btn btn-sm btn-danger" id="eb_bulk_delete_btn" disabled>
                                    <i class="fas fa-trash"></i> {{ __('Bulk Delete') }}
                                </button>
                            @endif
                            <button type="button" class="btn btn-sm btn-outline-secondary ml-auto" id="eb_clear_selection" disabled>{{ __('Clear') }}</button>
                        </div>
                        <form id="eb_bulk_approve_form" action="{{ route('employee.bonus.bulk_approve') }}" method="POST" class="d-none">@csrf</form>
                        <form id="eb_bulk_mark_paid_form" action="{{ route('employee.bonus.bulk_mark_paid') }}" method="POST" class="d-none">@csrf</form>
                        <form id="eb_bulk_delete_form" action="{{ route('employee.bonus.bulk_delete') }}" method="POST" class="d-none">@csrf</form>
                    @endif

                    <div class="card-body table-responsive p-0">
                        <table class="table table-hover mb-0 eb-table">
                            <thead>
                            <tr>
                                @if($showBulkBar)
                                    <th style="width:40px;">
                                        <div class="custom-control custom-checkbox mb-0">
                                            <input type="checkbox" class="custom-control-input" id="eb_check_all">
                                            <label class="custom-control-label" for="eb_check_all"></label>
                                        </div>
                                    </th>
                                @endif
                                <th>#</th>
                                <th>{{ __('Employee') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th>{{ __('Period') }}</th>
                                <th class="text-right">{{ __('Amount') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Payment date') }}</th>
                                <th class="text-right">{{ __('Actions') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($bonuses as $key => $row)
                                @php
                                    $statusClass = match($row->status) { 'approved' => 'approved', 'paid' => 'paid', 'rejected' => 'rejected', default => 'pending' };
                                    $isPending = $row->status === \App\Models\EmployeeBonus::STATUS_PENDING;
                                    $isApproved = $row->status === \App\Models\EmployeeBonus::STATUS_APPROVED;
                                    $isDeletable = in_array($row->status, [\App\Models\EmployeeBonus::STATUS_PENDING, \App\Models\EmployeeBonus::STATUS_REJECTED], true);
                                    $isSelectable = ($canBulkApprove && $isPending)
                                        || ($canBulkMarkPaid && $isApproved)
                                        || ($canBulkDelete && $isDeletable);
                                @endphp
                                <tr>
                                    @if($showBulkBar)
                                        <td>
                                            @if($isSelectable)
                                                <div class="custom-control custom-checkbox mb-0">
                                                    <input type="checkbox" value="{{ $row->id }}"
                                                           class="custom-control-input eb-row-check"
                                                           id="eb-check-{{ $row->id }}"
                                                           data-pending="{{ $isPending ? '1' : '0' }}"
                                                           data-deletable="{{ $isDeletable ? '1' : '0' }}">
                                                    <label class="custom-control-label" for="eb-check-{{ $row->id }}"></label>
                                                </div>
                                            @endif
                                        </td>
                                    @endif
                                    <td>{{ $bonuses->firstItem() + $key }}</td>
                                    <td>
                                        <strong>{{ $row->staff?->user?->name ?? '—' }}</strong>
                                        <small class="text-muted d-block">
                                            ID: {{ $row->staff?->user_id ?? '—' }} · {{ $row->staff?->department?->name ?? '—' }} / {{ $row->staff?->warehouse?->name ?? '—' }}
                                        </small>
                                        @if($row->title)
                                            <small class="d-block">{{ $row->title }}</small>
                                        @endif
                                    </td>
                                    <td><span class="eb-type">{{ $row->typeLabel() }}</span></td>
                                    <td>{{ date('F Y', mktime(0, 0, 0, (int) $row->bonus_month, 1, (int) $row->bonus_year)) }}</td>
                                    <td class="text-right">{{ number_format((float) $row->amount, 2) }}</td>
                                    <td>
                                        <span class="eb-badge {{ $statusClass }}">{{ $row->statusLabel() }}</span>
                                    </td>
                                    <td>{{ $row->payment_date?->format('Y-m-d') ?? '—' }}</td>
                                    <td class="text-right">
                                        @php
                                            $hasActions = $row->isEditable()
                                                || $row->status === \App\Models\EmployeeBonus::STATUS_APPROVED;
                                        @endphp
                                        @if($hasActions)
                                            <div class="dropdown eb-row-actions d-inline-block">
                                                <button type="button" class="btn btn-sm btn-light btn-action-toggle dropdown-toggle"
                                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    @if($row->isEditable())
                                                        @canany(['Salary-create', 'Salary-edit'])
                                                            <button type="button" class="dropdown-item js-eb-edit"
                                                                    data-id="{{ $row->id }}"
                                                                    data-staff-id="{{ $row->staff_id }}"
                                                                    data-bonus-type="{{ $row->bonus_type }}"
                                                                    data-title="{{ $row->title }}"
                                                                    data-amount="{{ $row->amount }}"
                                                                    data-year="{{ $row->bonus_year }}"
                                                                    data-month="{{ $row->bonus_month }}"
                                                                    data-remarks="{{ $row->remarks }}">
                                                                <i class="fas fa-edit text-muted"></i> {{ __('Edit') }}
                                                            </button>
                                                        @endcanany
                                                        @can('Salary-Approve')
                                                            <form action="{{ route('employee.bonus.approve', $row->id) }}" method="post" id="eb-approve-{{ $row->id }}">@csrf</form>
                                                            <button type="submit" form="eb-approve-{{ $row->id }}" class="dropdown-item text-success">
                                                                <i class="fas fa-check"></i> {{ __('Approve') }}
                                                            </button>
                                                            <button type="button" class="dropdown-item text-warning js-eb-reject" data-id="{{ $row->id }}">
                                                                <i class="fas fa-times"></i> {{ __('Reject') }}
                                                            </button>
                                                        @endcan
                                                        @can('Salary-delete')
                                                            <div class="dropdown-divider"></div>
                                                            <a href="javascript:void(0)" class="dropdown-item text-danger delete_modal"
                                                               data-href="{{ route('employee.bonus.destroy', $row->id) }}">
                                                                <i class="fas fa-trash"></i> {{ __('Delete') }}
                                                            </a>
                                                        @endcan
                                                    @elseif($row->status === \App\Models\EmployeeBonus::STATUS_APPROVED)
                                                        @canany(['Salary-Approve', 'Salary-edit'])
                                                            <form action="{{ route('employee.bonus.mark_paid', $row->id) }}" method="post" id="eb-paid-{{ $row->id }}">@csrf</form>
                                                            <button type="submit" form="eb-paid-{{ $row->id }}" class="dropdown-item text-success">
                                                                <i class="fas fa-money-bill-wave"></i> {{ __('Mark paid') }}
                                                            </button>
                                                        @endcanany
                                                    @endif
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="{{ $showBulkBar ? 9 : 8 }}" class="text-center text-muted py-4">{{ __('No employee bonus records found.') }}</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($bonuses->hasPages())
                        <div class="card-footer">{{ $bonuses->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('modals.delete_modal')

    <div class="modal fade" id="employee_bonus_modal" tabindex="-1">
        <form id="employee_bonus_form" action="{{ route('employee.bonus.store') }}" method="POST">
            @csrf
            <input type="hidden" name="_method" id="eb_form_method" value="POST">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="eb_modal_title">{{ __('Add Employee Bonus') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>{{ __('Employee') }} *</label>
                                <select name="staff_id" id="eb_staff_id" class="form-control select2" required>
                                    <option value="">{{ __('Select employee') }}</option>
                                    @foreach($staffList as $staff)
                                        <option value="{{ $staff->id }}">{{ $staff->user?->name ?? 'Staff #'.$staff->id }} ({{ $staff->user_id }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label>{{ __('Bonus type') }} *</label>
                                <select name="bonus_type" id="eb_bonus_type" class="form-control" required>
                                    @foreach(\App\Support\EmployeeBonusTypes::options() as $code => $label)
                                        <option value="{{ $code }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <label>{{ __('Title / occasion') }}</label>
                                <input type="text" name="title" id="eb_title" class="form-control" maxlength="255" placeholder="{{ __('Eid bonus, Q4 performance, etc.') }}">
                            </div>
                            <div class="form-group col-md-6">
                                <label>{{ __('Amount') }} *</label>
                                <input type="number" step="0.01" min="0" name="amount" id="eb_amount" class="form-control" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label>{{ __('Year') }} *</label>
                                <select name="bonus_year" id="eb_bonus_year" class="form-control" required>
                                    @for($y = date('Y') + 1; $y >= 2020; $y--)
                                        <option value="{{ $y }}" @selected($y === (int) date('Y'))>{{ $y }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>{{ __('Month') }} *</label>
                                <select name="bonus_month" id="eb_bonus_month" class="form-control" required>
                                    @for($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}" @selected($m === (int) date('n'))>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="form-group col-md-12">
                                <label>{{ __('Remarks') }}</label>
                                <textarea name="remarks" id="eb_remarks" class="form-control" rows="3" maxlength="2000"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="eb_reject_modal" tabindex="-1">
        <form id="eb_reject_form" method="POST">
            @csrf
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Reject bonus') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-0">
                            <label>{{ __('Reason') }} *</label>
                            <textarea name="rejection_reason" class="form-control" rows="4" required minlength="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger">{{ __('Reject') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        (function () {
            var storeUrl = @json(route('employee.bonus.store'));
            var updateUrlTemplate = @json(route('employee.bonus.update', ['id' => '__ID__']));
            var rejectUrlTemplate = @json(route('employee.bonus.reject', ['id' => '__ID__']));

            function resetBonusForm() {
                $('#employee_bonus_form').attr('action', storeUrl);
                $('#eb_form_method').val('POST');
                $('#eb_modal_title').text(@json(__('Add Employee Bonus')));
                $('#eb_staff_id, #eb_bonus_type, #eb_bonus_year, #eb_bonus_month').val('').trigger('change');
                $('#eb_title, #eb_amount, #eb_remarks').val('');
                $('#eb_bonus_year').val(@json((int) date('Y'))).trigger('change');
                $('#eb_bonus_month').val(@json((int) date('n'))).trigger('change');
            }

            $('#eb_add_btn').on('click', resetBonusForm);

            $(document).on('click', '.js-eb-edit', function () {
                var $btn = $(this);
                $('#employee_bonus_form').attr('action', updateUrlTemplate.replace('__ID__', $btn.data('id')));
                $('#eb_form_method').val('PUT');
                $('#eb_modal_title').text(@json(__('Edit Employee Bonus')));
                $('#eb_staff_id').val($btn.data('staff-id')).trigger('change');
                $('#eb_bonus_type').val($btn.data('bonus-type'));
                $('#eb_title').val($btn.data('title') || '');
                $('#eb_amount').val($btn.data('amount'));
                $('#eb_bonus_year').val($btn.data('year')).trigger('change');
                $('#eb_bonus_month').val($btn.data('month')).trigger('change');
                $('#eb_remarks').val($btn.data('remarks') || '');
                $('#employee_bonus_modal').modal('show');
            });

            $(document).on('click', '.js-eb-reject', function () {
                $('#eb_reject_form').attr('action', rejectUrlTemplate.replace('__ID__', $(this).data('id')));
                $('#eb_reject_modal').modal('show');
            });

            function ebSelectedIds() {
                var ids = [];
                $('.eb-row-check:checked').each(function () { ids.push($(this).val()); });
                return ids;
            }

            function ebSyncBulkBar() {
                var count = ebSelectedIds().length;
                $('#eb_selected_count').text(count);
                $('#eb_bulk_approve_btn, #eb_bulk_mark_paid_btn, #eb_bulk_delete_btn, #eb_clear_selection').prop('disabled', count === 0);

                var visible = $('.eb-row-check:visible');
                var checkedVisible = visible.filter(':checked').length;
                $('#eb_check_all').prop('checked', visible.length > 0 && checkedVisible === visible.length);
            }

            $(document).on('change', '.eb-row-check', ebSyncBulkBar);

            $('#eb_check_all').on('change', function () {
                var checked = this.checked;
                $('.eb-row-check').each(function () { $(this).prop('checked', checked); });
                ebSyncBulkBar();
            });

            $('#eb_clear_selection').on('click', function () {
                $('.eb-row-check, #eb_check_all').prop('checked', false);
                ebSyncBulkBar();
            });

            function ebSubmitBulk(formSelector, confirmMsg, extraFields) {
                var ids = ebSelectedIds();
                if (!ids.length) return;
                if (!confirm(confirmMsg)) return;

                var $form = $(formSelector);
                $form.find('input[name="ids[]"]').remove();
                $form.find('input[name="payment_date"]').remove();
                ids.forEach(function (id) {
                    $('<input>', { type: 'hidden', name: 'ids[]', value: id }).appendTo($form);
                });
                if (extraFields) {
                    Object.keys(extraFields).forEach(function (key) {
                        $('<input>', { type: 'hidden', name: key, value: extraFields[key] }).appendTo($form);
                    });
                }
                $form.trigger('submit');
            }

            $('#eb_bulk_approve_btn').on('click', function () {
                ebSubmitBulk('#eb_bulk_approve_form', @json(__('Approve selected pending bonuses?')));
            });

            $('#eb_bulk_mark_paid_btn').on('click', function () {
                ebSubmitBulk('#eb_bulk_mark_paid_form', @json(__('Mark selected approved bonuses as paid?')), {
                    payment_date: $('#eb_bulk_payment_date').val() || ''
                });
            });

            $('#eb_bulk_delete_btn').on('click', function () {
                ebSubmitBulk('#eb_bulk_delete_form', @json(__('Delete selected bonuses? Approved or paid records will be skipped.')));
            });

            ebSyncBulkBar();
        })();
    </script>
@endsection