@section('title', get_setting('site_name') . ' | Asset 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">Asset Branch Transfer</h4>
            <p class="text-muted">Move Inventory Items Across Branches With Traceability.</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>Asset</label>
                        <input type="hidden" wire:model="assetId" id="hr_asset_branch_asset_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_asset_branch_asset" data-placeholder="Select Asset">
                                <option value="">Select Asset</option>
                                @foreach($assets as $a)
                                    <option value="{{ $a->id }}">{{ $a->name }} — {{ $a->identity ?? $a->code ?? 'ID '.$a->id }} — {{ $a->branch?->name ?? 'No Branch' }}</option>
                                @endforeach
                            </select>
                        </div>
                        @error('assetId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                    <div class="form-group">
                        <label>Destination Branch</label>
                        <input type="hidden" wire:model="toBranchId" id="hr_asset_branch_to_hidden">
                        <div wire:ignore>
                            <select class="form-control select2" id="hr_asset_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('toBranchId') <span class="text-danger small">{{ $message }}</span> @enderror
                    </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-3 mb-2 mb-lg-0">
                            <label>Search</label>
                            <input type="text" class="form-control" wire:model.live.debounce.400ms="historySearch" placeholder="Asset, Code, Reason, Branch, Or Actor">
                        </div>
                        <div class="form-group col-md-6 col-lg-3 mb-2 mb-lg-0">
                            <label>Asset</label>
                            <input type="hidden" wire:model="historyAssetId" id="hr_asset_hist_asset_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_asset_hist_asset" data-placeholder="All Assets">
                                    <option value="">All Assets</option>
                                    @foreach($assets as $a)
                                        <option value="{{ $a->id }}">{{ $a->name }} — {{ $a->identity ?? $a->code ?? 'ID '.$a->id }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </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_asset_hist_from_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_asset_hist_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_asset_hist_to_hidden">
                            <div wire:ignore>
                                <select class="form-control select2" id="hr_asset_hist_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-1 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-1 mb-0">
                            <label>Recorded To</label>
                            <input type="date" class="form-control" wire:model.live="historyDateTo">
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Recorded</th>
                                <th>Asset</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>{{ $row->assetRow?->name ?? '—' }}</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="6" 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 hrInitAssetBranchSelect2() {
            var $asset = $('#hr_asset_branch_asset');
            var $to = $('#hr_asset_branch_to');
            if (!$asset.length) return;

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

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

            $asset.on('change.hrab', function () {
                var v = $(this).val();
                @this.set('assetId', v ? parseInt(v, 10) : null);
            });
            $to.on('change.hrab', function () {
                var v = $(this).val();
                @this.set('toBranchId', v ? parseInt(v, 10) : null);
            });

            var curA = ($('#hr_asset_branch_asset_hidden').val() || '').toString();
            var curTo = ($('#hr_asset_branch_to_hidden').val() || '').toString();
            if (curA) $asset.val(curA).trigger('change.select2');
            if (curTo) $to.val(curTo).trigger('change.select2');
        }

        function hrInitAssetHistoryFilterSelect2() {
            var $asset = $('#hr_asset_hist_asset');
            var $from = $('#hr_asset_hist_from');
            var $to = $('#hr_asset_hist_to');
            if (!$asset.length) return;

            [$asset, $from, $to].forEach(function ($el) {
                if ($el.length && $el.hasClass('select2-hidden-accessible')) {
                    $el.off('change.hrah');
                    $el.select2('destroy');
                }
            });

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

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

            var ha = ($('#hr_asset_hist_asset_hidden').val() || '').toString();
            var hf = ($('#hr_asset_hist_from_hidden').val() || '').toString();
            var ht = ($('#hr_asset_hist_to_hidden').val() || '').toString();
            if (ha) $asset.val(ha).trigger('change.select2');
            else $asset.val('').trigger('change.select2');
            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', () => {
            hrInitAssetBranchSelect2();
            hrInitAssetHistoryFilterSelect2();
            Livewire.hook('message.processed', () => {
                hrInitAssetBranchSelect2();
                hrInitAssetHistoryFilterSelect2();
            });
            Livewire.on('hr-select2-reset', () => {
                $('#hr_asset_branch_asset').val('').trigger('change.select2');
                $('#hr_asset_branch_to').val('').trigger('change.select2');
            });
            Livewire.on('hr-asset-history-filters-reset', () => {
                $('#hr_asset_hist_asset').val('').trigger('change.select2');
                $('#hr_asset_hist_from').val('').trigger('change.select2');
                $('#hr_asset_hist_to').val('').trigger('change.select2');
            });
        });
    </script>
@endsection