{{-- ================= MODAL HTML ================= --}}
<div class="modal fade" id="itemModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Item
                    <a class="btn btn-primary btn-sm ms-2" href="{{ route('products.create') }}?from_dropdown=1" target="_blank">Add Product</a>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    {{-- Search --}}
                    <div class="col-md-12">
                        <label class="form-label">Search Product (Name/ID/SKU)</label>
                        <select id="m_product_search" placeholder="Type to search...">
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" data-name="{{ $product->name }}" data-stock="{{ $product->{'c'.currentCompanyId()} }}" data-pid="{{ $product->product_id }}">{{ $product->product_id }} — {{ $product->name }}</option>
                            @endforeach
                        </select>
                        <input type="hidden" id="m_product_id">
                    </div>

                    {{-- Inputs --}}
                    <div class="col-md-3" style="display:none">
                        <label class="form-label">HSN</label>
                        <input type="text" class="form-control" id="m_hsn">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Unit</label>
                        <input type="text" class="form-control" id="m_unit">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Qty <span class="bg-dark text-white" id="m_available_qty">Available:
                            </span></label>
                        <input type="number" step="0.001" class="form-control" id="m_qty" value="1">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Rate</label>
                        <input type="number" step="0.01" class="form-control" id="m_rate" value="" min="0.01">
                    </div>

                    {{-- Tax --}}
                    <div class="col-md-3" @if(currentCompany()?->mode === 'cash') style="display:none;" @endif>
                        <label class="form-label">Tax %</label>
                        <input type="number" step="0.01" class="form-control" id="m_tax_percent" value="0">
                    </div>
                </div>

                {{-- Price History Table with Rate + Tax Bifurcation --}}
                <div class="row mt-3">
                    <div class="col-md-12">
                        <label class="form-label text-muted small">Price History (Sales & Purchases)</label>
                        <div class="table-responsive" style="max-height: 180px; overflow-y: auto;">
                            <table class="table table-hover table-sm align-middle mb-0">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th>Type</th>
                                        <th>Party</th>
                                        <th class="text-end">Rate</th>
                                        <th class="text-end">Tax %</th>
                                        <th class="text-end">Total</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="m_last_prices">
                                    <tr><td colspan="6" class="text-muted text-center">Search a product to see price history</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="m_add_btn">Add to List</button>
            </div>
        </div>
    </div>
</div>

