@extends('layouts.app')
@section('title', 'New Purchase')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('purchases.index') }}">Purchases</a></li>
<li class="breadcrumb-item active">New Purchase</li>
@endsection

@push('styles')
<style>
    .item-row td { vertical-align: middle; }
    .variant-badge {
        display: inline-block;
        font-size: .68rem;
        background: #f1f5f9;
        color: #475569;
        border-radius: 4px;
        padding: 1px 5px;
        margin: 1px 1px 0 0;
    }
    .product-thumb {
        width: 34px; height: 34px;
        object-fit: cover; border-radius: 6px;
        border: 1px solid #e2e8f0; flex-shrink: 0;
    }
    .product-thumb-ph {
        width: 34px; height: 34px;
        border-radius: 6px; background: #f1f5f9;
        display: flex; align-items: center;
        justify-content: center; color: #cbd5e1;
        flex-shrink: 0; font-size: .85rem;
    }
    .search-result-item:hover { background: #eff6ff !important; }
    #productSearchDropdown { border-top: none; border-radius: 0 0 10px 10px; }
    .summary-row { font-size: .875rem; }
    .grand-total-display { font-size: 1.5rem; font-weight: 900; color: #059669; }
    #itemsTable thead th {
        font-size: .72rem; font-weight: 700;
        color: #64748b; text-transform: uppercase;
        letter-spacing: .05em; white-space: nowrap;
        background: #f8fafc;
    }
    .serial-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 1rem; }
</style>
@endpush

@section('content')

<div class="page-header">
    <h1 class="page-title">
        <i class="bi bi-cart-plus me-2" style="color:#059669;"></i>New Purchase
    </h1>
    <p class="page-subtitle">Create a purchase order and receive stock into inventory</p>
</div>

<form method="POST" action="{{ route('purchases.store') }}" id="purchaseForm" novalidate>
@csrf

