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

@push('css')
    <style>
        .sr-create .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 2px 10px rgba(15,23,42,.04); }
        .sr-create .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; }
        .sr-create label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); }
        .sr-create .muted { color: rgba(15,23,42,.65); font-size: 13px; }
        .sr-preview .table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; background: #fff; }
        .sr-preview .table td { vertical-align: middle; }
        .sr-diff-pos { color: #166534; font-weight: 800; }
        .sr-diff-zero { color: rgba(15,23,42,.45); font-weight: 700; }
        .sr-sticky { position: sticky; top: 18px; }
        .sr-chip { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(79,70,229,.08); color: #4338ca; }
        .sr-create .nav-tabs { border-bottom: 1px solid #edf0f6; }
        .sr-create .nav-tabs .nav-link { font-weight: 600; border: none; color: rgba(15,23,42,.55); padding: .65rem 1.1rem; }
        .sr-create .nav-tabs .nav-link.active { color: #4f46e5; background: transparent; border-bottom: 2px solid #4f46e5; }
        .sr-bulk-stat { background: linear-gradient(135deg, #f8fafc 0%, #fff 100%); border: 1px solid #edf0f6; border-radius: 12px; padding: 14px 16px; height: 100%; }
        .sr-bulk-stat .val { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
        .sr-bulk-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.5); }
        .sr-bulk-toolbar { background: #f8fafc; border: 1px solid #edf0f6; border-radius: 12px; padding: 14px 16px; }
        .sr-bulk-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
        .sr-bulk-table tbody tr.sr-row-selected { background: rgba(79,70,229,.06) !important; }
        .sr-bulk-table tbody tr:hover { background: #fbfcff; }
        .sr-bulk-actions { border-top: 1px solid #edf0f6; padding-top: 14px; }
        .select2-container { width: 100% !important; }
    </style>
@endpush

<div class="container-fluid sr-create">
    <div class="row mt-3">
        <div class="col-12 d-flex flex-wrap align-items-center justify-content-between mb-2">
            <div>
                <h4 class="page-title mb-0">{{ __('Salary Review') }}</h4>
                <p class="text-muted mb-0">
                    {{ __('Settings') }}: {{ number_format((float) ($settings['increment_percent'] ?? 0), 2) }}% {{ __('on basic') }},
                    {{ __('min') }} {{ $settings['min_job_years'] ?? 1 }} {{ __('year(s)') }}.
                    <a href="{{ route('admin.hr.salary_review') }}">{{ __('Change settings') }}</a>
                </p>
            </div>
            <a class="btn btn-light" href="{{ route('admin.hr.salary_review') }}">{{ __('Back') }}</a>
        </div>

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

        <div class="col-12 mb-3">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <button type="button" class="nav-link @if($mode === 'bulk') active @endif" wire:click="setMode('bulk')">
                        <i class="mdi mdi-account-multiple-outline"></i> {{ __('Bulk generate') }}
                    </button>
                </li>
                <li class="nav-item">
                    <button type="button" class="nav-link @if($mode === 'single') active @endif" wire:click="setMode('single')">
                        <i class="mdi mdi-account-outline"></i> {{ __('Single employee') }}
                    </button>
                </li>
            </ul>
        </div>

        @if($mode === 'bulk')
            <div class="col-12 mb-3">
                <div class="row">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="sr-bulk-stat">
                            <div class="lbl">{{ __('Eligible') }}</div>
                            <div class="val text-primary">{{ $bulkStats['eligible'] }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="sr-bulk-stat">
                            <div class="lbl">{{ __('Selected') }}</div>
                            <div class="val">{{ $bulkStats['selected'] }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="sr-bulk-stat">
                            <div class="lbl">{{ __('Basic increase') }}</div>
                            <div class="val text-success">
                                @if($bulkStats['basic_increase'] === null)
                                    —
                                @else
                                    +{{ number_format($bulkStats['basic_increase'], 2) }}
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="sr-bulk-stat">
                            <div class="lbl">{{ __('Gross increase') }}</div>
                            <div class="val text-success">
                                @if($bulkStats['gross_increase'] === null)
                                    —
                                @else
                                    +{{ number_format($bulkStats['gross_increase'], 2) }}
                                @endif
                            </div>
                        </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>{{ __('Bulk salary review') }}</span>
                        <span class="sr-chip">{{ $settings['review_type'] ?? 'Annual' }} · {{ number_format((float) ($settings['increment_percent'] ?? 0), 2) }}%</span>
                    </div>
                    <div class="card-body">
                        <div class="sr-bulk-toolbar mb-3">
                            <div class="form-row">
                                <div class="form-group col-md-6 col-lg-3">
                                    <label>{{ __('Branch') }}</label>
                                    <input type="hidden" wire:model="bulkBranchId" id="sr_bulk_branch_hidden">
                                    <div wire:ignore>
                                        <select class="form-control select2" id="sr_bulk_branch" data-placeholder="{{ __('All branches') }}">
                                            <option value="">{{ __('All branches') }}</option>
                                            @foreach($branches as $b)
                                                <option value="{{ $b->id }}" @selected((int) $bulkBranchId === (int) $b->id)>{{ $b->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-6 col-lg-3">
                                    <label>{{ __('Department') }}</label>
                                    <input type="hidden" wire:model="bulkDepartmentId" id="sr_bulk_department_hidden">
                                    <div wire:ignore>
                                        <select class="form-control select2" id="sr_bulk_department" data-placeholder="{{ __('All departments') }}">
                                            <option value="">{{ __('All departments') }}</option>
                                            @foreach($departments as $d)
                                                <option value="{{ $d->id }}" @selected((int) $bulkDepartmentId === (int) $d->id)>{{ $d->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-6 col-lg-3">
                                    <label>{{ __('Effective from') }} *</label>
                                    <input type="date" class="form-control" wire:model.defer="effectiveDate">
                                    @error('effectiveDate') <span class="text-danger small d-block">{{ $message }}</span> @enderror
                                </div>
                                <div class="form-group col-md-12 col-lg-3">
                                    <label>{{ __('Search in list') }}</label>
                                    <input type="search" class="form-control" wire:model.live.debounce.300ms="bulkSearch" placeholder="{{ __('Name, ID, branch, department...') }}">
                                </div>
                            </div>

                            <div class="form-group mb-0">
                                <label>{{ __('Select employees') }}</label>
                                <div wire:ignore>
                                    <select class="form-control select2" id="sr_bulk_staff" multiple data-placeholder="{{ __('Choose employees or use Select all') }}">
                                        @foreach($allEligibleRows as $row)
                                            <option value="{{ $row['staff_id'] }}"
                                                @selected(in_array((int) $row['staff_id'], $selectedStaffIds, true))>
                                                {{ $row['staff_name'] }} ({{ $row['user_id'] }}) — {{ $row['department_name'] }} / {{ $row['branch_name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="d-flex flex-wrap align-items-center mt-2">
                                    <label class="d-flex align-items-center mb-0 mr-3" style="text-transform:none;letter-spacing:0;font-weight:600;">
                                        <input type="checkbox" class="mr-2" wire:model.live="selectAllEligible">
                                        {{ __('Select all eligible') }}
                                    </label>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearBulkSelection">{{ __('Clear selection') }}</button>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive" style="max-height:420px;overflow:auto;">
                            <table class="table table-sm table-hover sr-bulk-table mb-0">
                                <thead class="thead-light" style="position:sticky;top:0;z-index:1;">
                                <tr>
                                    <th>{{ __('Employee') }}</th>
                                    <th>{{ __('Department') }}</th>
                                    <th>{{ __('Branch') }}</th>
                                    <th>{{ __('Job age') }}</th>
                                    <th class="text-right">{{ __('Current basic') }}</th>
                                    <th class="text-right">{{ __('New basic') }}</th>
                                    <th class="text-right">{{ __('Basic +') }}</th>
                                    <th class="text-right">{{ __('Gross +') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($eligibleRows as $row)
                                    @php $isSelected = in_array((int) $row['staff_id'], $selectedStaffIds, true); @endphp
                                    <tr class="@if($isSelected) sr-row-selected @endif">
                                        <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>
                                        <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['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>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted py-4">
                                            {{ __('No eligible employees match your filters.') }}
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if(($bulkPagination['pages'] ?? 1) > 1)
                            <div class="d-flex flex-wrap justify-content-between align-items-center mt-2 px-1">
                                <span class="muted small">
                                    {{ __('Showing page :page of :pages (:total employees)', [
                                        'page' => $bulkPagination['page'],
                                        'pages' => $bulkPagination['pages'],
                                        'total' => $bulkPagination['total'],
                                    ]) }}
                                </span>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary"
                                            wire:click="$set('bulkPage', {{ max(1, $bulkPagination['page'] - 1) }})"
                                            @disabled($bulkPagination['page'] <= 1)>
                                        {{ __('Previous') }}
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary"
                                            wire:click="$set('bulkPage', {{ min($bulkPagination['pages'], $bulkPagination['page'] + 1) }})"
                                            @disabled($bulkPagination['page'] >= $bulkPagination['pages'])>
                                        {{ __('Next') }}
                                    </button>
                                </div>
                            </div>
                        @endif

                        <div class="sr-bulk-actions d-flex flex-wrap justify-content-between align-items-center mt-3">
                            <span class="muted small mb-2 mb-md-0">
                                {{ __(':selected of :total selected', ['selected' => $bulkStats['selected'], 'total' => $bulkStats['eligible']]) }}
                            </span>
                            <button type="button" class="btn btn-success px-4"
                                    wire:click="generateBulk"
                                    wire:confirm="{{ __('Create pending salary reviews for selected employees?') }}">
                                <i class="mdi mdi-flash"></i> {{ __('Generate reviews') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="col-12 col-lg-5 mb-3">
                <div class="card">
                    <div class="card-header"><span>{{ __('Review Information') }}</span></div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>{{ __('Staff') }} *</label>
                            <input type="hidden" wire:model="staffId" id="sr_create_staff_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_create_staff" data-placeholder="{{ __('Select Staff') }}">
                                    <option value="">{{ __('Select Staff') }}</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->warehouse?->name ?? 'No Branch' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            @error('staffId') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        @if(!empty($currentSnapshot))
                            <div class="mb-3 p-3" style="background:#f8fafc;border:1px solid #edf0f6;border-radius:12px;">
                                <div class="d-flex justify-content-between">
                                    <div class="muted">{{ __('Current Salary') }}</div>
                                    <span class="sr-chip">{{ __('Gross') }}: {{ number_format((float) ($currentSnapshot['gross_salary'] ?? 0), 2) }}</span>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-6 muted">{{ __('Basic') }}: {{ number_format((float) ($currentSnapshot['basic_salary'] ?? 0), 2) }}</div>
                                    <div class="col-6 muted text-right">{{ __('Net') }}: {{ number_format((float) ($currentSnapshot['net_salary'] ?? 0), 2) }}</div>
                                </div>
                            </div>
                        @endif

                        <div class="form-group">
                            <label>{{ __('Review Type') }} *</label>
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_single_review_type">
                                    <option value="Annual" @selected($reviewType === 'Annual')>Annual</option>
                                    <option value="Special" @selected($reviewType === 'Special')>Special</option>
                                    <option value="Probation" @selected($reviewType === 'Probation')>Probation</option>
                                    <option value="Promotion" @selected($reviewType === 'Promotion')>Promotion</option>
                                </select>
                            </div>
                            @error('reviewType') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group">
                            <label>{{ __('Increment Mode') }} *</label>
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_single_increment_mode">
                                    <option value="percentage" @selected($incrementMode === 'percentage')>{{ __('Percentage') }}</option>
                                    <option value="fixed" @selected($incrementMode === 'fixed')>{{ __('Fixed') }}</option>
                                </select>
                            </div>
                            @error('incrementMode') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group">
                            <label>{{ __('Increment Value') }} {{ $incrementMode === 'percentage' ? '(%)' : '' }} *</label>
                            <input type="number" step="0.01" min="0" class="form-control" wire:model.live="incrementValue" placeholder="e.g. 10">
                            @error('incrementValue') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group">
                            <label>{{ __('Effective From') }} *</label>
                            <input type="date" class="form-control" wire:model="effectiveDate">
                            @error('effectiveDate') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group">
                            <label>{{ __('Remarks') }}</label>
                            <textarea class="form-control" rows="3" wire:model.defer="remarks" placeholder="{{ __('Optional remarks...') }}"></textarea>
                        </div>

                        <button type="button" class="btn btn-primary btn-block" wire:click="createReview">{{ __('Create Review') }}</button>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-7 mb-3">
                <div class="card sr-sticky sr-preview">
                    <div class="card-header"><span>{{ __('Salary Preview') }}</span></div>
                    <div class="card-body table-responsive p-0">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>{{ __('Component') }}</th>
                                    <th class="text-right">{{ __('Current') }}</th>
                                    <th class="text-right">{{ __('New') }}</th>
                                    <th class="text-right">{{ __('Difference') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $rows = [
                                        ['key' => 'basic_salary', 'label' => 'Basic Salary'],
                                        ['key' => 'house_rent', 'label' => 'House Rent'],
                                        ['key' => 'medical', 'label' => 'Medical'],
                                        ['key' => 'food', 'label' => 'Food'],
                                        ['key' => 'conveyance', 'label' => 'Conveyance'],
                                        ['key' => 'utility', 'label' => 'Utility'],
                                        ['key' => 'provident_fund', 'label' => 'Provident Fund'],
                                        ['key' => 'Others', 'label' => 'Others'],
                                        ['key' => 'gross_salary', 'label' => 'Gross Salary'],
                                        ['key' => 'net_salary', 'label' => 'Net Salary'],
                                    ];
                                @endphp
                                @forelse($rows as $r)
                                    @php
                                        $k = $r['key'];
                                        $cur = (float) ($currentSnapshot[$k] ?? 0);
                                        $new = (float) ($newSnapshot[$k] ?? 0);
                                        $d = (float) ($diff[$k] ?? 0);
                                    @endphp
                                    <tr @if(in_array($k, ['gross_salary','net_salary'])) style="font-weight:800;background:#fbfcff;" @endif>
                                        <td>{{ $r['label'] }}</td>
                                        <td class="text-right">{{ number_format($cur, 2) }}</td>
                                        <td class="text-right">{{ number_format($new, 2) }}</td>
                                        <td class="text-right">
                                            @if(abs($d) < 0.005)
                                                <span class="sr-diff-zero">+0.00</span>
                                            @else
                                                <span class="sr-diff-pos">+{{ number_format($d, 2) }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center text-muted py-4">{{ __('Select staff and enter increment to preview') }}</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

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

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

        function srInitBulkBranch() {
            var $el = $('#sr_bulk_branch');
            srInitSelect2($el, { placeholder: $el.data('placeholder') || 'All branches' });
            $el.on('change.srcreate', function () {
                var v = $(this).val();
                @this.set('bulkBranchId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_bulk_branch_hidden').val() || '').toString();
            $el.val(cur).trigger('change.select2');
        }

        function srInitBulkDepartment() {
            var $el = $('#sr_bulk_department');
            srInitSelect2($el, { placeholder: $el.data('placeholder') || 'All departments' });
            $el.on('change.srcreate', function () {
                var v = $(this).val();
                @this.set('bulkDepartmentId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_bulk_department_hidden').val() || '').toString();
            $el.val(cur).trigger('change.select2');
        }

        function srInitBulkStaff() {
            var $el = $('#sr_bulk_staff');
            srInitSelect2($el, {
                placeholder: $el.data('placeholder') || 'Choose employees',
                closeOnSelect: false
            });
            $el.on('change.srcreate', function () {
                var vals = $(this).val() || [];
                @this.call('syncBulkSelection', vals);
            });
        }

        function srInitSingleStaff() {
            var $el = $('#sr_create_staff');
            srInitSelect2($el, { placeholder: $el.data('placeholder') || 'Select Staff' });
            $el.on('change.srcreate', function () {
                var v = $(this).val();
                @this.set('staffId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_create_staff_hidden').val() || '').toString();
            $el.val(cur).trigger('change.select2');
        }

        function srInitSingleReviewType() {
            var $el = $('#sr_single_review_type');
            srInitSelect2($el, { minimumResultsForSearch: Infinity });
            $el.on('change.srcreate', function () {
                @this.set('reviewType', $(this).val() || 'Annual');
            });
        }

        function srInitSingleIncrementMode() {
            var $el = $('#sr_single_increment_mode');
            srInitSelect2($el, { minimumResultsForSearch: Infinity });
            $el.on('change.srcreate', function () {
                @this.set('incrementMode', $(this).val() || 'percentage');
            });
        }

        function srInitCreateSelects() {
            srInitBulkBranch();
            srInitBulkDepartment();
            srInitBulkStaff();
            srInitSingleStaff();
            srInitSingleReviewType();
            srInitSingleIncrementMode();
        }

        document.addEventListener('livewire:init', () => {
            srInitCreateSelects();
            Livewire.hook('message.processed', () => srInitCreateSelects());

            Livewire.on('sr-bulk-scope-changed', () => {
                setTimeout(srInitBulkStaff, 50);
            });

            Livewire.on('sr-bulk-selection-sync', (event) => {
                var ids = (event && event.ids) ? event.ids : (event && event[0] && event[0].ids) ? event[0].ids : [];
                ids = ids.map(String);
                var $el = $('#sr_bulk_staff');
                if ($el.length) {
                    $el.val(ids).trigger('change.select2');
                }
            });

            Livewire.on('sr-create-mode-changed', () => {
                setTimeout(srInitCreateSelects, 50);
            });
        });
    </script>
@endsection