@section('title', get_setting('site_name') . ' | Staff Promotion')

@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-history-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .hr-history-filters .form-group { margin-bottom: 10px; }
        @media (min-width: 992px) {
            .hr-history-filters .form-group { margin-bottom: 0; }
        }
        .hr-transfer-form .card-body { padding: 16px 18px; }
        .hr-reason-cell {
            max-width: 320px;
            min-width: 160px;
            white-space: normal;
            word-break: break-word;
            font-size: 13px;
            line-height: 1.45;
            color: rgba(15,23,42,.85);
        }
    </style>
@endpush

<div class="container-fluid hr-panel">
    <div class="row mt-3">
        <div class="col-12 mb-2">
            <h4 class="page-title">Staff Promotion</h4>
            <p class="text-muted">Update Designation And Optionally Department With Historical Records.</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

        <div class="col-12 col-lg-3 mb-3 hr-transfer-form">
            <div class="card h-100">
                <div class="card-header">New Promotion</div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Employee</label>
                        <input type="hidden" wire:model="staffId" id="hr_promo_staff_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_promo_staff" data-placeholder="Select Employee">
                                <option value="">Select Employee</option>
                                @foreach($staffOptions as $s)
                                    <option value="{{ $s->id }}">{{ $s->user?->name ?? 'Staff #'.$s->id }}({{ $s->user_id }})-{{ $s->designation?->name ?? 'No Designation' }}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('staffId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                    <div class="form-group">
                        <label>New Designation</label>
                        <input type="hidden" wire:model="toDesignationId" id="hr_promo_des_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_promo_des" data-placeholder="Select Designation">
                                <option value="">Select Designation</option>
                                @foreach($designations as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('toDesignationId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                    <div class="form-group">
                        <label>New Department (Optional)</label>
                        <input type="hidden" wire:model="toDepartmentId" id="hr_promo_dept_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_promo_dept" data-placeholder="Keep Current If Empty">
                                <option value="">Keep Current Department</option>
                                @foreach($departments as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Effective Date</label>
                        <input type="date" class="form-control" wire:model="effectiveDate">
                    </div>
                    <div class="form-group">
                        <label>Reason</label>
                        <textarea class="form-control" rows="3" wire:model.defer="reason" placeholder="Promotion Justification"></textarea>
                        @error('reason') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                    <button type="button" class="btn btn-primary" wire:click="submitPromotion">Save Promotion</button>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-9 mb-3">
            <div class="card h-100">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <span>Promotion History</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearHistoryFilters">Clear Filters</button>
                </div>
                <div class="hr-history-filters">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-12 col-lg-3 mb-2 mb-lg-0">
                            <label>Search</label>
                            <input type="text" class="form-control" wire:model.live.debounce.400ms="historySearch" placeholder="Name, User Id, Designation, Department, Reason, Or Actor">
                        </div>
                        <div class="form-group col-md-6 col-lg-3 mb-2 mb-lg-0">
                            <label>Employee</label>
                            <input type="hidden" wire:model="historyStaffId" id="hr_promo_hist_staff_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_promo_hist_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->designation?->name ?? 'No Designation' }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>From Designation</label>
                            <input type="hidden" wire:model="historyFromDesignationId" id="hr_promo_hist_from_des_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_promo_hist_from_des" data-placeholder="All">
                                    <option value="">All</option>
                                    @foreach($designations as $d)
                                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>To Designation</label>
                            <input type="hidden" wire:model="historyToDesignationId" id="hr_promo_hist_to_des_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_promo_hist_to_des" data-placeholder="All">
                                    <option value="">All</option>
                                    @foreach($designations as $d)
                                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>From Department</label>
                            <input type="hidden" wire:model="historyFromDepartmentId" id="hr_promo_hist_from_dept_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_promo_hist_from_dept" data-placeholder="All">
                                    <option value="">All</option>
                                    @foreach($departments as $d)
                                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-row align-items-end mt-2 pt-2 border-top border-light">
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>To Department</label>
                            <input type="hidden" wire:model="historyToDepartmentId" id="hr_promo_hist_to_dept_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_promo_hist_to_dept" data-placeholder="All">
                                    <option value="">All</option>
                                    @foreach($departments as $d)
                                        <option value="{{ $d->id }}">{{ $d->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>Recorded From</label>
                            <input type="date" class="form-control" wire:model.live="historyDateFrom">
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>Recorded To</label>
                            <input type="date" class="form-control" wire:model.live="historyDateTo">
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>Effective From</label>
                            <input type="date" class="form-control" wire:model.live="historyEffectiveDateFrom">
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-0">
                            <label>Effective To</label>
                            <input type="date" class="form-control" wire:model.live="historyEffectiveDateTo">
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Recorded</th>
                                <th>Effective</th>
                                <th>Employee</th>
                                <th>Designation</th>
                                <th>Department</th>
                                <th>Transfer Reason</th>
                                <th>By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($history as $row)
                                <tr>
                                    <td class="text-nowrap">{{ $row->created_at?->format('Y-m-d H:i') }}</td>
                                    <td class="text-nowrap">{{ $row->effective_date?->format('Y-m-d') ?? '—' }}</td>
                                    <td class="text-nowrap">
                                        @if($row->staff)
                                            {{ $row->staff->user?->name ?? 'Staff #'.$row->staff->id }}({{ $row->staff->user_id }})
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $row->fromDesignation?->name ?? '—' }} → {{ $row->toDesignation?->name ?? '—' }}</td>
                                    <td>{{ $row->fromDepartment?->name ?? '—' }} → {{ $row->toDepartment?->name ?? '—' }}</td>
                                    <td class="hr-reason-cell" title="{{ e($row->reason ?? '') }}">{{ $row->reason ? \Illuminate\Support\Str::limit($row->reason, 220) : '—' }}</td>
                                    <td class="text-nowrap">{{ $row->createdBy?->name ?? '—' }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="7" class="text-center text-muted py-4">No Records Yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">{{ $history->links() }}</div>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script>
        function hrInitPromotionSelect2() {
            var $staff = $('#hr_promo_staff');
            var $des = $('#hr_promo_des');
            var $dept = $('#hr_promo_dept');
            if (!$staff.length) return;

            [$staff, $des, $dept].forEach(function ($el) {
                if ($el.length && $el.hasClass('select2-hidden-accessible')) {
                    $el.off('change.hrpromo');
                    $el.select2('destroy');
                }
            });

            $staff.select2({ width: '100%', placeholder: $staff.data('placeholder') || 'Select Employee' });
            $des.select2({ width: '100%', placeholder: $des.data('placeholder') || 'Select Designation' });
            $dept.select2({ width: '100%', placeholder: $dept.data('placeholder') || 'Keep Current If Empty' });

            $staff.on('change.hrpromo', function () {
                var v = $(this).val();
                @this.set('staffId', v ? parseInt(v, 10) : null);
            });
            $des.on('change.hrpromo', function () {
                var v = $(this).val();
                @this.set('toDesignationId', v ? parseInt(v, 10) : null);
            });
            $dept.on('change.hrpromo', function () {
                var v = $(this).val();
                @this.set('toDepartmentId', v ? parseInt(v, 10) : null);
            });

            var cs = ($('#hr_promo_staff_hidden').val() || '').toString();
            var cd = ($('#hr_promo_des_hidden').val() || '').toString();
            var cdep = ($('#hr_promo_dept_hidden').val() || '').toString();
            if (cs) $staff.val(cs).trigger('change.select2');
            if (cd) $des.val(cd).trigger('change.select2');
            if (cdep) $dept.val(cdep).trigger('change.select2');
        }

        function hrInitPromotionHistoryFilterSelect2() {
            var $staff = $('#hr_promo_hist_staff');
            if (!$staff.length) return;

            var ids = ['#hr_promo_hist_staff', '#hr_promo_hist_from_des', '#hr_promo_hist_to_des', '#hr_promo_hist_from_dept', '#hr_promo_hist_to_dept'];
            ids.forEach(function (sel) {
                var $el = $(sel);
                if ($el.length && $el.hasClass('select2-hidden-accessible')) {
                    $el.off('change.hrpromohist');
                    $el.select2('destroy');
                }
            });

            $('#hr_promo_hist_staff').select2({ width: '100%', placeholder: $('#hr_promo_hist_staff').data('placeholder') || 'All Employees' });
            $('#hr_promo_hist_from_des').select2({ width: '100%', placeholder: 'All' });
            $('#hr_promo_hist_to_des').select2({ width: '100%', placeholder: 'All' });
            $('#hr_promo_hist_from_dept').select2({ width: '100%', placeholder: 'All' });
            $('#hr_promo_hist_to_dept').select2({ width: '100%', placeholder: 'All' });

            $('#hr_promo_hist_staff').on('change.hrpromohist', function () {
                var v = $(this).val();
                @this.set('historyStaffId', v ? parseInt(v, 10) : null);
            });
            $('#hr_promo_hist_from_des').on('change.hrpromohist', function () {
                var v = $(this).val();
                @this.set('historyFromDesignationId', v ? parseInt(v, 10) : null);
            });
            $('#hr_promo_hist_to_des').on('change.hrpromohist', function () {
                var v = $(this).val();
                @this.set('historyToDesignationId', v ? parseInt(v, 10) : null);
            });
            $('#hr_promo_hist_from_dept').on('change.hrpromohist', function () {
                var v = $(this).val();
                @this.set('historyFromDepartmentId', v ? parseInt(v, 10) : null);
            });
            $('#hr_promo_hist_to_dept').on('change.hrpromohist', function () {
                var v = $(this).val();
                @this.set('historyToDepartmentId', v ? parseInt(v, 10) : null);
            });

            function sync(sel, hiddenId) {
                var $el = $(sel);
                var v = ($(hiddenId).val() || '').toString();
                if (v) $el.val(v).trigger('change.select2');
                else $el.val('').trigger('change.select2');
            }
            sync('#hr_promo_hist_staff', '#hr_promo_hist_staff_hidden');
            sync('#hr_promo_hist_from_des', '#hr_promo_hist_from_des_hidden');
            sync('#hr_promo_hist_to_des', '#hr_promo_hist_to_des_hidden');
            sync('#hr_promo_hist_from_dept', '#hr_promo_hist_from_dept_hidden');
            sync('#hr_promo_hist_to_dept', '#hr_promo_hist_to_dept_hidden');
        }

        document.addEventListener('livewire:init', () => {
            hrInitPromotionSelect2();
            hrInitPromotionHistoryFilterSelect2();
            Livewire.hook('message.processed', () => {
                hrInitPromotionSelect2();
                hrInitPromotionHistoryFilterSelect2();
            });
            Livewire.on('hr-select2-reset', () => {
                $('#hr_promo_staff').val('').trigger('change.select2');
                $('#hr_promo_des').val('').trigger('change.select2');
                $('#hr_promo_dept').val('').trigger('change.select2');
            });
            Livewire.on('hr-promo-history-filters-reset', () => {
                $('#hr_promo_hist_staff').val('').trigger('change.select2');
                $('#hr_promo_hist_from_des').val('').trigger('change.select2');
                $('#hr_promo_hist_to_des').val('').trigger('change.select2');
                $('#hr_promo_hist_from_dept').val('').trigger('change.select2');
                $('#hr_promo_hist_to_dept').val('').trigger('change.select2');
            });
        });
    </script>
@endsection