<div class="row g-3">

    {{-- ══════════════════════════ LEFT ══════════════════════════ --}}
    <div class="col-12 col-xl-8">

        {{-- Header Card --}}
        <div class="card mb-3">
            <div class="card-header fw-600">
                <i class="bi bi-file-earmark-text me-2"></i>Purchase Details
            </div>
            <div class="card-body">
                <div class="row g-3">

                    {{-- Supplier --}}
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            Supplier <span class="text-danger">*</span>
                        </label>
                        <div class="d-flex gap-2">
                            <select name="supplier_id" id="supplier_id"
                                    class="form-select @error('supplier_id') is-invalid @enderror"
                                    required>
                                <option value="">— Select Supplier —</option>
                                @foreach($suppliers as $sup)
                                <option value="{{ $sup->id }}"
                                        data-due="{{ $sup->current_due }}"
                                        {{ old('supplier_id') == $sup->id ? 'selected' : '' }}>
                                    {{ $sup->name }}
                                    {{ $sup->phone ? '— '.$sup->phone : '' }}
                                    {{ $sup->current_due > 0 ? '(Due: ৳'.number_format($sup->current_due,0).')' : '' }}
                                </option>
                                @endforeach
                            </select>
                            @can_permission('suppliers.create')
                            <button type="button"
                                    class="btn btn-outline-success flex-shrink-0"
                                    data-bs-toggle="modal"
                                    data-bs-target="#quickAddSupplierModal"
                                    title="Add new supplier">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                            @endcan_permission
                        </div>
                        @error('supplier_id')
                        <div class="text-danger mt-1" style="font-size:.8rem;">{{ $message }}</div>
                        @enderror
                        <div id="supplierDueNotice" class="d-none mt-1"
                             style="font-size:.78rem;color:#d97706;">
                            <i class="bi bi-exclamation-triangle me-1"></i><span id="supplierDueText"></span>
                        </div>
                    </div>

                    {{-- Invoice No --}}
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Invoice No. <span class="text-danger">*</span></label>
                        <input type="text" name="invoice_no"
                               class="form-control @error('invoice_no') is-invalid @enderror"
                               value="{{ old('invoice_no', $invoiceNo) }}" required>
                        @error('invoice_no')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    {{-- Date --}}
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Date <span class="text-danger">*</span></label>
                        <input type="date" name="purchase_date"
                               class="form-control"
                               value="{{ old('purchase_date', date('Y-m-d')) }}" required>
                    </div>

                    {{-- Status --}}
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Status</label>
                        <select name="status" class="form-select">
                            <option value="received" selected>Received (update stock now)</option>
                            <option value="ordered">Ordered (stock update later)</option>
                            <option value="draft">Draft</option>
                        </select>
                        <small class="text-muted" style="font-size:.72rem;">
                            "Received" adds stock to inventory immediately.
                        </small>
                    </div>

                    {{-- Account --}}
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Pay From Account</label>
                        <select name="account_id" class="form-select">
                            <option value="">— No payment yet —</option>
                            @foreach($accounts as $acc)
                            <option value="{{ $acc->id }}">
                                {{ $acc->name }} ({{ ucfirst($acc->type) }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Payment Method --}}
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Payment Method</label>
                        <select name="payment_method" class="form-select">
                            <option value="cash">Cash</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="mobile_banking">Mobile Banking</option>
                            <option value="cheque">Cheque</option>
                        </select>
                    </div>

                    {{-- Notes --}}
                    <div class="col-12">
                        <label class="form-label fw-semibold">Notes</label>
                        <input type="text" name="notes" class="form-control"
                               placeholder="Optional internal notes"
                               value="{{ old('notes') }}">
                    </div>

                </div>
            </div>
        </div>

        {{-- Product Search --}}
        <div class="card mb-3">
            <div class="card-header fw-600">
                <i class="bi bi-search me-2"></i>Search & Add Products
            </div>
            <div class="card-body">
                <div class="position-relative" id="searchWrapper">
                    <div class="input-group">
                        <span class="input-group-text"
                              style="background:#1d4ed8;color:#fff;border-color:#1d4ed8;">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text"
                               id="productSearchInput"
                               class="form-control form-control-lg"
                               placeholder="Type product name, SKU or scan barcode…"
                               autocomplete="off">
                        <button type="button" class="btn btn-outline-secondary"
                                id="searchClearBtn"
                                style="display:none;"
                                onclick="clearSearch()">
                            <i class="bi bi-x"></i>
                        </button>
                    </div>

                    {{-- Live results dropdown --}}
                    <div id="productSearchDropdown"
                         class="d-none shadow"
                         style="position:absolute;top:100%;left:0;right:0;z-index:1050;
                                background:#fff;border:1px solid #d1d5db;
                                border-top:none;border-radius:0 0 10px 10px;
                                max-height:380px;overflow-y:auto;">
                    </div>
                </div>
                <div class="text-muted mt-2" style="font-size:.75rem;">
                    <i class="bi bi-info-circle me-1"></i>
                    Click a result to add it. Or use <strong>Add Row</strong> below for manual entry.
                </div>
            </div>
        </div>

        {{-- Items Table --}}
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-600">
                    <i class="bi bi-box-seam me-2"></i>
                    Purchase Items
                    <span class="badge bg-secondary ms-1" id="itemCountBadge">0</span>
                </span>
                <button type="button" class="btn btn-sm btn-success" onclick="addEmptyRow()">
                    <i class="bi bi-plus-lg me-1"></i>Add Row
                </button>
            </div>
            <div class="card-body p-0">
                <div id="emptyNotice" class="text-center py-5 text-muted">
                    <i class="bi bi-cart" style="font-size:2.5rem;display:block;margin-bottom:.5rem;color:#cbd5e1;"></i>
                    <div style="font-size:.875rem;">No items yet. Search above or click <strong>Add Row</strong>.</div>
                </div>
                <div id="itemsTableWrap" class="d-none table-responsive">
                    <table class="table mb-0" id="itemsTable">
                        <thead>
                            <tr>
                                <th style="width:38px;"></th>
                                <th>Product / Variant</th>
                                <th style="width:80px;">Qty</th>
                                <th style="width:140px;">Unit Cost (৳)</th>
                                <th style="width:120px;">Discount (৳)</th>
                                <th style="width:70px;">Warranty</th>
                                <th style="width:120px;">Total</th>
                                <th style="width:38px;"></th>
                            </tr>
                        </thead>
                        <tbody id="itemsBody"></tbody>
                    </table>
                </div>
            </div>
            <div id="itemsFooter" class="card-footer py-2 d-none" style="background:#f8fafc;">
                <div class="d-flex justify-content-between align-items-center">
                    <button type="button" class="btn btn-outline-success btn-sm"
                            onclick="addEmptyRow()">
                        <i class="bi bi-plus-lg me-1"></i>Add Another Row
                    </button>
                    <div class="fw-700" style="font-size:.9rem;">
                        Items Subtotal:
                        <span id="footerSubtotal" style="color:#059669;">৳0.00</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- ══════════════════════════ RIGHT ══════════════════════════ --}}
    <div class="col-12 col-xl-4">
        <div class="card" style="position:sticky;top:76px;">
            <div class="card-header fw-600">
                <i class="bi bi-receipt me-2"></i>Summary
            </div>
            <div class="card-body">

                <div class="p-3 mb-3 rounded" style="background:#f8fafc;border:1px solid #e2e8f0;">
                    <div class="d-flex justify-content-between summary-row mb-2">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-600" id="summSubtotal">৳0.00</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center summary-row mb-2">
                        <span class="text-muted">Discount</span>
                        <div class="input-group input-group-sm" style="width:130px;">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="discount" id="discountInput"
                                   class="form-control" value="{{ old('discount',0) }}"
                                   min="0" step="0.01"
                                   oninput="recalcSummary()">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center summary-row mb-2">
                        <span class="text-muted">Tax / Other</span>
                        <div class="input-group input-group-sm" style="width:130px;">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="tax" id="taxInput"
                                   class="form-control" value="{{ old('tax',0) }}"
                                   min="0" step="0.01"
                                   oninput="recalcSummary()">
                        </div>
                    </div>
                    <hr class="my-2">
                    <div class="d-flex justify-content-between">
                        <span class="fw-700">Grand Total</span>
                        <span class="grand-total-display" id="summGrandTotal">৳0.00</span>
                    </div>
                    <input type="hidden" id="grandTotalHidden" value="0">
                </div>

                <div class="p-3 rounded mb-3" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                    <div class="d-flex justify-content-between align-items-center summary-row mb-2">
                        <span class="text-muted fw-600">Paying Now</span>
                        <div class="input-group input-group-sm" style="width:150px;">
                            <span class="input-group-text">৳</span>
                            <input type="number" name="paid_amount" id="paidInput"
                                   class="form-control" value="{{ old('paid_amount',0) }}"
                                   min="0" step="0.01"
                                   oninput="recalcSummary()">
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-success w-100 mb-2"
                            onclick="payFull()">
                        <i class="bi bi-check-circle me-1"></i>Pay Full Amount
                    </button>
                    <div class="d-flex justify-content-between">
                        <span style="color:#dc2626;font-weight:700;">Due After</span>
                        <span id="summDue" style="color:#dc2626;font-weight:800;font-size:1.1rem;">৳0.00</span>
                    </div>
                </div>

            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
                <button type="submit"
                        class="btn btn-success w-100 mb-2"
                        id="savePurchaseBtn"
                        style="font-size:1rem;font-weight:700;padding:.75rem;">
                    <span id="saveBtnText">
                        <i class="bi bi-check-circle me-2"></i>Save Purchase
                    </span>
                    <span id="saveBtnSpinner" class="d-none spinner-border spinner-border-sm"></span>
                </button>
                <a href="{{ route('purchases.index') }}"
                   class="btn btn-outline-secondary w-100">
                    Cancel
                </a>
            </div>
        </div>
    </div>