{{-- ================= UPDATED JAVASCRIPT ================= --}}
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            // --- 1. CONFIG & ELEMENTS ---
            const tableBody = document.querySelector('#itemsTable tbody');
            const taxTotalEl = document.getElementById('tax_total');
            const amtTotalEl = document.getElementById('amount_total');
            const roundoffEl = document.getElementById('roundoff');
            const grandEl = document.getElementById('grand_total');

            const m = {
                el: document.getElementById('itemModal'),
                search: document.getElementById('m_product_search'),
                pid: document.getElementById('m_product_id'),
                hsn: document.getElementById('m_hsn'),
                unit: document.getElementById('m_unit'),
                qty: document.getElementById('m_qty'),
                rate: document.getElementById('m_rate'),
                tax: document.getElementById('m_tax_percent'),
                last: document.getElementById('m_last_prices'),
                addBtn: document.getElementById('m_add_btn'),
                instance: new bootstrap.Modal(document.getElementById('itemModal')),
                available_qty: document.getElementById('m_available_qty')
            };

            // --- 2. CORE FUNCTION: ADD ROW ---
            window.addItemRow = function (pid, name, hsn, unit, qty, rate, taxp) {
                const amount = +(qty * rate).toFixed(2);
                const taxAmt = +((amount * taxp) / 100).toFixed(2);
                const total = +(amount + taxAmt).toFixed(2);

                const idx = tableBody.querySelectorAll('tr').length;
                const row = document.createElement('tr');

                row.innerHTML = `
                        <td>
                            <span class="fw-bold">${escapeHtml(name)}</span>
                            <input type="hidden" name="items[${idx}][product_id]" value="${pid}">
                        </td>
                        <td style="display:none"><input type="hidden" name="items[${idx}][hsn]" value="${escapeVal(hsn)}"></td>
                        <td><input class="form-control form-control-sm" name="items[${idx}][unit]" value="${escapeVal(unit)}"></td>
                        <td><input type="number" step="0.001" class="form-control form-control-sm text-end qty" name="items[${idx}][qty]" value="${qty}"></td>
                        <td><input type="number" step="0.01" min="0.01" class="form-control form-control-sm text-end rate" name="items[${idx}][rate]" value="${rate}"></td>
                        @if(currentCompany()?->mode !== 'cash')
                        <td><input type="number" step="0.01" class="form-control form-control-sm text-end taxp" name="items[${idx}][tax_percent]" value="${taxp}"></td>
                        <td class="text-end tax-amount">${taxAmt.toFixed(2)}</td>
                        @else
                        <input type="hidden" class="taxp" name="items[${idx}][tax_percent]" value="0">
                        @endif
                        <td class="text-end">
                            <span class="fw-bold line-total">${total.toFixed(2)}</span>
                            <input type="hidden" name="items[${idx}][line_amount]" value="${amount}">
                            <input type="hidden" name="items[${idx}][line_tax_amount]" value="${taxAmt}">
                            <input type="hidden" name="items[${idx}][line_total]" value="${total}">
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-outline-danger remove-row">×</button>
                        </td>
                    `;

                tableBody.appendChild(row);
                recalcTotals();
            };

            // --- 3. MODAL LOGIC: SEARCH ---
            let selectedProductName = '';

            const tomProductSearch = new TomSelect('#m_product_search', {
                maxOptions: null,
                allowEmptyOption: true,
                closeAfterSelect: true,
                placeholder: 'Search product...',
                items: [],
                highlight: true,
                onItemAdd: function() { this.control_input.value = ''; }
            });

            tomProductSearch.on('change', async function (value) {
                if (!value) { selectedProductName = ''; m.pid.value = ''; return; }
                const option = tomProductSearch.options[value];
                if (!option) { selectedProductName = ''; m.pid.value = ''; return; }

                const pid = value;
                m.pid.value = pid;
                selectedProductName = option.name || option.text;
                m.available_qty.innerHTML = `Available: ${option.stock || 0}`;

                try {
                    const partySelect = document.querySelector('select[name="party_id"]');
                    const partyId = partySelect ? partySelect.value : '';
                    const res = await fetch(`{{ url('api/products') }}/${pid}/sale-metrics?party_id=${partyId}&company_id={{ currentCompanyId() }}`);
                    const data = await res.json();

                    m.hsn.value = data.hsn || '';
                    m.unit.value = data.unit || '';
                    m.tax.value = data.tax_percent || 0;
                    m.available_qty.innerHTML = `Available: ${data.stock}`;

                    const taxPct = parseFloat(data.tax_percent) || 0;

                    // Auto-prefill rate from specific party last sale or default sale rate
                    if (data.specific_party_last && parseFloat(data.specific_party_last.rate)) {
                        m.rate.value = parseFloat(data.specific_party_last.rate).toFixed(2);
                    } else if (parseFloat(data.default_sale_rate)) {
                        m.rate.value = parseFloat(data.default_sale_rate).toFixed(2);
                    } else if (data.mrp && parseFloat(data.mrp)) {
                        m.rate.value = parseFloat(data.mrp).toFixed(2);
                    } else {
                        m.rate.value = '';
                    }

                    // Clear and populate history table
                    m.last.innerHTML = '';

                    // Specific Party Last Sale (highlighted)
                    if (data.specific_party_last) {
                        const tr = document.createElement('tr');
                        tr.className = 'table-warning';
                        const rate = parseFloat(data.specific_party_last.rate) || 0;
                        const total = rate + (rate * taxPct / 100);
                        tr.innerHTML = `
                            <td><span class="badge bg-success">SALE</span></td>
                            <td><strong>Last to this Customer</strong></td>
                            <td class="text-end">${rate.toFixed(2)}</td>
                            <td class="text-end">${taxPct}%</td>
                            <td class="text-end">${total.toFixed(2)}</td>
                            <td class="text-center">
                                <button type="button" class="btn btn-xs btn-outline-success use-rate"
                                    data-rate="${rate}" data-tax="${taxPct}">Use</button>
                            </td>
                        `;
                        m.last.appendChild(tr);
                    }

                    // Last Purchases (Cost prices with bifurcation)
                    if (data.last_purchases) {
                        data.last_purchases.forEach(h => {
                            const tr = document.createElement('tr');
                            const baseRate = parseFloat(h.base_rate) || 0;
                            const purchaseTax = parseFloat(h.tax_percent) || 0;
                            const totalWithTax = parseFloat(h.total) || 0;
                            tr.innerHTML = `
                                <td><span class="badge bg-secondary">COST</span></td>
                                <td><small>${h.party} (${h.company_name})</small></td>
                                <td class="text-end">${baseRate.toFixed(2)}</td>
                                <td class="text-end">${purchaseTax}%</td>
                                <td class="text-end">${totalWithTax}</td>
                                <td></td>
                            `;
                            m.last.appendChild(tr);
                        });
                    }

                } catch (e) { console.error(e); }
            });

            // Use Rate from History Table
            m.last.addEventListener('click', function(e) {
                if (e.target.classList.contains('use-rate')) {
                    const rate = parseFloat(e.target.dataset.rate) || 0;
                    const tax = parseFloat(e.target.dataset.tax) || 0;
                    m.rate.value = rate;
                    m.tax.value = tax;
                }
            });

            // --- 4. ADD BUTTON (RESET LOGIC HERE) ---
            m.addBtn.addEventListener('click', function () {

                // 1. Validate Product Selection
                if (!m.pid.value) {
                    alert('Please select a valid product from the list.');
                    m.search.focus();
                    return;
                }

                // 2. Validate Quantity
                const qtyVal = +m.qty.value;
                if (qtyVal <= 0) {
                    alert('Quantity must be greater than 0.');
                    m.qty.focus();
                    return;
                }

                // 3. Validate Rate
                const rateVal = +m.rate.value;
                if (!rateVal || rateVal <= 0) {
                    alert('Rate cannot be blank or 0.');
                    m.rate.focus();
                    return;
                }

                addItemRow(
                    m.pid.value,
                    selectedProductName,
                    m.hsn.value,
                    m.unit.value,
                    +m.qty.value || 0,
                    +m.rate.value || 0,
                    +m.tax.value || 0
                );

                // === RESET FORM FIELDS ===
                selectedProductName = '';
                tomProductSearch.clear(true);
                m.pid.value = '';
                m.hsn.value = '';
                m.unit.value = '';

                // Reset Numbers to defaults
                m.qty.value = 1;
                m.rate.value = '';
                m.tax.value = 0;

                // Clear Dynamic HTML
                m.last.innerHTML = '<tr><td colspan="6" class="text-muted text-center">Search a product to see price history</td></tr>';
                m.available_qty.innerText = 'Available: ';

                // Focus back on search for rapid entry
                tomProductSearch.focus();
            });

            // --- 5. CALCULATIONS ---
            tableBody.addEventListener('input', function (e) {
                if (e.target.closest('tr')) recalcTotals();
            });
            tableBody.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-row')) {
                    e.target.closest('tr').remove();
                    recalcTotals();
                }
            });

            function recalcTotals() {
                let tax = 0, amt = 0;
                tableBody.querySelectorAll('tr').forEach(tr => {
                    const qty = +tr.querySelector('.qty').value || 0;
                    const rate = +tr.querySelector('.rate').value || 0;
                    const taxp = +tr.querySelector('.taxp').value || 0;

                    const amount = +(qty * rate).toFixed(2);
                    const taxAmt = +((amount * taxp) / 100).toFixed(2);
                    const total = +(amount + taxAmt).toFixed(2);

                    tr.querySelector('[name$="[line_amount]"]').value = amount;
                    tr.querySelector('[name$="[line_tax_amount]"]').value = taxAmt;
                    tr.querySelector('[name$="[line_total]"]').value = total;
                    tr.querySelector('.line-total').textContent = total.toFixed(2);
                    tr.querySelector('.tax-amount').textContent = taxAmt.toFixed(2);

                    amt += amount;
                    tax += taxAmt;
                });

                if (amtTotalEl) amtTotalEl.value = amt.toFixed(2);
                if (taxTotalEl) taxTotalEl.value = tax.toFixed(2);
                if (grandEl) grandEl.value = (amt + tax).toFixed(2);
            }

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

            // Listen for new products created from the "Add Product" button (new tab)
            const productChannel = new BroadcastChannel('product_created');
            productChannel.onmessage = function (event) {
                const product = event.data;
                if (!product || !product.id) return;
                if (tomProductSearch.options[product.id]) return;
                tomProductSearch.addOption({ value: product.id, text: (product.product_id || '') + ' — ' + product.name, name: product.name, stock: '0', pid: product.product_id || '' });
                tomProductSearch.setValue(product.id);
            };
        });
    </script>
@endpush