@extends('layouts.admin')
@section('title', 'Create Transfer')
@section('content')
@php
    $defaultFromId = (int) ($defaultFromId ?? 0);
    $defaultToId = (int) ($defaultToId ?? 0);
@endphp

<div class="tw-migrated space-y-4">
    <x-ui.page-header title="Create Stock Transfer" subtitle="Move stock between warehouse and stores (or store to store).">
        <x-slot:actions>
            <x-ui.button href="{{ route('admin.transfers.index') }}" variant="secondary">
                <i class="bi bi-arrow-left"></i> Back
            </x-ui.button>
        </x-slot:actions>
    </x-ui.page-header>

    @if($errors->any())
        <x-ui.alert type="danger">
            <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </x-ui.alert>
    @endif

    <x-ui.card>
        <form method="post" action="{{ route('admin.transfers.store') }}" id="transferForm" novalidate>
            @csrf
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="admin-form-label" for="fromLocationSelect">From Location *</label>
                    <select name="from_location_id" id="fromLocationSelect" class="form-select admin-form-control no-select2" required>
                        <option value="">Select from location…</option>
                        @foreach(($fromLocations ?? $locations) as $loc)
                            <option value="{{ $loc->id }}"
                                    data-type="{{ $loc->type }}"
                                    @selected((string) $defaultFromId === (string) $loc->id)>
                                {{ $loc->name }} ({{ $loc->type }})
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Defaults to your current topbar location when possible. Product stock is for this location only.</small>
                    <div class="invalid-feedback d-block" id="fromLocationError">
                        @error('from_location_id'){{ $message }}@enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="admin-form-label" for="toLocationSelect">To Location *</label>
                    <select name="to_location_id" id="toLocationSelect" class="form-select admin-form-control no-select2" required>
                        <option value="">Select to location…</option>
                        @foreach(($toLocations ?? $locations) as $loc)
                            <option value="{{ $loc->id }}"
                                    data-type="{{ $loc->type }}"
                                    @selected((string) $defaultToId === (string) $loc->id && (string) $defaultToId !== (string) $defaultFromId)>
                                {{ $loc->name }} ({{ $loc->type }})
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Must differ from From location.</small>
                    <div class="invalid-feedback d-block" id="toLocationError">
                        @error('to_location_id'){{ $message }}@enderror
                    </div>
                </div>
                <div class="col-12">
                    <label class="admin-form-label" for="transferNotes">Notes</label>
                    <textarea name="notes" id="transferNotes" class="form-control admin-form-control" rows="2">{{ old('notes') }}</textarea>
                </div>
            </div>

            <div class="mb-2 flex items-center justify-between">
                <h5 class="mb-0">Products</h5>
                <button type="button" class="tw-btn tw-btn-outline tw-btn-sm" id="addTransferLine">
                    <i class="bi bi-plus-lg"></i> Add line
                </button>
            </div>
            <div class="alert alert-warning d-none" id="fromStockEmptyAlert" role="alert">
                <strong>No transferable stock at this From location.</strong>
                Restock into the warehouse first, then transfer to stores — or choose a From location that currently holds stock.
            </div>
            <div class="invalid-feedback d-block mb-2" id="itemsError">
                @error('items'){{ $message }}@enderror
            </div>
            <div class="tw-table-wrap">
                <table class="tw-table" id="transferItems">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th style="width:140px;">Qty</th>
                            <th style="width:60px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="item-row">
                            <td>
                                <select name="items[0][product_id]" class="form-select admin-form-control js-transfer-product no-select2" required>
                                    <option value="">Select product</option>
                                    @foreach($products as $p)
                                        <option value="{{ $p->id }}" data-stock="{{ (int) ($p->location_stock ?? 0) }}">{{ $p->name }} (Stock: {{ (int) ($p->location_stock ?? 0) }})</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="number" min="1" name="items[0][quantity]" class="form-control admin-form-control js-transfer-qty" required value="{{ old('items.0.quantity', 1) }}">
                                <div class="invalid-feedback d-block js-qty-error"></div>
                            </td>
                            <td><button type="button" class="btn btn-outline-danger btn-sm remove-line" style="display:none;"><i class="bi bi-trash"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="submit" class="tw-btn-primary mt-2"><i class="bi bi-check-circle"></i> Create Draft Transfer</button>
        </form>
    </x-ui.card>
</div>

