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

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

<div class="container-fluid hr-panel">
    <div class="row mt-3">
        <div class="col-12 mb-2">
            <h4 class="page-title">Salary Review</h4>
            <p class="text-muted">Capture Before And After Compensation Snapshots; Approvals Apply To Salary Setup.</p>
        </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

        @can('HrOperations-create')
            <div class="col-12 col-lg-6 mb-3">
                <div class="card">
                    <div class="card-header">New Review Request</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>Employee</label>
                            <input type="hidden" wire:model="staffId" id="hr_salary_staff_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_salary_staff" data-placeholder="Select Employee">
                                    <option value="">Select Employee</option>
                                    @foreach($staffOptions as $s)
                                        <option value="{{ $s->id }}">{{ $s->user?->name ?? 'Staff #'.$s->id }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('staffId') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        @if(!empty($afterSalary))
                            <div class="form-group">
                                <label>Effective Date</label>
                                <input type="date" class="form-control" wire:model="effectiveDate">
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="tax_exempt_cb" wire:model.live="afterSalary.tax_exempt">
                                <label class="form-check-label" for="tax_exempt_cb">Tax Exempt</label>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Basic Salary</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.basic_salary">
                                    @error('afterSalary.basic_salary') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Medical</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.medical">
                                    @error('afterSalary.medical') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>House Rent</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.house_rent">
                                    @error('afterSalary.house_rent') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Food</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.food">
                                    @error('afterSalary.food') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Provident Fund</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.provident_fund">
                                    @error('afterSalary.provident_fund') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Others</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.Others">
                                    @error('afterSalary.Others') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Conveyance</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.conveyance">
                                    @error('afterSalary.conveyance') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Utility</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.utility">
                                    @error('afterSalary.utility') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Gross Salary</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.gross_salary">
                                    @error('afterSalary.gross_salary') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Net Salary</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.net_salary">
                                    @error('afterSalary.net_salary') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Bulk Payroll Bonus</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.bulk_payroll_bonus">
                                    @error('afterSalary.bulk_payroll_bonus') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 form-group">
                                    <label>Bulk Payroll Arrear</label>
                                    <input type="number" step="0.01" min="0" class="form-control" wire:model.live="afterSalary.bulk_payroll_arrear">
                                    @error('afterSalary.bulk_payroll_arrear') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Remarks</label>
                                <textarea class="form-control" rows="2" wire:model.defer="remarks" placeholder="Context For Approvers"></textarea>
                                @error('remarks') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <button type="button" class="btn btn-primary" wire:click="submitReview">Submit For Approval</button>
                        @else
                            <p class="text-muted mb-0">Select An Employee With An Existing Salary Setup To Continue.</p>
                        @endif
                    </div>
                </div>
            </div>
        @endcan

        <div class="col-12 @can('HrOperations-create') col-lg-6 @else col-lg-12 @endcan mb-3">
            <div class="card mb-3">
                <div class="card-header">Pending Approvals</div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Submitted</th>
                                <th>Employee</th>
                                <th>Net Change</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pendingReviews as $rev)
                                @php
                                    $beforeNet = (float) ($rev->before_snapshot['net_salary'] ?? 0);
                                    $afterNet = (float) ($rev->after_snapshot['net_salary'] ?? 0);
                                @endphp
                                <tr>
                                    <td>{{ $rev->created_at?->format('Y-m-d') }}</td>
                                    <td>{{ $rev->staff?->user?->name ?? '—' }}</td>
                                    <td>{{ number_format($beforeNet, 2) }} → {{ number_format($afterNet, 2) }}</td>
                                    <td><span class="hr-badge pending">Pending</span></td>
                                    <td class="text-right">
                                        @can('HrOperations-Approve')
                                            <button type="button" class="btn btn-sm btn-success" wire:click="approve({{ $rev->id }})">Approve</button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" wire:click="openReject({{ $rev->id }})">Reject</button>
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted py-4">No Pending Reviews</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">{{ $pendingReviews->links() }}</div>
            </div>

            @if($rejectingId)
                <div class="card border-danger mb-3">
                    <div class="card-header bg-light">Reject Review #{{ $rejectingId }}</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label>Rejection Reason</label>
                            <textarea class="form-control" rows="2" wire:model.defer="rejectNote" placeholder="Required For Audit"></textarea>
                            @error('rejectNote') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <button type="button" class="btn btn-danger" wire:click="confirmReject">Confirm Reject</button>
                        <button type="button" class="btn btn-light" wire:click="cancelReject">Cancel</button>
                    </div>
                </div>
            @endif

            <div class="card">
                <div class="card-header">Recent Decisions</div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Employee</th>
                                <th>Status</th>
                                <th>Decided By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentReviews as $rev)
                                <tr>
                                    <td>{{ $rev->approved_at?->format('Y-m-d H:i') ?? $rev->updated_at?->format('Y-m-d H:i') }}</td>
                                    <td>{{ $rev->staff?->user?->name ?? '—' }}</td>
                                    <td>
                                        @if($rev->status === \App\Models\SalaryReview::STATUS_APPROVED)
                                            <span class="hr-badge approved">Approved</span>
                                        @else
                                            <span class="hr-badge rejected">Rejected</span>
                                        @endif
                                    </td>
                                    <td>{{ $rev->approvedBy?->name ?? '—' }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted py-4">No Completed Reviews Yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

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

            if ($el.hasClass('select2-hidden-accessible')) {
                $el.off('change.hrsal');
                $el.select2('destroy');
            }

            $el.select2({ width: '100%', placeholder: $el.data('placeholder') || 'Select Employee' });

            $el.on('change.hrsal', function () {
                var v = $(this).val();
                @this.set('staffId', v ? parseInt(v, 10) : null);
            });

            var cur = ($('#hr_salary_staff_hidden').val() || '').toString();
            if (cur) $el.val(cur).trigger('change.select2');
        }

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