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

@push('css')
    <style>
        .hr-panel .page-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.15rem; }
        .hr-panel .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
        .hr-panel .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 800; padding: 0.85rem 1.15rem; }
        .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; white-space: nowrap; }
        .hr-panel .table td { vertical-align: middle; }
        .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-tenure-badge {
            display: inline-flex;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            background: rgba(14,165,233,.12);
            color: #0369a1;
        }
        .hr-tenure-badge.long { background: rgba(245,158,11,.15); color: #b45309; }
        .hr-tenure-badge.current { background: rgba(34,197,94,.12); color: #166534; }
        .hr-selected-panel {
            background: #f8fafc;
            border: 1px solid #edf0f6;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 14px;
        }
        .hr-reason-cell {
            max-width: 280px;
            min-width: 140px;
            white-space: normal;
            word-break: break-word;
            font-size: 13px;
            line-height: 1.45;
            color: rgba(15,23,42,.85);
        }
        .hr-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; align-items: center; }
        .hr-actions .btn { white-space: nowrap; }
        #transferCreateModal .modal-dialog { max-width: 720px; }
        #transferCreateModal .select2-container { width: 100% !important; }
        #transferCreateModal .select2-selection--single { height: 38px !important; border-radius: 8px; }
        #transferCreateModal .select2-selection__rendered { line-height: 36px !important; }
        #transferCreateModal .select2-selection__arrow { height: 36px !important; }
    </style>
@endpush

<div class="container-fluid hr-panel pt-3 pb-4">
    <div class="row">
        <div class="col-12 mb-3 d-flex flex-wrap justify-content-between align-items-start" style="gap:10px;">
            <div>
                <h4 class="page-title mb-0">{{ __('Staff Branch Transfer') }}</h4>
                <p class="text-muted small mb-0">{{ __('Transfer employees between branches and review tenure history.') }}</p>
            </div>
            <button type="button" class="btn btn-primary" wire:click="openCreateModal">
                <i class="fas fa-plus"></i> {{ __('New Transfer Proposal') }} / বদলী প্রস্তাব
            </button>
        </div>

        @if (session()->has('message'))
            <div class="col-12"><div class="alert alert-success py-2">{{ session('message') }}</div></div>
        @endif
        @if (session()->has('error'))
            <div class="col-12"><div class="alert alert-danger py-2">{{ 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>{{ __('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 form-control-sm" 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 form-control-sm 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 form-control-sm 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 form-control-sm" 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 form-control-sm" 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 form-control-sm" 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 form-control-sm" wire:model.live="historyEffectiveDateTo">
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>{{ __('Recorded') }}</th>
                                <th>{{ __('Effective') }}</th>
                                <th>{{ __('Employee') }}</th>
                                <th>{{ __('From') }}</th>
                                <th>{{ __('To') }}</th>
                                <th>{{ __('Days at From') }}</th>
                                <th>{{ __('Transfer Reason') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('By') }}</th>
                                <th class="text-right">{{ __('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($history as $row)
                                <tr>
                                    <td class="text-nowrap">{{ $row->created_at?->format('Y-m-d') }}</td>
                                    <td class="text-nowrap">{{ $row->effective_date?->format('Y-m-d') ?? '—' }}</td>
                                    <td>
                                        @if($row->staff)
                                            <div>{{ $row->staff->user?->name ?? 'Staff #'.$row->staff->id }}</div>
                                            <div class="small text-muted">{{ $row->staff->user_id }}</div>
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $row->fromBranch?->name ?? '—' }}</td>
                                    <td>{{ $row->toBranch?->name ?? '—' }}</td>
                                    <td class="text-nowrap">
                                        @if(isset($historyDays[$row->id]) && $historyDays[$row->id] !== null)
                                            {{ $historyDays[$row->id] }} days
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td class="hr-reason-cell" title="{{ e($row->reason ?? '') }}">{{ $row->reason ? \Illuminate\Support\Str::limit($row->reason, 180) : '—' }}</td>
                                    <td class="text-nowrap">
                                        @php
                                            $status = $row->approval_status ?? 'approved';
                                            $badge = match ($status) {
                                                'pending' => 'badge-warning',
                                                'rejected' => 'badge-danger',
                                                default => 'badge-success',
                                            };
                                        @endphp
                                        <span class="badge {{ $badge }}">{{ ucfirst($status) }}</span>
                                        @if($status === 'approved' && ($row->joining_form_status ?? '') === 'pending')
                                            <div class="small text-warning mt-1">{{ __('Join form pending') }}</div>
                                        @elseif($status === 'approved' && ($row->joining_form_status ?? '') === 'submitted')
                                            <div class="small text-success mt-1">{{ __('Joined') }}</div>
                                        @endif
                                    </td>
                                    <td class="text-nowrap">{{ $row->createdBy?->name ?? '—' }}</td>
                                    <td class="text-right">
                                        <div class="hr-actions">
                                            <a href="{{ route('admin.hr.staff_branch_transfer.print', $row->id) }}"
                                               class="btn btn-sm btn-outline-secondary" target="_blank" title="{{ __('Print proposal') }}">
                                                <i class="mdi mdi-printer"></i>
                                            </a>
                                            @if(($row->approval_status ?? '') === 'approved')
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        {{ __('Documents') }}
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <a class="dropdown-item" href="{{ route('admin.hr.staff_branch_transfer.letter', $row->id) }}" target="_blank">
                                                            <i class="mdi mdi-file-document-outline"></i> {{ __('Transfer letter') }}
                                                        </a>
                                                        <form method="post" action="{{ route('admin.hr.staff_branch_transfer.letter_issue', $row->id) }}"
                                                              onsubmit="return confirm(@json(__('Issue transfer letter to E-Nothi?')));">
                                                            @csrf
                                                            <button type="submit" class="dropdown-item">
                                                                <i class="mdi mdi-send"></i> {{ __('Issue to E-Nothi') }}
                                                            </button>
                                                        </form>
                                                        @if(($row->joining_form_status ?? '') === 'submitted')
                                                            <a class="dropdown-item" href="{{ route('admin.hr.staff_branch_transfer.joining', $row->id) }}" target="_blank">
                                                                <i class="mdi mdi-clipboard-check-outline"></i> {{ __('Joining form') }}
                                                            </a>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                            @if(($row->approval_status ?? 'approved') === 'pending')
                                                <button type="button" class="btn btn-sm btn-outline-primary"
                                                        wire:click="openEditTransfer({{ $row->id }})">
                                                    {{ __('Edit') }}
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="10" class="text-center text-muted py-5">
                                        {{ __('No Records Yet') }}
                                        <div class="mt-2">
                                            <button type="button" class="btn btn-sm btn-primary" wire:click="openCreateModal">
                                                <i class="fas fa-plus"></i> {{ __('New Transfer Proposal') }}
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">{{ $history->links('pagination::bootstrap-4', ['paginator' => $history]) }}</div>
            </div>
        </div>

        <div class="col-12 mb-3">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <div>
                        <span>{{ __('Branch Tenure Overview') }}</span>
                        <div class="small text-muted font-weight-normal">{{ __('See how long each employee has been in their current branch — useful for transfer planning.') }}</div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearOverviewFilters">{{ __('Clear Filters') }}</button>
                </div>
                <div class="hr-history-filters">
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-4 col-lg-3 mb-2 mb-lg-0">
                            <label>{{ __('Current Branch') }}</label>
                            <input type="hidden" wire:model="overviewBranchId" id="hr_overview_branch_hidden">
                            <div wire:ignore>
                                <select class="form-control form-control-sm select2" id="hr_overview_branch" 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-4 col-lg-2 mb-2 mb-lg-0">
                            <label>{{ __('Min Days in Branch') }}</label>
                            <input type="number" min="0" class="form-control form-control-sm" wire:model.live.debounce.400ms="overviewMinDays" placeholder="e.g. 180">
                        </div>
                        <div class="form-group col-md-4 col-lg-3 mb-2 mb-lg-0">
                            <label>{{ __('Sort by Tenure') }}</label>
                            <select class="form-control form-control-sm" wire:model.live="overviewSort">
                                <option value="days_desc">{{ __('Longest in current branch first') }}</option>
                                <option value="days_asc">{{ __('Shortest in current branch first') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>{{ __('Employee') }}</th>
                                <th>{{ __('Current Branch') }}</th>
                                <th>{{ __('Joined Branch On') }}</th>
                                <th>{{ __('Days in Current') }}</th>
                                <th>{{ __('Previous Branch') }}</th>
                                <th>{{ __('Days in Previous') }}</th>
                                <th>{{ __('Transfers') }}</th>
                                <th class="text-right"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($overviewStaff as $staff)
                                @php $summary = $overviewSummaries[$staff->id] ?? null; @endphp
                                <tr>
                                    <td>{{ $staff->user?->name ?? '—' }} <span class="small text-muted">({{ $staff->user_id }})</span></td>
                                    <td>{{ $summary['current']?->branch?->name ?? ($staff->warehouse?->name ?? '—') }}</td>
                                    <td class="text-nowrap">{{ $summary['current']?->joined_at?->format('Y-m-d') ?? '—' }}</td>
                                    <td>
                                        @php $days = $summary['current_days'] ?? 0; @endphp
                                        <span class="hr-tenure-badge {{ $days >= 365 ? 'long' : 'current' }}">{{ $days }} days</span>
                                        @if($summary['current'] ?? null)
                                            <div class="small text-muted">{{ $summary['current']->durationLabel() }}</div>
                                        @endif
                                    </td>
                                    <td>{{ $summary['previous']?->branch?->name ?? '—' }}</td>
                                    <td>
                                        @if($summary['previous'] ?? null)
                                            {{ $summary['previous_days'] }} days
                                            <div class="small text-muted">{{ $summary['previous']->durationLabel() }}</div>
                                        @else
                                            —
                                        @endif
                                    </td>
                                    <td>{{ $summary['transfer_count'] ?? 0 }}</td>
                                    <td class="text-right text-nowrap">
                                        <button type="button" class="btn btn-sm btn-primary"
                                                wire:click="openCreateModal({{ $staff->id }})">
                                            {{ __('Transfer') }}
                                        </button>
                                        <a class="btn btn-sm btn-light" href="{{ route('admin.staffs.history', $staff->id) }}">{{ __('History') }}</a>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="8" class="text-center text-muted py-4">{{ __('No active employees match these filters.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="card-footer">{{ $overviewStaff->links('pagination::bootstrap-4', ['paginator' => $overviewStaff]) }}</div>
            </div>
        </div>
    </div>

    {{-- Create Transfer Modal --}}
    <div class="modal fade" id="transferCreateModal" tabindex="-1" role="dialog" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">বদলী প্রস্তাব / {{ __('New Transfer Proposal') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" wire:click="closeCreateModal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if (session()->has('error'))
                        <div class="alert alert-danger py-2">{{ session('error') }}</div>
                    @endif
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <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>

                    @if($selectedSummary)
                        <div class="hr-selected-panel">
                            <div class="small text-uppercase font-weight-bold text-muted mb-2">কর্মীর তথ্য</div>
                            <div class="form-row">
                                <div class="col-md-6 small mb-1"><strong>নাম:</strong> {{ $selectedSummary['staff']->user?->name ?? '—' }}</div>
                                <div class="col-md-6 small mb-1"><strong>পদবী:</strong> {{ $selectedSummary['staff']->designation?->name ?? '—' }}</div>
                                <div class="col-md-6 small mb-1"><strong>বর্তমান কর্মস্থল:</strong> {{ $selectedSummary['staff']->warehouse?->name ?? '—' }}</div>
                                <div class="col-md-6 small mb-1"><strong>সংস্থায় যোগদান:</strong> {{ $selectedSummary['staff']->joing_date?->format('d/m/Y') ?? '—' }}</div>
                                <div class="col-md-6 small mb-1"><strong>বর্তমান কর্মস্থলে যোগদান:</strong> {{ $selectedSummary['staff']->branch_join_date?->format('d/m/Y') ?? ($selectedSummary['current']?->joined_at?->format('d/m/Y') ?? '—') }}</div>
                                <div class="col-md-6 d-flex justify-content-between align-items-center mt-1">
                                    <span class="hr-tenure-badge current">{{ $selectedSummary['current_days'] }} days here</span>
                                    <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.staffs.history', $selectedSummary['staff']->id) }}" target="_blank">{{ __('History') }}</a>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>লেভেল (স্তর)</label>
                            <input type="text" class="form-control" wire:model.defer="staffLevel" placeholder="e.g. Mid / Senior">
                            @error('staffLevel') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="form-group col-md-6">
                            <label>প্রস্তাবিত নতুন কর্মস্থল</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 col-md-6">
                            <label>নতুন পদবী (optional)</label>
                            <select class="form-control" wire:model="toDesignationId">
                                <option value="">{{ __('Same as current') }}</option>
                                @foreach($designations as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                            @error('toDesignationId') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="form-group col-md-6">
                            <label>কার্যকর তারিখ / {{ __('Effective Date') }}</label>
                            <input type="date" class="form-control" wire:model="effectiveDate">
                        </div>
                        <div class="form-group col-md-12 mb-0">
                            <label>বদলীর প্রয়োজনীয়তা (বিস্তারিত)</label>
                            <textarea class="form-control" rows="4" wire:model.defer="reason" placeholder="বদলীর কারণ বিস্তারিত লিখুন"></textarea>
                            @error('reason') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal" wire:click="closeCreateModal">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-primary" wire:click="submitTransfer" wire:loading.attr="disabled">
                        <span wire:loading.remove wire:target="submitTransfer">{{ __('Submit Transfer Proposal') }}</span>
                        <span wire:loading wire:target="submitTransfer">{{ __('Submitting...') }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="transferEditModal" tabindex="-1" role="dialog" aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Branch Transfer Application</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" wire:click="cancelEditTransfer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if($editingTransferId)
                        <div class="form-group">
                            <label>Destination Branch</label>
                            <input type="hidden" wire:model="editToWarehouseId" id="hr_edit_to_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_edit_to" data-placeholder="Select Branch">
                                    <option value="">Select Branch</option>
                                    @foreach($branches as $b)
                                        <option value="{{ $b->id }}" @selected((int) $editToWarehouseId === (int) $b->id)>{{ $b->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('editToWarehouseId') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="form-group">
                            <label>লেভেল (স্তর)</label>
                            <input type="text" class="form-control" wire:model="editStaffLevel">
                        </div>
                        <div class="form-group">
                            <label>নতুন পদবী</label>
                            <select class="form-control" wire:model="editToDesignationId">
                                <option value="">{{ __('Same / keep') }}</option>
                                @foreach($designations as $d)
                                    <option value="{{ $d->id }}">{{ $d->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Effective Date</label>
                            <input type="date" class="form-control" wire:model="editEffectiveDate">
                            @error('editEffectiveDate') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                        <div class="form-group mb-0">
                            <label>বদলীর প্রয়োজনীয়তা</label>
                            <textarea class="form-control" rows="3" wire:model="editReason" placeholder="Business justification"></textarea>
                            @error('editReason') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal" wire:click="cancelEditTransfer">Cancel</button>
                    <button type="button" class="btn btn-primary" wire:click="updateTransfer">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

@section('script')
    <script>
        function hrInitStaffBranchSelect2() {
            var $staff = $('#hr_staff_branch_staff');
            var $to = $('#hr_staff_branch_to');
            var $modal = $('#transferCreateModal');
            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');
            }

            var s2opts = { width: '100%', dropdownParent: $modal };
            $staff.select2(Object.assign({}, s2opts, { placeholder: $staff.data('placeholder') || 'Select Employee', allowClear: true }));
            $to.select2(Object.assign({}, s2opts, { placeholder: $to.data('placeholder') || 'Select Branch', allowClear: true }));

            $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();
            $staff.val(curStaff || null).trigger('change.select2');
            $to.val(curTo || null).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');
        }

        function hrInitOverviewBranchSelect2() {
            var $branch = $('#hr_overview_branch');
            if (!$branch.length) return;

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

            $branch.select2({ width: '100%', placeholder: $branch.data('placeholder') || 'All Branches' });
            $branch.on('change.hroverview', function () {
                var v = $(this).val();
                @this.set('overviewBranchId', v ? parseInt(v, 10) : null);
            });

            var cur = ($('#hr_overview_branch_hidden').val() || '').toString();
            if (cur) $branch.val(cur).trigger('change.select2');
            else $branch.val('').trigger('change.select2');
        }

        function hrInitEditTransferSelect2() {
            var $to = $('#hr_edit_to');
            if (!$to.length) return;

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

            $to.select2({ width: '100%', placeholder: $to.data('placeholder') || 'Select Branch', dropdownParent: $('#transferEditModal') });
            $to.on('change.hredit', function () {
                var v = $(this).val();
                @this.set('editToWarehouseId', v ? parseInt(v, 10) : null);
            });

            var cur = ($('#hr_edit_to_hidden').val() || '').toString();
            if (cur) $to.val(cur).trigger('change.select2');
            else $to.val('').trigger('change.select2');
        }

        document.addEventListener('livewire:init', () => {
            hrInitHistoryFilterSelect2();
            hrInitOverviewBranchSelect2();
            Livewire.hook('message.processed', () => {
                hrInitHistoryFilterSelect2();
                hrInitOverviewBranchSelect2();
                if ($('#transferCreateModal').hasClass('show')) {
                    hrInitStaffBranchSelect2();
                }
                if ($('#transferEditModal').hasClass('show')) {
                    hrInitEditTransferSelect2();
                }
            });
            Livewire.on('hr-select2-reset', () => {
                $('#hr_staff_branch_staff').val(null).trigger('change.select2');
                $('#hr_staff_branch_to').val(null).trigger('change.select2');
            });
            Livewire.on('hr-history-filters-reset', () => {
                $('#hr_history_from').val('').trigger('change.select2');
                $('#hr_history_to').val('').trigger('change.select2');
            });
            Livewire.on('hr-overview-filters-reset', () => {
                $('#hr_overview_branch').val('').trigger('change.select2');
            });
            Livewire.on('open-transfer-create-modal', () => {
                $('#transferCreateModal').modal('show');
                setTimeout(hrInitStaffBranchSelect2, 80);
            });
            Livewire.on('close-transfer-create-modal', () => {
                $('#transferCreateModal').modal('hide');
            });
            Livewire.on('open-transfer-edit-modal', () => {
                $('#transferEditModal').modal('show');
                setTimeout(hrInitEditTransferSelect2, 50);
            });
            Livewire.on('close-transfer-edit-modal', () => {
                $('#transferEditModal').modal('hide');
            });
            $('#transferEditModal').on('hidden.bs.modal', function () {
                if (@this.get('editingTransferId')) {
                    @this.call('cancelEditTransfer');
                }
            });
        });
    </script>
@endsection