</div>
</form>

{{-- Add Serial Numbers Modal --}}
<div class="modal fade" id="addSerialsModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-700">Add Serial Numbers</h5>
                <button type="button" class="btn-close" onclick="cancelSerialModal()"></button>
            </div>
            <div class="modal-body">
                <div id="serialModalLabel" class="text-muted mb-3" style="font-size:.82rem;"></div>

                <label class="form-label fw-semibold">Unit Price <span class="text-danger">*</span></label>
                <input type="number" id="serialModalUnitPrice" class="form-control mb-3"
                       min="0" step="0.01" placeholder="0.00">

                <label class="form-label fw-semibold">Serial Numbers</label>
                <div class="input-group mb-2">
                    <input type="text" id="serialModalInput" class="form-control"
                           placeholder="Enter Serial Number" autocomplete="off">
                    <button type="button" class="btn btn-primary" onclick="addSerialModalEntry()">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>

                <div id="serialModalList"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveSerialModal()">Save</button>
                <button type="button" class="btn btn-danger" onclick="cancelSerialModal()">Cancel</button>
            </div>
        </div>
    </div>
</div>

{{-- Quick Add Supplier Modal --}}
<x-quick-add-supplier />

@endsection

@push('scripts')
<x-quick-add-scripts />

<script>
(function () {
'use strict';

// ─── Config ───────────────────────────────────────────────────────────────────
const SEARCH_URL   = '{{ route("ajax.products.search") }}';
const VARIANTS_URL = '{{ route("ajax.products.variants") }}';
const CSRF         = document.querySelector('meta[name="csrf-token"]').content;

// ─── State ────────────────────────────────────────────────────────────────────
let rowIndex      = 0;       // ever-increasing row key
let grandTotal    = 0;
const productCache= {};      // productId => product object
let searchTimeout = null;

// ─── DOM refs ─────────────────────────────────────────────────────────────────
const searchInput    = document.getElementById('productSearchInput');
const searchDropdown = document.getElementById('productSearchDropdown');
const itemsBody      = document.getElementById('itemsBody');

// ─── Supplier due notice ──────────────────────────────────────────────────────
document.getElementById('supplier_id').addEventListener('change', function () {
    const opt     = this.options[this.selectedIndex];
    const due     = parseFloat(opt?.dataset?.due || '0');
    const notice  = document.getElementById('supplierDueNotice');
    if (this.value && due > 0) {
        document.getElementById('supplierDueText').textContent =
            'This supplier has an existing due of ৳' + due.toLocaleString('en-IN', {minimumFractionDigits:2,maximumFractionDigits:2});
        notice.classList.remove('d-none');
    } else {
        notice.classList.add('d-none');
    }
});

// ─── Product Search ───────────────────────────────────────────────────────────
searchInput.addEventListener('input', function () {
    const q = this.value.trim();
    document.getElementById('searchClearBtn').style.display = q ? '' : 'none';
    clearTimeout(searchTimeout);
    if (!q) { hideDropdown(); return; }
    searchTimeout = setTimeout(() => doSearch(q), 280);
});

searchInput.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { clearSearch(); }
});

document.addEventListener('click', function (e) {
    if (!e.target.closest('#searchWrapper')) hideDropdown();
});

window.clearSearch = function () {
    searchInput.value = '';
    document.getElementById('searchClearBtn').style.display = 'none';
    hideDropdown();
    searchInput.focus();
}

