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

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

<div class="container-fluid sr-wrap">
    <div class="row mt-3">
        <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-2">
            <div>
                <h4 class="page-title mb-0">Salary Reviews</h4>
                <p class="text-muted mb-0">Create Reviews, Filter History, And Apply Approved Changes.</p>
            </div>
            @can('HrOperations-create')
                <a class="btn btn-primary" href="{{ route('admin.hr.salary_review.create') }}">New Review</a>
            @endcan
        </div>

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

        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <span>Filters</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearFilters">Clear Filters</button>
                </div>
                <div class="sr-filters">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-6 col-lg-2">
                            <label>Review Type</label>
                            <select class="form-control" wire:model.live="filterReviewType">
                                <option value="">All Types</option>
                                @foreach($reviewTypes as $t)
                                    <option value="{{ $t }}">{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-lg-3">
                            <label>Employee</label>
                            <input type="hidden" wire:model="filterStaffId" id="sr_filter_staff_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="sr_filter_staff" data-placeholder="All Employees">
                                    <option value="">All Employees</option>
                                    @foreach($staffOptions as $s)
                                        <option value="{{ $s->id }}">{{ $s->user?->name ?? 'Staff #'.$s->id }}({{ $s->user_id }})-{{ $s->warehouse?->name ?? 'No Branch' }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>Date From</label>
                            <input type="date" class="form-control" wire:model.live="filterDateFrom">
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>Date To</label>
                            <input type="date" class="form-control" wire:model.live="filterDateTo">
                        </div>
                        <div class="form-group col-md-6 col-lg-2">
                            <label>Status</label>
                            <select class="form-control" wire:model.live="filterStatus">
                                <option value="">All Status</option>
                                <option value="{{ \App\Models\SalaryReview::STATUS_APPROVED }}">Applied</option>
                                <option value="{{ \App\Models\SalaryReview::STATUS_PENDING }}">Pending</option>
                                <option value="{{ \App\Models\SalaryReview::STATUS_REJECTED }}">Rejected</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6 col-lg-1">
                            <label>Search</label>
                            <input type="text" class="form-control" wire:model.live.debounce.400ms="search" placeholder="...">
                        </div>
                    </div>
                </div>

                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0 sr-table">
                        <thead>
                            <tr>
                                <th>Staff</th>
                                <th>Review Type</th>
                                <th>Increment Mode</th>
                                <th>Increment Value</th>
                                <th>Effective From</th>
                                <th>Status</th>
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reviews as $r)
                                <tr>
                                    <td>
                                        {{ $r->staff?->user?->name ?? '—' }}<br>
                                        <small class="text-muted">ID: {{ $r->staff?->user_id ?? '—' }}</small>
                                    </td>
                                    <td>{{ $r->review_type ?? '—' }}</td>
                                    <td>{{ $r->increment_mode ? ucfirst($r->increment_mode) : '—' }}</td>
                                    <td>{{ $r->increment_value !== null ? number_format((float) $r->increment_value, 2) : '—' }}</td>
                                    <td>{{ $r->effective_date?->format('M d, Y') ?? '—' }}</td>
                                    <td>
                                        @if($r->status === \App\Models\SalaryReview::STATUS_APPROVED)
                                            <span class="sr-badge applied">Applied</span>
                                        @elseif($r->status === \App\Models\SalaryReview::STATUS_REJECTED)
                                            <span class="sr-badge rejected">Rejected</span>
                                        @else
                                            <span class="sr-badge pending">Pending</span>
                                        @endif
                                    </td>
                                    <td class="text-right">
                                        <a class="btn btn-sm btn-light" href="{{ route('admin.hr.salary_review.show', $r->id) }}">View</a>
                                        @can('HrOperations-Approve')
                                            @if($r->status === \App\Models\SalaryReview::STATUS_PENDING)
                                                <button type="button" class="btn btn-sm btn-success" wire:click="approve({{ $r->id }})">Apply</button>
                                            @endif
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="7" class="text-center text-muted py-4">No Records Found</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="card-footer">{{ $reviews->links() }}</div>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script>
        function srInitStaffFilterSelect2() {
            var $el = $('#sr_filter_staff');
            if (!$el.length) return;

            if ($el.hasClass('select2-hidden-accessible')) {
                $el.off('change.srstaff');
                $el.select2('destroy');
            }
            $el.select2({ width: '100%', placeholder: $el.data('placeholder') || 'All Employees' });
            $el.on('change.srstaff', function () {
                var v = $(this).val();
                @this.set('filterStaffId', v ? parseInt(v, 10) : null);
            });
            var cur = ($('#sr_filter_staff_hidden').val() || '').toString();
            if (cur) $el.val(cur).trigger('change.select2');
            else $el.val('').trigger('change.select2');
        }

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