@php
$opts = $products->map(fn ($p) => [
    'id' => $p->id,
    'text' => $p->name.' (Stock: '.(int) ($p->location_stock ?? 0).')',
    'stock' => (int) ($p->location_stock ?? 0),
])->values();
@endphp
@push('scripts')
<script>
(function(){
    let products = @json($opts);
    const productsUrl = @json($productsUrl);
    let idx = 1;
    const root = document.getElementById('transferItems');
    const tbody = root?.querySelector('tbody');
    const addBtn = document.getElementById('addTransferLine');
    const fromSelect = document.getElementById('fromLocationSelect');
    const toSelect = document.getElementById('toLocationSelect');
    const form = document.getElementById('transferForm');
    const fromError = document.getElementById('fromLocationError');
    const toError = document.getElementById('toLocationError');
    const itemsError = document.getElementById('itemsError');
    const emptyAlert = document.getElementById('fromStockEmptyAlert');

    function escapeHtml(s) {
        return String(s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }
    function updateEmptyStockAlert() {
        if (!emptyAlert) return;
        emptyAlert.classList.toggle('d-none', products.length > 0);
    }
    function stockForProduct(productId) {
        const p = products.find((x) => String(x.id) === String(productId));
        return p ? Number(p.stock || 0) : 0;
    }
    function optsHtml(selectedId){
        const selected = selectedId ? String(selectedId) : '';
        return '<option value="">Select product</option>' + products.map(p => {
            const sel = selected && String(p.id) === selected ? ' selected' : '';
            return `<option value="${p.id}" data-stock="${Number(p.stock || 0)}"${sel}>${escapeHtml(p.text)}</option>`;
        }).join('');
    }
    function firstEnabledValue(select, preferred) {
        if (!select) return '';
        const preferredStr = preferred ? String(preferred) : '';
        if (preferredStr) {
            const match = Array.from(select.options).find((opt) => opt.value === preferredStr && !opt.disabled);
            if (match) return match.value;
        }
        const first = Array.from(select.options).find((opt) => opt.value && !opt.disabled);
        return first ? first.value : '';
    }
    function syncLocationOptions() {
        const fromId = fromSelect?.value || '';
        const toId = toSelect?.value || '';

        if (fromSelect) {
            Array.from(fromSelect.options).forEach((opt) => {
                if (!opt.value) return;
                // Never disable the currently selected From option (clears value in some browsers / Select2).
                opt.disabled = toId !== '' && opt.value === toId && opt.value !== fromId;
            });
            if (fromSelect.value && fromSelect.selectedOptions[0]?.disabled) {
                fromSelect.value = firstEnabledValue(fromSelect, '');
            }
        }
        if (toSelect) {
            Array.from(toSelect.options).forEach((opt) => {
                if (!opt.value) return;
                opt.disabled = fromId !== '' && opt.value === fromId;
            });
            if (!toSelect.value || toSelect.value === fromId || toSelect.selectedOptions[0]?.disabled) {
                toSelect.value = firstEnabledValue(toSelect, toId !== fromId ? toId : '');
            }
        }
    }
    function syncQtyLimits(row) {
        const productSelect = row.querySelector('.js-transfer-product');
        const qtyInput = row.querySelector('.js-transfer-qty');
        const err = row.querySelector('.js-qty-error');
        if (!productSelect || !qtyInput) return;
        const stock = stockForProduct(productSelect.value);
        qtyInput.max = String(Math.max(stock, 1));
        qtyInput.dataset.maxStock = String(stock);
        if (err) err.textContent = '';
        qtyInput.classList.remove('is-invalid');
        if (productSelect.value && stock <= 0) {
            if (err) err.textContent = 'No available stock at From location for this product.';
            qtyInput.classList.add('is-invalid');
        } else if (productSelect.value && Number(qtyInput.value) > stock) {
            if (err) err.textContent = `Qty cannot exceed available stock (${stock}).`;
            qtyInput.classList.add('is-invalid');
        }
    }
    function refreshProductSelects(){
        root?.querySelectorAll('.item-row').forEach((row) => {
            const sel = row.querySelector('select.js-transfer-product');
            if (!sel) return;
            const prev = sel.value;
            const stillExists = products.some(p => String(p.id) === String(prev));
            sel.innerHTML = optsHtml(stillExists ? prev : '');
            syncQtyLimits(row);
        });
    }
    function refresh(){
        const n = root.querySelectorAll('.item-row').length;
        root.querySelectorAll('.remove-line').forEach((btn) => { btn.style.display = n > 1 ? '' : 'none'; });
    }
    async function loadProductsForFromLocation(){
        const locationId = fromSelect?.value;
        if (!locationId || !productsUrl) return;
        const wasDisabled = fromSelect.disabled;
        fromSelect.disabled = true;
        try {
            const res = await fetch(`${productsUrl}?from_location_id=${encodeURIComponent(locationId)}`, {
                headers: { 'Accept': 'application/json' },
                credentials: 'same-origin',
            });
            if (!res.ok) throw new Error('Failed to load products');
            const json = await res.json();
            products = json.data || [];
            refreshProductSelects();
            updateEmptyStockAlert();
        } catch (e) {
            console.error(e);
        } finally {
            fromSelect.disabled = wasDisabled;
            syncLocationOptions();
        }
    }
    function validateForm() {
        let ok = true;
        if (fromError) fromError.textContent = '';
        if (toError) toError.textContent = '';
        if (itemsError) itemsError.textContent = '';

        const fromId = fromSelect?.value || '';
        const toId = toSelect?.value || '';
        if (!fromId) {
            if (fromError) fromError.textContent = 'Please select a From location.';
            fromSelect?.classList.add('is-invalid');
            ok = false;
        } else {
            fromSelect?.classList.remove('is-invalid');
        }
        if (!toId) {
            if (toError) toError.textContent = 'Please select a To location.';
            toSelect?.classList.add('is-invalid');
            ok = false;
        }
        if (fromId && toId && fromId === toId) {
            if (toError) toError.textContent = 'From location and To location must be different.';
            toSelect?.classList.add('is-invalid');
            ok = false;
        } else if (toId) {
            toSelect?.classList.remove('is-invalid');
        }

        const totals = {};
        root?.querySelectorAll('.item-row').forEach((row) => {
            const productSelect = row.querySelector('.js-transfer-product');
            const qtyInput = row.querySelector('.js-transfer-qty');
            const err = row.querySelector('.js-qty-error');
            if (err) err.textContent = '';
            qtyInput?.classList.remove('is-invalid');

            const productId = productSelect?.value || '';
            const qty = Number(qtyInput?.value || 0);
            const stock = stockForProduct(productId);

            if (!productId) {
                ok = false;
                return;
            }
            if (stock <= 0) {
                if (err) err.textContent = 'No available stock at From location for this product.';
                qtyInput?.classList.add('is-invalid');
                ok = false;
                return;
            }
            if (qty < 1 || qty > stock) {
                if (err) err.textContent = `Qty must be between 1 and available stock (${stock}).`;
                qtyInput?.classList.add('is-invalid');
                ok = false;
            }
            totals[productId] = (totals[productId] || 0) + qty;
        });

        for (const [productId, totalQty] of Object.entries(totals)) {
            const stock = stockForProduct(productId);
            if (totalQty > stock) {
                const name = products.find((p) => String(p.id) === String(productId))?.text || `Product #${productId}`;
                if (itemsError) {
                    itemsError.textContent = `${name}: total qty (${totalQty}) across lines exceeds available stock (${stock}).`;
                }
                ok = false;
            }
        }

        return ok;
    }

    addBtn?.addEventListener('click', function(){
        const tr = document.createElement('tr');
        tr.className = 'item-row';
        tr.innerHTML = `<td><select name="items[${idx}][product_id]" class="form-select admin-form-control js-transfer-product no-select2" required>${optsHtml()}</select></td>
        <td><input type="number" min="1" name="items[${idx}][quantity]" class="form-control admin-form-control js-transfer-qty" required value="1"><div class="invalid-feedback d-block js-qty-error"></div></td>
        <td><button type="button" class="btn btn-outline-danger btn-sm remove-line"><i class="bi bi-trash"></i></button></td>`;
        tbody.appendChild(tr); idx++; refresh();
        syncQtyLimits(tr);
    });
    root?.addEventListener('click', function(e){
        const btn = e.target.closest('.remove-line');
        if (!btn) return;
        if (root.querySelectorAll('.item-row').length <= 1) return;
        btn.closest('tr')?.remove(); refresh();
    });
    root?.addEventListener('change', function(e){
        const row = e.target.closest('.item-row');
        if (!row) return;
        if (e.target.classList.contains('js-transfer-product') || e.target.classList.contains('js-transfer-qty')) {
            syncQtyLimits(row);
        }
    });
    root?.addEventListener('input', function(e){
        const row = e.target.closest('.item-row');
        if (!row || !e.target.classList.contains('js-transfer-qty')) return;
        syncQtyLimits(row);
    });
    fromSelect?.addEventListener('change', function(){
        syncLocationOptions();
        loadProductsForFromLocation();
    });
    toSelect?.addEventListener('change', syncLocationOptions);
    form?.addEventListener('submit', function(e){
        // Ensure disabled selects are never left disabled on submit (excluded from POST).
        if (fromSelect) fromSelect.disabled = false;
        if (toSelect) toSelect.disabled = false;
        if (!validateForm()) {
            e.preventDefault();
        }
    });
    syncLocationOptions();
    root?.querySelectorAll('.item-row').forEach(syncQtyLimits);
    updateEmptyStockAlert();
    refresh();
})();
</script>
@endpush
@endsection