async function doSearch(q) {
    searchDropdown.innerHTML = renderDropdownLoading();
    showDropdown();

    try {
        const resp = await fetch(SEARCH_URL + '?q=' + encodeURIComponent(q), {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });

        if (!resp.ok) {
            searchDropdown.innerHTML = renderDropdownError('Server error (' + resp.status + ')');
            return;
        }

        const data = await resp.json();

        if (!Array.isArray(data) || data.length === 0) {
            searchDropdown.innerHTML = renderDropdownEmpty(q);
            return;
        }

        // Cache products
        data.forEach(p => {
            productCache[p.id] = p;
        });

        renderSearchResults(data);

    } catch (err) {
        searchDropdown.innerHTML = renderDropdownError('Network error — is the server running?');
        console.error('Product search error:', err);
    }
}

function renderSearchResults(products) {
    let html = '';
    let totalVariants = 0;

    products.forEach(product => {
        if (!product.variants || product.variants.length === 0) return;

        html += `
        <div style="background:#f8fafc;padding:6px 12px;border-bottom:1px solid #f1f5f9;">
            <span style="font-size:.7rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;">
                ${esc(product.name)}
                ${product.brand ? '<span style="color:#cbd5e1;">· ' + esc(product.brand) + '</span>' : ''}
            </span>
        </div>`;

        product.variants.forEach(v => {
            totalVariants++;
            const stockColour = v.current_stock <= 0 ? '#dc2626' :
                                v.current_stock <= (v.min_stock_alert || 5) ? '#d97706' : '#059669';
            const thumb = v.image
                ? `<img src="${esc(v.image)}" class="product-thumb me-2" alt="">`
                : `<div class="product-thumb-ph me-2"><i class="bi bi-box"></i></div>`;

            html += `
            <div class="search-result-item d-flex align-items-center gap-2 px-3 py-2"
                 style="cursor:pointer;border-bottom:1px solid #f9fafb;"
                 onclick="addVariantRow(${product.id}, ${v.id})">
                ${thumb}
                <div style="flex:1;min-width:0;">
                    <div style="font-size:.855rem;font-weight:600;color:#1e293b;
                                white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                        ${esc(v.variant_name)}
                    </div>
                    <div style="font-size:.7rem;color:#64748b;font-family:monospace;">
                        ${esc(v.sku)}
                        ${v.barcode ? ' · ' + esc(v.barcode) : ''}
                    </div>
                </div>
                <div style="text-align:right;flex-shrink:0;">
                    <div style="font-size:.85rem;font-weight:700;color:#059669;">
                        ৳${v.purchase_price.toFixed(2)}
                    </div>
                    <div style="font-size:.68rem;color:${stockColour};">
                        Stock: ${v.current_stock}
                    </div>
                </div>
            </div>`;
        });
    });

    if (totalVariants === 0) {
        searchDropdown.innerHTML = renderDropdownEmpty();
        return;
    }

    searchDropdown.innerHTML = html;
    showDropdown();
}

function showDropdown() { searchDropdown.classList.remove('d-none'); }
function hideDropdown()  { searchDropdown.classList.add('d-none'); }

function renderDropdownLoading() {
    return `<div class="py-3 text-center text-muted" style="font-size:.85rem;">
        <span class="spinner-border spinner-border-sm me-2"></span>Searching…</div>`;
}
function renderDropdownEmpty(q = '') {
    return `<div class="py-4 text-center text-muted" style="font-size:.85rem;">
        <i class="bi bi-search d-block mb-1" style="font-size:1.5rem;"></i>
        No products found${q ? ' for "<strong>' + esc(q) + '</strong>"' : ''}.</div>`;
}
function renderDropdownError(msg) {
    return `<div class="py-3 px-3 text-danger" style="font-size:.85rem;">
        <i class="bi bi-x-circle me-1"></i>${msg}</div>`;
}

// ─── Add Variant from search result ───────────────────────────────────────────
window.addVariantRow = function (productId, variantId) {
    hideDropdown();
    clearSearch();

    // Duplicate guard
    const existing = itemsBody.querySelector(`[data-variant-id="${variantId}"]`);
    if (existing) {
        showToast('Already in list — adjust the quantity instead.', 'warning');
        existing.style.background = '#fef9c3';
        setTimeout(() => (existing.style.background = ''), 1500);
        return;
    }

    const product = productCache[productId];
    const variant = product?.variants?.find(v => v.id === variantId);
    if (!variant) return;

    buildRow(product, variant);
};

// ─── Add empty row (manual select) ────────────────────────────────────────────
window.addEmptyRow = function () {
    buildRow(null, null);
};

