@extends('layouts.layout-horizontal')

@section('title', 'Edit Proforma Invoice')

@section('css')
<style>
    #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 .line-amt, #itemsTable .line-tot, #itemsTable .taxp { font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; }
    #itemsTable .line-amt { color: #495057; }
    #itemsTable .line-tot { 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; }
    .card-header .ts-wrapper .ts-control { height: 40px; min-height: 40px; font-size: 1.1rem; padding: 0 10px; display: flex; align-items: center; }
    .card-header .ts-wrapper .ts-control input { font-size: 1.1rem; height: 38px; }
    .card-header .ts-wrapper .ts-control .item { font-size: 1.1rem; line-height: 38px; }
    .card-header .ts-wrapper .ts-dropdown { font-size: 1rem; }
    #invoiceDetails .form-control-sm, #invoiceDetails .form-select-sm { font-size: .9rem; height: 32px; }

    /* Mobile — sticky totals bar: stack totals above full-width action buttons */
    @media (max-width: 767.98px) {
        #stickyTotalsBar > div { padding: 0 10px !important; max-width: 100% !important; }
        #stickyTotalsBar div[style*="width:1px"],
        #stickyTotalsBar div[style*="width:2px"] { display: none !important; }
        #pfRow { padding: 6px 0 !important; gap: 8px !important; }
        #pfRow input { height: 32px !important; font-size: .8rem !important; }
        #stickyTotalsBar #amount_total,
        #stickyTotalsBar #tax_total { font-size: .9rem !important; width: auto !important; min-width: 70px; }
        #stickyTotalsBar #discount,
        #stickyTotalsBar #roundoff { font-size: .9rem !important; width: 70px !important; height: 32px !important; }
        #stickyTotalsBar #grand_total { font-size: 1.35rem !important; width: 120px !important; }
        #pfToggleBtn { padding: 6px 10px !important; font-size: .72rem !important; }
        #stickyTotalsBar > div > div:not(#pfRow) {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px !important;
            padding: 8px 0 !important;
        }
        #stickyTotalsBar > div > div:not(#pfRow) > div:first-child {
            gap: 12px !important;
            justify-content: space-between !important;
        }
        #stickyTotalsBar > div > div:not(#pfRow) > div:last-child {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        #stickyTotalsBar .btn {
            width: 100% !important;
            padding: 10px 8px !important;
            font-size: .85rem !important;
            margin: 0 !important;
        }
        #stickyTotalsBar kbd { display: none !important; }
        body { padding-bottom: 100px; }
    }
</style>
@endsection

