@extends('layouts.layout-horizontal')

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

@section('css')
<style>
    /* Page tint — purchases (light amber) */
    body, .pc-container, .pc-content { background: #ffe4bf !important; }

    /* Zebra striping */
    #itemsTable tbody tr:nth-child(even) { background: #f8f9fa; }
    #itemsTable tbody tr:nth-child(odd) { background: #fff; }

    /* Sticky header */
    #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;
    }

    /* Base cells */
    #itemsTable td { padding: 3px 4px; vertical-align: middle; font-size: .925rem; border: none; border-bottom: 1px solid #f0f0f0; }

    /* Row # column */
    #itemsTable .row-num { color: #adb5bd; font-size: .825rem; text-align: center; width: 24px; user-select: none; }

    /* Borderless inputs — spreadsheet feel */
    #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; }

    /* Monospace numbers */
    #itemsTable .qty, #itemsTable .rate, #itemsTable .line-amt, #itemsTable .line-tot, #itemsTable .taxp, #itemsTable .rate-incl {
        font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    }

    /* Colored Total */
    #itemsTable .line-tot { color: #0d6efd; font-weight: 600; }

    /* Empty rows dimmed — only dim non-product cells */
    #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; }

    /* Active row highlight */
    #itemsTable tbody tr:focus-within { background: #e8f0fe !important; }

    /* Hide remove on idle, show on hover */
    #itemsTable .remove { opacity: 0; transition: opacity .15s; }
    #itemsTable tbody tr:hover .remove, #itemsTable tbody tr:focus-within .remove { opacity: 1; }

    /* TomSelect compact */
    #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; }

    /* Tooltip */
    .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; }

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

    /* Header party select */
    .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; }
    .form-header-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
    .form-header-tile { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; min-height:72px; display:flex; flex-direction:column; justify-content:center; }
    .form-header-tile .tile-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:#64748b; margin-bottom:4px; font-weight:700; }
    .form-header-tile .tile-value { font-size:.98rem; font-weight:700; color:#1e293b; }
    .form-header-tile .tile-note { font-size:.76rem; color:#64748b; margin-top:4px; }
    .form-header-tile .form-select, .form-header-tile .form-control { min-height:40px; font-size:.95rem; }

    /* Mobile — transform each row into a card with labeled inputs */
    @media (max-width: 767.98px) {
        .form-header-tiles { grid-template-columns:1fr; }
        .items-scroll { max-height: none; overflow: visible; border: none; border-radius: 0; }
        #itemsTable, #itemsTable > tbody { display: block; width: 100%; }
        #itemsTable thead { display: none; }
        #itemsTable tbody tr {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 10px;
            padding: 28px 12px 12px;
            margin-bottom: 10px;
            background: #fff !important;
            border: 1px solid #d0d7de !important;
            border-radius: 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }
        #itemsTable tbody tr.row-empty td { opacity: 1 !important; }
        #itemsTable tbody tr > td {
            display: flex !important; flex-direction: column;
            padding: 0 !important; border: none !important;
            background: transparent !important; font-size: 1rem;
        }
        #itemsTable tbody tr > td[data-label]:not([data-label=""])::before {
            content: attr(data-label);
            font-size: .68rem; text-transform: uppercase; letter-spacing: .4px;
            color: #64748b; font-weight: 600; margin-bottom: 3px;
        }
        #itemsTable tbody tr > td.info-cell { display: none !important; }
        #itemsTable td.row-num {
            position: absolute; top: 7px; left: 12px;
            font-size: .72rem; color: #94a3b8;
        }
        #itemsTable tbody tr > td[data-label="Product"] { grid-column: 1 / -1; }
        #itemsTable tbody tr > td[data-label="Total"] {
            grid-column: 1 / -1;
            background: #f1f5f9 !important;
            padding: 6px 10px !important;
            border-radius: 6px;
            margin-top: 2px;
        }
        #itemsTable tbody tr > td.remove-cell {
            position: absolute; top: 4px; right: 4px;
        }
        #itemsTable .remove {
            opacity: 1 !important;
            min-width: 32px; min-height: 32px;
            font-size: 1rem; line-height: 1; padding: 4px 9px !important;
        }
        #itemsTable .form-control-sm {
            height: 42px !important; font-size: 1rem !important;
            padding: 8px 10px !important;
            border: 1px solid #d0d7de !important; background: #fff !important;
            border-radius: 6px !important;
        }
        #itemsTable .ts-wrapper .ts-control {
            height: 46px !important; min-height: 46px !important;
            line-height: 44px !important; font-size: 1rem !important;
            padding: 0 10px !important;
        }
        #itemsTable .ts-wrapper .ts-control > input,
        #itemsTable .ts-wrapper .ts-control .item {
            height: 44px !important; line-height: 44px !important; font-size: 1rem !important;
        }
        .card-body { padding: 10px !important; }

        /* Sticky totals bar — stack totals row above full-width action buttons */
        #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('purchase.store') }}" id="saleForm" data-items-message="Add at least one valid purchase item.">
            @csrf
            <input type="hidden" name="company_id" value="{{ currentCompanyId() }}">
            <input type="hidden" name="mode" value="{{ $mode }}">
            @if($isOverseasPurchase ?? false)
                <input type="hidden" name="is_overseas_purchase" value="1">
            @endif

            {{-- Compact header bar --}}
            <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">
                    {{-- Left: back + party + date + bill no + mode --}}
                    <a href="{{ route('purchase.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">Supplier</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-payment_type="{{ $p->payment_type }}"
                                        data-gst="{{ $p->gst_number }}"
                                        @selected(old('party_id') == $p->id)>
                                        {{ $p->name }}@if($p->payment_type === 'cash') (Cash)@endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <a class="btn btn-outline-primary btn-sm" href="{{ route('customers.create') }}?from_dropdown=1" target="_blank" style="padding:2px 8px;font-size:.7rem">+</a>
                        <span id="outstandingBadge" class="ms-1"></span>
                    </div>
                    @error('party_id')<div class="text-danger" style="font-size:.75rem">{{ $message }}</div>@enderror

                    <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 @error('invoice_date') is-invalid @enderror"
                            value="{{ old('invoice_date', now()->toDateString()) }}" 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;white-space:nowrap">Bill No</label>
                        <input type="text" name="bill_no" class="form-control @error('bill_no') is-invalid @enderror"
                            value="{{ old('bill_no') }}" required placeholder="Supplier's bill no" style="width:150px;height:40px;font-size:.975rem">
                    </div>

                    {{-- Right: mode badge + "New" label --}}
                    <div class="ms-auto d-flex align-items-center gap-2">
                        @if ($mode == 'cash')
                            <span class="badge bg-dark" style="font-size:.75rem;padding:6px 12px">Cash Mode</span>
                        @else
                            <span class="badge bg-primary" style="font-size:.75rem;padding:6px 12px">Bill Mode</span>
                        @endif
                        <span style="font-size:.825rem;color:#6c757d;text-transform:uppercase;letter-spacing:.3px">Purchase #</span>
                        <span style="font-weight:700;font-size:1rem;color:#1e293b">New</span>
                    </div>
                </div>
                @include('partials._party-details')
                <div class="form-header-tiles">
                    <div class="form-header-tile">
                        <div class="tile-label">Document</div>
                        <div class="tile-value">{{ ($isOverseasPurchase ?? false) ? 'Overseas Purchase' : 'Purchase Bill' }}</div>
                        <div class="tile-note">{{ ($isOverseasPurchase ?? false) ? 'Foreign invoice entry' : 'Create supplier entry fast' }}</div>
                    </div>
                    <div class="form-header-tile">
                        <div class="tile-label">Selected Mode</div>
                        <div class="tile-value">{{ strtoupper($mode) }}</div>
                        <div class="tile-note">{{ ($isOverseasPurchase ?? false) ? 'Cash overseas purchase entry' : ($mode === 'cash' ? 'Cash-company purchase entry' : 'Bill-company purchase entry') }}</div>
                    </div>
                    <div class="form-header-tile">
                        <div class="tile-label">Current Company</div>
                        <div class="tile-value">{{ currentCompany()?->name ?? 'Current Company' }}</div>
                        <div class="tile-note">{{ $mode === 'cash' ? 'Transfer to bill from view page' : 'Posting stays in active company' }}</div>
                    </div>
                    <div class="form-header-tile">
                        <div class="tile-label">Purchase #</div>
                        <div class="tile-value">New</div>
                        <div class="tile-note">Supplier bill no stays manual</div>
                    </div>
                </div>
            </div>

            @if($mode !== 'cash')
            {{-- E-way — collapsed compact strip --}}
            <div style="background:#f1f5f9;border-bottom:1px solid #e2e8f0;">
                <a class="d-flex align-items-center gap-2 text-decoration-none" data-bs-toggle="collapse" href="#ewayDetails" role="button" aria-expanded="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 Bill</span>
                    <i class="ph-duotone ph-caret-down ms-1" style="font-size:.65rem;color:#94a3b8"></i>
                </a>
                <div class="collapse" id="ewayDetails" style="padding:0 16px 10px;">
                    <div class="row g-2">
                        <div class="col-md-3">
                            <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') }}">
                        </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') }}">
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if($isOverseasPurchase ?? false)
            <div style="background:#fff7ed;border-bottom:1px solid #fed7aa;padding:10px 16px;">
                <div class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Foreign Party</label>
                        <input type="text" name="foreign_party_name" class="form-control form-control-sm" value="{{ old('foreign_party_name') }}" placeholder="Overseas supplier">
                    </div>
                    <div class="col-md-2">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Foreign Inv. No</label>
                        <input type="text" name="foreign_invoice_no" class="form-control form-control-sm" value="{{ old('foreign_invoice_no') }}">
                    </div>
                    <div class="col-md-2">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Shipping Party</label>
                        <input type="text" name="shipping_party_name" class="form-control form-control-sm" value="{{ old('shipping_party_name') }}">
                    </div>
                    <div class="col-md-2">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Shipping Inv. No</label>
                        <input type="text" name="shipping_invoice_no" class="form-control form-control-sm" value="{{ old('shipping_invoice_no') }}">
                    </div>
                    <div class="col-md-1">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Currency</label>
                        <input type="text" name="foreign_currency" class="form-control form-control-sm" value="{{ old('foreign_currency', 'JPY') }}" maxlength="10">
                    </div>
                    <div class="col-md-2">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Conversion</label>
                        <input type="number" step="0.000001" name="conversion_rate" id="conversion_rate" class="form-control form-control-sm text-end" value="{{ old('conversion_rate') }}">
                    </div>
                    <div class="col-12">
                        <label style="font-size:.8rem;color:#9a3412;margin-bottom:2px">Overseas Narration</label>
                        <input type="text" name="overseas_narration" class="form-control form-control-sm" value="{{ old('overseas_narration') }}" placeholder="Third-party invoice / shipping notes">
                    </div>
                </div>
            </div>
            @endif

            @if($prefill && !empty($prefill['items']))
                <div class="alert alert-light border rounded-0 mb-0 py-2 px-3">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="fw-semibold">From {{ $prefill['po_ref'] ?? 'Purchase Order' }}</span>
                        @foreach($prefill['items'] as $prefillItem)
                            @if(($prefillItem['conversion_status'] ?? 'Pending') !== 'Pending')
                                <span class="badge bg-warning text-dark">
                                    {{ $prefillItem['product_name'] ?? 'Item' }}: {{ $prefillItem['conversion_status'] }}
                                </span>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="card-body" style="padding:10px 16px;">
                {{-- Items table --}}
                <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>
                                @if($isOverseasPurchase ?? false)
                                    <th style="width:120px" class="text-center">Fgn Rate</th>
                                    <th style="width:110px" class="text-center">Conv</th>
                                @endif
                                <th style="width:165px" class="text-center">Rate</th>
                                @if($mode !== 'cash')
                                    <th style="width:120px" class="text-center">Tax%</th>
                                    <th style="width:165px" class="text-center">Rate<br><small style="font-weight:400;color:#94a3b8">(Incl. Tax)</small></th>
                                @endif
                                <th style="width:165px" class="text-center">Total<br><small style="font-weight:400;color:#94a3b8">(Excl. Tax)</small></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;">

            {{-- Row 1: P&F --}}
            <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="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>
                @if($mode === 'cash')
                    <input type="hidden" name="pf_tax_percent" id="pf_tax_percent" form="saleForm" value="0">
                    <input type="hidden" name="pf_tax_amount" id="pf_tax_amount" form="saleForm" value="0">
                @else
                <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="{{ $mode === 'cash' ? 0 : 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>
                @endif
            </div>

            {{-- Row 2: Totals + Actions --}}
            <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>
                    @if($mode === 'cash')
                        <input type="hidden" name="tax_total" id="tax_total" form="saleForm" value="0">
                    @else
                    <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>
                    @endif
                    <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="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>

                {{-- Actions --}}
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-outline-light" id="btnSave" form="saleForm" style="padding:8px 20px;font-size:.85rem">
                        Save <kbd class="ms-1 text-light border-0" style="font-size:.65rem;opacity:.5">Alt+S</kbd>
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- Spacer so content not hidden behind sticky bar --}}
    <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 isCashMode = @json($mode === 'cash');
            const showTaxColumns = @json($mode !== 'cash');
            const usesForeignRates = @json($isOverseasPurchase ?? false);
            const billConversionRateEl = document.getElementById('conversion_rate');
            let previousBillConversionRate = billConversionRateEl?.value || '';

            function sameNumericValue(a, b) {
                if (a === b) return true;
                const an = parseFloat(a);
                const bn = parseFloat(b);
                if (Number.isNaN(an) || Number.isNaN(bn)) return false;
                return Math.abs(an - bn) < 0.000001;
            }

            // Product options for TomSelect
            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();
            const rowTooltips = new Map();
            let rowCounter = 0;
            let activeProductRowIdx = null;

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

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

                row.innerHTML = `
                    <td class="row-num">${rowNum}</td>
                    <td data-label="Product">
                        <select class="row-product-select" id="prod_select_${idx}"><option value=""></option></select>
                    </td>
                    <td class="text-center info-cell"><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 data-label="HSN"><input class="form-control form-control-sm" name="items[${idx}][hsn]" value=""></td>
                    <td data-label="Unit"><input class="form-control form-control-sm" name="items[${idx}][unit]" value=""></td>
                    <td data-label="Qty"><input type="number" step="0.001" class="form-control form-control-sm text-end qty" name="items[${idx}][qty]" value="" data-stock="0"></td>
                    ${usesForeignRates ? `
                    <td data-label="Foreign Rate"><input type="number" step="0.0001" class="form-control form-control-sm text-end foreign-rate" name="items[${idx}][foreign_rate]" value=""></td>
                    <td data-label="Conversion"><input type="number" step="0.000001" class="form-control form-control-sm text-end foreign-conversion-rate" name="items[${idx}][foreign_conversion_rate]" value="" data-from-header="1"></td>
                    ` : ''}
                    <td data-label="Rate"><input type="number" step="0.01" class="form-control form-control-sm text-end rate" name="items[${idx}][rate]" value="">${showTaxColumns ? '' : `<input type="hidden" class="taxp" name="items[${idx}][tax_percent]" value="0">`}</td>
                    ${showTaxColumns ? `
                    <td data-label="Tax %"><input type="number" step="0.01" class="form-control form-control-sm text-end taxp" name="items[${idx}][tax_percent]" value=""></td>
                    <td data-label="Rate (Incl.)"><input type="number" step="0.01" class="form-control form-control-sm text-end rate-incl" value=""></td>
                    ` : ''}
                    <td data-label="Total Excl. Tax"><input type="number" step="0.01" class="form-control form-control-sm text-end line-amt" name="items[${idx}][line_amount]" value=""></td>
                    <td data-label="Total"><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">
                        <input type="hidden" name="items[${idx}][source_po_id]" value="" class="source-po-id">
                        <input type="hidden" name="items[${idx}][source_po_item_id]" value="" class="source-po-item-id">
                    </td>
                    <td class="remove-cell"><button type="button" class="btn btn-sm btn-outline-danger remove">×</button></td>
                `;
                itemsTbody.appendChild(row);
                initRowTomSelect(row, idx);
                return row;
            }

            // --- Add prefilled row ---
            function addFilledRow(pid, name, hsn, unit, qty, rate, taxp, stock, sourcePoId = '', sourcePoItemId = '', foreignRate = '', foreignConversionRate = '') {
                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) || '';
                if (usesForeignRates) {
                    row.querySelector('.foreign-rate').value = parseFloat(foreignRate) || '';
                    const conversionInput = row.querySelector('.foreign-conversion-rate');
                    conversionInput.value = parseFloat(foreignConversionRate) || parseFloat(billConversionRateEl?.value) || '';
                    if (foreignConversionRate) {
                        conversionInput.dataset.manual = '1';
                        delete conversionInput.dataset.fromHeader;
                    }
                    syncForeignRate(row);
                }
                row.querySelector('.taxp').value = parseFloat(taxp) || 0;
                row.querySelector('.source-po-id').value = sourcePoId || '';
                row.querySelector('.source-po-item-id').value = sourcePoItemId || '';

                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);
            }

            // --- Init TomSelect per row ---
            const addProductUrl = `{{ route('products.create') }}?from_dropdown=1`;

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

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

                    if (!value) {
                        productIdInput.value = '';
                        infoIcon.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('.qty').dataset.stock = '0';
                        row.querySelector('.rate').value = '';
                        row.querySelector('.line-amt').value = '';
                        row.querySelector('.line-tot').value = '';
                        row.querySelector('.taxp').value = isCashMode ? '0' : '';
                        recalcRowForward(row);
                        return;
                    }

                    row.classList.remove('row-empty'); row.classList.add('row-filled');
                    maybeAutoAddRows();
                    productIdInput.value = value;
                    row.querySelector('.rate').value = '';
                    row.querySelector('.line-amt').value = '';
                    row.querySelector('.line-tot').value = '';
                    const rateInclEl = row.querySelector('.rate-incl');
                    if (rateInclEl) rateInclEl.value = '';

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

                        row.querySelector('input[name$="[hsn]"]').value = d.hsn || '';
                        row.querySelector('input[name$="[unit]"]').value = d.unit || '';
                        row.querySelector('.qty').dataset.stock = d.stock || '0';

                        row.querySelector('.taxp').value = isCashMode ? '0' : (d.tax_percent || '0');

                        if (!row.querySelector('.qty').value) row.querySelector('.qty').value = 1;
                        if (isCashMode) row.querySelector('.taxp').value = '0';

                        if (d.supplier_rate !== null) {
                            row.querySelector('.rate').value = Number(d.supplier_rate).toFixed(2);
                        }

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

                        recalcRowForward(row);
                        row.querySelector('.qty').focus();
                        row.querySelector('.qty').select();
                    } catch (err) { console.error(err); }
                });

                rowTomSelects.set(idx, ts);
            }

            // === CALCULATION FUNCTIONS ===

            function syncForeignRate(tr) {
                if (!usesForeignRates) return;
                const foreignRate = parseFloat(tr.querySelector('.foreign-rate')?.value) || 0;
                const conversionEl = tr.querySelector('.foreign-conversion-rate');
                let conversion = parseFloat(conversionEl?.value) || parseFloat(billConversionRateEl?.value) || 0;
                if (foreignRate > 0 && conversion > 0) {
                    if (conversionEl && !conversionEl.value) conversionEl.value = conversion.toFixed(6);
                    tr.querySelector('.rate').value = (foreignRate * conversion).toFixed(2);
                }
            }

            // Forward: qty/rate -> amount (hidden) -> rate-incl -> total
            function recalcRowForward(tr) {
                const qty = parseFloat(tr.querySelector('.qty')?.value) || 0;
                const rate = parseFloat(tr.querySelector('.rate')?.value) || 0;
                const taxp = parseFloat(tr.querySelector('.taxp')?.value) || 0;
                const amount = +(qty * rate).toFixed(2);
                const taxAmt = +((amount * taxp) / 100).toFixed(2);
                const total = +(amount + taxAmt).toFixed(2);
                const rateIncl = +(rate * (1 + taxp / 100)).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) : '';
                const rateInclEl = tr.querySelector('.rate-incl');
                if (rateInclEl) rateInclEl.value = rateIncl ? rateIncl.toFixed(2) : '';
                recalcTotals();
            }

            // Reverse from Rate (Incl. Tax): rate = rate_incl / (1 + tax%/100)
            function reverseFromRateIncl(tr) {
                const taxp = parseFloat(tr.querySelector('.taxp')?.value) || 0;
                const rateIncl = parseFloat(tr.querySelector('.rate-incl')?.value) || 0;
                const rate = +(rateIncl / (1 + taxp / 100)).toFixed(2);
                tr.querySelector('.rate').value = rate ? rate.toFixed(2) : '';
                recalcRowForward(tr);
            }

            // Reverse from Total Excl. Tax: amount = qty × rate.
            function reverseFromLineAmount(tr) {
                const qty = parseFloat(tr.querySelector('.qty')?.value) || 0;
                const amount = parseFloat(tr.querySelector('.line-amt')?.value) || 0;

                if (qty <= 0) {
                    recalcRowForward(tr);
                    return;
                }

                const rate = +(amount / qty).toFixed(2);
                tr.querySelector('.rate').value = rate ? rate.toFixed(2) : '';
                recalcRowForward(tr);
            }

            // Reverse from Total: total -> amount = total / (1 + tax%/100), then rate
            function reverseFromTotal(tr) {
                const qty = parseFloat(tr.querySelector('.qty')?.value) || 0;
                const total = parseFloat(tr.querySelector('.line-tot')?.value) || 0;
                const taxp = parseFloat(tr.querySelector('.taxp')?.value) || 0;
                const amount = +(total / (1 + taxp / 100)).toFixed(2);
                const 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) {
                    const rate = +(amount / qty).toFixed(2);
                    tr.querySelector('.rate').value = rate ? rate.toFixed(2) : '';
                    const rateInclEl = tr.querySelector('.rate-incl');
                    if (rateInclEl) rateInclEl.value = +(rate * (1 + taxp / 100)).toFixed(2);
                }
                recalcTotals();
            }

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

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

            // Keyboard shortcuts
            document.addEventListener('keydown', function(e) {
                if (!e.altKey) return;
                if (e.key === 'a') { e.preventDefault(); document.getElementById('addRowBtn').click(); }
                if (e.key === 'p') { e.preventDefault(); document.getElementById('btnSave')?.click(); }
                if (e.key === 's') { e.preventDefault(); document.getElementById('btnSave').click(); }
            });

            // --- PREFILL from PO ---
            const prefillData = @json(session('prefill_po'));

            if (prefillData && prefillData.items && prefillData.items.length) {
                // Set supplier
                setTimeout(() => {
                    if (prefillData.supplier_id && tomPartySelect) {
                        tomPartySelect.setValue(String(prefillData.supplier_id));
                    }
                }, 100);

                prefillData.items.forEach(item => {
                    addFilledRow(item.product_id, item.product_name, item.hsn, item.unit,
                        parseFloat(item.qty), parseFloat(item.rate) || 0, parseFloat(item.tax_percent) || 0, item.stock || 0,
                        item.source_po_id || prefillData.po_id || '', item.source_po_item_id || '');
                });
                for (let i = 0; i < 3; i++) addEmptyRow();
                console.log('Prefilled from PO:', prefillData.po_ref, '- with last purchase rates');
            } else {
                for (let i = 0; i < 10; i++) addEmptyRow();
            }

            // Auto-add rows: when only 1 empty row left, add 5 more
            function maybeAutoAddRows() {
                const emptyCount = itemsTbody.querySelectorAll('tr.row-empty').length;
                if (emptyCount <= 1) {
                    for (let i = 0; i < 5; i++) addEmptyRow();
                }
            }

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

                // Stock warning
                const qtyInput = tr.querySelector('.qty');
                if (qtyInput && e.target === qtyInput) {
                    const stock = parseFloat(qtyInput.dataset.stock) || 0;
                    if ((parseFloat(qtyInput.value) || 0) > stock) qtyInput.classList.add('bg-danger-subtle');
                    else qtyInput.classList.remove('bg-danger-subtle');
                }

                // Determine direction
                if (e.target.classList.contains('foreign-conversion-rate')) {
                    e.target.dataset.manual = '1';
                    delete e.target.dataset.fromHeader;
                }

                if (e.target.classList.contains('foreign-rate') || e.target.classList.contains('foreign-conversion-rate')) {
                    syncForeignRate(tr);
                }

                if (e.target.classList.contains('rate-incl')) tr.dataset.calcSource = 'rate-incl';
                if (e.target.classList.contains('line-amt')) tr.dataset.calcSource = 'line-amt';
                if (e.target.classList.contains('line-tot')) tr.dataset.calcSource = 'line-tot';

                if (!e.target.classList.contains('rate-incl') && !e.target.classList.contains('line-amt') && !e.target.classList.contains('line-tot')) {
                    recalcRowForward(tr);
                }
            });

            billConversionRateEl?.addEventListener('input', function() {
                const nextConversion = this.value;
                itemsTbody.querySelectorAll('tr').forEach(tr => {
                    const rowConversion = tr.querySelector('.foreign-conversion-rate');
                    if (rowConversion) {
                        const shouldFollowHeader = rowConversion.dataset.manual !== '1'
                            || !rowConversion.value
                            || parseFloat(rowConversion.value) === 0
                            || sameNumericValue(rowConversion.value, previousBillConversionRate);

                        if (shouldFollowHeader) {
                            rowConversion.value = nextConversion;
                            rowConversion.dataset.fromHeader = '1';
                            delete rowConversion.dataset.manual;
                        }
                    }
                    syncForeignRate(tr);
                    recalcRowForward(tr);
                });
                previousBillConversionRate = nextConversion;
            });

            // Calculated/reverse-entry fields fire on blur only.
            itemsTbody.addEventListener('blur', function (e) {
                const tr = e.target.closest('tr');
                if (!tr) return;
                if (e.target.classList.contains('rate-incl')) {
                    reverseFromRateIncl(tr);
                } else if (e.target.classList.contains('line-amt')) {
                    reverseFromLineAmount(tr);
                } else if (e.target.classList.contains('line-tot')) {
                    reverseFromTotal(tr);
                }
                delete tr.dataset.calcSource;
            }, true);

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

            // --- Form submit: strip empty rows ---
            document.getElementById('saleForm').addEventListener('submit', function() {
                itemsTbody.querySelectorAll('tr').forEach(row => {
                    const pid = row.querySelector('.row-product-id');
                    if (row.dataset.calcSource === 'rate-incl') reverseFromRateIncl(row);
                    if (row.dataset.calcSource === 'line-amt') reverseFromLineAmount(row);
                    if (row.dataset.calcSource === 'line-tot') reverseFromTotal(row);
                    if (isCashMode && pid?.value) {
                        row.querySelector('.taxp').value = '0';
                        row.querySelector('input[name$="[line_tax_amount]"]').value = '0.00';
                        recalcRowForward(row);
                    }
                    if (!pid || !pid.value) row.querySelectorAll('input[name]').forEach(inp => inp.removeAttribute('name'));
                });
                reindexRows();
            });

            // --- Totals ---
            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;
                const pfTaxPct = parseFloat(pfTaxPercentEl.value) || 0;
                const 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');

            // --- BroadcastChannel for new products ---
            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); });
                let targetTs = activeProductRowIdx !== null ? rowTomSelects.get(parseInt(activeProductRowIdx)) : null;
                if (!targetTs || targetTs.getValue()) {
                    const emptyRow = Array.from(itemsTbody.querySelectorAll('tr')).find(row => !row.querySelector('.row-product-id')?.value);
                    targetTs = emptyRow ? rowTomSelects.get(parseInt(emptyRow.dataset.rowIdx)) : null;
                }
                if (targetTs) {
                    targetTs.setValue(String(product.id));
                    targetTs.close();
                }
            };

        })();

        // --- Party Tom Select ---
        const tomPartySelect = new TomSelect('#party_id', {
            maxOptions: null,
            allowEmptyOption: true,
            closeAfterSelect: true,
            placeholder: 'Search name or GST...',
            highlight: true,
            searchField: ['text', 'gst'],
            render: {
                option: function(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: function(data, escape) {
                    return `<div>${escape(data.text)}</div>`;
                }
            },
            onItemAdd: function() { this.control_input.value = ''; if (this.setTextboxValue) this.setTextboxValue(''); }
        });

        // Autofocus party on page load
        if (!tomPartySelect.getValue()) setTimeout(() => tomPartySelect.focus(), 100);

        // Listen for new customers created from the "Add" button (new tab)
        const partyChannel = new BroadcastChannel('customer_created');
        partyChannel.onmessage = function (event) {
            const customer = event.data;
            if (customer.party_type !== 'purchase' && customer.party_type !== 'both') return;
            if (tomPartySelect.options[customer.id]) return;
            let label = customer.name;
            if (customer.payment_type === 'cash') label += ' (Cash)';
            tomPartySelect.addOption({ value: customer.id, text: label, payment_type: customer.payment_type || '', gst: customer.gst_number || '' });
            tomPartySelect.setValue(customer.id);
        };

        tomPartySelect.on('change', function(value) {
            // Party details
            loadPartyDetails(value);

            // Outstanding badge
            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 = ''; });
            }
        });

        // Trigger on load if party pre-selected (e.g. from PO conversion)
        if (tomPartySelect.getValue()) {
            tomPartySelect.trigger('change', tomPartySelect.getValue());
        }

    </script>
@endpush