// ─── Build a table row ────────────────────────────────────────────────────────
function buildRow(product, variant) {
    const idx = rowIndex++;
    const tr  = document.createElement('tr');
    tr.className    = 'item-row';
    tr.id           = `row_${idx}`;
    tr.dataset.variantId = variant ? String(variant.id) : '';

    const thumb = variant?.image
        ? `<img src="${esc(variant.image)}" class="product-thumb" id="thumb_${idx}" alt="">`
        : `<div class="product-thumb-ph" id="thumb_${idx}"><i class="bi bi-box"></i></div>`;

    // Build variant options if product known
    const variantOpts = product
        ? product.variants.map(v =>
            `<option value="${v.id}"
                     data-purchase="${v.purchase_price}"
                     data-selling="${v.selling_price}"
                     data-stock="${v.current_stock}"
                     data-sku="${esc(v.sku)}"
                     data-barcode="${esc(v.barcode||'')}"
                     data-image="${esc(v.image||'')}"
                     data-serial="${v.serial_tracked||product.serial ? 1 : 0}"
                     ${variant && v.id === variant.id ? 'selected' : ''}>
                ${esc(v.variant_name)} (Stock: ${v.current_stock})
            </option>`).join('')
        : '';

    tr.innerHTML = `
        <td>${thumb}</td>
        <td>
            <select name="items[${idx}][product_id]"
                    id="prodSel_${idx}"
                    class="form-select form-select-sm mb-1"
                    style="font-size:.82rem;"
                    onchange="onProductChange(${idx})">
                <option value="">— Select Product —</option>
                ${buildProductOptions(product?.id)}
            </select>
            <select name="items[${idx}][product_variant_id]"
                    id="varSel_${idx}"
                    class="form-select form-select-sm"
                    style="font-size:.82rem;"
                    ${!product ? 'disabled' : ''}
                    onchange="onVariantChange(${idx})"
                    required>
                <option value="">— Select Variant —</option>
                ${variantOpts}
            </select>
            <div id="badges_${idx}" style="margin-top:3px;">
                ${variant ? buildBadges(variant) : ''}
            </div>
            <div id="serialStatus_${idx}" style="margin-top:3px;"></div>
        </td>
        <td>
            <input type="number" name="items[${idx}][qty]" id="qty_${idx}"
                   class="form-control form-control-sm" value="1" min="1"
                   style="width:68px;"
                   oninput="calcRow(${idx})" required>
        </td>
        <td>
            <div class="input-group input-group-sm">
                <span class="input-group-text">৳</span>
                <input type="number" name="items[${idx}][unit_cost]" id="cost_${idx}"
                       class="form-control"
                       value="${variant ? variant.purchase_price.toFixed(2) : '0.00'}"
                       min="0" step="0.01" style="width:90px;"
                       oninput="calcRow(${idx})" required>
            </div>
        </td>
        <td>
            <div class="input-group input-group-sm">
                <span class="input-group-text">৳</span>
                <input type="number" name="items[${idx}][discount]" id="disc_${idx}"
                       class="form-control" value="0" min="0" step="0.01"
                       style="width:80px;"
                       oninput="calcRow(${idx})">
            </div>
        </td>
        <td>
            <input type="number" name="items[${idx}][warranty_months]"
                   class="form-control form-control-sm"
                   value="${variant?.warranty_months ?? (product?.warranty_months ?? 0)}"
                   min="0" style="width:58px;">
        </td>
        <td id="lineTotal_${idx}" class="fw-700" style="white-space:nowrap;">
            ৳${variant ? variant.purchase_price.toFixed(2) : '0.00'}
        </td>
        <td>
            <button type="button" class="btn btn-sm"
                    style="color:#dc2626;background:none;border:none;padding:2px 5px;"
                    onclick="removeRow(${idx})" title="Remove">
                <i class="bi bi-x-circle-fill" style="font-size:1.1rem;"></i>
            </button>
        </td>
    `;

    itemsBody.appendChild(tr);
    syncTableVisibility();

    // Serial modal if needed
    if (variant && (product?.serial || variant.serial_tracked)) {
        openSerialModal(idx, product.name + ' — ' + variant.variant_name, variant.purchase_price);
    }

    recalcSummary();
}

// ─── Product options for manual rows ─────────────────────────────────────────
// We load them once from cache (populated by search), or fetch all on first manual row
let allProductsLoaded = false;
let allProducts       = [];

async function ensureAllProducts() {
    if (allProductsLoaded) return;
    try {
        const resp = await fetch(SEARCH_URL + '?q=', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const data = await resp.json();
        allProducts = Array.isArray(data) ? data : [];
        allProducts.forEach(p => { productCache[p.id] = p; });
        allProductsLoaded = true;
    } catch (e) {
        allProducts = [];
    }
}

function buildProductOptions(selectedId = null) {
    if (!allProductsLoaded) return '<option value="">Type in search box above</option>';
    return allProducts.map(p =>
        `<option value="${p.id}" ${p.id == selectedId ? 'selected' : ''}>${esc(p.name)}</option>`
    ).join('');
}

// Refresh product selects in all rows after loadAllProducts
function refreshProductSelects() {
    document.querySelectorAll('[id^="prodSel_"]').forEach(sel => {
        const idx       = sel.id.replace('prodSel_', '');
        const currentVal= sel.value;
        sel.innerHTML   = '<option value="">— Select Product —</option>' + buildProductOptions(currentVal);
        sel.value       = currentVal;
    });
}

// Override addEmptyRow to ensure products are loaded
const _origAddEmpty = window.addEmptyRow;
window.addEmptyRow = async function () {
    await ensureAllProducts();
    refreshProductSelects();
    buildRow(null, null);
};

// ─── Product changed in row ───────────────────────────────────────────────────
window.onProductChange = async function (idx) {
    const sel       = document.getElementById(`prodSel_${idx}`);
    const varSel    = document.getElementById(`varSel_${idx}`);
    const productId = parseInt(sel.value);
    const tr        = document.getElementById(`row_${idx}`);

    varSel.innerHTML = '<option value="">Loading…</option>';
    varSel.disabled  = true;
    document.getElementById(`badges_${idx}`).innerHTML = '';
    tr.dataset.variantId = '';
    removeSerialData(idx);

    if (!productId) {
        varSel.innerHTML = '<option value="">— Select Variant —</option>';
        recalcSummary();
        return;
    }

    // Use cache or fetch
    let product = productCache[productId];
    if (!product?.variants?.length) {
        try {
            const resp = await fetch(VARIANTS_URL + '?product_id=' + productId, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            });
            const variants = await resp.json();
            if (!productCache[productId]) productCache[productId] = { id: productId };
            productCache[productId].variants = Array.isArray(variants) ? variants : [];
            product = productCache[productId];
        } catch (e) {
            varSel.innerHTML = '<option value="">Failed to load</option>';
            return;
        }
    }

    const opts = product.variants.map(v =>
        `<option value="${v.id}"
                 data-purchase="${v.purchase_price}"
                 data-selling="${v.selling_price}"
                 data-stock="${v.current_stock}"
                 data-sku="${esc(v.sku)}"
                 data-barcode="${esc(v.barcode||'')}"
                 data-image="${esc(v.image||'')}"
                 data-serial="${v.serial_tracked ? 1 : 0}">
            ${esc(v.variant_name)} (Stock: ${v.current_stock})
        </option>`
    ).join('');

    varSel.innerHTML = '<option value="">— Select Variant —</option>' + opts;
    varSel.disabled  = false;
};

