@section('title', get_setting('site_name') . ' | ' . __('Salary Review Report'))

@push('css')
    <style>
        .sr-report .card { border-radius: 14px; border: 1px solid #edf0f6; }
        .sr-report .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; }
        .sr-report .branch-title { background: #f8fafc; font-weight: 700; }
        .sr-report table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
        .sr-report .filter-panel { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .sr-report label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .sr-report .stat-pill { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(79,70,229,.08); color: #4338ca; }
        .select2-container { width: 100% !important; }
        @media print {
            .no-print { display: none !important; }
            .sr-report .card { border: none; box-shadow: none; }
        }
    </style>
@endpush

<div class="container-fluid sr-report">
    <div class="row mt-3">
        <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3 no-print">
            <div>
                <h4 class="page-title mb-0">{{ __('Salary Review Report') }}</h4>
                <p class="text-muted mb-0">
                    {{ __('Basic increment') }}: {{ number_format((float) ($settings['increment_percent'] ?? 0), 2) }}%
                    · {{ __('Min job age') }}: {{ $settings['min_job_years'] ?? 1 }} {{ __('year(s)') }}
                </p>
            </div>
            <div class="d-flex flex-wrap">
                <button type="button" class="btn btn-success mr-2" wire:click="export" wire:loading.attr="disabled">
                    <i class="fas fa-file-excel"></i> {{ __('Export Excel') }}
                </button>
                <button type="button" class="btn btn-outline-secondary mr-2" onclick="window.print()">{{ __('Print') }}</button>
                <a class="btn btn-light" href="{{ route('admin.hr.salary_review') }}">{{ __('Back') }}</a>
            </div>
        </div>

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

        <div class="col-12 mb-3 no-print">
            <div class="card">
                <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                    <span>{{ __('Filters') }}</span>
                    @if($hasFilters)
                        <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearFilters">{{ __('Clear all') }}</button>
                    @endif
                </div>
                <div class="filter-panel">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Report mode') }}</label>
                            <input type="hidden" wire:model="mode" id="sr_report_mode_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_report_mode">
                                    <option value="eligible" @selected($mode === 'eligible')>{{ __('Eligible (preview)') }}</option>
                                    <option value="history" @selected($mode === 'history')>{{ __('Created reviews') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Branch') }}</label>
                            <input type="hidden" wire:model="branchId" id="sr_report_branch_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_report_branch" data-placeholder="{{ __('All branches') }}">
                                    <option value="">{{ __('All branches') }}</option>
                                    @foreach($branches as $b)
                                        <option value="{{ $b->id }}" @selected((int) $branchId === (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="departmentId" id="sr_report_department_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_report_department" data-placeholder="{{ __('All departments') }}">
                                    <option value="">{{ __('All departments') }}</option>
                                    @foreach($departments as $d)
                                        <option value="{{ $d->id }}" @selected((int) $departmentId === (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="staffId" id="sr_report_staff_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_report_staff" data-placeholder="{{ __('All employees') }}">
                                    <option value="">{{ __('All employees') }}</option>
                                    @foreach($staffOptions as $s)
                                        <option value="{{ $s->id }}" @selected((int) $staffId === (int) $s->id)>
                                            {{ $s->user?->name ?? 'Staff #'.$s->id }} ({{ $s->user_id }})
                                            — {{ $s->department?->name ?? __('No Department') }} / {{ $s->warehouse?->name ?? '—' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>{{ __('Search') }}</label>
                            <input type="search" class="form-control" wire:model.live.debounce.400ms="search" placeholder="{{ __('Name, ID, department...') }}">
                        </div>
                        @if($mode === 'history')
                            <div class="form-group col-md-4 col-lg-1">
                                <label>{{ __('Year') }}</label>
                                <input type="number" class="form-control" wire:model.live="year" min="2000" max="2100">
                            </div>
                            <div class="form-group col-md-4 col-lg-2">
                                <label>{{ __('Status') }}</label>
                                <input type="hidden" wire:model="status" id="sr_report_status_hidden">
                                <div wire:ignore>
                                    <select class="form-control select2" id="sr_report_status">
                                        <option value="">{{ __('All') }}</option>
                                        <option value="pending" @selected($status === 'pending')>{{ __('Pending') }}</option>
                                        <option value="approved" @selected($status === 'approved')>{{ __('Applied') }}</option>
                                        <option value="rejected" @selected($status === 'rejected')>{{ __('Rejected') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-4 col-lg-2">
                                <label>{{ __('Review type') }}</label>
                                <input type="hidden" wire:model="filterReviewType" id="sr_report_review_type_hidden">
                                <div wire:ignore>
                                    <select class="form-control select2" id="sr_report_review_type" data-placeholder="{{ __('All types') }}">
                                        <option value="">{{ __('All types') }}</option>
                                        @foreach($reviewTypes as $t)
                                            <option value="{{ $t }}" @selected($filterReviewType === $t)>{{ $t }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-4 col-lg-2">
                                <label>{{ __('Effective from') }}</label>
                                <input type="date" class="form-control" wire:model.live="dateFrom">
                            </div>
                            <div class="form-group col-md-4 col-lg-2">
                                <label>{{ __('Effective to') }}</label>
                                <input type="date" class="form-control" wire:model.live="dateTo">
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                    <span>{{ __('Summary') }}</span>
                    <span class="stat-pill">
                        {{ __('Employees') }}: {{ $totals['employees'] }}
                        · {{ __('Basic +') }}: {{ number_format($totals['basic_diff'], 2) }}
                        · {{ __('Gross +') }}: {{ number_format($totals['gross_diff'], 2) }}
                    </span>
                </div>
                <div class="card-body p-0 table-responsive">
                    @php $colspan = ($mode === 'history' ? 11 : 8); @endphp
                    @forelse($branchGroups as $group)
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr class="branch-title">
                                    <th colspan="{{ $colspan }}">{{ $group['name'] }} ({{ count($group['rows'] ?? []) }})</th>
                                </tr>
                                <tr>
                                    <th>{{ __('Employee') }}</th>
                                    <th>{{ __('Department') }}</th>
                                    <th>{{ __('Job age') }}</th>
                                    <th class="text-right">{{ __('Current basic') }}</th>
                                    <th class="text-right">{{ __('%') }}</th>
                                    <th class="text-right">{{ __('New basic') }}</th>
                                    <th class="text-right">{{ __('Basic +') }}</th>
                                    <th class="text-right">{{ __('Gross +') }}</th>
                                    @if($mode === 'history')
                                        <th>{{ __('Type') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th>{{ __('Effective') }}</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($group['rows'] ?? [] as $row)
                                    <tr>
                                        <td>
                                            {{ $row['staff_name'] }}
                                            @if(!empty($row['user_id']))
                                                <small class="text-muted d-block">ID: {{ $row['user_id'] }}</small>
                                            @endif
                                        </td>
                                        <td class="small">{{ $row['department_name'] ?? '—' }}</td>
                                        <td class="small">{{ $row['job_age'] }}</td>
                                        <td class="text-right">{{ number_format((float) $row['current_basic'], 2) }}</td>
                                        <td class="text-right">{{ number_format((float) ($row['increment_percent'] ?? 0), 2) }}</td>
                                        <td class="text-right">{{ number_format((float) $row['new_basic'], 2) }}</td>
                                        <td class="text-right text-success">+{{ number_format((float) $row['basic_diff'], 2) }}</td>
                                        <td class="text-right text-success">+{{ number_format((float) $row['gross_diff'], 2) }}</td>
                                        @if($mode === 'history')
                                            <td class="small">{{ $row['review_type'] ?? '—' }}</td>
                                            <td>{{ ucfirst($row['status'] ?? '') }}</td>
                                            <td class="small">{{ $row['effective_date'] ?? '—' }}</td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @empty
                        <div class="text-center text-muted py-5">{{ __('No records for this filter.') }}</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

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

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

        function srInitReportSelects() {
            var $mode = $('#sr_report_mode');
            srReportSelect2($mode, { minimumResultsForSearch: Infinity });
            $mode.on('change.srreport', function () {
                @this.set('mode', $(this).val() || 'eligible');
            });
            $mode.val($('#sr_report_mode_hidden').val() || 'eligible').trigger('change.select2');

            var $branch = $('#sr_report_branch');
            srReportSelect2($branch, { placeholder: $branch.data('placeholder') });
            $branch.on('change.srreport', function () {
                var v = $(this).val();
                @this.set('branchId', v ? parseInt(v, 10) : null);
            });
            $branch.val(($('#sr_report_branch_hidden').val() || '').toString()).trigger('change.select2');

            var $dept = $('#sr_report_department');
            srReportSelect2($dept, { placeholder: $dept.data('placeholder') });
            $dept.on('change.srreport', function () {
                var v = $(this).val();
                @this.set('departmentId', v ? parseInt(v, 10) : null);
            });
            $dept.val(($('#sr_report_department_hidden').val() || '').toString()).trigger('change.select2');

            var $staff = $('#sr_report_staff');
            srReportSelect2($staff, { placeholder: $staff.data('placeholder') });
            $staff.on('change.srreport', function () {
                var v = $(this).val();
                @this.set('staffId', v ? parseInt(v, 10) : null);
            });
            $staff.val(($('#sr_report_staff_hidden').val() || '').toString()).trigger('change.select2');

            var $status = $('#sr_report_status');
            if ($status.length) {
                srReportSelect2($status, { minimumResultsForSearch: Infinity });
                $status.on('change.srreport', function () {
                    @this.set('status', $(this).val() || '');
                });
                $status.val($('#sr_report_status_hidden').val() || '').trigger('change.select2');
            }

            var $rtype = $('#sr_report_review_type');
            if ($rtype.length) {
                srReportSelect2($rtype, { placeholder: $rtype.data('placeholder') });
                $rtype.on('change.srreport', function () {
                    @this.set('filterReviewType', $(this).val() || '');
                });
                $rtype.val($('#sr_report_review_type_hidden').val() || '').trigger('change.select2');
            }
        }

        document.addEventListener('livewire:init', () => {
            srInitReportSelects();
            Livewire.hook('message.processed', () => srInitReportSelects());
            Livewire.on('sr-report-filters-reset', () => {
                setTimeout(srInitReportSelects, 50);
            });
            Livewire.on('sr-report-mode-changed', () => {
                setTimeout(srInitReportSelects, 80);
            });
        });
    </script>
@endsection