@section('content')

    <div class="card">
        <form method="POST" action="{{ route('proforma-invoices.update', $proforma->id) }}" id="saleForm">
            @csrf
            @method('PUT')
            <input type="hidden" name="company_id" value="{{ currentCompanyId() }}">
            <input type="hidden" name="mode" value="{{ $companyMode }}">

            <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('proforma-invoices.index') }}" class="text-muted" style="font-size:.85rem"><i class="ph-duotone ph-arrow-left"></i></a>

                    <div class="d-flex align-items-center gap-1">
                        <label style="font-size:.825rem;color:#6c757d;white-space:nowrap">Party</label>
                        <div style="min-width:390px">
                            <select name="party_id" id="party_id" required>
                                <option value=""></option>
                                @foreach ($parties as $p)
                                    <option value="{{ $p->id }}"
                                        data-sez="{{ $p->is_sez ? 'true' : 'false' }}"
                                        data-payment_type="{{ $p->payment_type }}"
                                        data-vpp="{{ $p->vpp_cod ? 'true' : 'false' }}"
                                        data-transport="{{ $p->transportation_name }}"
                                        data-gst="{{ $p->gst_number }}"
                                        @selected(old('party_id', $proforma->party_id) == $p->id)>
                                        {{ $p->name }}@if($p->payment_type === 'cash') (Cash)@endif @if($p->is_sez) (SEZ)@endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <span id="paymentModeBadge" class="ms-1"></span>
                        <span id="outstandingBadge" class="ms-1"></span>
                    </div>

                    <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">Date</label>
                        <input type="date" name="invoice_date" class="form-control" value="{{ old('invoice_date', $proforma->invoice_date->format('Y-m-d')) }}" required style="width:160px;height:40px;font-size:.975rem">
                    </div>

                    <div class="d-flex align-items-center gap-1">
                        <label style="font-size:.825rem;color:#6c757d">Type</label>
                        <select name="bill_type" class="form-select" required style="width:130px;height:40px;font-size:.975rem">
                            @foreach ($billTypes ?? ['bill', 'cash memo'] as $type)
                                <option value="{{ $type }}" @selected(old('bill_type', $proforma->bill_type) == $type)>{{ ucfirst($type) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="ms-auto d-flex align-items-center gap-2">
                        <span style="font-size:.825rem;color:#6c757d;text-transform:uppercase;letter-spacing:.3px">Proforma #</span>
                        <span style="font-weight:700;font-size:1rem;color:#1e293b">{{ $proforma->proforma_no }}</span>
                    </div>
                </div>
                @include('partials._party-details')
            </div>

            {{-- E-way / Delivery --}}
            <div style="background:#f1f5f9;border-bottom:1px solid #e2e8f0;">
                @php $hasDelivery = $proforma->eway_bill_no || $proforma->delivery_note || $proforma->buyer_order_no; @endphp
                <a class="d-flex align-items-center gap-2 text-decoration-none" data-bs-toggle="collapse" href="#invoiceDetails" role="button" aria-expanded="{{ $hasDelivery ? 'true' : 'false' }}" style="padding:6px 16px;">
                    <i class="ph-duotone ph-truck" style="color:#64748b;font-size:.85rem"></i>
                    <span style="font-size:.75rem;color:#64748b;font-weight:500">E-way & Delivery</span>
                    <i class="ph-duotone ph-caret-down ms-1" style="font-size:.65rem;color:#94a3b8"></i>
                </a>
                <div class="collapse {{ $hasDelivery ? 'show' : '' }}" id="invoiceDetails" style="padding:0 16px 10px;">
                    <div class="row g-2">
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">E-way Bill No</label><input type="text" name="eway_bill_no" class="form-control form-control-sm" placeholder="E-way Bill No" value="{{ old('eway_bill_no', $proforma->eway_bill_no) }}"></div>
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">E-way Date</label><input type="date" name="eway_bill_date" class="form-control form-control-sm" value="{{ old('eway_bill_date', $proforma->eway_bill_date?->format('Y-m-d')) }}"></div>
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Delivery Note</label><input type="text" name="delivery_note" class="form-control form-control-sm" placeholder="Challan No" value="{{ old('delivery_note', $proforma->delivery_note) }}"></div>
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Delivery Date</label><input type="date" name="delivery_note_date" class="form-control form-control-sm" value="{{ old('delivery_note_date', $proforma->delivery_note_date?->format('Y-m-d')) }}"></div>
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Buyer Order No</label><input type="text" name="buyer_order_no" class="form-control form-control-sm" placeholder="PO Number" value="{{ old('buyer_order_no', $proforma->buyer_order_no) }}"></div>
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Buyer Order Date</label><input type="date" name="buyer_order_date" class="form-control form-control-sm" value="{{ old('buyer_order_date', $proforma->buyer_order_date?->format('Y-m-d')) }}"></div>
                        <div class="col-md-3"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Dispatched Through</label><input type="text" name="dispatched_through" id="dispatched_through" class="form-control form-control-sm" placeholder="Transport / Courier" value="{{ old('dispatched_through', $proforma->dispatched_through) }}"></div>
                        <div class="col-md-2"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Destination</label><input type="text" name="destination" class="form-control form-control-sm" placeholder="City / State" value="{{ old('destination', $proforma->destination) }}"></div>
                        <div class="col-md-3"><label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Terms of Delivery</label><input type="text" name="terms_of_delivery" class="form-control form-control-sm" placeholder="FOB, CIF, etc." value="{{ old('terms_of_delivery', $proforma->terms_of_delivery) }}"></div>
                        <div class="col-md-4" id="shippingAddressWrapper" style="display:none">
                            <label style="font-size:.8rem;color:#6c757d;margin-bottom:2px">Ship To</label>
                            <select name="shipping_address_id" id="shipping_address_id" class="form-select form-select-sm">
                                <option value="">-- Same as Billing --</option>
                                @if($proforma->party && $proforma->party->shippingAddresses)
                                    @foreach($proforma->party->shippingAddresses as $addr)
                                        <option value="{{ $addr->id }}" @selected(old('shipping_address_id', $proforma->shipping_address_id) == $addr->id)>
                                            {{ Str::limit($addr->address, 60) }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </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:200px">Product</th>
                                <th style="width:20px"></th>
                                <th style="width:110px">HSN</th>
                                <th style="width:75px">Unit</th>
                                <th style="width:145px" class="text-center">Qty</th>
                                <th style="width:165px" class="text-center">Rate</th>
                                <th style="width:190px" class="text-center">Amount</th>
                                <th style="width:120px" class="text-center">Tax%</th>
                                <th style="width:190px" class="text-center">Total</th>
                                <th style="width:28px"></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>

    {{-- Sticky bottom bar --}}
    <div id="stickyTotalsBar" 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:0 20px;">
            <div class="d-flex align-items-center gap-3 flex-wrap" style="padding:6px 0;border-bottom:1px solid #2d3a4d;">
                <span style="color:#64748b;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600">P&F</span>
                <div class="d-flex align-items-center gap-1"><span style="color:#94a3b8;font-size:.7rem">Amt</span><input type="number" step="0.01" name="pf_amount" id="pf_amount" form="saleForm" value="{{ old('pf_amount', $proforma->pf_amount ?? 0) }}" style="background:#1e293b;border:1px solid #334155;border-radius:4px;color:#e2e8f0;font-size:.8rem;width:80px;text-align:right;padding:3px 6px;height:28px" /></div>
                <div class="d-flex align-items-center gap-1"><span style="color:#94a3b8;font-size:.7rem">GST%</span><input type="number" step="0.01" name="pf_tax_percent" id="pf_tax_percent" form="saleForm" value="{{ old('pf_tax_percent', $proforma->pf_tax_percent ?? 18) }}" style="background:#1e293b;border:1px solid #334155;border-radius:4px;color:#e2e8f0;font-size:.8rem;width:60px;text-align:right;padding:3px 6px;height:28px" /></div>
                <div class="d-flex align-items-center gap-1"><span style="color:#94a3b8;font-size:.7rem">Tax</span><input name="pf_tax_amount" id="pf_tax_amount" form="saleForm" readonly style="background:transparent;border:none;color:#94a3b8;font-size:.8rem;width:70px;text-align:right" /></div>
            </div>
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2" style="padding:10px 0;">
                <div class="d-flex align-items-center gap-4 flex-wrap">
                    <div class="d-flex flex-column align-items-end"><span style="color:#64748b;font-size:.6rem;text-transform:uppercase;letter-spacing:.5px">Amount</span><input name="amount_total" id="amount_total" form="saleForm" readonly style="background:transparent;border:none;color:#cbd5e1;font-size:.95rem;width:100px;text-align:right;font-weight:500" /></div>
                    <div style="width:1px;height:32px;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">Tax</span><input name="tax_total" id="tax_total" form="saleForm" readonly style="background:transparent;border:none;color:#cbd5e1;font-size:.95rem;width:90px;text-align:right;font-weight:500" /></div>
                    <div style="width:1px;height:32px;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">Roundoff</span><input name="roundoff" id="roundoff" value="{{ old('roundoff', $proforma->roundoff ?? 0) }}" form="saleForm" style="background:#1e293b;border:1px solid #334155;border-radius:4px;color:#e2e8f0;font-size:.95rem;width:80px;text-align:right;padding:2px 6px;height:30px" /></div>
                    <div style="width:2px;height:36px;background:#3b82f6;border-radius:1px"></div>
                    <div class="d-flex flex-column align-items-end"><span style="color:#3b82f6;font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;font-weight:700">Grand Total</span><input name="grand_total" id="grand_total" form="saleForm" readonly style="background:transparent;border:none;color:#f8fafc;font-size:1.5rem;width:150px;text-align:right;font-weight:800;letter-spacing:-.5px" /></div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-success" id="btnSave" form="saleForm" style="padding:8px 20px;font-weight:600;font-size:.85rem">Update Proforma <kbd class="ms-1 bg-success-subtle text-success-emphasis border-0" style="font-size:.65rem;opacity:.7">Alt+S</kbd></button>
                    <a href="{{ route('proforma-invoices.index') }}" class="btn btn-outline-secondary" style="padding:8px 16px;font-size:.85rem">Cancel</a>
                </div>
            </div>
        </div>
    </div>
    <div style="height:100px"></div>

@endsection

@push('scripts')
    <script>
        (function () {
            const itemsTbody = document.querySelector('#itemsTable tbody');
            const taxTotalEl = document.getElementById('tax_total');
            const amtTotalEl = document.getElementById('amount_total');
            const pfAmountEl = document.getElementById('pf_amount');
            const pfTaxPercentEl = document.getElementById('pf_tax_percent');
            const pfTaxAmountEl = document.getElementById('pf_tax_amount');
            const roundoffEl = document.getElementById('roundoff');
            const grandEl = document.getElementById('grand_total');

            const productOptions = @json($products).map(p => ({
                value: String(p.id), text: (p.product_id || '') + ' — ' + p.name,
                name: p.name, hsn: p.hsn || '', stock: String(p.stock ?? '0'), pid: p.product_id || ''
            }));

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

            function buildPriceTooltip(d) {
                let html = '';
                if (d.specific_party_last) {
                    const r = parseFloat(d.specific_party_last.rate) || 0, t = parseFloat(d.tax_percent) || 0;
                    const incl = +(r * (1 + t / 100)).toFixed(2);
                    html += `<div style="border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:4px;margin-bottom:4px"><b style="color:#4ade80">⬤ LAST SALE</b> to this party<br>Rate: <b>₹${r.toFixed(2)}</b> + ${t}% = <b>₹${incl.toFixed(2)}</b>`;
                    if (d.specific_party_last.date) html += ` <span style="opacity:.6">(${d.specific_party_last.date})</span>`;
                    html += `</div>`;
                } else { html += `<div style="border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:4px;margin-bottom:4px;opacity:.5"><b>⬤ LAST SALE</b> — No sales to this party</div>`; }
                if (d.last_purchases && d.last_purchases.length) {
                    const lp = d.last_purchases[0], br = parseFloat(lp.base_rate) || 0, tp = parseFloat(lp.tax_percent) || 0;
                    const costIncl = +(br * (1 + tp / 100)).toFixed(2);
                    html += `<div style="border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:4px;margin-bottom:4px"><b style="color:#fbbf24">⬤ LAST COST</b> from ${lp.party}`;
                    if (lp.company_name) html += ` <span style="opacity:.7;font-size:.7rem">[${lp.company_name}]</span>`;
                    html += `<br>Rate: ₹${br.toFixed(2)} + ${tp}% = <b>₹${costIncl.toFixed(2)}</b>`;
                    if (lp.date) html += ` <span style="opacity:.6">(${lp.date})</span>`;
                    html += `</div>`;
                    if (d.specific_party_last) {
                        const saleRate = parseFloat(d.specific_party_last.rate) || 0, margin = saleRate - br;
                        const marginPct = br > 0 ? ((margin / br) * 100).toFixed(1) : '—', mColor = margin >= 0 ? '#4ade80' : '#f87171';
                        html += `<div style="border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:4px;margin-bottom:4px"><b>Margin:</b> <span style="color:${mColor}">₹${margin.toFixed(2)} (${marginPct}%)</span></div>`;
                    }
                }
                if (d.mrp) { html += `<div style="border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:4px;margin-bottom:4px"><b style="color:#a78bfa">⬤ Cost Price:</b> <b>₹${parseFloat(d.mrp).toFixed(2)}</b></div>`; }
                if (d.stock !== undefined) { const s = parseFloat(d.stock) || 0; html += `<b>Stock:</b> <span style="color:${s < 0 ? '#f87171' : '#4ade80'}">${s}</span>`; }
                return html || 'No history';
            }

            function addEmptyRow() {
                const idx = rowCounter++, 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 class="form-control form-control-sm" name="items[${idx}][hsn]" value=""></td>
                    <td><input class="form-control form-control-sm" name="items[${idx}][unit]" value=""></td>
                    <td><input type="number" step="0.001" class="form-control form-control-sm text-end qty" name="items[${idx}][qty]" value="" data-stock="0"></td>
                    <td><input type="number" step="0.01" class="form-control form-control-sm text-end rate" name="items[${idx}][rate]" value=""></td>
                    <td><input type="number" step="0.01" class="form-control form-control-sm text-end line-amt" name="items[${idx}][line_amount]" value=""></td>
                    <td><input type="number" step="0.01" class="form-control form-control-sm text-end taxp" name="items[${idx}][tax_percent]" value=""></td>
                    <td><input type="number" step="0.01" class="form-control form-control-sm text-end line-tot" name="items[${idx}][line_total]" value="">
                        <input type="hidden" name="items[${idx}][product_id]" value="" class="row-product-id">
                        <input type="hidden" name="items[${idx}][line_tax_amount]" value="0">
                    </td>
                    <td><button type="button" class="btn btn-sm btn-outline-danger remove">×</button></td>`;
                itemsTbody.appendChild(row); initRowTomSelect(row, idx); return row;
            }

            function addFilledRow(pid, name, hsn, unit, qty, rate, taxp, stock) {
                const row = addEmptyRow();
                row.classList.remove('row-empty'); row.classList.add('row-filled');
                const idx = row.dataset.rowIdx;
                const stockNum = parseFloat(stock) || 0;
                const qtyNum = parseFloat(qty) || 0;

                row.querySelector('.row-product-id').value = pid;
                row.querySelector('input[name$="[hsn]"]').value = hsn || '';
                row.querySelector('input[name$="[unit]"]').value = unit || '';
                row.querySelector('.qty').value = qtyNum;
                row.querySelector('.qty').dataset.stock = stockNum;
                row.querySelector('.rate').value = parseFloat(rate) || '';
                row.querySelector('.taxp').value = parseFloat(taxp) || 0;
                if (qtyNum > stockNum) row.querySelector('.qty').classList.add('bg-danger-subtle');

                const ts = rowTomSelects.get(parseInt(idx));
                if (ts) {
                    if (!ts.options[String(pid)]) ts.addOption({ value: String(pid), text: name, name, stock: String(stockNum) });
                    ts.setValue(String(pid), true);
                }
                recalcRowForward(row);
            }

            const addProductUrl = `{{ route('products.create') }}?from_dropdown=1`;
            function initRowTomSelect(row, idx) {
                const ts = new TomSelect(row.querySelector(`#prod_select_${idx}`), {
                    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: (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: () => `<div class="no-results" style="padding:6px 10px;font-size:.8rem">No match — <a href="${addProductUrl}" target="_blank" style="color:#0d6efd">+ Add new product</a></div>` },
                    onItemAdd: function() { this.control_input.value = ''; }
                });
                ts.on('change', async function(value) {
                    const pid = row.querySelector('.row-product-id'), icon = row.querySelector('.price-info-icon');
                    if (!value) { pid.value = ''; icon.style.display = 'none'; row.classList.remove('row-filled'); row.classList.add('row-empty'); ['[hsn]','[unit]'].forEach(s => row.querySelector(`input[name$="${s}"]`).value = ''); row.querySelector('.qty').value = ''; row.querySelector('.rate').value = ''; row.querySelector('.line-amt').value = ''; row.querySelector('.line-tot').value = ''; row.querySelector('.taxp').value = ''; recalcRowForward(row); return; }
                    row.classList.remove('row-empty'); row.classList.add('row-filled'); maybeAutoAddRows(); pid.value = value;
                    const partyId = tomPartySelect.getValue() || '';
                    try {
                        const res = await fetch(`{{ url('api/products') }}/${value}/sale-metrics?party_id=${partyId}&company_id={{ currentCompanyId() }}`);
                        const d = await res.json(); const sez = (tomPartySelect.options[partyId] || {}).sez;
                        row.querySelector('input[name$="[hsn]"]').value = d.hsn || ''; row.querySelector('input[name$="[unit]"]').value = d.unit || '';
                        row.querySelector('.taxp').value = d.tax_percent || '0'; row.querySelector('.qty').dataset.stock = d.stock || '0';
                        if (d.specific_party_last && d.specific_party_last.rate) row.querySelector('.rate').value = parseFloat(d.specific_party_last.rate).toFixed(2);
                        else if (d.last_purchases && d.last_purchases.length) { const lp = d.last_purchases[0]; row.querySelector('.rate').value = +(parseFloat(lp.base_rate) * (1 + parseFloat(lp.tax_percent) / 100)).toFixed(2); }
                        else if (d.mrp) row.querySelector('.rate').value = parseFloat(d.mrp).toFixed(2);
                        else row.querySelector('.rate').value = '';
                        if (sez === 'true') row.querySelector('.taxp').value = 0;
                        if (!row.querySelector('.qty').value) row.querySelector('.qty').value = 1;
                        const tipHtml = buildPriceTooltip(d); icon.setAttribute('title', tipHtml); icon.style.display = 'inline';
                        const oldTip = bootstrap.Tooltip.getInstance(icon); if (oldTip) oldTip.dispose();
                        new bootstrap.Tooltip(icon, { html: true, customClass: 'price-tip', placement: 'right' });
                        recalcRowForward(row); row.querySelector('.qty').focus(); row.querySelector('.qty').select();
                    } catch (err) { console.error(err); }
                });
                rowTomSelects.set(idx, ts);
            }

            function recalcRowForward(tr) { const qty = parseFloat(tr.querySelector('.qty')?.value) || 0, rate = parseFloat(tr.querySelector('.rate')?.value) || 0, taxp = parseFloat(tr.querySelector('.taxp')?.value) || 0; const amount = +(qty * rate).toFixed(2), taxAmt = +((amount * taxp) / 100).toFixed(2), total = +(amount + taxAmt).toFixed(2); tr.querySelector('.line-amt').value = amount ? amount.toFixed(2) : ''; tr.querySelector('input[name$="[line_tax_amount]"]').value = taxAmt.toFixed(2); tr.querySelector('.line-tot').value = total ? total.toFixed(2) : ''; recalcTotals(); }
            function reverseFromAmount(tr) { const qty = parseFloat(tr.querySelector('.qty')?.value) || 0, amount = parseFloat(tr.querySelector('.line-amt')?.value) || 0, taxp = parseFloat(tr.querySelector('.taxp')?.value) || 0; if (qty > 0) tr.querySelector('.rate').value = +(amount / qty).toFixed(2); const taxAmt = +((amount * taxp) / 100).toFixed(2), total = +(amount + taxAmt).toFixed(2); tr.querySelector('input[name$="[line_tax_amount]"]').value = taxAmt.toFixed(2); tr.querySelector('.line-tot').value = total ? total.toFixed(2) : ''; recalcTotals(); }
            function reverseFromTotal(tr) { const qty = parseFloat(tr.querySelector('.qty')?.value) || 0, total = parseFloat(tr.querySelector('.line-tot')?.value) || 0, taxp = parseFloat(tr.querySelector('.taxp')?.value) || 0; const amount = +(total / (1 + taxp / 100)).toFixed(2), taxAmt = +(total - amount).toFixed(2); tr.querySelector('.line-amt').value = amount ? amount.toFixed(2) : ''; tr.querySelector('input[name$="[line_tax_amount]"]').value = taxAmt.toFixed(2); if (qty > 0) tr.querySelector('.rate').value = +(amount / qty).toFixed(2); recalcTotals(); }
            function reindexRows() { itemsTbody.querySelectorAll('tr').forEach((row, i) => { const n = row.querySelector('.row-num'); if (n) n.textContent = i + 1; row.querySelectorAll('input[name]').forEach(inp => { inp.name = inp.name.replace(/items\[\d+\]/, `items[${i}]`); }); }); }

            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(); document.getElementById('btnSave').click(); } });

            // Prefill existing items
            roundoffEl.dataset.manual = '1';
            const existingItems = @json($proforma->items);
            const productData = @json($products);
            existingItems.forEach(item => {
                const prod = productData.find(p => p.id == item.product_id);
                const stock = prod ? prod.stock : '0';
                const prodName = prod ? ((prod.product_id || '') + ' — ' + prod.name) : 'Product';
                addFilledRow(item.product_id, prodName, item.hsn, item.unit,
                    parseFloat(item.qty), parseFloat(item.rate), parseFloat(item.tax_percent), stock);
            });
            for (let i = 0; i < 3; i++) addEmptyRow();

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

            itemsTbody.addEventListener('input', function (e) { const tr = e.target.closest('tr'); if (!tr) return; const q = tr.querySelector('.qty'); if (q && e.target === q) { const s = parseFloat(q.dataset.stock) || 0; if ((parseFloat(q.value) || 0) > s) q.classList.add('bg-danger-subtle'); else q.classList.remove('bg-danger-subtle'); } if (e.target.classList.contains('line-tot')) reverseFromTotal(tr); else if (e.target.classList.contains('line-amt')) reverseFromAmount(tr); else recalcRowForward(tr); });
            itemsTbody.addEventListener('click', function (e) { if (e.target.classList.contains('remove')) { const row = e.target.closest('tr'), idx = parseInt(row.dataset.rowIdx), ts = rowTomSelects.get(idx); if (ts) { ts.destroy(); rowTomSelects.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(); } });
            document.getElementById('saleForm').addEventListener('submit', function() { itemsTbody.querySelectorAll('tr').forEach(row => { const p = row.querySelector('.row-product-id'); if (!p || !p.value) row.querySelectorAll('input[name]').forEach(inp => inp.removeAttribute('name')); }); reindexRows(); });

            roundoffEl.addEventListener('input', () => { roundoffEl.dataset.manual = '1'; recalcTotals(); }); pfAmountEl.addEventListener('input', recalcTotals); pfTaxPercentEl.addEventListener('input', recalcTotals);
            function recalcTotals() { let tax = 0, amt = 0; itemsTbody.querySelectorAll('tr').forEach(tr => { amt += parseFloat(tr.querySelector('.line-amt')?.value) || 0; tax += parseFloat(tr.querySelector('input[name$="[line_tax_amount]"]')?.value) || 0; }); taxTotalEl.value = tax.toFixed(2); amtTotalEl.value = amt.toFixed(2); const pfAmt = parseFloat(pfAmountEl.value) || 0, pfTaxPct = parseFloat(pfTaxPercentEl.value) || 0, pfTaxAmt = +((pfAmt * pfTaxPct) / 100).toFixed(2); pfTaxAmountEl.value = pfTaxAmt.toFixed(2); if (!roundoffEl.dataset.manual) { const raw = amt + tax + pfAmt + pfTaxAmt; roundoffEl.value = (Math.round(raw) - raw).toFixed(2); } const grand = amt + tax + pfAmt + pfTaxAmt + (parseFloat(roundoffEl.value) || 0); grandEl.value = grand.toFixed(2); }
            roundoffEl.addEventListener('change', () => roundoffEl.dataset.manual = '1');

            const productChannel = new BroadcastChannel('product_created');
            productChannel.onmessage = function (event) { const product = event.data; if (!product || !product.id) return; const newOpt = { value: String(product.id), text: (product.product_id || '') + ' — ' + product.name, name: product.name, hsn: product.hsn || '', stock: '0', pid: product.product_id || '' }; productOptions.push(newOpt); rowTomSelects.forEach(ts => { if (!ts.options[String(product.id)]) ts.addOption(newOpt); }); };
        })();

        const tomPartySelect = new TomSelect('#party_id', { maxOptions: null, allowEmptyOption: true, closeAfterSelect: true, placeholder: 'Search name or GST...', highlight: true, searchField: ['text', 'gst'], render: { option: (data, escape) => { const gst = data.gst ? `<span style="color:#999;font-size:.7rem;margin-left:6px">GST: ${escape(data.gst)}</span>` : ''; return `<div>${escape(data.text)}${gst}</div>`; }, item: (data, escape) => `<div>${escape(data.text)}</div>` }, onItemAdd: function() { this.control_input.value = ''; } });

        tomPartySelect.on('change', function(value) {
            loadPartyDetails(value);
            const outBadge = document.getElementById('outstandingBadge');
            if (!value) { outBadge.innerHTML = ''; } else { fetch(`{{ url('api/customers') }}/${value}/details`).then(r => r.json()).then(d => { if (d.outstanding && d.outstanding !== 0) { const amt = Math.abs(d.outstanding).toLocaleString('en-IN', {minimumFractionDigits: 2}); const isDebit = d.outstanding > 0; outBadge.innerHTML = `<span class="badge ${isDebit ? 'bg-danger' : 'bg-success'}" style="font-size:.72rem;font-weight:600">OS: ₹${amt} ${isDebit ? 'Dr' : 'Cr'}</span>`; } else { outBadge.innerHTML = ''; } }).catch(() => { outBadge.innerHTML = ''; }); }
            const wrapper = document.getElementById('shippingAddressWrapper'), addrSelect = document.getElementById('shipping_address_id');
            const currentShipId = @json($proforma->shipping_address_id);
            if (!value) { if (wrapper) wrapper.style.display = 'none'; if (addrSelect) addrSelect.innerHTML = '<option value="">-- Same as Billing --</option>'; } else if (wrapper && addrSelect) { fetch(`{{ url('api/customers') }}/${value}/shipping-addresses`).then(r => r.json()).then(addresses => { addrSelect.innerHTML = '<option value="">-- Same as Billing --</option>'; if (addresses.length > 0) { wrapper.style.display = 'block'; addresses.forEach(addr => { const opt = document.createElement('option'); opt.value = addr.id; opt.textContent = addr.address.substring(0, 60) + (addr.address.length > 60 ? '...' : ''); if (currentShipId && String(currentShipId) === String(addr.id)) opt.selected = true; addrSelect.appendChild(opt); }); } else { wrapper.style.display = 'none'; } }).catch(() => { wrapper.style.display = 'none'; }); }
            const badge = document.getElementById('paymentModeBadge'), opt = tomPartySelect.options[value];
            if (!value || !opt) { badge.innerHTML = ''; } else { let html = ''; if (opt.payment_type === 'cash') html += '<span class="badge bg-warning text-dark">100% Advance</span> '; else if (opt.payment_type === 'credit') html += '<span class="badge bg-info text-dark">15 Days Credit</span> '; if (opt.vpp === 'true') html += '<span class="badge bg-danger">VPP/COD</span>'; badge.innerHTML = html; }
        });
        if (tomPartySelect.getValue()) tomPartySelect.trigger('change', tomPartySelect.getValue());
    </script>
@endpush