// ─── Variant changed in row ───────────────────────────────────────────────────
window.onVariantChange = function (idx) {
    const varSel    = document.getElementById(`varSel_${idx}`);
    const opt       = varSel.options[varSel.selectedIndex];
    const variantId = parseInt(varSel.value);
    const tr        = document.getElementById(`row_${idx}`);

    tr.dataset.variantId = variantId || '';

    if (!variantId) {
        document.getElementById(`badges_${idx}`).innerHTML = '';
        document.getElementById(`cost_${idx}`).value = '0.00';
        updateThumb(idx, null);
        removeSerialData(idx);
        calcRow(idx);
        return;
    }

    // Duplicate check
    let dupFound = false;
    document.querySelectorAll('#itemsBody tr.item-row').forEach(row => {
        if (row.id === `row_${idx}`) return;
        if (parseInt(row.dataset.variantId) === variantId) dupFound = true;
    });
    if (dupFound) {
        showToast('This variant is already in the list. Adjust quantity instead.', 'warning');
        varSel.value          = '';
        tr.dataset.variantId  = '';
        return;
    }

    // Fill price
    document.getElementById(`cost_${idx}`).value =
        parseFloat(opt.dataset.purchase || 0).toFixed(2);

    // Badges
    document.getElementById(`badges_${idx}`).innerHTML = `
        <span class="variant-badge">SKU: ${esc(opt.dataset.sku||'')}</span>
        ${opt.dataset.barcode ? '<span class="variant-badge">Barcode: ' + esc(opt.dataset.barcode) + '</span>' : ''}
        <span class="variant-badge">Stock: ${opt.dataset.stock||0}</span>
        <span class="variant-badge" style="color:#059669;">Sell: ৳${parseFloat(opt.dataset.selling||0).toFixed(2)}</span>
    `;

    updateThumb(idx, opt.dataset.image || null);

    // Serial modal
    const prodSel   = document.getElementById(`prodSel_${idx}`);
    const prodOpt   = prodSel.options[prodSel.selectedIndex];
    if (opt.dataset.serial === '1') {
        const label = (prodOpt?.text || '') + ' — ' + (opt.text || '');
        openSerialModal(idx, label.replace(/\(Stock.*?\)/g, '').trim(), parseFloat(opt.dataset.purchase || 0));
    } else {
        removeSerialData(idx);
    }

    calcRow(idx);
};

// ─── Row calc ─────────────────────────────────────────────────────────────────
window.calcRow = function (idx) {
    // If this row has serials saved, qty must always match the serial count —
    // one serial number represents exactly one purchased unit.
    const serialData = serialDataStore[idx];
    if (serialData) {
        const qtyEl = document.getElementById(`qty_${idx}`);
        if (qtyEl && parseInt(qtyEl.value) !== serialData.serials.length) {
            qtyEl.value = serialData.serials.length;
            showToast('Qty is locked to the number of serial numbers added. Edit serials to change quantity.', 'warning');
        }
    }

    const qty  = Math.max(0, parseFloat(document.getElementById(`qty_${idx}`)?.value) || 0);
    const cost = Math.max(0, parseFloat(document.getElementById(`cost_${idx}`)?.value) || 0);
    const disc = Math.max(0, parseFloat(document.getElementById(`disc_${idx}`)?.value) || 0);
    const tot  = Math.max(0, qty * cost - disc);
    const el   = document.getElementById(`lineTotal_${idx}`);
    if (el) el.textContent = '৳' + tot.toFixed(2);
    recalcSummary();
};

// ─── Remove row ───────────────────────────────────────────────────────────────
window.removeRow = function (idx) {
    document.getElementById(`row_${idx}`)?.remove();
    removeSerialData(idx);
    syncTableVisibility();
    recalcSummary();
};

