@extends('layouts.layout-horizontal')

@section('title', 'Create Purchase Order')

@section('css')
<style>
    /* ── Items table — inline spreadsheet feel (mirrors purchases/create) ── */
    #itemsTable tbody tr:nth-child(even) { background: #f8f9fa; }
    #itemsTable tbody tr:nth-child(odd)  { background: #fff; }

    #itemsTable thead th {
        position: sticky; top: 0; z-index: 2;
        background: #eef1f5; border-bottom: 2px solid #dee2e6;
        font-size: .825rem; text-transform: uppercase; letter-spacing: .3px; color: #6c757d;
        padding: 6px 4px; white-space: nowrap;
    }

    #itemsTable td { padding: 3px 4px; vertical-align: middle; font-size: .925rem; border: none; border-bottom: 1px solid #f0f0f0; }
    #itemsTable .row-num { color: #adb5bd; font-size: .825rem; text-align: center; width: 24px; user-select: none; }

    #itemsTable .form-control-sm {
        padding: 2px 4px; font-size: .925rem; height: 30px;
        border: 1px solid transparent; background: transparent; border-radius: 3px;
        transition: border-color .15s, background .15s;
    }
    #itemsTable .form-control-sm:focus {
        border-color: #86b7fe; background: #fff; box-shadow: 0 0 0 2px rgba(13,110,253,.12);
    }
    #itemsTable .form-control-sm:hover:not(:focus) { background: #f0f4f8; }

    #itemsTable .qty, #itemsTable .rate, #itemsTable .inward-qty, #itemsTable .line-amt {
        font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    }
    #itemsTable .line-amt { color: #0d6efd; font-weight: 600; }

    #itemsTable tbody tr.row-empty td:not(:nth-child(2)) { opacity: .35; transition: opacity .2s; }
    #itemsTable tbody tr.row-empty:hover td,
    #itemsTable tbody tr.row-empty:focus-within td { opacity: 1; }
    #itemsTable tbody tr.row-filled td { opacity: 1; }
    #itemsTable tbody tr:focus-within { background: #e8f0fe !important; }

    #itemsTable .remove { opacity: 0; transition: opacity .15s; }
    #itemsTable tbody tr:hover .remove,
    #itemsTable tbody tr:focus-within .remove { opacity: 1; }

    #itemsTable .ts-wrapper { font-size: .875rem; }
    #itemsTable .ts-wrapper .ts-control {
        padding: 0 6px !important; min-height: 0 !important; height: 36px;
        line-height: 36px; border: 1px solid #dee2e6; background: #fff;
        box-shadow: none; border-radius: 3px; display: flex; align-items: center;
    }
    #itemsTable .ts-wrapper .ts-control > input { padding: 0 !important; margin: 0 !important; height: 34px; line-height: 34px; font-size: .875rem; }
    #itemsTable .ts-wrapper .ts-control .item { padding: 0 4px; font-size: .875rem; line-height: 34px; }
    #itemsTable .ts-wrapper.focus .ts-control { border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.12); }
    #itemsTable .ts-wrapper .ts-dropdown { font-size: .875rem; }
    #itemsTable .ts-wrapper .ts-dropdown .option { padding: 3px 6px; }
    #itemsTable .btn-sm { padding: 1px 6px; font-size: .875rem; }

    .price-tip { max-width: 400px; }
    .price-tip .tooltip-inner { max-width: 400px; text-align: left; font-size: .8rem; padding: 10px 14px; line-height: 1.5; }

    .items-scroll { max-height: 65vh; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 6px; }

    .supplier-badge {
        font-size: .7rem; padding: 2px 6px; margin: 1px 2px; display: inline-flex; align-items: center; gap: 4px;
        background: #e0f2fe; color: #0369a1; border-radius: 3px; border: 1px solid #bae6fd;
    }
    .supplier-badge .remove-badge {
        cursor: pointer; font-weight: 700; color: #64748b; line-height: 1;
        padding: 0 2px; border-radius: 2px;
    }
    .supplier-badge .remove-badge:hover { background: #fecaca; color: #991b1b; }

    .supplier-pick-btn {
        font-size: .7rem; padding: 2px 8px; border-radius: 3px;
        border: 1px dashed #94a3b8; background: #fff; color: #64748b; cursor: pointer;
    }
    .supplier-pick-btn:hover { background: #f1f5f9; border-color: #64748b; color: #1e293b; }

    /* Inline per-row supplier picker */
    .suppliers-cell .row-supplier-select { width: 100%; min-width: 160px; }
    .suppliers-cell .ts-wrapper .ts-control {
        height: 36px !important; min-height: 36px !important; line-height: 36px;
        padding: 0 8px !important; font-size: .85rem;
    }
    .suppliers-cell .ts-wrapper .ts-control > input { height: 34px; line-height: 34px; font-size: .85rem; }
    .suppliers-cell .ts-wrapper .ts-dropdown { font-size: .85rem; }
    .supplier-top-row { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
    .supplier-top-row .supplier-pick-btn { height: 36px; padding: 0 10px; }
</style>
@endsection

@section('content')

    <div class="card">
        <form method="POST" action="{{ route('purchase-orders.store') }}" id="poForm">
            @csrf

            {{-- Compact header: back + date + PO badge --}}
            <div class="card-header" style="padding:10px 16px;background:#f8f9fb;border-bottom:1px solid #e9ecef;">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{{ route('purchase-orders.index') }}" class="text-muted" style="font-size:.85rem"><i class="ph-duotone ph-arrow-left"></i></a>
                    <span style="font-weight:600;font-size:1rem;color:#1e293b">Purchase Order</span>

                    <div style="width:1px;height:24px;background:#dee2e6"></div>

                    <div class="d-flex align-items-center gap-1">
                        <label style="font-size:.825rem;color:#6c757d;white-space:nowrap">Date</label>
                        <input type="date" name="order_date" class="form-control" value="{{ old('order_date', date('Y-m-d')) }}" required style="width:160px;height:40px;font-size:.975rem">
                    </div>

                    <div class="ms-auto d-flex align-items-center gap-2">
                        <span class="badge bg-primary" style="font-size:.75rem;padding:6px 12px">{{ ucfirst($companyMode ?? 'bill') }} Mode</span>
                        <span style="font-size:.825rem;color:#6c757d;text-transform:uppercase;letter-spacing:.3px">PO #</span>
                        <span style="font-weight:700;font-size:1rem;color:#1e293b">Auto</span>
                    </div>
                </div>
            </div>

            <div class="card-body" style="padding:10px 16px;">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span style="font-weight:600;font-size:.85rem;color:#334155">Line Items</span>
                    <div class="d-flex gap-2">
                        <a class="btn btn-sm btn-outline-success" href="{{ route('products.create') }}?from_dropdown=1" target="_blank" style="font-size:.75rem;padding:3px 10px"><i class="ph-duotone ph-plus me-1"></i>New Product</a>
                        <button class="btn btn-sm btn-primary" type="button" id="addRowBtn" title="Alt+A" style="font-size:.75rem;padding:3px 10px">+ Row <kbd class="ms-1 bg-light text-dark border" style="font-size:.6rem">Alt+A</kbd></button>
                    </div>
                </div>

                <div class="items-scroll">
                    <table class="table table-sm align-middle mb-0" id="itemsTable">
                        <thead>
                            <tr>
                                <th style="width:24px">#</th>
                                <th style="min-width:220px">Product</th>
                                <th style="width:20px"></th>
                                <th style="width:110px" class="text-center">Qty</th>
                                <th style="min-width:200px">Suppliers</th>
                                <th style="width:28px"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

    {{-- Sticky bottom bar --}}
    <div id="stickyFooter" style="position:fixed;bottom:0;left:0;right:0;z-index:1050;background:linear-gradient(180deg,#1a2332 0%,#0f172a 100%);border-top:3px solid #3b82f6;padding:0;box-shadow:0 -8px 30px rgba(0,0,0,.35);">
        <div style="max-width:1400px;margin:0 auto;padding:10px 20px;">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div class="d-flex align-items-center gap-4 flex-wrap">
                    <span style="color:#94a3b8;font-size:.8rem" id="itemCount">0 items</span>
                    <span style="color:#94a3b8;font-size:.75rem" id="poDraftStatus"></span>
                    <div style="width:1px;height:28px;background:#2d3a4d"></div>
                    <div class="d-flex flex-column align-items-end">
                        <span style="color:#64748b;font-size:.6rem;text-transform:uppercase;letter-spacing:.5px">Total</span>
                        <span id="poTotal" style="color:#f8fafc;font-size:1.25rem;font-weight:700;letter-spacing:-.5px">0.00</span>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <a href="{{ route('purchase-orders.index') }}" class="btn btn-outline-light" style="padding:8px 20px;font-size:.85rem">Cancel</a>
                    <button class="btn btn-success" form="poForm" style="padding:8px 20px;font-weight:600;font-size:.85rem">
                        <i class="ph-duotone ph-check me-1"></i> Save Purchase Order <kbd class="ms-1 bg-success-subtle text-success-emphasis border-0" style="font-size:.65rem;opacity:.7">Alt+S</kbd>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div style="height:80px"></div>

    {{-- ═══ Supplier-picker Modal (scoped to a row) ═══ --}}
    <div class="modal fade" id="supplierModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-2" style="background:#f8f9fb;border-bottom:1px solid #e9ecef;">
                    <h6 class="modal-title mb-0" style="font-weight:600;font-size:.9rem">
                        <i class="ph-duotone ph-truck me-1"></i> Select Suppliers — <span id="spProductName" class="text-muted"></span>
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" style="padding:12px 16px;">
                    <input type="text" id="supplierFilter" class="form-control form-control-sm mb-2" placeholder="Filter suppliers...">
                    <div class="table-responsive" style="max-height: 50vh; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 4px;">
                        <table class="table table-hover table-sm align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width:40px"><input type="checkbox" id="selectAllSuppliers" title="Select all"></th>
                                    <th>Supplier</th>
                                    <th class="text-end">Last Rate</th>
                                    <th class="text-end">Tax %</th>
                                    <th class="text-end">Total</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="supplierList">
                                <tr><td colspan="6" class="text-muted text-center">Choose a product first.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer py-2" style="background:#f8f9fb;border-top:1px solid #e9ecef;">
                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-sm btn-primary" id="applySuppliersBtn"><i class="ph-duotone ph-check me-1"></i>Apply</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
(function () {
    const itemsTbody = document.querySelector('#itemsTable tbody');
    const itemCountEl = document.getElementById('itemCount');
    const poTotalEl = document.getElementById('poTotal');
    const poForm = document.getElementById('poForm');

    // Products for per-row TomSelect
    const productOptions = @json($products).map(p => ({
        value: String(p.id),
        text: (p.product_id || '') + ' — ' + p.name,
        name: p.name,
        hsn: p.hsn || '',
        unit: p.unit || '',
        pid: p.product_id || ''
    }));

    // All parties — for quick inline single-supplier add per row
    const partyOptions = @json($parties ?? []).map(p => ({
        value: String(p.id),
        text: p.name + (p.payment_type === 'cash' ? ' (Cash)' : ''),
        name: p.name,
        gst: p.gst_number || ''
    }));

    const rowTomSelects = new Map();
    const rowSupplierSelects = new Map();
    let rowCounter = 0;

    const addProductUrl = `{{ route('products.create') }}?from_dropdown=1`;

    function buildPriceTooltip(d) {
        let html = '';
        if (d.last && d.last.length) {
            html += `<div style="border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:4px;margin-bottom:4px"><b style="color:#fbbf24">PURCHASE HISTORY</b></div>`;
            d.last.forEach(x => {
                const r = parseFloat(x.rate) || 0;
                const t = parseFloat(x.tax_percent) || 0;
                const incl = +(r * (1 + t / 100)).toFixed(2);
                html += `<div style="padding:2px 0"><b>${x.party ?? '—'}</b>: ₹${r.toFixed(2)} + ${t}% = <b>₹${incl.toFixed(2)}</b></div>`;
            });
        } else {
            html += `<div style="opacity:.5"><b>No purchase history</b></div>`;
        }
        if (d.stock !== undefined) {
            const s = parseFloat(d.stock) || 0;
            html += `<div style="border-top:1px solid rgba(255,255,255,.15);padding-top:4px;margin-top:4px"><b>Stock:</b> <span style="color:${s < 0 ? '#f87171' : '#4ade80'}">${s}</span></div>`;
        }
        return html || 'No history';
    }

    // --- Row template ---
    function addEmptyRow() {
        const idx = rowCounter++;
        const rowNum = itemsTbody.querySelectorAll('tr').length + 1;
        const row = document.createElement('tr');
        row.dataset.rowIdx = idx;
        row.className = 'row-empty';

        row.innerHTML = `
            <td class="row-num">${rowNum}</td>
            <td>
                <select class="row-product-select" id="prod_select_${idx}"><option value=""></option></select>
            </td>
            <td class="text-center"><span class="price-info-icon" data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="price-tip" title="" style="cursor:help;display:none;font-size:.85rem">&#9432;</span></td>
            <td><input type="number" step="0.001" class="form-control form-control-sm text-end qty" name="items[${idx}][qty]" value=""></td>
            <td class="suppliers-cell">
                <div class="supplier-top-row">
                    <select class="row-supplier-select" id="sup_select_${idx}"><option value=""></option></select>
                    <button type="button" class="supplier-pick-btn" data-row-idx="${idx}" title="Multi-select with rate history">⋯</button>
                </div>
                <div class="supplier-badges"></div>
                <input type="hidden" name="items[${idx}][product_id]" value="" class="row-product-id">
                <input type="hidden" name="items[${idx}][hsn]" value="">
                <input type="hidden" name="items[${idx}][unit]" value="">
                <input type="hidden" name="items[${idx}][rate]" value="0" class="rate">
                <input type="hidden" name="items[${idx}][inward_qty]" value="0" class="inward-qty">
            </td>
            <td><button type="button" class="btn btn-sm btn-outline-danger remove">×</button></td>
        `;
        itemsTbody.appendChild(row);
        initRowTomSelect(row, idx);
        initRowSupplierSelect(row, idx);
        return row;
    }

    // Inline single-supplier picker per row
    function initRowSupplierSelect(row, idx) {
        const selectEl = row.querySelector(`#sup_select_${idx}`);
        if (!selectEl) return;
        const ts = new TomSelect(selectEl, {
            dropdownParent: 'body',
            maxOptions: 100, allowEmptyOption: true, closeAfterSelect: true,
            placeholder: 'Add supplier…',
            options: JSON.parse(JSON.stringify(partyOptions)), items: [], highlight: true,
            searchField: ['text', 'name', 'gst'],
            render: {
                option: function(data, escape) {
                    const gst = data.gst ? `<span style="color:#999;font-size:.65rem"> ${escape(data.gst)}</span>` : '';
                    return `<div>${escape(data.text)}${gst}</div>`;
                }
            }
        });
        ts.on('change', function (value) {
            if (!value) return;
            const opt = ts.options[value];
            addSupplierToRow(row, { id: value, name: opt.name || opt.text, rate: 0, tax: 0 });
            ts.clear(true);
        });
        rowSupplierSelects.set(idx, ts);
    }

    function initRowTomSelect(row, idx) {
        const selectEl = row.querySelector(`#prod_select_${idx}`);
        const ts = new TomSelect(selectEl, {
            dropdownParent: 'body',
            maxOptions: 50, allowEmptyOption: true, closeAfterSelect: true,
            placeholder: 'Search name, ID or HSN...',
            options: JSON.parse(JSON.stringify(productOptions)), items: [], highlight: true,
            searchField: ['text', 'hsn', 'pid', 'name'],
            onDropdownOpen: function() { this.setActiveOption(null); this.control_input.value = ''; },
            render: {
                option: function(data, escape) {
                    const hsn = data.hsn ? `<span style="color:#999;font-size:.7rem"> HSN:${escape(data.hsn)}</span>` : '';
                    return `<div>${escape(data.text)}${hsn}</div>`;
                },
                no_results: function() {
                    return `<div class="no-results" style="padding:6px 10px;font-size:.8rem">No match — <a href="${addProductUrl}" target="_blank" style="color:#0d6efd">+ Add product</a></div>`;
                }
            },
            onItemAdd: function() { this.control_input.value = ''; }
        });

        ts.on('change', async function(value) {
            const productIdInput = row.querySelector('.row-product-id');
            const infoIcon = row.querySelector('.price-info-icon');
            const opt = ts.options[value];

            if (!value) {
                productIdInput.value = '';
                infoIcon.style.display = 'none';
                row.classList.remove('row-filled'); row.classList.add('row-empty');
                row.querySelector('input[name$="[hsn]"]').value = '';
                row.querySelector('input[name$="[unit]"]').value = '';
                row.querySelector('.qty').value = '';
                row.querySelector('.rate').value = '';
                const iq = row.querySelector('.inward-qty'); if (iq) iq.value = '';
                clearSuppliers(row);
                recalcTotals();
                return;
            }

            row.classList.remove('row-empty'); row.classList.add('row-filled');
            maybeAutoAddRows();
            productIdInput.value = value;

            // Prefill from product master
            row.querySelector('input[name$="[hsn]"]').value = opt?.hsn || '';
            row.querySelector('input[name$="[unit]"]').value = opt?.unit || '';

            try {
                const res = await fetch(`{{ url('api/products') }}/${value}/metrics?company_id={{ currentCompanyId() }}`);
                const d = await res.json();

                if (d.hsn) row.querySelector('input[name$="[hsn]"]').value = d.hsn;
                if (d.unit) row.querySelector('input[name$="[unit]"]').value = d.unit;

                if (d.last && d.last.length) {
                    const r = parseFloat(d.last[0].rate) || 0;
                    if (r > 0) row.querySelector('.rate').value = r.toFixed(2);
                }

                const tipHtml = buildPriceTooltip(d);
                infoIcon.setAttribute('title', tipHtml);
                infoIcon.style.display = 'inline';
                const oldTip = bootstrap.Tooltip.getInstance(infoIcon);
                if (oldTip) oldTip.dispose();
                new bootstrap.Tooltip(infoIcon, { html: true, customClass: 'price-tip', placement: 'right' });

                recalcTotals();
                const rateEl = row.querySelector('.rate');
                rateEl.focus();
                rateEl.select();
            } catch (err) { console.error(err); recalcTotals(); }
        });

        rowTomSelects.set(idx, ts);
    }

    function recalcTotals() {
        let total = 0, count = 0;
        itemsTbody.querySelectorAll('tr').forEach(tr => {
            const qty = parseFloat(tr.querySelector('.qty')?.value) || 0;
            const rate = parseFloat(tr.querySelector('.rate')?.value) || 0;
            total += qty * rate;
            if (tr.classList.contains('row-filled')) count++;
        });
        poTotalEl.textContent = total.toFixed(2);
        itemCountEl.textContent = count + ' item' + (count !== 1 ? 's' : '');
    }

    // --- Re-index rows on delete ---
    function reindexRows() {
        itemsTbody.querySelectorAll('tr').forEach((row, i) => {
            const numCell = row.querySelector('.row-num');
            if (numCell) numCell.textContent = i + 1;
            row.querySelectorAll('input[name]').forEach(inp => {
                inp.name = inp.name.replace(/items\[\d+\]/, `items[${i}]`);
            });
            const pickBtn = row.querySelector('.supplier-pick-btn');
            if (pickBtn) pickBtn.dataset.rowIdx = i;
        });
    }

    function maybeAutoAddRows() {
        const emptyCount = itemsTbody.querySelectorAll('tr.row-empty').length;
        if (emptyCount <= 1) {
            for (let i = 0; i < 3; i++) addEmptyRow();
        }
    }

    // --- Row input handler ---
    itemsTbody.addEventListener('input', function (e) {
        const tr = e.target.closest('tr');
        if (!tr) return;

        // Auto-sync Qty ↔ Inward Qty: whichever field is typed into first
        // populates the other when it's blank. Users can still edit either
        // independently afterwards.
        if (e.target.classList.contains('inward-qty')) {
            const qtyEl = tr.querySelector('.qty');
            const iq = e.target.value;
            if (qtyEl && qtyEl.value === '' && iq !== '') {
                qtyEl.value = iq;
            }
        } else if (e.target.classList.contains('qty')) {
            const iqEl = tr.querySelector('.inward-qty');
            const q = e.target.value;
            if (iqEl && !iqEl.dataset.userEdited) {
                iqEl.value = q;
            }
        }
        if (e.target.classList.contains('inward-qty')) {
            e.target.dataset.userEdited = '1';
        }

        if (e.target.classList.contains('qty') ||
            e.target.classList.contains('rate') ||
            e.target.classList.contains('inward-qty')) {
            recalcTotals();
        }
    });

    // --- Row remove ---
    itemsTbody.addEventListener('click', function (e) {
        if (e.target.closest('.remove')) {
            const row = e.target.closest('tr');
            const idx = parseInt(row.dataset.rowIdx);
            const ts = rowTomSelects.get(idx);
            if (ts) { ts.destroy(); rowTomSelects.delete(idx); }
            const sup = rowSupplierSelects.get(idx);
            if (sup) { sup.destroy(); rowSupplierSelects.delete(idx); }
            const tip = row.querySelector('.price-info-icon');
            if (tip) { const t = bootstrap.Tooltip.getInstance(tip); if (t) t.dispose(); }
            row.remove(); reindexRows(); recalcTotals();
        }
    });

    // --- Add row button + Alt+A shortcut ---
    document.getElementById('addRowBtn').addEventListener('click', function() {
        const row = addEmptyRow();
        const ts = rowTomSelects.get(parseInt(row.dataset.rowIdx));
        if (ts) setTimeout(() => ts.focus(), 50);
    });

    document.addEventListener('keydown', function(e) {
        if (!e.altKey) return;
        if (e.key === 'a') { e.preventDefault(); document.getElementById('addRowBtn').click(); }
        if (e.key === 's') { e.preventDefault(); poForm.requestSubmit(); }
    });

    // --- Submit: strip empty rows, validate at least one filled row ---
    poForm.addEventListener('submit', function(e) {
        itemsTbody.querySelectorAll('tr').forEach(row => {
            const pid = row.querySelector('.row-product-id');
            if (!pid || !pid.value) {
                row.querySelectorAll('input[name]').forEach(inp => inp.removeAttribute('name'));
            }
        });
        reindexRows();
        const filled = itemsTbody.querySelectorAll('tr.row-filled').length;
        if (!filled) { e.preventDefault(); alert('Add at least one item.'); return; }
        // At least one supplier per filled row
        let missing = null;
        itemsTbody.querySelectorAll('tr.row-filled').forEach(row => {
            if (!missing && !row.querySelectorAll('input[name$="[supplier_ids][]"]').length) {
                missing = row;
            }
        });
        if (missing) {
            e.preventDefault();
            alert('Each item must have at least one supplier. Click "Pick suppliers".');
            missing.querySelector('.supplier-pick-btn')?.focus();
        }
    });

    // ═══════════ SUPPLIER MODAL ═══════════
    const supplierModalEl = document.getElementById('supplierModal');
    const supplierModal = new bootstrap.Modal(supplierModalEl);
    const supplierList = document.getElementById('supplierList');
    const supplierFilter = document.getElementById('supplierFilter');
    const selectAllSuppliers = document.getElementById('selectAllSuppliers');
    const applyBtn = document.getElementById('applySuppliersBtn');
    const spProductName = document.getElementById('spProductName');

    let activeRow = null;

    // Open modal from a row
    itemsTbody.addEventListener('click', async function (e) {
        const btn = e.target.closest('.supplier-pick-btn');
        if (!btn) return;

        activeRow = btn.closest('tr');
        const pid = activeRow.querySelector('.row-product-id').value;
        if (!pid) { alert('Choose a product first.'); return; }

        const productText = activeRow.querySelector('.ts-control .item')?.textContent?.trim() || '';
        spProductName.textContent = productText;

        // Currently selected supplier IDs for this row
        const selected = new Set(
            Array.from(activeRow.querySelectorAll('input[name$="[supplier_ids][]"]')).map(i => i.value)
        );

        supplierList.innerHTML = '<tr><td colspan="6" class="text-center">Loading...</td></tr>';
        supplierFilter.value = '';
        selectAllSuppliers.checked = false;
        supplierModal.show();

        try {
            const res = await fetch(`{{ url('api/product-supplier-history') }}/${pid}?mode=all`);
            const data = await res.json();
            if (!Array.isArray(data) || data.length === 0) {
                supplierList.innerHTML = '<tr><td colspan="6" class="text-muted text-center">No suppliers found</td></tr>';
                return;
            }
            supplierList.innerHTML = '';
            data.forEach(s => {
                const rate = parseFloat(s.rate) || 0;
                const taxPct = parseFloat(s.tax_percent) || 0;
                const total = rate + (rate * taxPct / 100);
                const hasHistory = rate > 0;
                const checked = selected.has(String(s.supplier_id)) ? 'checked' : '';
                const tr = document.createElement('tr');
                tr.className = hasHistory ? '' : 'table-light';
                tr.innerHTML = `
                    <td class="text-center">
                        <input type="checkbox" class="supplier-check" value="${s.supplier_id}"
                            data-name="${s.supplier_name}" data-rate="${rate}" data-tax="${taxPct}" ${checked}>
                    </td>
                    <td>${s.supplier_name}${s.supplier_gst ? ` <span style="color:#999;font-size:.7rem">[${s.supplier_gst}]</span>` : ''}${s.supplier_mode === 'cash' ? ' <span class="badge bg-dark" style="font-size:.55rem">Cash</span>' : ''}</td>
                    <td class="text-end">${hasHistory ? rate.toFixed(2) : '-'}</td>
                    <td class="text-end">${hasHistory ? taxPct + '%' : '-'}</td>
                    <td class="text-end">${hasHistory ? total.toFixed(2) : '-'}</td>
                    <td class="text-center">${hasHistory ? `<button type="button" class="btn btn-sm btn-outline-primary use-rate" data-rate="${rate}">Use</button>` : ''}</td>
                `;
                supplierList.appendChild(tr);
            });
        } catch (err) {
            console.error(err);
            supplierList.innerHTML = '<tr><td colspan="6" class="text-danger text-center">Error fetching</td></tr>';
        }
    });

    supplierFilter.addEventListener('input', function() {
        const q = this.value.toLowerCase().trim();
        supplierList.querySelectorAll('tr').forEach(tr => {
            const name = tr.querySelector('td:nth-child(2)')?.textContent?.toLowerCase() || '';
            tr.style.display = !q || name.includes(q) ? '' : 'none';
        });
    });

    selectAllSuppliers.addEventListener('change', function() {
        supplierList.querySelectorAll('.supplier-check').forEach(cb => {
            if (cb.closest('tr').style.display !== 'none') cb.checked = this.checked;
        });
    });

    // "Use" rate → stash into active row's rate input
    supplierList.addEventListener('click', function(e) {
        if (e.target.classList.contains('use-rate') && activeRow) {
            const rate = parseFloat(e.target.dataset.rate) || 0;
            activeRow.querySelector('.rate').value = rate.toFixed(2);
            recalcRowAmount(activeRow);
        }
    });

    applyBtn.addEventListener('click', function() {
        if (!activeRow) return;
        const checked = supplierList.querySelectorAll('.supplier-check:checked');
        const chosen = Array.from(checked).map(cb => ({
            id: cb.value, name: cb.dataset.name, rate: cb.dataset.rate, tax: cb.dataset.tax
        }));
        applySuppliersToRow(activeRow, chosen);
        supplierModal.hide();
    });

    function getRowSupplierIds(row) {
        return new Set(
            Array.from(row.querySelectorAll('input[name$="[supplier_ids][]"]')).map(i => i.value)
        );
    }

    // Add one supplier to a row (skip if already present)
    function addSupplierToRow(row, s) {
        const cell = row.querySelector('.suppliers-cell');
        if (!cell) return;
        const existing = getRowSupplierIds(row);
        if (existing.has(String(s.id))) return;

        const rowIdx = parseInt(row.dataset.rowIdx);
        const badges = cell.querySelector('.supplier-badges');

        const badge = document.createElement('span');
        badge.className = 'supplier-badge';
        badge.dataset.supplierId = s.id;
        const rate = parseFloat(s.rate) || 0;
        const tax = parseFloat(s.tax) || 0;
        const total = rate + (rate * tax / 100);
        const info = rate > 0 ? ` @ ₹${rate.toFixed(2)} + ${tax}% = ₹${total.toFixed(2)}` : '';
        badge.innerHTML = `<span class="label">${escapeHtml(s.name)}${info}</span><span class="remove-badge" title="Remove">×</span>`;
        badges.appendChild(badge);

        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = `items[${rowIdx}][supplier_ids][]`;
        input.value = s.id;
        input.dataset.supplierId = s.id;
        cell.appendChild(input);
    }

    // Replace row's full supplier set (used by modal Apply)
    function applySuppliersToRow(row, chosen) {
        const cell = row.querySelector('.suppliers-cell');
        cell.querySelectorAll('input[name$="[supplier_ids][]"]').forEach(i => i.remove());
        cell.querySelector('.supplier-badges').innerHTML = '';
        chosen.forEach(s => addSupplierToRow(row, s));
    }

    // Remove one supplier from a row
    function removeSupplierFromRow(row, supplierId) {
        const cell = row.querySelector('.suppliers-cell');
        cell.querySelectorAll(`input[data-supplier-id="${supplierId}"]`).forEach(i => i.remove());
        cell.querySelectorAll(`.supplier-badge[data-supplier-id="${supplierId}"]`).forEach(b => b.remove());
    }

    function clearSuppliers(row) {
        const cell = row.querySelector('.suppliers-cell');
        if (!cell) return;
        cell.querySelectorAll('input[name$="[supplier_ids][]"]').forEach(i => i.remove());
        const badges = cell.querySelector('.supplier-badges');
        if (badges) badges.innerHTML = '';
    }

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

    // Click badge × to remove that supplier from the row
    itemsTbody.addEventListener('click', function (e) {
        const rm = e.target.closest('.remove-badge');
        if (!rm) return;
        const badge = rm.closest('.supplier-badge');
        const row = rm.closest('tr');
        if (badge && row) removeSupplierFromRow(row, badge.dataset.supplierId);
    });

    // Listen for newly-created products via BroadcastChannel
    if (typeof BroadcastChannel !== 'undefined') {
        const ch = new BroadcastChannel('product_created');
        ch.onmessage = function (event) {
            const p = event.data;
            if (!p || !p.id) return;
            const opt = { value: String(p.id), text: (p.product_id || '') + ' — ' + p.name, name: p.name, hsn: p.hsn || '', unit: p.unit || '', pid: p.product_id || '' };
            productOptions.push(opt);
            rowTomSelects.forEach(ts => { if (!ts.options[opt.value]) ts.addOption(opt); });
        };
    }

    const draftKey = 'purchase_order_draft_create_{{ currentCompanyId() }}';
    const draftStatus = document.getElementById('poDraftStatus');
    let draftTimer = null;
    function saveDraft() {
        clearTimeout(draftTimer);
        draftTimer = setTimeout(function() {
            const data = {};
            poForm.querySelectorAll('input, select, textarea').forEach(el => {
                if (!el.name || el.type === 'hidden' && !el.value) return;
                if (el.type === 'checkbox') {
                    if (!data[el.name]) data[el.name] = [];
                    if (el.checked) data[el.name].push(el.value);
                } else {
                    data[el.name] = el.value;
                }
            });
            localStorage.setItem(draftKey, JSON.stringify({ at: Date.now(), data }));
            if (draftStatus) draftStatus.textContent = 'Draft saved';
        }, 400);
    }
    poForm.addEventListener('input', saveDraft);
    poForm.addEventListener('change', saveDraft);
    poForm.addEventListener('submit', function() { localStorage.removeItem(draftKey); });

    // Seed with empty rows
    for (let i = 0; i < 10; i++) addEmptyRow();
    try {
        const saved = JSON.parse(localStorage.getItem(draftKey) || 'null');
        if (saved && saved.data) {
            Object.entries(saved.data).forEach(([name, value]) => {
                const els = poForm.querySelectorAll(`[name="${CSS.escape(name)}"]`);
                els.forEach(el => {
                    if (el.type === 'checkbox') el.checked = Array.isArray(value) && value.includes(el.value);
                    else el.value = value;
                });
            });
            if (draftStatus) draftStatus.textContent = 'Draft restored';
            recalcTotals();
        }
    } catch (err) { console.error(err); }
})();
</script>
@endpush