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

@push('css')
    <style>
        .sr-create .card { border-radius: 14px; border: 1px solid #edf0f6; }
        .sr-create .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; display: flex; align-items: center; gap: 10px; }
        .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: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(15,23,42,.06); color: rgba(15,23,42,.75); }
    </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">Create A Review With Automatic Salary Preview.</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 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 }}">{{ $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>
                        <select class="form-control" wire:model.live="reviewType">
                            <option value="Annual">Annual</option>
                            <option value="Special">Special</option>
                            <option value="Probation">Probation</option>
                            <option value="Promotion">Promotion</option>
                        </select>
                        @error('reviewType') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>

                    <div class="form-group">
                        <label>Increment Mode *</label>
                        <select class="form-control" wire:model.live="incrementMode">
                            <option value="percentage">Percentage</option>
                            <option value="fixed">Fixed</option>
                        </select>
                        @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>
                        @error('remarks') <span class="text-danger small">{{ $message }}</span> @enderror
                    </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>
    </div>
</div>

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

            if ($el.hasClass('select2-hidden-accessible')) {
                $el.off('change.srcreate');
                $el.select2('destroy');
            }
            $el.select2({ width: '100%', 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();
            if (cur) $el.val(cur).trigger('change.select2');
        }

        document.addEventListener('livewire:init', () => {
            srInitCreateStaffSelect2();
            Livewire.hook('message.processed', () => srInitCreateStaffSelect2());
        });
    </script>
@endsection