// ─── Table visibility ─────────────────────────────────────────────────────────
function syncTableVisibility() {
    const count  = itemsBody.querySelectorAll('tr.item-row').length;
    const show   = count > 0;
    document.getElementById('emptyNotice').style.display    = show ? 'none'  : 'block';
    document.getElementById('itemsTableWrap').classList.toggle('d-none', !show);
    document.getElementById('itemsFooter').classList.toggle('d-none', !show);
    document.getElementById('itemCountBadge').textContent   = String(count);
}

// ─── Summary ──────────────────────────────────────────────────────────────────
window.recalcSummary = function () {
    let subtotal = 0;
    document.querySelectorAll('[id^="lineTotal_"]').forEach(el => {
        subtotal += parseFloat(el.textContent.replace('৳', '')) || 0;
    });

    const discount = Math.max(0, parseFloat(document.getElementById('discountInput').value) || 0);
    const tax      = Math.max(0, parseFloat(document.getElementById('taxInput').value) || 0);
    grandTotal     = Math.max(0, subtotal - discount + tax);

    setText('summSubtotal',   '৳' + subtotal.toFixed(2));
    setText('summGrandTotal', '৳' + grandTotal.toFixed(2));
    setText('footerSubtotal', '৳' + subtotal.toFixed(2));
    document.getElementById('grandTotalHidden').value = grandTotal.toFixed(2);

    const paid = Math.max(0, parseFloat(document.getElementById('paidInput').value) || 0);
    const due  = Math.max(0, grandTotal - paid);
    const dueEl = document.getElementById('summDue');
    dueEl.textContent = '৳' + due.toFixed(2);
    dueEl.style.color = due > 0 ? '#dc2626' : '#059669';
}

window.payFull = function () {
    document.getElementById('paidInput').value = grandTotal.toFixed(2);
    recalcSummary();
};

// ─── Serial Numbers Modal ──────────────────────────────────────────────────────
let serialModalIdx     = null;   // row idx currently open in the modal
let serialModalEntries = [];     // working list of serials while modal is open
const serialDataStore  = {};     // idx -> { unitPrice, serials: [] }  (saved/confirmed data)
const serialModalEl    = document.getElementById('addSerialsModal');
const bsSerialModal    = new bootstrap.Modal(serialModalEl);

function openSerialModal(idx, label, defaultPrice) {
    serialModalIdx = idx;

    const existing = serialDataStore[idx];
    serialModalEntries = existing ? [...existing.serials] : [];

    document.getElementById('serialModalLabel').textContent = label || '';
    document.getElementById('serialModalUnitPrice').value =
        existing ? existing.unitPrice : (parseFloat(defaultPrice || 0).toFixed(2));
    document.getElementById('serialModalInput').value = '';

    renderSerialModalList();
    bsSerialModal.show();

    setTimeout(() => document.getElementById('serialModalInput')?.focus(), 200);
}

function renderSerialModalList() {
    const wrap = document.getElementById('serialModalList');
    if (!serialModalEntries.length) {
        wrap.innerHTML = '';
        return;
    }
    wrap.innerHTML = serialModalEntries.map((sn, i) => `
        <div class="input-group input-group-sm mb-2">
            <input type="text" class="form-control" value="${esc(sn)}" readonly>
            <button type="button" class="btn btn-outline-danger" onclick="removeSerialModalEntry(${i})">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    `).join('');
}

window.addSerialModalEntry = function () {
    const input = document.getElementById('serialModalInput');
    const val   = input.value.trim();
    if (!val) return;
    if (serialModalEntries.includes(val)) {
        showToast('This serial number is already in the list.', 'warning');
        input.select();
        return;
    }
    serialModalEntries.push(val);
    input.value = '';
    renderSerialModalList();
    input.focus();
};

document.getElementById('serialModalInput').addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        addSerialModalEntry();
    }
});

window.removeSerialModalEntry = function (i) {
    serialModalEntries.splice(i, 1);
    renderSerialModalList();
};

window.saveSerialModal = function () {
    const idx       = serialModalIdx;
    const unitPrice = parseFloat(document.getElementById('serialModalUnitPrice').value) || 0;

    if (unitPrice <= 0) {
        showToast('Please enter a valid unit price.', 'danger');
        return;
    }
    if (!serialModalEntries.length) {
        showToast('Please add at least one serial number.', 'danger');
        return;
    }

    serialDataStore[idx] = { unitPrice, serials: [...serialModalEntries] };

    // Reflect unit price into the row's cost field
    const costEl = document.getElementById(`cost_${idx}`);
    if (costEl) costEl.value = unitPrice.toFixed(2);

    // Qty must match the number of serials entered — one serial = one unit
    const qtyEl = document.getElementById(`qty_${idx}`);
    if (qtyEl) qtyEl.value = serialModalEntries.length;

    renderSerialBadge(idx);
    calcRow(idx);

    bsSerialModal.hide();
    serialModalIdx = null;
};

window.cancelSerialModal = function () {
    const idx = serialModalIdx;

    // If this row never had serials saved before, clear the variant selection
    // so a serial-tracked product can't be submitted without its serials.
    if (idx !== null && !serialDataStore[idx]) {
        const varSel = document.getElementById(`varSel_${idx}`);
        if (varSel) {
            varSel.value = '';
            const tr = document.getElementById(`row_${idx}`);
            if (tr) tr.dataset.variantId = '';
            document.getElementById(`badges_${idx}`).innerHTML = '';
        }
    }

    bsSerialModal.hide();
    serialModalIdx = null;
};

