@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 bg-white border-b border-gray-200">
                <div class="mb-4">
                    @include('stock.nav')
                </div>

                @if(($tab ?? 'stock') === 'expiry')
                    @if(!auth()->user()->hasPermission('pos.manage'))
                        <div class="text-sm text-gray-600">You don't have permission to view expiry management.</div>
                    @elseif(empty($locationId))
                        <div class="text-sm text-gray-600">Select a location to view expiry batches.</div>
                    @else
                        @include('pos.expiry._panel', [
                            'expiryIndexUrl' => route('expiry.index'),
                        ])
                    @endif
                @elseif(($tab ?? 'stock') === 'offpos')

                    @php
                        $perPageRaw = $perPageRaw ?? request()->query('per_page', 20);
                        $allowedPerPage = $allowedPerPage ?? [20, 50, 100, 500, 'all'];
                        if (!in_array($perPageRaw, $allowedPerPage, true)) {
                            $perPageRaw = 20;
                        }
                    @endphp

                    <div class="mb-3 flex items-end justify-between gap-3 flex-wrap">
                        <div class="text-sm text-gray-600">
                            Unresolved Off-POS sales recorded from Expiry → Assign.
                            @if(!empty($locationId))
                                <span class="ml-2">(Filtered to current location)</span>
                            @endif
                        </div>

                        <form method="GET" action="{{ route('stock.index') }}" class="flex items-center gap-2">
                            <input type="hidden" name="tab" value="offpos">
                            <label class="text-sm text-gray-600">Rows</label>
                            <select name="per_page" class="rounded border-gray-300 text-sm" onchange="this.form.submit()">
                                @foreach($allowedPerPage as $n)
                                    <option value="{{ $n }}" @selected((string) $perPageRaw === (string) $n)>{{ $n }}</option>
                                @endforeach
                            </select>
                        </form>
                    </div>

                    @if(auth()->user()->hasPermission('pos.manage'))
                        <div class="mb-3 flex items-center justify-end">
                            <button type="button" id="offposOpenAdd" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
                                Add Off-POS Sale
                            </button>
                        </div>
                    @endif

                    @if(isset($offposHasTable) && !$offposHasTable)
                        <div class="text-sm text-rose-700">Off-POS sales table is not available. Please run migrations.</div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Barcode</th>
                                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Qty</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">By</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @php
                                        $rows = $offposSales ?? [];
                                    @endphp
                                    @forelse($rows as $row)
                                        @php
                                            $p = isset($offposProductsById) ? ($offposProductsById[$row->product_id] ?? null) : null;
                                            $displayName = $p ? (string) (($p->name_local ?? $p->name_si ?? $p->name) ?? '') : '';
                                            $englishName = $p ? (string) (($p->name ?? '') ?? '') : '';
                                            $barcode = $p ? (string) (($p->barcode ?? '') ?? '') : (string) (($row->product_barcode ?? '') ?? '');
                                            $loc = isset($offposLocationsById) ? ($offposLocationsById[$row->location_id] ?? null) : null;
                                            $user = isset($offposUsersById) ? ($offposUsersById[$row->created_by] ?? null) : null;
                                        @endphp
                                        <tr>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">{{ !empty($row->created_at) ? \Illuminate\Support\Carbon::parse($row->created_at)->format('Y-m-d h:i A') : '-' }}</td>
                                            <td class="px-4 py-3 text-sm text-gray-900">
                                                <div class="font-semibold">{{ $displayName !== '' ? $displayName : ($englishName !== '' ? $englishName : '-') }}</div>
                                                @if($displayName !== '' && $englishName !== '' && $displayName !== $englishName)
                                                    <div class="text-xs text-gray-600">{{ $englishName }}</div>
                                                @endif
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">{{ $barcode !== '' ? $barcode : '-' }}</td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-semibold">{{ number_format((float) ($row->qty ?? 0), 3) }}</td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">{{ $loc ? ($loc->name ?? ('#' . $row->location_id)) : ('#' . $row->location_id) }}</td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-600">{{ $user ? ($user->name ?? '-') : '-' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="px-4 py-6 text-center text-sm text-gray-500">No unresolved Off-POS sales found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if(isset($offposSales) && method_exists($offposSales, 'links'))
                            <div class="d-flex justify-content-center mt-4">{{ $offposSales->appends(request()->except('page'))->links() }}</div>
                        @endif
                    @endif

                    @if(auth()->user()->hasPermission('pos.manage'))
                        <!-- Add Off-POS Sales Modal -->
                        <div id="offposAddModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
                            <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-y-auto">
                                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                                    <div>
                                        <h4 class="text-lg font-semibold text-gray-900">Add Off-POS Sales</h4>
                                        <div class="text-sm text-gray-600">Deducts stock from unbatched first, then earliest EXP batches.</div>
                                    </div>
                                    <button type="button" id="offposAddClose" class="text-rose-600 hover:text-rose-700 text-3xl font-semibold leading-none">&times;</button>
                                </div>

                                <form method="POST" action="{{ route('stock.offpos.store') }}" class="px-6 py-4 space-y-4" id="offposAddForm">
                                    @csrf

                                    <div>
                                        <label class="block text-sm font-medium text-gray-700">Search Product</label>
                                        <div class="relative">
                                            <input id="offposProductSearch" class="mt-1 w-full rounded border-gray-300" placeholder="Search by name / SKU / barcode (or scan)" autocomplete="off">
                                            <div id="offposProductResults" class="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded shadow-sm hidden"></div>
                                        </div>
                                        <div class="mt-1 text-xs text-gray-600">Pick a product, then enter the sold qty below. Submit supports multiple products.</div>
                                    </div>

                                    <div class="border border-gray-200 rounded overflow-hidden">
                                        <div class="grid grid-cols-12 gap-2 px-3 py-2 bg-gray-50 text-xs font-semibold text-gray-600">
                                            <div class="col-span-7">Product</div>
                                            <div class="col-span-3 text-right">Available</div>
                                            <div class="col-span-2 text-right">Qty Sold</div>
                                        </div>
                                        <div id="offposItems" class="divide-y divide-gray-100"></div>
                                    </div>

                                    <div class="flex items-center justify-end gap-2 border-t border-gray-200 pt-4">
                                        <div class="text-sm text-rose-600 mr-auto" id="offposValidationError"></div>
                                        <button type="button" class="app-btn-secondary" id="offposAddCancel">Cancel</button>
                                        <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded hover:bg-emerald-700">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <script>
                            (function () {
                                const openBtn = document.getElementById('offposOpenAdd');
                                const modal = document.getElementById('offposAddModal');
                                const closeBtn = document.getElementById('offposAddClose');
                                const cancelBtn = document.getElementById('offposAddCancel');

                                const input = document.getElementById('offposProductSearch');
                                const resultsBox = document.getElementById('offposProductResults');
                                const itemsWrap = document.getElementById('offposItems');
                                const errorEl = document.getElementById('offposValidationError');

                                const searchUrl = "{{ route('api.expiry.available.list') }}";
                                let debounceTimer = null;
                                let activeController = null;
                                const selected = new Map();

                                if (!openBtn || !modal || !input || !resultsBox || !itemsWrap) return;

                                function openModal() {
                                    modal.classList.remove('hidden');
                                    modal.classList.add('flex');
                                    if (errorEl) errorEl.textContent = '';
                                    input.focus();
                                }

                                function closeModal() {
                                    modal.classList.add('hidden');
                                    modal.classList.remove('flex');
                                    hideResults();
                                }

                                function hideResults() {
                                    resultsBox.classList.add('hidden');
                                    resultsBox.innerHTML = '';
                                }

                                function fmt(n) {
                                    const v = Number(n || 0);
                                    return isFinite(v) ? v.toFixed(3) : '0.000';
                                }

                                function renderItems() {
                                    itemsWrap.innerHTML = '';
                                    for (const [barcode, p] of selected.entries()) {
                                        const row = document.createElement('div');
                                        row.className = 'grid grid-cols-12 gap-2 px-3 py-2 items-center';

                                        const name = (p.display_name || '').trim();
                                        const english = (p.name || '').trim();
                                        const line1 = name || english || '(No name)';
                                        const line2 = (name && english && name !== english) ? english : '';

                                        row.innerHTML = `
                                            <div class="col-span-7 min-w-0">
                                                <div class="font-medium text-gray-900 truncate">${escapeHtml(line1)}</div>
                                                <div class="text-xs text-gray-600 truncate">${escapeHtml(line2 || barcode)}</div>
                                                <input type="hidden" name="items[][product_barcode]" value="${escapeAttr(barcode)}">
                                            </div>
                                            <div class="col-span-3 text-right text-sm text-gray-700 font-semibold">${fmt(p.available_qty)}</div>
                                            <div class="col-span-2">
                                                <div class="flex items-center gap-2 justify-end">
                                                    <input type="number" step="0.001" min="0.001" name="items[][qty]" class="w-28 rounded border-gray-300 text-right" value="${fmt(p.qty || 0)}">
                                                    <button type="button" class="px-2 py-1 text-gray-400 hover:text-gray-700" title="Remove">&times;</button>
                                                </div>
                                            </div>
                                        `;

                                        const qtyInput = row.querySelector('input[name="items[][qty]"]');
                                        qtyInput?.addEventListener('input', () => {
                                            selected.set(barcode, { ...p, qty: Number(qtyInput.value || 0) });
                                            if (errorEl) errorEl.textContent = '';
                                        });

                                        row.querySelector('button')?.addEventListener('click', () => {
                                            selected.delete(barcode);
                                            renderItems();
                                        });

                                        itemsWrap.appendChild(row);
                                    }
                                }

                                function renderResults(items) {
                                    resultsBox.innerHTML = '';
                                    const filtered = (items || []).filter(p => {
                                        const n = ((p && p.name) ? String(p.name) : '').trim().toLowerCase();
                                        return n !== "affect another product's stock";
                                    });

                                    if (!filtered.length) {
                                        const el = document.createElement('div');
                                        el.className = 'px-3 py-2 text-sm text-gray-500';
                                        el.textContent = 'No products found.';
                                        resultsBox.appendChild(el);
                                        resultsBox.classList.remove('hidden');
                                        return;
                                    }

                                    filtered.slice(0, 15).forEach((p) => {
                                        const barcode = (p.barcode || '').trim();
                                        if (!barcode) return;
                                        const name = (p.name || '').trim();
                                        const localName = ((p.name_local || p.name_si) || '').trim();
                                        const availableQty = Number(p.available_qty || 0);

                                        const btn = document.createElement('button');
                                        btn.type = 'button';
                                        btn.className = 'w-full text-left px-3 py-2 text-sm hover:bg-gray-50';
                                        btn.innerHTML = `
                                            <div class="flex items-center justify-between gap-3">
                                                <div class="min-w-0">
                                                    <div class="font-medium text-gray-800 truncate">${escapeHtml((localName || name) || '(No name)')}</div>
                                                    <div class="text-xs text-gray-600 truncate">${escapeHtml(barcode)}</div>
                                                </div>
                                                <div class="text-xs text-gray-700 font-semibold">${fmt(availableQty)}</div>
                                            </div>
                                        `;
                                        btn.addEventListener('click', () => {
                                            selected.set(barcode, {
                                                barcode,
                                                name,
                                                display_name: (localName || name),
                                                available_qty: availableQty,
                                                qty: selected.get(barcode)?.qty || 0,
                                            });
                                            renderItems();
                                            input.value = '';
                                            hideResults();
                                            input.focus();
                                        });
                                        resultsBox.appendChild(btn);
                                    });

                                    resultsBox.classList.remove('hidden');
                                }

                                async function doSearch(q) {
                                    const query = (q || '').trim();
                                    if (!query) {
                                        hideResults();
                                        return;
                                    }

                                    if (activeController) activeController.abort();
                                    activeController = new AbortController();

                                    const url = new URL(searchUrl, window.location.origin);
                                    url.searchParams.set('search', query);
                                    url.searchParams.set('limit', '15');
                                    url.searchParams.set('offset', '0');

                                    try {
                                        const res = await fetch(url.toString(), {
                                            headers: { 'X-Requested-With': 'XMLHttpRequest' },
                                            signal: activeController.signal,
                                        });
                                        if (!res.ok) {
                                            hideResults();
                                            return;
                                        }
                                        const data = await res.json();
                                        if (!data || data.ok !== true) {
                                            hideResults();
                                            return;
                                        }
                                        renderResults(Array.isArray(data.items) ? data.items : []);
                                    } catch (e) {
                                        if (e && e.name === 'AbortError') return;
                                        hideResults();
                                    }
                                }

                                function escapeHtml(s) {
                                    return String(s || '').replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
                                }
                                function escapeAttr(s) {
                                    return String(s || '').replace(/"/g, '&quot;');
                                }

                                openBtn.addEventListener('click', () => {
                                    renderItems();
                                    openModal();
                                });
                                closeBtn?.addEventListener('click', closeModal);
                                cancelBtn?.addEventListener('click', closeModal);
                                modal.addEventListener('click', (e) => {
                                    if (e.target === modal) closeModal();
                                });

                                input.addEventListener('input', () => {
                                    if (debounceTimer) window.clearTimeout(debounceTimer);
                                    debounceTimer = window.setTimeout(() => doSearch(input.value), 180);
                                });

                                input.addEventListener('keydown', (e) => {
                                    if (e.key === 'Escape') {
                                        hideResults();
                                    }
                                });

                                document.getElementById('offposAddForm')?.addEventListener('submit', (e) => {
                                    if (selected.size === 0) {
                                        e.preventDefault();
                                        if (errorEl) errorEl.textContent = 'Add at least one product.';
                                        return;
                                    }
                                    let ok = true;
                                    itemsWrap.querySelectorAll('input[name="items[][qty]"]').forEach((el) => {
                                        const v = Number(el.value || 0);
                                        if (!(v > 0)) ok = false;
                                    });
                                    if (!ok) {
                                        e.preventDefault();
                                        if (errorEl) errorEl.textContent = 'Enter qty for all items.';
                                    }
                                });
                            })();
                        </script>
                    @endif
                @else

    @php
        $perPageRaw = $perPageRaw ?? request()->query('per_page', 20);
        $allowedPerPage = $allowedPerPage ?? [20, 50, 100, 500, 'all'];
        if (!in_array($perPageRaw, $allowedPerPage, true)) {
            $perPageRaw = 20;
        }
        $linkedProductsCount = $linkedProductsCount ?? null;
    @endphp

    <div class="mb-3 flex items-end justify-between gap-3 flex-wrap">
        <div class="min-w-[260px] flex-1">
            <input id="stock-search" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Search by name / local name / ID / barcode / SKU">
            @if($linkedProductsCount !== null)
                <div class="mt-1 text-xs text-gray-600">Linked (Affect Another Product’s Stock) products: <span class="font-semibold">{{ number_format((int) $linkedProductsCount) }}</span></div>
            @endif
        </div>
        <form method="GET" action="{{ route('stock.index') }}" class="flex items-center gap-2">
            <label class="text-sm text-gray-600">Rows</label>
            <select name="per_page" class="rounded border-gray-300 text-sm" onchange="this.form.submit()">
                @foreach($allowedPerPage as $n)
                    <option value="{{ $n }}" @selected((string) $perPageRaw === (string) $n)>{{ $n }}</option>
                @endforeach
            </select>
        </form>
    </div>

    <table class="min-w-full divide-y divide-gray-200" id="stock-table">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Linked To</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">On-hand</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @foreach($products as $product)
            @php
                $name = (string) ($product->name ?? $product->product_code ?? '');
                $localName = (string) ($product->name_local ?? $product->name_si ?? '');
                $barcode = (string) ($product->barcode ?? '');
                $sku = (string) ($product->sku ?? '');
                $searchBlob = strtolower(trim(implode(' ', array_filter([
                    $name,
                    $localName,
                    $barcode,
                    $sku,
                    (string) $product->id,
                ]))));
                $isLinked = (bool) ($product->linkedRelationship);
                $linkedToName = $isLinked ? (string) ($product->linkedRelationship->linkedProduct->name ?? ('Product #' . $product->linkedRelationship->linked_product_id)) : '';
                $linkedQty = $isLinked ? (float) ($product->linkedRelationship->quantity ?? 1) : 1;
                $linkedToBarcode = $isLinked ? (string) ($product->linkedRelationship->linkedProduct->barcode ?? '') : '';
            @endphp

            <tr data-search="{{ $searchBlob }}" data-id="{{ $product->id }}">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $product->id }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    <div class="font-semibold text-gray-900">
                        {{ $localName !== '' ? $localName : ($name !== '' ? $name : '-') }}
                        @if($isLinked)
                            <span
                                class="ml-2 inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold"
                                style="background: var(--brand-soft); border-color: var(--input-border); color: var(--text);"
                            >Linked</span>
                        @endif
                    </div>
                    @if($localName !== '' && $name !== '' && $localName !== $name)
                        <div class="text-xs text-gray-600">{{ $name }}</div>
                    @endif
                    @if($barcode !== '' || $sku !== '')
                        <div class="text-xs text-gray-600">
                            {{ $barcode }}
                            @if($sku !== '')
                                <span class="mx-1">•</span>SKU: {{ $sku }}
                            @endif
                        </div>
                    @endif
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                    @if($product->linkedRelationship)
                        {{ (float) $product->linkedRelationship->quantity }}x {{ $linkedToName }}
                        @if($linkedToBarcode !== '')
                            <div class="text-xs text-gray-500">{{ $linkedToBarcode }}</div>
                        @endif
                    @else
                        -
                    @endif
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                    @php
                        $total = $product->getActualStock();
                    @endphp
                    {{ number_format($total, 2) }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                    <button
                        class="px-3 py-1 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 btn-adjust"
                        data-id="{{ $product->id }}"
                        data-name="{{ $localName !== '' ? $localName : ($name !== '' ? $name : ('Product #' . $product->id)) }}"
                        data-linked="{{ $isLinked ? '1' : '0' }}"
                        data-linked-qty="{{ $linkedQty }}"
                        data-linked-to-name="{{ $linkedToName }}"
                    >
                        Adjust
                    </button>
                    <a class="px-3 py-1 bg-gray-600 text-white text-sm rounded hover:bg-gray-700 inline-block btn-history" href="javascript:void(0)" data-id="{{ $product->id }}">History</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    @if(isset($products) && method_exists($products, 'links'))
        <div class="d-flex justify-content-center mt-4">{{ $products->appends(request()->except('page'))->links() }}</div>
    @endif

    <!-- Adjust Modal -->
    <div id="adjust-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" tabindex="-1" role="dialog" style="display:none;">
      <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4" role="document">
        <div class="modal-content">
          <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold">Adjust Stock</h5>
            <button type="button" class="text-gray-400 hover:text-gray-600 text-2xl" id="adjust-close">&times;</button>
          </div>
          <div class="px-6 py-4">
            <div id="adjust-product-name" class="mb-4 font-semibold text-gray-700"></div>
                        <div id="adjust-linked-note" class="mb-4 text-xs text-gray-600 hidden"></div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Type</label>
                <select id="adjust-type" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                    <optgroup label="Stock Increase">
                        <option value="adjust">Set Quantity</option>
                        <option value="in">Add Stock</option>
                    </optgroup>
                    <optgroup label="Stock Decrease">
                        <option value="lost">Lost (Theft/Shrinkage/Damage)</option>
                        <option value="sample">Sample/Giveaway</option>
                        <option value="offpos">Off-POS Sale</option>
                    </optgroup>
                    <optgroup label="Stock Movement">
                        <option value="transfer">Stock Transfer</option>
                    </optgroup>
                </select>
            </div>

            <div class="mb-4" id="adjust-loss-category-wrap" style="display:none;">
                <label class="block text-sm font-medium text-gray-700 mb-2">Loss Category</label>
                <select id="adjust-loss-category" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                    <option value="shrinkage">Shrinkage (Unknown loss)</option>
                    <option value="theft">Theft</option>
                    <option value="damage">Damage</option>
                </select>
            </div>

            <div class="mb-4" id="adjust-transfer-target-wrap" style="display:none;">
                <label class="block text-sm font-medium text-gray-700 mb-2">Transfer to (Location/Store)</label>
                <select id="adjust-target-location" class="w-full px-3 py-2 border border-gray-300 rounded-md" data-active-location="{{ (int) ($locationId ?? 0) }}">
                    <option value="">Select location</option>
                    @foreach(($locations ?? collect()) as $loc)
                        <option value="{{ $loc->id }}" {{ (int) ($locationId ?? 0) === (int) $loc->id ? 'disabled' : '' }}>
                            {{ $loc->name }}@if((int) ($locationId ?? 0) === (int) $loc->id) (Current)@endif
                        </option>
                    @endforeach
                </select>
                <div class="mt-1 text-xs text-gray-600">Moves stock from your current location into the selected location.</div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Quantity</label>
                <input id="adjust-qty" type="number" step="0.01" class="w-full px-3 py-2 border border-gray-300 rounded-md">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Note <span id="adjust-note-hint" class="text-gray-500 font-normal">(optional)</span></label>
                <input id="adjust-note" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter details...">
            </div>

            <div id="adjust-info-box" class="mb-4 p-3 rounded text-sm hidden"></div>
          </div>
          <div class="px-6 py-4 border-t border-gray-200 flex justify-end gap-2">
                        <button type="button" class="app-btn-secondary" id="adjust-cancel">Cancel</button>
            <button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700" id="adjust-save">Save</button>
          </div>
        </div>
      </div>
    </div>

    <!-- History Modal -->
    <div id="history-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" tabindex="-1" role="dialog" style="display:none;">
      <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col" role="document">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
          <h5 class="text-lg font-semibold" id="history-product-name">Stock Movement History</h5>
          <button type="button" class="text-gray-400 hover:text-gray-600 text-2xl" id="history-close">&times;</button>
        </div>
        <div class="px-6 py-4 overflow-y-auto flex-1">
          <div id="history-loading" class="text-center py-8">
            <div class="text-gray-500">Loading...</div>
          </div>
          <div id="history-content" style="display:none;">
            <div id="linked-product-banner" class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg" style="display:none;">
              <div class="flex items-center">
                <svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
                </svg>
                <span class="text-blue-800 font-medium">Linked Product</span>
              </div>
              <p class="text-blue-700 text-sm mt-1" id="linked-product-info"></p>
            </div>
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                  <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Quantity</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Note</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                </tr>
              </thead>
              <tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
              </tbody>
            </table>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button type="button" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700" id="history-close-btn">Close</button>
        </div>
      </div>
    </div>

                                @endif

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
    // Only run Stock tab scripts when the stock table exists.
    if (!document.getElementById('stock-table')) {
        return;
    }

    const adjustTypeEl = document.getElementById('adjust-type');
    const transferWrap = document.getElementById('adjust-transfer-target-wrap');
    const lossCategoryWrap = document.getElementById('adjust-loss-category-wrap');
    const targetLocationEl = document.getElementById('adjust-target-location');
    const infoBox = document.getElementById('adjust-info-box');
    const noteHint = document.getElementById('adjust-note-hint');

    function refreshAdjustModalFields() {
        const t = adjustTypeEl ? adjustTypeEl.value : 'adjust';
        
        // Show/hide transfer target
        if (transferWrap) {
            transferWrap.style.display = (t === 'transfer') ? 'block' : 'none';
        }
        
        // Show/hide loss category
        if (lossCategoryWrap) {
            lossCategoryWrap.style.display = (t === 'lost') ? 'block' : 'none';
        }
        
        // Update info box and note hint based on type
        if (infoBox) {
            infoBox.classList.remove('hidden', 'bg-red-50', 'bg-amber-50', 'bg-blue-50', 'bg-green-50', 'text-red-800', 'text-amber-800', 'text-blue-800', 'text-green-800');
            
            if (t === 'lost') {
                infoBox.classList.add('bg-red-50', 'text-red-800');
                infoBox.innerHTML = '<strong>⚠️ Loss Recording:</strong> Stock will be deducted and recorded as a loss. Cost will be calculated automatically.';
                infoBox.classList.remove('hidden');
                if (noteHint) noteHint.textContent = '(describe what happened)';
            } else if (t === 'sample') {
                infoBox.classList.add('bg-amber-50', 'text-amber-800');
                infoBox.innerHTML = '<strong>🎁 Promotional:</strong> Stock will be deducted and recorded as sample/giveaway (promotional expense).';
                infoBox.classList.remove('hidden');
                if (noteHint) noteHint.textContent = '(who received it?)';
            } else if (t === 'offpos') {
                infoBox.classList.add('bg-blue-50', 'text-blue-800');
                infoBox.innerHTML = '<strong>💵 Off-POS Sale:</strong> Stock will be deducted. Record will appear in Off-POS Sales for later reconciliation.';
                infoBox.classList.remove('hidden');
                if (noteHint) noteHint.textContent = '(optional)';
            } else if (t === 'transfer') {
                infoBox.classList.add('bg-green-50', 'text-green-800');
                infoBox.innerHTML = '<strong>📦 Transfer:</strong> Stock moves to another location. Batch/expiry data is preserved.';
                infoBox.classList.remove('hidden');
                if (noteHint) noteHint.textContent = '(optional)';
            } else {
                infoBox.classList.add('hidden');
                if (noteHint) noteHint.textContent = '(optional)';
            }
        }
    }

    adjustTypeEl?.addEventListener('change', refreshAdjustModalFields);

    document.querySelectorAll('.btn-adjust').forEach(btn=>{
        btn.addEventListener('click', ()=>{
            const id = btn.dataset.id;
            const name = btn.dataset.name;
            document.getElementById('adjust-product-name').innerText = name + ' (ID: '+id+')';

            const linkedNote = document.getElementById('adjust-linked-note');
            const isLinked = (btn.dataset.linked || '0') === '1';
            if (linkedNote) {
                if (isLinked) {
                    const linkedQty = Number(btn.dataset.linkedQty || 1);
                    const linkedToName = btn.dataset.linkedToName || 'Base product';
                    linkedNote.textContent = 'This is a linked product. 1 unit here = ' + linkedQty + ' units of: ' + linkedToName + '. Adjust will update the base product stock.';
                    linkedNote.classList.remove('hidden');
                } else {
                    linkedNote.textContent = '';
                    linkedNote.classList.add('hidden');
                }
            }
            document.getElementById('adjust-modal').style.display='block';
            document.getElementById('adjust-save').dataset.id = id;

            // Reset modal fields each open
            if (adjustTypeEl) adjustTypeEl.value = 'adjust';
            if (targetLocationEl) targetLocationEl.value = '';
            refreshAdjustModalFields();
        });
    });

    document.querySelectorAll('.btn-history').forEach(btn=>{
        btn.addEventListener('click', async ()=>{
            const id = btn.dataset.id;
            const name = btn.closest('tr').querySelector('td:nth-child(2)').textContent;
            
            // Show modal
            document.getElementById('history-product-name').textContent = 'Stock Movement History - ' + name.trim();
            document.getElementById('history-modal').style.display='flex';
            document.getElementById('history-loading').style.display='block';
            document.getElementById('history-content').style.display='none';
            
            // Fetch movements
            const currentPath = window.location.pathname;
            const basePath = currentPath.split('/stock')[0];
            const url = basePath + '/api/stock/' + id + '/movements';
            
            try {
                const res = await fetch(url, {
                    headers: { 'X-Requested-With':'XMLHttpRequest' }
                });
                
                if(res.ok) {
                    const data = await res.json();
                    const movements = data.movements || [];
                    
                    // Show/hide linked product banner
                    const linkedBanner = document.getElementById('linked-product-banner');
                    const linkedInfo = document.getElementById('linked-product-info');
                    if (data.is_linked && data.stock_product_name) {
                        linkedInfo.textContent = `Stock is managed through "${data.stock_product_name}" (1 unit = ${data.linked_ratio} base units). All quantities shown are converted to this product's units.`;
                        linkedBanner.style.display = 'block';
                    } else {
                        linkedBanner.style.display = 'none';
                    }
                    
                    // Build table rows
                    const tbody = document.getElementById('history-table-body');
                    tbody.innerHTML = '';
                    
                    if(movements.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-gray-500">No movements found</td></tr>';
                    } else {
                        movements.forEach(m => {
                            const date = new Date(m.created_at);
                            const dateStr = date.toLocaleString();
                            const typeColors = {
                                'in': 'text-green-600 font-semibold',
                                'out': 'text-red-600 font-semibold',
                                'adjust': 'text-blue-600 font-semibold'
                            };
                            const typeClass = typeColors[m.type] || 'text-gray-600';
                            const qtyClass = parseFloat(m.qty) >= 0 ? 'text-green-600' : 'text-red-600';
                            
                            // Parse note for CASE SALE / DIRECT tags
                            let noteDisplay = m.note || '-';
                            let saleTypeBadge = '';
                            let rowClass = '';
                            if (m.note && m.note.includes('[CASE SALE:')) {
                                saleTypeBadge = '<span class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-purple-100 text-purple-800" title="Stock affected by selling a linked case/bundle">📦 CASE</span>';
                                noteDisplay = m.note.replace(/\s*\[(CASE SALE|DIRECT):[^\]]+\]/g, '');
                                rowClass = 'bg-purple-50';
                            } else if (m.note && m.note.includes('[DIRECT:')) {
                                saleTypeBadge = '<span class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-gray-100 text-gray-600" title="Direct sale">DIRECT</span>';
                                noteDisplay = m.note.replace(/\s*\[(CASE SALE|DIRECT):[^\]]+\]/g, '');
                            }
                            
                            const row = `
                                <tr class="${rowClass}">
                                    <td class="px-4 py-3 text-sm text-gray-900">${dateStr}</td>
                                    <td class="px-4 py-3 text-sm ${typeClass}">${m.type.toUpperCase()}${saleTypeBadge}</td>
                                    <td class="px-4 py-3 text-sm text-right ${qtyClass} font-semibold">${parseFloat(m.qty).toFixed(2)}</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">${noteDisplay || '-'}</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">User #${m.created_by || '-'}</td>
                                </tr>
                            `;
                            tbody.innerHTML += row;
                        });
                    }
                    
                    document.getElementById('history-loading').style.display='none';
                    document.getElementById('history-content').style.display='block';
                } else {
                    alert('Error loading history: ' + res.status);
                    document.getElementById('history-modal').style.display='none';
                }
            } catch(e) {
                console.error('Error:', e);
                alert('Error loading history: ' + e.message);
                document.getElementById('history-modal').style.display='none';
            }
        });
    });

    document.getElementById('history-close').addEventListener('click', ()=>document.getElementById('history-modal').style.display='none');
    document.getElementById('history-close-btn').addEventListener('click', ()=>document.getElementById('history-modal').style.display='none');

    document.getElementById('adjust-close').addEventListener('click', ()=>document.getElementById('adjust-modal').style.display='none');
    document.getElementById('adjust-cancel').addEventListener('click', ()=>document.getElementById('adjust-modal').style.display='none');

    document.getElementById('adjust-save').addEventListener('click', async function(){
        const id = this.dataset.id;
        const type = document.getElementById('adjust-type').value;
        const qty = document.getElementById('adjust-qty').value;
        const note = document.getElementById('adjust-note').value;

        let targetLocationId = null;
        let lossCategory = null;

        if (type === 'transfer') {
            targetLocationId = (targetLocationEl?.value || '').trim();
            if (!targetLocationId) { alert('Select target location'); return; }
            const activeLoc = String(targetLocationEl?.dataset?.activeLocation || '');
            if (activeLoc && String(targetLocationId) === String(activeLoc)) { alert('Target location must be different'); return; }
        }

        if (type === 'lost') {
            lossCategory = document.getElementById('adjust-loss-category')?.value || 'shrinkage';
        }

        if(!qty){ alert('Enter quantity'); return; }

        const csrfToken = document.querySelector('meta[name=csrf-token]')?.getAttribute('content') || '';
        // Use relative URL based on current location
        const currentPath = window.location.pathname;
        const basePath = currentPath.split('/stock')[0]; // Get everything before /stock
        const url = basePath + '/api/stock/' + id + '/adjust';
        
        console.log('Saving stock adjustment:', { id, type, qty, note, lossCategory, url, basePath });

        try {
            const res = await fetch(url, {
                method: 'POST',
                headers: { 
                    'Content-Type':'application/json', 
                    'X-Requested-With':'XMLHttpRequest', 
                    'X-CSRF-TOKEN': csrfToken 
                },
                body: JSON.stringify({ 
                    quantity: qty, 
                    type: type, 
                    note: note, 
                    target_location_id: targetLocationId,
                    loss_category: lossCategory 
                })
            });
            console.log('Response status:', res.status);
            
            if(res.ok){
                const data = await res.json();
                console.log('Success:', data);
                alert(data.message || 'Stock adjusted successfully!');
                location.reload();
            }else{
                const t = await res.text(); 
                console.error('Error response:', res.status, t);
                try {
                    const errData = JSON.parse(t);
                    alert('Error: ' + (errData.message || res.status));
                } catch {
                    alert('Error: ' + res.status + ' - ' + t);
                }
            }
        } catch(e) {
            console.error('Fetch error:', e);
            alert('Error: ' + e.message);
        }
    });

    // Search
    const stockSearch = document.getElementById('stock-search');
    if (!stockSearch) {
        return;
    }

    stockSearch.addEventListener('input', function(){
        const q = this.value.toLowerCase();
        document.querySelectorAll('#stock-table tbody tr').forEach(row=>{
            const name = (row.dataset.search || '').toLowerCase();
            const id = row.dataset.id;
            row.style.display = (name.indexOf(q)!==-1||id.indexOf(q)!==-1) ? '' : 'none';
        });
    });

    // Initial state
    refreshAdjustModalFields();
});
</script>
@endpush