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

@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 Branch Transfer</h4>
            <p class="text-muted">Transfer Employees Between Branches While Keeping Users And Audit History Aligned.</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 Transfer</div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Employee</label>
                        <input type="hidden" wire:model="staffId" id="hr_staff_branch_staff_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_staff_branch_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->warehouse?->name ?? 'No Branch' }}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('staffId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                    <div class="form-group">
                        <label>Destination Branch</label>
                        <input type="hidden" wire:model="toWarehouseId" id="hr_staff_branch_to_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_staff_branch_to" data-placeholder="Select Branch">
                                <option value="">Select Branch</option>
                                @foreach($branches as $b)
                                    <option value="{{ $b->id }}">{{ $b->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('toWarehouseId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </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="Business Justification"></textarea>
                        @error('reason') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                    <button type="button" class="btn btn-primary" wire:click="submitTransfer">Submit Transfer</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>Transfer 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-4 mb-2 mb-lg-0">
                            <label>Search</label>
                            <input type="text" class="form-control" wire:model.live.debounce.400ms="historySearch" placeholder="Name, User Id, Branch, Reason, Or Actor">
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>From Branch</label>
                            <input type="hidden" wire:model="historyFromBranchId" id="hr_history_from_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_history_from" data-placeholder="All Branches">
                                    <option value="">All Branches</option>
                                    @foreach($branches as $b)
                                        <option value="{{ $b->id }}">{{ $b->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6 col-lg-2 mb-2 mb-lg-0">
                            <label>To Branch</label>
                            <input type="hidden" wire:model="historyToBranchId" id="hr_history_to_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_history_to" data-placeholder="All Branches">
                                    <option value="">All Branches</option>
                                    @foreach($branches as $b)
                                        <option value="{{ $b->id }}">{{ $b->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>
                    <div class="form-row align-items-end mt-2 pt-2 border-top border-light">
                        <div class="form-group col-md-6 col-lg-3 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-3 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>From</th>
                                <th>To</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>
                                        @if($row->staff)
                                            {{ $row->staff->user?->name ?? 'Staff #'.$row->staff->id }}({{ $row->staff->user_id }})
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $row->fromBranch?->name ?? '—' }}</td>
                                    <td>{{ $row->toBranch?->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 hrInitStaffBranchSelect2() {
            var $staff = $('#hr_staff_branch_staff');
            var $to = $('#hr_staff_branch_to');
            if (!$staff.length) return;

            if ($staff.hasClass('select2-hidden-accessible')) {
                $staff.off('change.hrsb');
                $staff.select2('destroy');
            }
            if ($to.length && $to.hasClass('select2-hidden-accessible')) {
                $to.off('change.hrsb');
                $to.select2('destroy');
            }

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

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

            var curStaff = ($('#hr_staff_branch_staff_hidden').val() || '').toString();
            var curTo = ($('#hr_staff_branch_to_hidden').val() || '').toString();
            if (curStaff) $staff.val(curStaff).trigger('change.select2');
            if (curTo) $to.val(curTo).trigger('change.select2');
        }

        function hrInitHistoryFilterSelect2() {
            var $from = $('#hr_history_from');
            var $to = $('#hr_history_to');
            if (!$from.length) return;

            if ($from.hasClass('select2-hidden-accessible')) {
                $from.off('change.hrhist');
                $from.select2('destroy');
            }
            if ($to.length && $to.hasClass('select2-hidden-accessible')) {
                $to.off('change.hrhist');
                $to.select2('destroy');
            }

            $from.select2({ width: '100%', placeholder: $from.data('placeholder') || 'All Branches' });
            $to.select2({ width: '100%', placeholder: $to.data('placeholder') || 'All Branches' });

            $from.on('change.hrhist', function () {
                var v = $(this).val();
                @this.set('historyFromBranchId', v ? parseInt(v, 10) : null);
            });
            $to.on('change.hrhist', function () {
                var v = $(this).val();
                @this.set('historyToBranchId', v ? parseInt(v, 10) : null);
            });

            var hf = ($('#hr_history_from_hidden').val() || '').toString();
            var ht = ($('#hr_history_to_hidden').val() || '').toString();
            if (hf) $from.val(hf).trigger('change.select2');
            else $from.val('').trigger('change.select2');
            if (ht) $to.val(ht).trigger('change.select2');
            else $to.val('').trigger('change.select2');
        }

        document.addEventListener('livewire:init', () => {
            hrInitStaffBranchSelect2();
            hrInitHistoryFilterSelect2();
            Livewire.hook('message.processed', () => {
                hrInitStaffBranchSelect2();
                hrInitHistoryFilterSelect2();
            });
            Livewire.on('hr-select2-reset', () => {
                $('#hr_staff_branch_staff').val('').trigger('change.select2');
                $('#hr_staff_branch_to').val('').trigger('change.select2');
            });
            Livewire.on('hr-history-filters-reset', () => {
                $('#hr_history_from').val('').trigger('change.select2');
                $('#hr_history_to').val('').trigger('change.select2');
            });
        });
    </script>
@endsection