function renderSerialBadge(idx) {
    const el   = document.getElementById(`serialStatus_${idx}`);
    if (!el) return;
    const data = serialDataStore[idx];
    if (!data) { el.innerHTML = ''; return; }

    el.innerHTML = `
        <span class="badge bg-success-subtle text-success-emphasis" style="cursor:pointer;font-size:.7rem;"
              onclick="reopenSerialModal(${idx})">
            <i class="bi bi-check-circle me-1"></i>${data.serials.length} serial(s) added — edit
        </span>
        <input type="hidden" name="serials[${idx}]" value="${esc(data.serials.join(','))}">
    `;
}

window.reopenSerialModal = function (idx) {
    const prodSel = document.getElementById(`prodSel_${idx}`);
    const varSel  = document.getElementById(`varSel_${idx}`);
    const prodOpt = prodSel?.options[prodSel.selectedIndex];
    const varOpt  = varSel?.options[varSel.selectedIndex];
    const label   = ((prodOpt?.text || '') + ' — ' + (varOpt?.text || '')).replace(/\(Stock.*?\)/g, '').trim();
    openSerialModal(idx, label, document.getElementById(`cost_${idx}`)?.value);
};

function removeSerialData(idx) {
    delete serialDataStore[idx];
    const el = document.getElementById(`serialStatus_${idx}`);
    if (el) el.innerHTML = '';
}

// ─── Thumb ────────────────────────────────────────────────────────────────────
function updateThumb(idx, url) {
    const el = document.getElementById(`thumb_${idx}`);
    if (!el) return;
    if (url) {
        el.outerHTML = `<img src="${esc(url)}" class="product-thumb" id="thumb_${idx}" alt="">`;
    } else if (el.tagName === 'IMG') {
        el.outerHTML = `<div class="product-thumb-ph" id="thumb_${idx}"><i class="bi bi-box"></i></div>`;
    }
}

// ─── Form submit validation ────────────────────────────────────────────────────
document.getElementById('purchaseForm').addEventListener('submit', function (e) {
    // Supplier
    if (!document.getElementById('supplier_id').value) {
        e.preventDefault();
        showToast('Please select a supplier.', 'danger');
        document.getElementById('supplier_id').focus();
        return;
    }

    // Items
    const rows = itemsBody.querySelectorAll('tr.item-row');
    if (!rows.length) {
        e.preventDefault();
        showToast('Please add at least one product.', 'danger');
        searchInput.focus();
        return;
    }

    for (const row of rows) {
        const idx     = row.id.replace('row_', '');
        const varSel  = document.getElementById(`varSel_${idx}`);
        const qtyEl   = document.getElementById(`qty_${idx}`);
        const costEl  = document.getElementById(`cost_${idx}`);

        if (!varSel?.value) {
            e.preventDefault();
            showToast('Please select a variant for all rows.', 'danger');
            varSel?.focus();
            return;
        }
        if (!qtyEl?.value || parseInt(qtyEl.value) < 1) {
            e.preventDefault();
            showToast('Quantity must be at least 1 in all rows.', 'danger');
            qtyEl?.focus();
            return;
        }
        if (parseFloat(costEl?.value) < 0) {
            e.preventDefault();
            showToast('Unit cost cannot be negative.', 'danger');
            costEl?.focus();
            return;
        }

        // Serial-tracked variant must have its serials saved via the modal
        const opt = varSel.options[varSel.selectedIndex];
        if (opt?.dataset?.serial === '1' && !serialDataStore[idx]) {
            e.preventDefault();
            showToast('Please add serial numbers for all serial-tracked items.', 'danger');
            reopenSerialModal(idx);
            return;
        }
    }

    // Saving state
    document.getElementById('savePurchaseBtn').disabled = true;
    document.getElementById('saveBtnText').classList.add('d-none');
    document.getElementById('saveBtnSpinner').classList.remove('d-none');
});

// ─── Helpers ──────────────────────────────────────────────────────────────────
function setText(id, val) {
    const el = document.getElementById(id);
    if (el) el.textContent = val;
}

function esc(str) {
    if (!str) return '';
    return String(str)
        .replace(/&/g,'&amp;').replace(/</g,'&lt;')
        .replace(/>/g,'&gt;').replace(/"/g,'&quot;')
        .replace(/'/g,'&#39;');
}

function buildBadges(v) {
    return `<span class="variant-badge">SKU: ${esc(v.sku)}</span>
            ${v.barcode ? '<span class="variant-badge">Barcode: ' + esc(v.barcode) + '</span>' : ''}
            <span class="variant-badge">Stock: ${v.current_stock}</span>
            <span class="variant-badge" style="color:#059669;">Sell: ৳${parseFloat(v.selling_price).toFixed(2)}</span>`;
}

// ─── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function () {
    syncTableVisibility();
    recalcSummary();
    // Pre-load all products in background so manual rows work immediately
    ensureAllProducts();
});

})(); // end IIFE
</script>
@endpush