@extends('layout.app')
@section('title', 'Create Purchase Voucher')
@push('header_script')
    <style>
        :root {
            --surface-2: #ffffff;
            --surface-1: #f8f9fa;
            --background: #ffffff;
            --border: #cbd5e1;
            --border-warning: #f3cd82;
            --radius: 8px;
            --bg-accent: #eaf1ff;
            --text-accent: #2563eb;
            --bg-warning: #fff8e8;
            --text-warning: #a15c07;
            --bg-success: #eafaf1;
            --text-success: #16794c;
        }

        .pv-card {
            background: var(--surface-2);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 1.25rem;
        }

        .pv-label {
            font-size: 13px;
            color: #475569;
            margin-bottom: 4px;
            font-weight: 600;
        }

        .pv-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: var(--radius);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .pv-table {
            width: 100%;
            border-collapse: collapse;
        }

        .pv-table th {
            text-align: left;
            font-weight: 700;
            color: #475569;
            font-size: 12px;
            text-transform: uppercase;
            padding: 10px;
            border-bottom: 2px solid var(--border);
            background-color: var(--surface-1);
        }

        .pv-table td {
            padding: 8px 10px;
            border-bottom: 1px solid var(--border);
            vertical-align: middle;
        }

        .pv-num {
            text-align: right;
        }

        .pv-trow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            padding: 6px 0;
            color: #334155;
        }

        .pv-trow.grand {
            font-weight: 700;
            color: #0f172a;
            border-top: 1.5px solid #cbd5e1;
            margin-top: 6px;
            padding-top: 12px;
            font-size: 16px;
        }

        .pv-sub {
            font-weight: 600;
            color: #0f172a;
            border-top: 1.5px solid #cbd5e1;
            margin-top: 4px;
            padding-top: 8px;
        }

        .oe-table {
            width: 100%;
            border-collapse: collapse;
        }

        .oe-table th {
            text-align: left;
            font-weight: 700;
            color: #475569;
            font-size: 12px;
            padding: 10px;
            border-bottom: 2px solid var(--border);
            background-color: var(--surface-1);
        }

        .oe-table td {
            padding: 8px 10px;
            border-bottom: 1px solid var(--border);
            vertical-align: middle;
        }

        .pd-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            font-size: 13px;
            border-bottom: 1px dashed #e2e8f0;
            padding: 8px 0;
        }

        .pd-row:last-child {
            border-bottom: none;
        }

        .info-panel-section {
            background: var(--surface-1);
            border-radius: 12px;
            padding: 16px;
            border: 1px solid var(--border);
        }

        .form-control, .select2-container .select2-selection--single {
            border-color: var(--border) !important;
            border-radius: 8px !important;
            height: auto !important;
            padding: 6px 12px !important;
        }

        .pv-table input.form-control, .pv-table select.form-control {
            min-width: 95px;
        }
        
        .pv-table .item-product-select {
            min-width: 200px;
        }

        .readonly-input {
            background-color: #d0ddea !important;
            cursor: not-allowed;
            color: #1e293b !important;
            font-weight: 600;
        }

        .btn {
            border-radius: 8px !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Create Purchase Voucher</a>
            </li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1 day-sorting">
                <a href="{{ route('purchase-voucher.index') }}" class="btn btn-sm btn-primary"><i
                        class="ri-arrow-left-circle-fill"></i> Back</a>
            </div>
        </div>
    </div>

    <div class="app-body">
        {!! Form::open([
            'route' => ['purchase-voucher.store'],
            'onsubmit' => 'BtnSubmit.disabled = true',
            'class' => 'needs-validation',
            'id' => 'purchaseVoucherForm',
            'method' => 'post',
            'autocomplete' => 'off',
            'files' => true,
        ]) !!}
        <input type="hidden" name="redirect_to" value="{{ request()->query('redirect_to') }}">

        <div class="row gx-3">
            {{-- VOUCHER DETAILS CARD --}}
            <div class="col-12 mb-3">
                <div class="pv-card">
                    <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary)">
                        <i class="ri-file-list-3-line text-primary"></i> Voucher Details
                    </div>
                    <div class="row g-3">
                        <div class="col-md-3 col-12">
                            <span class="pv-label">Voucher No. <span class="text-danger">*</span></span>
                            <input type="text" class="form-control fw-bold" style="background: #f1f5f9; cursor: not-allowed" id="voucher_no" name="voucher_no" required value="{{ $voucherNo }}" readonly>
                            <div class="text-danger">{{ $errors->first('voucher_no') }}</div>
                        </div>
                        <div class="col-md-3 col-12">
                            <span class="pv-label">Voucher Date <span class="text-danger">*</span></span>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                                <input type="text" id="voucher_date" class="form-control datepicker" name="voucher_date" required min="{{ date('Y-m-d', strtotime($companyDetails->year_from)) }}" value="{{ date('d-m-Y') }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('voucher_date') }}</div>
                        </div>
                        <div class="col-md-3 col-12">
                            <span class="pv-label">Supplier Invoice No.</span>
                            <input type="text" class="form-control" id="supplier_invoice_no" name="supplier_invoice_no" value="{{ old('supplier_invoice_no') }}">
                            <div class="text-danger">{{ $errors->first('supplier_invoice_no') }}</div>
                        </div>
                        <div class="col-md-3 col-12">
                            <span class="pv-label">Supplier Invoice Date</span>
                            <div class="input-group">
                                <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                                <input type="text" id="supplier_invoice_date" class="form-control datepicker" name="supplier_invoice_date" value="{{ old('supplier_invoice_date') }}">
                            </div>
                            <div class="text-danger">{{ $errors->first('supplier_invoice_date') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row gx-3 mb-3">
            {{-- PARTY DETAILS --}}
            <div class="col-md-6 mb-3 mb-md-0">
                <div class="info-panel-section h-100">
                    <div style="font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary)">
                        <i class="ri-user-star-line text-primary"></i> Party Details
                    </div>
                    <div style="display: flex; flex-direction: column;">
                        <div class="pd-row"><span style="color: var(--text-muted)">Party Name</span><span id="disp_party_name" class="fw-bold">—</span></div>
                        <div class="pd-row"><span style="color: var(--text-muted)">GST No</span><span id="disp_gst_no" class="fw-bold">—</span></div>
                        <div class="pd-row"><span style="color: var(--text-muted)">Mobile</span><span id="disp_mobile_no">—</span></div>
                        <div class="pd-row"><span style="color: var(--text-muted)">Address</span><span id="disp_address" style="text-align: right; max-width: 65%">—</span></div>
                        <div class="pd-row"><span style="color: var(--text-muted)">City/State</span><span id="disp_city_state">—</span></div>
                        <div class="pd-row" style="align-items: center;"><span style="color: var(--text-muted)">GST Type</span><span id="regBadge" class="pv-badge" style="background:#e2e8f0; color:#475569">—</span></div>
                        <div class="pd-row"><span style="color: var(--text-muted)">Opening Balance</span><span id="disp_opening_balance">—</span></div>
                    </div>
                </div>
            </div>

            {{-- INFORMATION PANEL --}}
            <div class="col-md-6">
                <div class="info-panel-section h-100">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
                        <div style="font-size: 13px; font-weight: 600; color: var(--text-secondary)">
                            <i class="ri-information-line text-primary"></i> Information Panel
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" data-bs-toggle="modal" data-bs-target="#commonPartyModal" data_type="purchase_party">
                            <i class="ri-add-circle-line"></i> Add Party
                        </button>
                    </div>
                    <div style="display: flex; flex-direction: column; gap: 10px">
                        <div>
                            <span class="pv-label">Select Party <span class="text-danger">*</span></span>
                            {!! Form::select(
                                'party_account_ledger_id',
                                ['' => '--Select--'] + $partyLedger,
                                old('party_account_ledger_id'),
                                ['class' => 'form-control select2', 'id' => 'party_account_ledger_id', 'required'],
                            ) !!}
                            <div style="font-size: 11px; color: var(--text-muted); margin-top: 4px">Balance: <span id="party_balance" class="fw-bold"></span></div>
                            <div class="text-danger">{{ $errors->first('party_account_ledger_id') }}</div>
                            <input type="hidden" name="party_state_id" id="party_state_id" value="{{ old('party_state_id') }}">
                            <input type="hidden" name="party_register_type" id="party_register_type" value="{{ old('party_register_type') }}">
                            <input type="hidden" name="is_party_cash_bank" id="is_party_cash_bank" value="{{ old('is_party_cash_bank') }}">
                        </div>
                        <div>
                            <span class="pv-label">Place of Supply / Tax Type</span>
                            <span id="taxBadge" class="pv-badge d-block" style="background:#e2e8f0; color:#475569; width: fit-content; margin-top: 4px">—</span>
                        </div>
                        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 6px">
                            <input type="checkbox" id="rcmToggle" style="width: 16px; height: 16px">
                            <input type="hidden" name="rcm_applicable" id="rcm_applicable" value="no">
                            <span style="font-size: 13px"><span class="fw-bold text-dark">RCM Applicable</span> <span id="rcmHint" class="text-muted"></span></span>
                        </label>
                        <div class="row g-2 mt-1">
                            <div class="col-6">
                                <span class="pv-label">Created By</span>
                                <input type="text" class="form-control readonly-input" style="background: #f1f5f9; cursor: not-allowed" id="created_by" name="created_by" required readonly value="{{ \Illuminate\Support\Facades\Auth::user()->name }}">
                                <div class="text-danger">{{ $errors->first('created_by') }}</div>
                            </div>
                            <div class="col-6">
                                <span class="pv-label">Document Upload</span>
                                <input type="file" class="form-control" style="font-size: 12px;" id="doc" name="doc">
                                <div class="text-danger">{{ $errors->first('doc') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="infoBanner" style="font-size:13px; padding:10px 12px; border-radius:var(--radius); margin-bottom:14px; border:0.5px solid var(--border); display:none;"></div>

        {{-- SELECTED ITEM DETAILS --}}
        <div class="row gx-3">
            <div class="col-12 mb-3">
                <div class="pv-card">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px">
                        <div style="font-size: 14px; font-weight: 600; color: var(--text-primary)">
                            <i class="ri-file-list-line text-primary"></i> Selected Item Details
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; margin-bottom: 0;">
                                <input type="checkbox" id="toggleBatchExpiry" style="width: 16px; height: 16px;">
                                <span style="font-size: 13px; font-weight: 600;">Track batch &amp; expiry (from Settings)</span>
                            </label>
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#productModal" data_type="product">
                                <i class="ri-add-circle-line"></i> Add New Item
                            </button>
                        </div>
                    </div>
                    <div style="overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius)">
                        <table class="pv-table" id="tabdata">
                            <thead>
                                <tr>
                                    <th style="width: 25%">Item Name <span class="text-danger">*</span></th>
                                    <th style="width: 10%">HSN</th>
                                    @if($itemSettings->batch_tracking_enabled)
                                        <th style="width: 10%" class="batch-expiry-col">Batch No.</th>
                                    @endif
                                    @if($itemSettings->expiry_date_enabled)
                                        <th style="width: 12%" class="batch-expiry-col">Expiry</th>
                                    @endif
                                    <th style="width: 8%" class="pv-num">Qty <span class="text-danger">*</span></th>
                                    <th style="width: 10%" class="pv-num">Rate/Unit <span class="text-danger">*</span></th>
                                    <th style="width: 10%" class="pv-num">Taxable</th>
                                    <th style="width: 10%">GST%</th>
                                    <th style="width: 8%" class="pv-num">CGST</th>
                                    <th style="width: 8%" class="pv-num">SGST</th>
                                    <th style="width: 8%" class="pv-num">IGST</th>
                                    <th style="width: 10%" class="pv-num">Total <span class="text-danger">*</span></th>
                                    <th style="width: 3%"></th>
                                </tr>
                            </thead>
                            <tbody id="itemsBody">
                                <tr>
                                    <td>
                                        {!! Form::select('product_id[]', ['' => '--Select--'] + $product, old('product'), [
                                            'class' => 'form-control select2 item-product-select',
                                            'id' => 'product_id_10',
                                            'required',
                                        ]) !!}
                                        <input type="hidden" name="serial_numbers[]" id="serial_numbers_10">
                                        <button type="button" class="btn btn-sm btn-outline-info mt-1 d-none serial-btn" id="serial_btn_10" onclick="openSerialModal(10)">
                                            <i class="ri-barcode-line"></i> Serials
                                        </button>
                                    </td>
                                    <td><span id="hsn_10" class="text-muted">—</span></td>
                                    @if($itemSettings->batch_tracking_enabled)
                                        <td class="batch-expiry-col"><input class="form-control" type="text" name="batch_no[]" id="batch_no_10" placeholder="Batch"></td>
                                    @endif
                                    @if($itemSettings->expiry_date_enabled)
                                        <td class="batch-expiry-col"><input class="form-control datepicker" type="text" name="expiry_date[]" id="expiry_date_10" placeholder="Expiry"></td>
                                    @endif
                                    <td><input class="form-control floatnumber pv-num item-qty" type="text" name="qty[]" value="1" min="1" id="qty_10" required></td>
                                    <td><input class="form-control floatnumber pv-num item-rate" type="text" name="rate[]" id="rate_10" value="0.00" required></td>
                                    <td><input class="form-control floatnumber pv-num item-amount totalProductAmount readonly-input" readonly type="text" name="amount[]" value="0.00" id="amount_10" required></td>
                                    <td>
                                        <input class="form-control readonly-input item-tax-rate" type="hidden" readonly name="tax[]" id="tax_10" value="0.00">
                                        {!! Form::select('tax_group_id[]', ['' => '--Select--'] + $taxGroup, old('tax_group_id'), [
                                            'class' => 'form-control select2 taxGroupIds item-tax-group',
                                            'id' => 'tax_group_id_10',
                                            'required',
                                        ]) !!}
                                    </td>
                                    <td><input class="form-control readonly-input pv-num" readonly type="text" value="0.00" id="cgst_val_10"></td>
                                    <td><input class="form-control readonly-input pv-num" readonly type="text" value="0.00" id="sgst_val_10"></td>
                                    <td><input class="form-control readonly-input pv-num" readonly type="text" value="0.00" id="igst_val_10"></td>
                                    <input type="hidden" name="tax_amount[]" id="tax_amount_10" class="totalTaxAmount" value="0.00">
                                    <td><input class="form-control readonly-input pv-num item-total totalValueWithTax" style="background:#f8f9fa" type="text" value="0.00" id="total_amount_10" name="total_amount[]" readonly></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <button type="button" id="addrow" class="btn btn-sm btn-primary mt-2"><i class="ri-add-circle-fill"></i> Add Item</button>
                </div>
            </div>
        </div>

        {{-- OTHER CHARGES & FINAL SUMMARY --}}
        <div class="row gx-3">
            <div class="col-12 mb-3">
                <div class="pv-card">
                    <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary)">
                        <i class="ri-settings-4-line text-primary"></i> Other Charges &amp; Discounts
                    </div>
                    
                    <div style="overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius)">
                        <table class="oe-table">
                            <thead>
                                <tr>
                                    <th style="width: 35%">Description</th>
                                    <th style="width: 15%" class="pv-num">Amount</th>
                                    <th style="width: 20%">Apply</th>
                                    <th style="width: 20%">GST%</th>
                                    <th style="width: 10%"></th>
                                </tr>
                            </thead>
                            <tbody id="oeBody">
                                {{-- Rows added dynamically --}}
                            </tbody>
                        </table>
                    </div>
                    <button type="button" id="oeAddBtn" class="btn btn-sm btn-primary mt-2"><i class="ri-add-circle-fill"></i> Add Charge/Discount</button>
                    <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px">Before GST adds to (or reduces) taxable value and is taxed. After GST is added directly to invoice total, untaxed. Use negative values for discounts.</div>
                </div>
            </div>
        </div>

        {{-- CALCULATION SUMMARY & SUBMIT --}}
        <div class="row gx-3">
            <div class="col-12">
                <div class="pv-card">
                    <div class="row">
                        <div class="col-md-7 mb-3 mb-md-0">
                            <div style="font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary)">
                                Remarks &amp; Payments
                            </div>
                            <textarea class="form-control mb-3" name="remark" placeholder="Enter remarks..." rows="3">{{ old('remark') }}</textarea>
                            <div class="text-danger">{{ $errors->first('remark') }}</div>

                            <div class="paymentSection">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <label class="fw-semibold small mb-0">Payment Details</label>
                                    <button type="button" id="addPayment" class="btn btn-sm btn-primary py-0 px-2">+</button>
                                </div>
                                <div id="paymentTable"></div>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div style="background: var(--surface-1); border-radius: var(--radius); padding: 16px; border: 1px solid var(--border)">
                                <div class="pv-trow"><span>Item Taxable Value</span><span id="totItemTv" class="fw-bold">₹0.00</span></div>
                                <input type="hidden" name="total_purchase_amount" id="total_purchase_amount" value="0.00">
                                
                                <div id="oeTvRow" class="pv-trow" style="display: none"><span>Other Charges Taxable</span><span id="oeTvAmt" class="fw-bold">₹0.00</span></div>
                                <input type="hidden" name="total_other_charge" id="total_other_charge" value="0.00">

                                <div class="pv-trow pv-sub"><span>Total Taxable Value</span><span id="totTaxable" class="fw-bold">₹0.00</span></div>
                                
                                <div class="pv-trow" style="margin-top: 6px"><span>CGST</span><span id="totCgst">₹0.00</span></div>
                                <input type="hidden" name="cgst_input" id="cgst_input" value="0.00">
                                <div class="pv-trow"><span>SGST</span><span id="totSgst">₹0.00</span></div>
                                <input type="hidden" name="sgst_input" id="sgst_input" value="0.00">
                                <div class="pv-trow"><span>IGST</span><span id="totIgst">₹0.00</span></div>
                                <input type="hidden" name="igst_input" id="igst_input" value="0.00">

                                <input type="hidden" name="total_tax_amount" id="total_tax_amount" value="0.00">
                                <input type="hidden" name="final_tax_total" id="finalTaxTotal" value="0.00">

                                <div id="oeAfterRow" class="pv-trow" style="display: none"><span>Other Charges (after GST)</span><span id="oeAfterAmt" class="fw-bold">₹0.00</span></div>
                                <input type="hidden" name="total_after_gst_charge" id="total_after_gst_charge" value="0.00">

                                <div class="pv-trow align-items-center">
                                    <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; margin-bottom: 0">
                                        <input type="checkbox" id="roundToggle" checked style="width: 14px; height: 14px">
                                        <input type="hidden" name="round_off_enabled" id="round_off_enabled" value="yes">
                                        <span>Round Off</span>
                                    </label>
                                    <input type="number" name="round_off" id="round_off" step="0.01" style="width: 90px; text-align: right;" class="form-control form-control-sm" value="0.00">
                                </div>
                                <input type="hidden" name="tcs_amount" id="tcs_amount" value="0.00">
                                <input type="hidden" name="total_other_deduction" id="total_other_deduction" value="0.00">
                                <input type="hidden" name="gross_total" id="gross_total" value="0.00">

                                <div class="pv-trow grand"><span>Invoice Total</span><span id="totGrand">₹0.00</span></div>
                                <input type="hidden" name="net_total" id="net_total" value="0.00">

                                <div class="pv-trow" style="border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px">
                                    <span>Total Paid Amount</span>
                                    <input type="text" name="total_paid" id="total_paid" readonly class="form-control form-control-sm text-end fw-semibold" style="width: 120px; background:#f1f5f9" value="0.00">
                                </div>
                                <div class="pv-trow">
                                    <span class="fw-bold">Remaining Balance</span>
                                    <input type="text" name="balance" id="balance" readonly class="form-control form-control-sm text-end fw-bold text-primary" style="width: 120px; background:#f1f5f9" value="0.00">
                                </div>

                                <div id="rcmBlock" style="display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border)">
                                    <div class="pv-trow"><span>RCM Payable to Govt.</span><span id="rcmTot" class="fw-bold text-warning">₹0.00</span></div>
                                    <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px">Self-assessed — not part of invoice total</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-primary mt-3" id="BtnSubmit" type="submit">Submit Voucher</button>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>

    @include('common.modal.common_party')
    @include('common.modal.product')
    @include('common.modal.ledger')

    <!-- Serial Number Modal -->
    <div class="modal fade" id="serialNumberModal" tabindex="-1" aria-labelledby="serialNumberModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="serialNumberModalLabel">Enter Serial Numbers</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="serialInputsContainer" class="row g-2"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        // Init Datepickers
        function initDatepickers() {
            $(".datepicker").daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: "DD-MM-YYYY"
                },
            });
        }
        initDatepickers();

        $(".select2").select2();

        // Prevent invalid characters
        $(document).on('focus', "input[name='rate[]'], input[name='amount[]'], input[name='exp_amount[]'], input[name='after_gst_amount[]'], input[name='paid_amount[]'], input[id='round_off']", function() {
            if (parseFloat($(this).val()) === 0) {
                $(this).val('');
            }
        });
        $(document).on('blur', "input[name='rate[]'], input[name='amount[]'], input[name='exp_amount[]'], input[name='after_gst_amount[]'], input[name='paid_amount[]'], input[id='round_off']", function() {
            let val = $(this).val().trim();
            if (val === '') {
                $(this).val($(this).hasClass('item-qty') ? '1' : '0.00');
            } else {
                let num = parseFloat(val);
                if (!isNaN(num) && !$(this).hasClass('item-qty')) {
                    $(this).val(num.toFixed(2));
                }
            }
        });
        $(document).on('input', '.floatnumber', function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });
        $(document).on('input', '.expNegativeNumber, .afterGstNegNumber', function() {
            this.value = this.value.replace(/[^0-9.\-]/g, '').replace(/(\..*)\./g, '$1').replace(/(?!^)-/g, '');
        });

        // Supplier Invoice Date Defaults to Voucher Date (unless manual edit)
        let supplierDateManual = false;
        $('#supplier_invoice_date').on('change', function() {
            supplierDateManual = true;
        });
        $('#voucher_date').on('change', function() {
            if (!supplierDateManual) {
                $('#supplier_invoice_date').val($(this).val());
            }
        });

        // Load Opening Balance / State / Cash Settings for Party
        let companyStateId = parseInt(@json($companyDetails->state_id));
        let taxGroupNoneId = @json($taxGroupNone->id);

        function loadLedgerBalance(ledgerId, targetSpanId) {
            if (!ledgerId) {
                $('#' + targetSpanId).text('₹ 0.00').removeClass('text-success text-danger');
                return;
            }
            $.ajax({
                url: '{{ route("getLedgerBalance") }}',
                type: 'GET',
                data: { account_ledger_id: ledgerId },
                success: function(res) {
                    let colorClass = res.balance_type === 'Dr' ? 'text-success' : 'text-danger';
                    let label = res.display_type === 'Receivable' ? 'Receivable' : 'Payable';
                    let text = '₹ ' + parseFloat(res.balance).toFixed(2) + ' ' + res.balance_type + ' (' + label + ')';
                    $('#' + targetSpanId).text(text).removeClass('text-success text-danger').addClass(colorClass);
                }
            });
        }

        $('#party_account_ledger_id').on('change', function() {
            let party_account_ledger_id = $(this).val();
            loadLedgerBalance(party_account_ledger_id, 'party_balance');
            if(!party_account_ledger_id) return;
            $.ajax({
                url: '{{ route("commonPartyDetailByAccountLedgerId") }}',
                type: 'GET',
                data: { party_account_ledger_id },
                success: function(response) {
                    let partyData = response[0];
                    let isCashBank = response[1];
                    let balance = response[2];

                    if (partyData) {
                        $('#disp_party_name').text(partyData.party_name || '-');
                        $('#disp_gst_no').text(partyData.gst_no || 'Not registered');
                        $('#disp_mobile_no').text(partyData.mobile_no || '-');
                        $('#disp_address').text(partyData.address || '-');
                        $('#disp_city_state').text((partyData.city || '') + ' / ' + (partyData.state?.state_name || '-'));
                        $('#disp_gst_type').text(partyData.register_type || '-');
                        $('#party_register_type').val(partyData.register_type || '');
                        $('#party_state_id').val(partyData.state_id || '');
                    } else {
                        $('#disp_party_name, #disp_gst_no, #disp_mobile_no, #disp_address, #disp_city_state, #disp_gst_type').text('-');
                        $('#party_register_type, #party_state_id').val('');
                    }

                    if (balance) {
                        let colorClass = balance.balance_type === 'Dr' ? 'text-success' : 'text-danger';
                        $('#disp_opening_balance').html(`<span class="${colorClass}">₹ ${parseFloat(balance.balance).toFixed(2)} ${balance.balance_type}</span>`);
                    } else {
                        $('#disp_opening_balance').text('-');
                    }

                    // Handle RCM Toggle state/Composition Suppliers
                    if (partyData && partyData.register_type === 'Composition') {
                        $('#rcmToggle').prop('checked', false).prop('disabled', true);
                        $('#rcm_applicable').val('no');
                        $('#rcmHint').text(' — not applicable for composition suppliers');
                    } else {
                        $('#rcmToggle').prop('disabled', false);
                        $('#rcmHint').text('');
                    }

                    // Tax Type Badge
                    let intra = partyData && parseInt(partyData.state_id) === companyStateId;
                    if(partyData) {
                        $('#taxBadge').text(intra ? 'Intra-state (CGST+SGST)' : 'Inter-state (IGST)')
                            .css('background', intra ? 'var(--bg-accent)' : '#e2e8f0')
                            .css('color', intra ? 'var(--text-accent)' : '#475569');
                    } else {
                        $('#taxBadge').text('—').css('background', '#e2e8f0').css('color', '#475569');
                    }

                    if (isCashBank === 'yes') {
                        $('.paymentSection').addClass('d-none');
                        $('#is_party_cash_bank').val('yes');
                    } else {
                        $('.paymentSection').removeClass('d-none');
                        $('#is_party_cash_bank').val('no');
                    }

                    updateBanner();
                    recalculateAll();
                }
            });
        });

        // Banner Update
        function updateBanner() {
            let reg = $('#party_register_type').val();
            let isRcm = $('#rcmToggle').is(':checked');
            let state = parseInt($('#party_state_id').val()) || 0;
            let intra = state === companyStateId;
            let bEl = $('#infoBanner');

            if (!reg) {
                bEl.hide();
                return;
            }
            bEl.show();
            if (reg === 'Regular' && !isRcm) {
                bEl.text('Supplier will charge GST on this invoice — ' + (intra ? 'CGST + SGST' : 'IGST') + ' at item-wise rates.')
                    .css('background', 'var(--bg-success)').css('color', 'var(--text-success)');
            } else if (reg === 'Regular' && isRcm) {
                bEl.text('RCM applicable — supplier will not charge GST. Buyer self-assesses and pays ' + (intra ? 'CGST + SGST' : 'IGST') + ' directly to the government.')
                    .css('background', 'var(--bg-warning)').css('color', 'var(--text-warning)');
            } else if (reg === 'Composition') {
                bEl.text('Composition supplier — GST cannot be charged on this invoice. No ITC on this purchase.')
                    .css('background', 'var(--surface-1)').css('color', 'var(--text-secondary)');
            } else {
                bEl.text('Unregistered supplier — no GST charged. Mark RCM only if this purchase falls under reverse charge.')
                    .css('background', 'var(--surface-1)').css('color', 'var(--text-secondary)');
            }
        }

        $('#rcmToggle').on('change', function() {
            $('#rcm_applicable').val($(this).is(':checked') ? 'yes' : 'no');
            updateBanner();
            recalculateAll();
        });

        // Items logic & dynamic rows
        let rowIdx = 11;
        $('#addrow').on('click', function() {
            let tr = $('<tr>');
            let cols = `
                <td>
                    <select name="product_id[]" class="form-control select2 item-product-select" id="product_id_${rowIdx}" required>
                        <option value="">--Select--</option>
                        @foreach ($product as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach
                    </select>
                    <input type="hidden" name="serial_numbers[]" id="serial_numbers_${rowIdx}">
                    <button type="button" class="btn btn-sm btn-outline-info mt-1 d-none serial-btn" id="serial_btn_${rowIdx}" onclick="openSerialModal(${rowIdx})">
                        <i class="ri-barcode-line"></i> Serials
                    </button>
                </td>
                <td><span id="hsn_${rowIdx}" class="text-muted">—</span></td>
                @if($itemSettings->batch_tracking_enabled)
                    <td class="batch-expiry-col"><input class="form-control" type="text" name="batch_no[]" id="batch_no_${rowIdx}" placeholder="Batch"></td>
                @endif
                @if($itemSettings->expiry_date_enabled)
                    <td class="batch-expiry-col"><input class="form-control datepicker" type="text" name="expiry_date[]" id="expiry_date_${rowIdx}" placeholder="Expiry"></td>
                @endif
                <td><input class="form-control floatnumber pv-num item-qty" type="text" name="qty[]" value="1" min="1" id="qty_${rowIdx}" required></td>
                <td><input class="form-control floatnumber pv-num item-rate" type="text" name="rate[]" id="rate_${rowIdx}" value="0.00" required></td>
                <td><input class="form-control floatnumber pv-num item-amount totalProductAmount readonly-input" readonly type="text" name="amount[]" value="0.00" id="amount_${rowIdx}" required></td>
                <td>
                    <input class="form-control readonly-input item-tax-rate" type="hidden" readonly name="tax[]" id="tax_${rowIdx}" value="0.00">
                    <select name="tax_group_id[]" class="form-control select2 taxGroupIds item-tax-group" id="tax_group_id_${rowIdx}" required>
                        <option value="">--Select--</option>
                        @foreach ($taxGroup as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach
                    </select>
                </td>
                <td><input class="form-control readonly-input pv-num" readonly type="text" value="0.00" id="cgst_val_${rowIdx}"></td>
                <td><input class="form-control readonly-input pv-num" readonly type="text" value="0.00" id="sgst_val_${rowIdx}"></td>
                <td><input class="form-control readonly-input pv-num" readonly type="text" value="0.00" id="igst_val_${rowIdx}"></td>
                <input type="hidden" name="tax_amount[]" id="tax_amount_${rowIdx}" class="totalTaxAmount" value="0.00">
                <td><input class="form-control readonly-input pv-num item-total totalValueWithTax" type="text" value="0.00" id="total_amount_${rowIdx}" name="total_amount[]" readonly></td>
                <td><button type="button" class="btn btn-danger btn-sm delbtn"><i class="ri-delete-bin-line"></i></button></td>
            `;
            tr.append(cols);
            $('#itemsBody').append(tr);
            tr.find('.select2').select2();
            initDatepickers();
            toggleBatchExpiryCols();
            rowIdx++;
        });

        $('#itemsBody').on('click', '.delbtn', function() {
            $(this).closest('tr').remove();
            recalculateAll();
        });

        // Other Charges (Before/After GST) dynamic rows
        let oeIdx = 11;
        $('#oeAddBtn').on('click', function() {
            let tr = $('<tr>');
            let cols = `
                <td>
                    <select name="exp_account_ledger_id[]" class="form-control select2 oe-ledger-select" id="exp_account_ledger_id_${oeIdx}" required>
                        <option value="">--Select--</option>
                        <option value="add_ledger" style="color:#0d6efd;font-weight:600;">➕ Add Ledger</option>
                        @foreach ($expenseLedger as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach
                    </select>
                </td>
                <td><input name="exp_amount[]" class="form-control expNegativeNumber pv-num oe-amount" value="0.00" required type="text" id="exp_amount_${oeIdx}"></td>
                <td>
                    <select class="form-control oe-mode" id="oe_mode_${oeIdx}">
                        <option value="before">Before GST</option>
                        <option value="after">After GST</option>
                    </select>
                </td>
                <td>
                    <select name="exp_tax_group_id[]" class="form-control select2 taxGroupIds oe-tax-group" id="exp_tax_group_id_${oeIdx}" required>
                        @foreach ($taxGroup as $keys => $prows)<option value="{{ $keys }}">{{ $prows }}</option>@endforeach
                    </select>
                    <input type="hidden" name="expense_tax[]" class="expenseTax" value="0.00" id="expense_tax_${oeIdx}">
                    <input name="expense_tax_amount[]" value="0.00" type="hidden" class="otherChargeTaxTotal" id="expense_tax_amount_${oeIdx}">
                    <input name="total_expense_amount[]" value="0.00" type="hidden" class="totalExpAmount" id="total_expense_amount_${oeIdx}">
                </td>
                <td><button type="button" class="btn btn-danger btn-sm deloebtn"><i class="ri-delete-bin-line"></i></button></td>
            `;
            tr.append(cols);
            $('#oeBody').append(tr);
            tr.find('.select2').select2();
            oeIdx++;
        });

        $('#oeBody').on('click', '.deloebtn', function() {
            $(this).closest('tr').remove();
            recalculateAll();
        });

        // Trigger calculations on input changes
        $(document).on('change input', '.item-product-select, .item-qty, .item-rate, .item-tax-group', function() {
            recalculateAll();
        });
        $(document).on('change input', '.oe-ledger-select, .oe-amount, .oe-mode, .oe-tax-group', function() {
            recalculateAll();
        });
        let roundOffManual = false;
        $(document).on('input', '#round_off', function() {
            roundOffManual = true;
            recalculateAll();
        });
        $(document).on('change', '#roundToggle', function() {
            if (!$(this).is(':checked')) {
                roundOffManual = false;
            }
            recalculateAll();
        });

        // Product selection detail fetching
        $(document).on('change', '.item-product-select', function() {
            let id = $(this).attr('id').split('_').pop();
            let product_id = $(this).val();
            let party_account_ledger_id = $('#party_account_ledger_id').val() || 0;
            if(!product_id) return;
            $.ajax({
                url: '{{ route("getProductDetailById") }}',
                type: 'GET',
                data: { product_id, party_account_ledger_id },
                success: function(result) {
                    $('#rate_' + id).val(parseFloat(result[0].rate_per).toFixed(2));
                    $('#hsn_' + id).text(result[0].hsn_code || '—');
                    
                    // Auto populate batch and expiry details from product
                    $('#batch_no_' + id).val(result[0].batch_number || '');
                    let expVal = '';
                    if (result[0].expiry_date) {
                        let d = new Date(result[0].expiry_date);
                        if (!isNaN(d.getTime())) {
                            let day = ("0" + d.getDate()).slice(-2);
                            let month = ("0" + (d.getMonth() + 1)).slice(-2);
                            let year = d.getFullYear();
                            expVal = day + "-" + month + "-" + year;
                        }
                    }
                    $('#expiry_date_' + id).val(expVal);

                    if (result[0].track_usage_type === 'unique') {
                        $('#serial_btn_' + id).removeClass('d-none');
                    } else {
                        $('#serial_btn_' + id).addClass('d-none');
                        $('#serial_numbers_' + id).val('');
                    }

                    if (result[0].tax_group_id) {
                        $('#tax_group_id_' + id).val(result[0].tax_group_id).trigger('change');
                    } else {
                        $('#tax_group_id_' + id).val(taxGroupNoneId).trigger('change');
                    }
                    recalculateAll();
                }
            });
        });

        // Other charge tax rate fetching
        $(document).on('change', '.oe-tax-group', function() {
            let id = $(this).attr('id').split('_').pop();
            let tax_group_id = $(this).val();
            if(!tax_group_id) return;
            $.ajax({
                url: '{{ route("getTaxGroupDetailById") }}',
                type: 'GET',
                data: { tax_group_id },
                success: function(result) {
                    $('#expense_tax_' + id).val(result.tax_slab || 0);
                    recalculateAll();
                }
            });
        });

        // Consolidated frontend calculation engine
        function recalculateAll() {
            let isRegular = $('#party_register_type').val() === 'Regular';
            let isRcm = $('#rcmToggle').is(':checked');
            let isIntra = parseInt($('#party_state_id').val()) === companyStateId;

            // 1. Calculate Items
            let totalItemTv = 0;
            let totalItemTax = 0;
            
            $('#itemsBody tr').each(function() {
                let qty = parseFloat($(this).find('.item-qty').val()) || 0;
                let rate = parseFloat($(this).find('.item-rate').val()) || 0;
                let taxable = qty * rate;
                $(this).find('.item-amount').val(taxable.toFixed(2));
                totalItemTv += taxable;

                // GST calculations
                let taxGroupSelect = $(this).find('.item-tax-group');
                let taxPercent = 0;
                let slabText = taxGroupSelect.find('option:selected').text();
                let match = slabText.match(/GST@([\d.]+)%/);
                if (match) {
                    taxPercent = parseFloat(match[1]);
                }
                $(this).find('.item-tax-rate').val(taxPercent);

                let cgst = 0, sgst = 0, igst = 0, taxAmt = 0;
                if (isRegular) {
                    let fullTax = (taxable * taxPercent) / 100;
                    if(!isRcm) {
                        taxAmt = fullTax;
                        totalItemTax += taxAmt;
                        if(isIntra) {
                            cgst = fullTax / 2;
                            sgst = fullTax / 2;
                        } else {
                            igst = fullTax;
                        }
                    }
                }
                $(this).find('.totalTaxAmount').val(taxAmt.toFixed(2));
                $(this).find('#cgst_val_' + $(this).find('.item-product-select').attr('id').split('_').pop()).val(cgst.toFixed(2));
                $(this).find('#sgst_val_' + $(this).find('.item-product-select').attr('id').split('_').pop()).val(sgst.toFixed(2));
                $(this).find('#igst_val_' + $(this).find('.item-product-select').attr('id').split('_').pop()).val(igst.toFixed(2));
                $(this).find('.item-total').val((taxable + taxAmt).toFixed(2));
            });

            $('#totItemTv').text('₹' + totalItemTv.toFixed(2));
            $('#total_purchase_amount').val(totalItemTv.toFixed(2));
            $('#total_tax_amount').val(totalItemTax.toFixed(2));

            // 2. Calculate Other Charges
            let totalOtherTv = 0;
            let totalOtherTax = 0;
            let totalAfterGst = 0;

            $('#oeBody tr').each(function() {
                let amt = parseFloat($(this).find('.oe-amount').val()) || 0;
                let mode = $(this).find('.oe-mode').val();
                let ledgerSelect = $(this).find('.oe-ledger-select');
                let amtInput = $(this).find('.oe-amount');
                let taxGroupSelect = $(this).find('.oe-tax-group');

                if (mode === 'before') {
                    ledgerSelect.attr('name', 'exp_account_ledger_id[]');
                    amtInput.attr('name', 'exp_amount[]');
                    taxGroupSelect.prop('disabled', false).attr('name', 'exp_tax_group_id[]');
                    $(this).find('.expenseTax').attr('name', 'expense_tax[]');
                    $(this).find('.otherChargeTaxTotal').attr('name', 'expense_tax_amount[]');
                    $(this).find('.totalExpAmount').attr('name', 'total_expense_amount[]');

                    totalOtherTv += amt;
                    let taxPercent = parseFloat($(this).find('.expenseTax').val()) || 0;
                    let chargeTax = 0;
                    if (isRegular && !isRcm) {
                        chargeTax = (amt * taxPercent) / 100;
                        totalOtherTax += chargeTax;
                    }
                    $(this).find('.otherChargeTaxTotal').val(chargeTax.toFixed(2));
                    $(this).find('.totalExpAmount').val(amt.toFixed(2));
                } else {
                    ledgerSelect.attr('name', 'after_gst_ledger_id[]');
                    amtInput.attr('name', 'after_gst_amount[]');
                    taxGroupSelect.val(taxGroupNoneId).trigger('change.select2').prop('disabled', true).removeAttr('name');
                    $(this).find('.expenseTax').removeAttr('name');
                    $(this).find('.otherChargeTaxTotal').removeAttr('name');
                    $(this).find('.totalExpAmount').removeAttr('name');

                    totalAfterGst += amt;
                }
            });

            $('#total_other_charge').val(totalOtherTv.toFixed(2));
            if (totalOtherTv !== 0) {
                $('#oeTvRow').css('display', 'flex');
                $('#oeTvAmt').text((totalOtherTv < 0 ? '-' : '') + '₹' + Math.abs(totalOtherTv).toFixed(2));
            } else {
                $('#oeTvRow').hide();
            }

            $('#total_after_gst_charge').val(totalAfterGst.toFixed(2));
            if (totalAfterGst !== 0) {
                $('#oeAfterRow').css('display', 'flex');
                $('#oeAfterAmt').text((totalAfterGst < 0 ? '-' : '') + '₹' + Math.abs(totalAfterGst).toFixed(2));
            } else {
                $('#oeAfterRow').hide();
            }

            // Tax aggregates
            let finalTaxTotal = totalItemTax + totalOtherTax;
            $('#finalTaxTotal').val(finalTaxTotal.toFixed(2));
            
            let cgst_total = 0, sgst_total = 0, igst_total = 0;
            if (isRegular && !isRcm) {
                if(isIntra) {
                    cgst_total = finalTaxTotal / 2;
                    sgst_total = finalTaxTotal / 2;
                } else {
                    igst_total = finalTaxTotal;
                }
            }
            $('#totCgst').text('₹' + cgst_total.toFixed(2));
            $('#cgst_input').val(cgst_total.toFixed(2));
            $('#totSgst').text('₹' + sgst_total.toFixed(2));
            $('#sgst_input').val(sgst_total.toFixed(2));
            $('#totIgst').text('₹' + igst_total.toFixed(2));
            $('#igst_input').val(igst_total.toFixed(2));

            // Taxable totals
            let totTaxable = totalItemTv + totalOtherTv;
            $('#totTaxable').text('₹' + totTaxable.toFixed(2));

            // Gross total
            let gross_total = totTaxable + finalTaxTotal;
            $('#gross_total').val(gross_total.toFixed(2));

            // Round Off calculation
            let rawGrand = gross_total + totalAfterGst;
            let roundedGrand = Math.round(rawGrand);
            let roundOffVal = 0;
            let roundOffEnabled = $('#roundToggle').is(':checked');
            
            if (roundOffEnabled) {
                $('#round_off_enabled').val('yes');
                $('#round_off').prop('readonly', false);
                if (roundOffManual) {
                    roundOffVal = parseFloat($('#round_off').val()) || 0;
                } else {
                    roundOffVal = roundedGrand - rawGrand;
                    $('#round_off').val(roundOffVal.toFixed(2));
                }
            } else {
                $('#round_off_enabled').val('no');
                $('#round_off').val('0.00').prop('readonly', true);
            }

            let net_total = rawGrand + roundOffVal;
            $('#totGrand').text('₹' + net_total.toFixed(2));
            $('#net_total').val(net_total.toFixed(2));

            // Payments auto-cash handling
            if ($('#is_party_cash_bank').val() === 'yes') {
                $('#total_paid').val(net_total.toFixed(2));
            } else {
                paymentCal();
            }

            let total_paid = parseFloat($('#total_paid').val()) || 0;
            $('#balance').val((net_total - total_paid).toFixed(2));

            // RCM Self assessment totals
            let rcmTotal = 0;
            if (isRcm) {
                $('#itemsBody tr').each(function() {
                    let qty = parseFloat($(this).find('.item-qty').val()) || 0;
                    let rate = parseFloat($(this).find('.item-rate').val()) || 0;
                    let taxPercent = parseFloat($(this).find('.item-tax-rate').val()) || 0;
                    rcmTotal += (qty * rate * taxPercent) / 100;
                });
                $('#oeBody tr').each(function() {
                    let amt = parseFloat($(this).find('.oe-amount').val()) || 0;
                    let mode = $(this).find('.oe-mode').val();
                    if (mode === 'before') {
                        let taxPercent = parseFloat($(this).find('.expenseTax').val()) || 0;
                        rcmTotal += (amt * taxPercent) / 100;
                    }
                });
            }
            if (rcmTotal > 0) {
                $('#rcmBlock').show();
                $('#rcmTot').text('₹' + rcmTotal.toFixed(2));
            } else {
                $('#rcmBlock').hide();
            }
        }

        // Other charge ledger trigger modals
        $(document).on('change', '.oe-ledger-select', function() {
            if ($(this).val() === 'add_ledger') {
                var triggeredSelectId = $(this).attr('id');
                $('#ml_target_select_id').val(triggeredSelectId);
                $(this).val('');
                $('#ledgerModal').modal('show');
            }
        });

        // Payment logic
        let payIdx = 11;
        $('#addPayment').on('click', function() {
            addPaymentRow(0);
        });

        function addPaymentRow(amt) {
            let div = $('<div class="d-flex mb-1 align-items-center">');
            let cols = `
                <select name="payment_account_ledger_id[]" style="width: 45%" class="form-control select2" required>
                    @foreach ($paymentLedger as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach
                </select>
                <input name="paid_amount[]" style="margin-left: 10px; width: 45%" class="form-control floatnumber pv-num totalPaidAmount" value="${parseFloat(amt).toFixed(2)}" required type="text">
                <button type="button" class="btn btn-danger btn-sm ms-2 delpaybtn" style="border-radius: 50%"><i class="ri-delete-bin-2-line"></i></button>
            `;
            div.append(cols);
            $('#paymentTable').append(div);
            div.find('.select2').select2();
            payIdx++;
        }

        $('#paymentTable').on('click', '.delpaybtn', function() {
            $(this).closest('.d-flex').remove();
            recalculateAll();
        });

        $(document).on('input', '.totalPaidAmount', function() {
            paymentCal();
        });

        function paymentCal() {
            let sum = 0;
            $('.totalPaidAmount').each(function() {
                sum += parseFloat($(this).val()) || 0;
            });
            $('#total_paid').val(sum.toFixed(2));
            let net = parseFloat($('#net_total').val()) || 0;
            $('#balance').val((net - sum).toFixed(2));
        }

        // Serial modal handling
        var currentSerialRowId = null;
        function openSerialModal(id) {
            currentSerialRowId = id;
            let qty = parseInt($('#qty_' + id).val()) || 0;
            if (qty <= 0) {
                alert('Please enter quantity first');
                return;
            }
            let container = $('#serialInputsContainer');
            container.empty();
            let existingSerials = [];
            try {
                let val = $('#serial_numbers_' + id).val();
                if (val) existingSerials = JSON.parse(val);
            } catch (e) {
                console.error(e);
            }
            for (let k = 0; k < qty; k++) {
                let val = existingSerials[k] || '';
                container.append(`
                    <div class="col-md-6 mb-2">
                        <label class="form-label">Serial ${k+1}</label>
                        <input type="text" class="form-control serial-input" data-index="${k}" value="${val}" required placeholder="Enter serial number">
                    </div>
                `);
            }
            $('#serialNumberModal').modal('show');
        }

        $('#serialNumberModal .btn-primary').on('click', function() {
            let serials = [];
            $('#serialInputsContainer .serial-input').each(function() {
                let val = $(this).val().trim();
                if (val) serials.push(val);
            });
            if (serials.length === 0) {
                $('#serial_numbers_' + currentSerialRowId).val('');
                $('#serial_btn_' + currentSerialRowId).removeClass('btn-info').addClass('btn-outline-info');
            } else {
                $('#serial_numbers_' + currentSerialRowId).val(JSON.stringify(serials));
                $('#serial_btn_' + currentSerialRowId).removeClass('btn-outline-info').addClass('btn-info');
            }
        });

        // Batch & Expiry Column Toggle
        function toggleBatchExpiryCols() {
            if ($('#toggleBatchExpiry').is(':checked')) {
                $('.batch-expiry-col').show();
            } else {
                $('.batch-expiry-col').hide();
            }
        }
        $('#toggleBatchExpiry').on('change', toggleBatchExpiryCols);
        
        $(document).ready(function() {
            toggleBatchExpiryCols();
        });
    </script>
@endpush