@extends('layout.app')
@section('title', 'Create Expense Voucher')
@push('header_script')
    <style>
        :root {
            --surface-2: #ffffff;
            --surface-1: #f6f7f9;
            --background: #ffffff;
            --border: #e2e5ea;
            --border-warning: #f3cd82;
            --radius: 10px;
            --text-primary: #17181c;
            --text-secondary: #4b5563;
            --text-muted: #8a8f98;
            --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: 0.5px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            margin-bottom: 1.25rem;
        }

        .pv-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 0.5px solid var(--border);
        }

        .pv-title-group {
            display: flex;
            align-items: center;
            gap: 11px;
        }

        .pv-icon-badge {
            width: 34px;
            height: 34px;
            border-radius: var(--radius);
            background: var(--bg-accent);
            color: var(--text-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 700;
            font-size: 15px;
        }

        .pv-status-pill {
            font-size: 11px;
            font-weight: 600;
            padding: 4px 11px;
            border-radius: 999px;
            background: var(--surface-1);
            color: var(--text-muted);
        }

        .pv-section {
            background: var(--surface-1);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 16px;
            border: 1px solid var(--border);
        }

        .pv-section-head {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 14px;
        }

        .pv-step {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--bg-accent);
            color: var(--text-accent);
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        
        .pv-label {
            /* font-size: 12px; */
            /* color: var(--text-muted); */
            margin-bottom: 4px;
            font-weight: 600;
            display: block;
        }

        .pv-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 600;
        }

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

        .pv-trow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            padding: 6px 0;
            color: var(--text-secondary);
        }

        .pv-trow.grand {
            font-weight: 600;
            color: var(--text-primary);
            border-top: 0.5px solid var(--border);
            margin-top: 6px;
            padding-top: 12px;
            font-size: 15px;
        }

        .pd-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            border-bottom: 1px dashed var(--border);
            padding: 6px 0;
        }

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

        .tax-col {
            display: none;
        }

        .oe-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .oe-table th {
            text-align: left;
            font-weight: 600;
            /* color: var(--text-muted); */
            /* font-size: 11px; */
            padding: 7px 8px;
            border-bottom: 0.5px solid var(--border);
            background: var(--surface-1);
        }

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

        .pv-callout {
            border-radius: var(--radius);
            padding: 11px 13px;
            border-left: 3px solid var(--border-warning);
            background: var(--bg-warning);
            color: var(--text-warning);
            font-size: 12px;
            font-weight: 600;
        }

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

        .readonly-input {
            background-color: #d0ddea !important;
            cursor: not-allowed;
            color: #1e293b !important;
            font-weight: 600;
        }
    </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 Expense Voucher</a></li>
        </ol>
        <div class="ms-auto">
            <a href="{{ route('expense-voucher.index') }}" class="btn btn-sm btn-primary">
                <i class="ri-arrow-left-circle-fill"></i> Back
            </a>
        </div>
    </div>

    <div class="app-body">
        {!! Form::open([
            'route' => ['expense-voucher.store'],
            'onsubmit' => 'BtnSubmit.disabled = true',
            'class' => 'needs-validation',
            'method' => 'post',
            'autocomplete' => 'off',
            'files' => true,
        ]) !!}

        <div class="pv-card">
           

            <!-- Step 1: Voucher & Party Details -->
            <div class="pv-section">
                <div class="pv-section-head">
                    <div class="pv-step">1</div>
                    <div class="pv-section-title">Voucher &amp; Party Details</div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-md-3 col-6">
                        <span class="pv-label">Voucher No.</span>
                        <input id="voucherNo" name="voucher_no" type="text" readonly class="form-control readonly-input fw-bold" value="{{ $voucherNo }}">
                        <div class="text-danger">{{ $errors->first('voucher_no') }}</div>
                    </div>
                    <div class="col-md-3 col-6">
                        <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 id="voucherDate" name="voucher_date" required type="text" class="form-control datepicker" value="{{ old('voucher_date', date('d-m-Y')) }}">
                        </div>
                        <div class="text-danger">{{ $errors->first('voucher_date') }}</div>
                    </div>
                    <div class="col-md-3 col-6">
                        <span class="pv-label">Invoice Number</span>
                        <input id="invoiceNo" name="invoice_number" type="text" class="form-control" placeholder="Enter invoice no." value="{{ old('invoice_number') }}">
                        <div class="text-danger">{{ $errors->first('invoice_number') }}</div>
                    </div>
                    <div class="col-md-3 col-6">
                        <span class="pv-label">Document Upload</span>
                        <input type="file" name="doc" class="form-control" style="font-size:12px">
                        <div class="text-danger">{{ $errors->first('doc') }}</div>
                    </div>
                </div>

                <div class="row g-3">
                    <!-- Party Info Card -->
                    <div class="col-md-6">
                        <div style="background:var(--background);border-radius:var(--radius);padding:14px;border:0.5px solid var(--border); height: 100%">
                            <div class="pv-section-title" style="font-size:12px;margin-bottom:10px">Party Details</div>
                            <div style="font-size:13px;display:flex;flex-direction:column;gap:9px">
                                <div class="pd-row"><span>Party Name</span><span id="pdName" style="text-align:right; font-weight:700">—</span></div>
                                <div class="pd-row"><span>GST No.</span><span id="pdGstin" style="text-align:right; font-weight:700">—</span></div>
                                <div class="pd-row"><span>Mobile</span><span id="pdMobile" style="text-align:right">—</span></div>
                                <div class="pd-row"><span>Address</span><span id="pdAddress" style="text-align:right;max-width:62%">—</span></div>
                                <div class="pd-row"><span>City/State</span><span id="pdState" style="text-align:right">—</span></div>
                                <div class="pd-row"><span>Opening Balance</span><span id="pdBalance" style="text-align:right">—</span></div>
                            </div>
                        </div>
                    </div>

                    <!-- Information Panel -->
                    <div class="col-md-6">
                        <div style="background:var(--background);border-radius:var(--radius);padding:14px;border:0.5px solid var(--border); height: 100%">
                            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
                                <div class="pv-section-title" style="font-size:12px">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">
                                    <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' => 'partySelect', 'required'],
                                    ) !!}
                                    <div class="text-danger">{{ $errors->first('party_account_ledger_id') }}</div>
                                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px">Balance: <span id="infoBalance" class="fw-bold">—</span></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">Expense Type</span>
                                    <div style="display:flex;gap:14px">
                                        <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer">
                                            <input type="radio" name="expense_type" value="non_gst" id="etNonGst" checked>Non-GST
                                        </label>
                                        <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer">
                                            <input type="radio" name="expense_type" value="gst" id="etGst">GST
                                        </label>
                                    </div>
                                </div>
                                <div>
                                    <span class="pv-label">Tax Type</span>
                                    <span id="partyTaxBadge" class="pv-badge" style="background:#e2e8f0; color:#475569; display:none">—</span>
                                </div>
                                <div>
                                    <span class="pv-label">RCM Applicable</span>
                                    <div style="display:flex;gap:14px">
                                        <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer">
                                            <input type="radio" name="rcmChoice" id="rcmNo" checked>No
                                        </label>
                                        <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer">
                                            <input type="radio" name="rcmChoice" id="rcmYes">Yes
                                        </label>
                                    </div>
                                    <input type="hidden" name="rcm_applicable" id="rcm_applicable" value="no">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="rcmNote" style="display:none;margin-top:14px"></div>
            </div>

            <!-- Step 2: Particulars Table -->
            <div class="pv-section">
                <div class="pv-section-head">
                    <div class="pv-step">2</div>
                    <div class="pv-section-title">Particulars</div>
                </div>

                <div style="overflow-x:auto;border:0.5px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:var(--background)">
                    <table class="oe-table" id="particularsTable">
                        <thead>
                            <tr>
                                <th style="width: 35%">Expense Ledger <span class="text-danger">*</span></th>
                                <th style="width: 15%" class="pv-num">Amount <span class="text-danger">*</span></th>
                                <th class="tax-col" style="width: 12%">GST%</th>
                                <th class="pv-num tax-col" style="width: 10%">CGST</th>
                                <th class="pv-num tax-col" style="width: 10%">SGST</th>
                                <th class="pv-num tax-col" style="width: 10%">IGST</th>
                                <th style="width: 25%">Remark</th>
                                <th style="width: 5%"></th>
                            </tr>
                        </thead>
                        <tbody id="linesBody">
                            <tr>
                                <td>
                                    <select class="form-control select2 item-ledger-select" required>
                                        <option value="">--Select--</option>
                                        @foreach ($expenseLedger as $key => $val)<option value="{{ $key }}">{{ $val }}</option>@endforeach
                                    </select>
                                </td>
                                <td><input class="form-control floatnumber pv-num item-amount" value="0.00" required type="text"></td>
                                <td class="tax-col">
                                    <input type="hidden" class="item-tax-slab" value="0">
                                    <select class="form-control select2 taxGroupIds item-tax-group">
                                        <option value="">--Select--</option>
                                        @foreach ($taxGroup as $key => $val)<option value="{{ $key }}">{{ $val }}</option>@endforeach
                                    </select>
                                </td>
                                <td class="pv-num tax-col"><input class="form-control readonly-input pv-num item-cgst" readonly type="text" value="0.00"></td>
                                <td class="pv-num tax-col"><input class="form-control readonly-input pv-num item-sgst" readonly type="text" value="0.00"></td>
                                <td class="pv-num tax-col"><input class="form-control readonly-input pv-num item-igst" readonly type="text" value="0.00"></td>
                                <input type="hidden" class="item-tax-amount" value="0.00">
                                <input type="hidden" class="item-total-amount" value="0.00">
                                <td><input class="form-control item-remark" type="text" placeholder="Enter notes"></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <button type="button" id="addLineBtn" class="btn btn-sm btn-primary mt-2"><i class="ri-add-circle-fill"></i> Add Line</button>

                <div style="display:flex;justify-content:flex-end;margin-top:14px">
                    <div style="width:290px">
                        <div id="grossRow" class="pv-trow"><span>Gross Value</span><span id="grossValue" class="fw-bold">₹0.00</span></div>
                        <input type="hidden" name="gross_total" id="gross_total" value="0.00">

                        <div id="taxableRow" class="pv-trow" style="display:none"><span>Total Taxable Value</span><span id="totTaxable" class="fw-bold">₹0.00</span></div>
                        <input type="hidden" name="total_taxable_value" id="total_taxable_value" value="0.00">
                        <input type="hidden" name="non_gst_total" id="non_gst_total" value="0.00">

                        <!-- Breakup Totals -->
                        <div id="cgstRow" class="pv-trow" style="display:none"><span>CGST Input</span><span id="totCgst" class="fw-bold">₹0.00</span></div>
                        <input type="hidden" name="cgst_input" id="cgst_input" value="0.00">

                        <div id="sgstRow" class="pv-trow" style="display:none"><span>SGST Input</span><span id="totSgst" class="fw-bold">₹0.00</span></div>
                        <input type="hidden" name="sgst_input" id="sgst_input" value="0.00">

                        <div id="igstRow" class="pv-trow" style="display:none"><span>IGST Input</span><span id="totIgst" class="fw-bold">₹0.00</span></div>
                        <input type="hidden" name="igst_input" id="igst_input" value="0.00">

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

                        <!-- Discount -->
                        <div class="pv-trow">
                            <span>Discount</span>
                            <input type="text" name="discount" id="discountInput" class="form-control floatnumber pv-num" style="width:100px; height:28px;" value="0.00">
                        </div>

                        <!-- Round Off -->
                        <div class="pv-trow">
                            <span class="fw-semibold">
                                <input class="form-check-input me-1" type="checkbox" id="roundToggle" checked>
                                <label class="form-check-label" for="roundToggle">Round Off</label>
                                <input type="hidden" name="round_off_enabled" id="round_off_enabled" value="yes">
                            </span>
                            <input type="text" name="round_off" id="roundAmtInput" class="form-control pv-num" style="width:100px; height:28px;" value="0.00">
                        </div>

                        <!-- Invoice Total -->
                        <div class="pv-trow grand"><span>Invoice Total</span><span id="invoiceTotal" class="fw-bold text-primary">₹0.00</span></div>
                        <input type="hidden" name="net_total" id="net_total" value="0.00">
                    </div>
                </div>
            </div>

            <!-- Step 3: Payment details -->
            <div class="pv-section">
                <div class="pv-section-head">
                    <div class="pv-step">3</div>
                    <div class="pv-section-title">Payment</div>
                </div>

                <div class="paymentSection">
                    <div style="overflow-x:auto;border:0.5px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:var(--background)">
                        <table class="oe-table">
                            <thead>
                                <tr>
                                    <th style="width: 50%">Mode</th>
                                    <th style="width: 40%" class="pv-num">Amount</th>
                                    <th style="width: 10%"></th>
                                </tr>
                            </thead>
                            <tbody id="paymentsBody">
                                <!-- Dynamic payment modes -->
                            </tbody>
                        </table>
                    </div>
                    <button type="button" id="addPaymentBtn" class="btn btn-sm btn-primary mt-2"><i class="ri-add-circle-fill"></i> Add Payment</button>

                    <div style="display:flex;justify-content:flex-end;margin-top:14px">
                        <div style="width:290px">
                            <div class="pv-trow"><span>Total Paid</span><span id="totalPaid" class="fw-bold">₹0.00</span></div>
                            <input type="hidden" name="total_paid" id="total_paid" value="0.00">

                            <div class="pv-trow grand"><span>Balance</span><span id="balanceAmt" class="fw-bold text-danger">₹0.00</span></div>
                            <input type="hidden" name="balance" id="balance" value="0.00">
                        </div>
                    </div>
                </div>

                <div id="rcmPayableBlock" style="display:none;margin-top:14px">
                    <div class="pv-callout d-flex justify-content-between align-items-center">
                        <span>RCM payable to govt.</span>
                        <span id="rcmPayableAmt" style="font-weight:700; font-size: 14px">₹0.00</span>
                    </div>
                    <div style="font-size:11px;margin-top:2px;color:var(--text-warning); font-weight: 500">Self-assessed — not part of party balance. Reported under RCM in GSTR-3B (Table 3.1(d)) and GSTR-2B.</div>
                </div>
            </div>

            <!-- Narrations -->
            <div style="margin-bottom:18px">
                <span class="pv-label" for="remark">Narration / Remark</span>
                <textarea class="form-control" name="remark" id="remarkText" rows="2" placeholder="Enter voucher remark...">{{ old('remark') }}</textarea>
                <div class="text-danger">{{ $errors->first('remark') }}</div>
            </div>

            <div style="display:flex;justify-content:flex-end">
                <button type="submit" id="BtnSubmit" class="btn btn-primary px-4 py-2 fw-bold">Submit Voucher</button>
            </div>
        </div>

        {!! Form::close() !!}
    </div>

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

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        let companyStateId = parseInt(@json($companyDetails->state_id));
        let taxGroupNoneId = @json($taxGroupNone->id);
        let expenseLedgerData = @json($expenseLedger);
        let taxGroupData = @json($taxGroup);
        let paymentLedger = @json($paymentLedger);

        function initDatepickers() {
            $(".datepicker").daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: "DD-MM-YYYY"
                },
            });
        }
        initDatepickers();

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

        // Prevent invalid characters
        $(document).on('focus', ".item-amount, .totalPaidAmount, #discountInput, #roundAmtInput", function() {
            if (parseFloat($(this).val()) === 0) {
                $(this).val('');
            }
        });
        $(document).on('blur', ".item-amount, .totalPaidAmount, #discountInput, #roundAmtInput", function() {
            let val = $(this).val().trim();
            if (val === '') {
                $(this).val('0.00');
            } else {
                let num = parseFloat(val);
                if (!isNaN(num)) {
                    $(this).val(num.toFixed(2));
                }
            }
        });
        $(document).on('input', '.floatnumber', function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        // Load Ledger Balance
        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);
                }
            });
        }

        // Get Party Details
        $('#partySelect').on('change', function() {
            let party_account_ledger_id = $(this).val();
            loadLedgerBalance(party_account_ledger_id, 'infoBalance');
            if (!party_account_ledger_id) {
                $('#pdName, #pdGstin, #pdMobile, #pdAddress, #pdState, #pdBalance').text('—');
                $('#party_register_type, #party_state_id').val('');
                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) {
                        $('#pdName').text(partyData.party_name || '—');
                        $('#pdGstin').text(partyData.gst_no || 'Not registered');
                        $('#pdMobile').text(partyData.mobile_no || '—');
                        $('#pdAddress').text(partyData.address || '—');
                        let stateName = partyData.state ? partyData.state.state_name : (partyData.state_id || '');
                        $('#pdState').text((partyData.city || '') + (stateName ? ' / ' + stateName : ''));
                        
                        $('#party_register_type').val(partyData.register_type);
                        $('#party_state_id').val(partyData.state_id);

                        let intra = parseInt(partyData.state_id) === companyStateId;
                        $('#partyTaxBadge').text(intra ? 'Intra-state' : 'Inter-state')
                            .css('background', intra ? 'var(--bg-accent)' : '#e2e8f0')
                            .css('color', intra ? 'var(--text-accent)' : '#4b5563')
                            .show();
                    }
                    if (balance) {
                        let colorClass = balance.balance_type === 'Dr' ? 'text-success' : 'text-danger';
                        $('#pdBalance').html(`<span class="${colorClass}">₹ ${parseFloat(balance.balance).toFixed(2)} ${balance.balance_type}</span>`);
                    } else {
                        $('#pdBalance').text('—');
                    }
                    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 and warning update
        function updateBanner() {
            let reg = $('#party_register_type').val();
            let isRcm = $('#rcmYes').is(':checked');
            let state = parseInt($('#party_state_id').val()) || 0;
            let intra = state === companyStateId;
            let bEl = $('#rcmNote');

            if (isRcm) {
                bEl.html(`<div class="pv-callout">RCM applicable — this expense will be reported under Reverse Charge in GSTR-3B (Table 3.1(d)) and reflected in GSTR-2B. Vendor will not charge GST on this invoice.</div>`).show();
            } else {
                bEl.hide();
            }
        }

        // Toggle radio events
        $('input[name="expense_type"]').on('change', function() {
            recalculateAll();
        });
        $('input[name="rcmChoice"]').on('change', function() {
            let isRcm = $(this).attr('id') === 'rcmYes';
            $('#rcm_applicable').val(isRcm ? 'yes' : 'no');
            updateBanner();
            recalculateAll();
        });

        // Dynamic Line row creation
        let lineIdx = 11;
        $('#addLineBtn').on('click', function() {
            let tr = $('<tr>');
            let expOptions = `<option value="">--Select--</option>`;
            $.each(expenseLedgerData, function(id, name) {
                expOptions += `<option value="${id}">${name}</option>`;
            });
            let taxOptions = `<option value="">--Select--</option>`;
            $.each(taxGroupData, function(id, name) {
                taxOptions += `<option value="${id}">${name}</option>`;
            });

            let cols = `
                <td>
                    <select class="form-control select2 item-ledger-select" required>
                        ${expOptions}
                    </select>
                </td>
                <td><input class="form-control floatnumber pv-num item-amount" value="0.00" required type="text"></td>
                <td class="tax-col">
                    <input type="hidden" class="item-tax-slab" value="0">
                    <select class="form-control select2 taxGroupIds item-tax-group">
                        ${taxOptions}
                    </select>
                </td>
                <td class="pv-num tax-col"><input class="form-control readonly-input pv-num item-cgst" readonly type="text" value="0.00"></td>
                <td class="pv-num tax-col"><input class="form-control readonly-input pv-num item-sgst" readonly type="text" value="0.00"></td>
                <td class="pv-num tax-col"><input class="form-control readonly-input pv-num item-igst" readonly type="text" value="0.00"></td>
                <input type="hidden" class="item-tax-amount" value="0.00">
                <input type="hidden" class="item-total-amount" value="0.00">
                <td><input class="form-control item-remark" type="text" placeholder="Enter notes"></td>
                <td><button type="button" class="btn btn-danger btn-sm dellinebtn"><i class="ri-delete-bin-line"></i></button></td>
            `;
            tr.append(cols);
            $('#linesBody').append(tr);
            tr.find('.select2').select2();
            lineIdx++;
            recalculateAll();
        });

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

        // GST Select callback
        $(document).on('change', '.item-tax-group', function() {
            let tax_group_id = $(this).val();
            let $row = $(this).closest('tr');
            let party_ledger_id = $('#partySelect').val() || 0;
            if (!tax_group_id) {
                $row.find('.item-tax-slab').val(0);
                recalculateAll();
                return;
            }
            $.ajax({
                url: '{{ route("getTaxGroupDetailById") }}',
                type: 'GET',
                data: { tax_group_id, party_account_ledger_id: party_ledger_id },
                success: function(result) {
                    $row.find('.item-tax-slab').val(result.tax_slab || 0);
                    recalculateAll();
                }
            });
        });

        // Dynamic Payment row creation
        let payIdx = 11;
        $('#addPaymentBtn').on('click', function() {
            let tr = $('<tr>');
            let modes = '';
            $.each(paymentLedger, function(id, name) {
                modes += `<option value="${id}">${name}</option>`;
            });
            let cols = `
                <td>
                    <select name="payment_account_ledger_id[]" class="form-control select2" required>
                        ${modes}
                    </select>
                </td>
                <td><input name="paid_amount[]" class="form-control floatnumber pv-num totalPaidAmount" value="0.00" required type="text"></td>
                <td><button type="button" class="btn btn-danger btn-sm delpaybtn"><i class="ri-delete-bin-line"></i></button></td>
            `;
            tr.append(cols);
            $('#paymentsBody').append(tr);
            tr.find('.select2').select2();
            payIdx++;
            recalculateAll();
        });

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

        // recaclulateAll events triggers
        $(document).on('change input', '.item-ledger-select, .item-amount, .item-tax-group, .item-remark', function() {
            recalculateAll();
        });
        $(document).on('input', '.totalPaidAmount', function() {
            recalculateAll();
        });
        $(document).on('input', '#discountInput', function() {
            recalculateAll();
        });
        let roundOffManual = false;
        $(document).on('input', '#roundAmtInput', function() {
            roundOffManual = true;
            recalculateAll();
        });
        $(document).on('change', '#roundToggle', function() {
            if (!$(this).is(':checked')) {
                roundOffManual = false;
            }
            recalculateAll();
        });

        // Calculation engine
        function recalculateAll() {
            let expType = $('input[name="expense_type"]:checked').val();
            let isRcm = $('#rcmYes').is(':checked');
            let showTax = (expType === 'gst' || isRcm);
            let intra = parseInt($('#party_state_id').val()) === companyStateId;
            let partyReg = $('#party_register_type').val();

            // Toggle Columns visibility
            if (showTax) {
                $('.tax-col').show();
            } else {
                $('.tax-col').hide();
            }

            let totalItemTv = 0;
            let totalItemTax = 0;
            let totalCgst = 0;
            let totalSgst = 0;
            let totalIgst = 0;
            let totalRowAmount = 0;

            // Apply dynamic input names
            $('#linesBody tr').each(function() {
                let ledgerSelect = $(this).find('.item-ledger-select');
                let amtInput = $(this).find('.item-amount');
                let remarkInput = $(this).find('.item-remark');
                let taxGroupSelect = $(this).find('.item-tax-group');
                let taxSlabInput = $(this).find('.item-tax-slab');
                let taxAmtInput = $(this).find('.item-tax-amount');
                let totalAmtInput = $(this).find('.item-total-amount');

                let amt = parseFloat(amtInput.val()) || 0;
                let slab = parseFloat(taxSlabInput.val()) || 0;

                if (expType === 'non_gst') {
                    ledgerSelect.attr('name', 'non_gst_ledger_id[]');
                    amtInput.attr('name', 'non_gst_amount[]');
                    remarkInput.attr('name', 'non_gst_remark[]');
                    
                    taxGroupSelect.removeAttr('name');
                    taxSlabInput.removeAttr('name');
                    taxAmtInput.removeAttr('name');
                    totalAmtInput.removeAttr('name');

                    totalItemTv += amt;
                    totalRowAmount += amt;
                } else {
                    ledgerSelect.attr('name', 'gst_ledger_id[]');
                    amtInput.attr('name', 'gst_taxable_amount[]');
                    remarkInput.attr('name', 'gst_remark[]');
                    taxGroupSelect.attr('name', 'gst_tax_group_id[]');
                    taxSlabInput.attr('name', 'gst_tax_slab[]');
                    taxAmtInput.attr('name', 'gst_tax_amount[]');
                    totalAmtInput.attr('name', 'gst_total_amount[]');

                    totalItemTv += amt;

                    let rowCgst = 0;
                    let rowSgst = 0;
                    let rowIgst = 0;
                    let rowTax = 0;

                    if (partyReg === 'Regular' && !isRcm) {
                        rowTax = (amt * slab) / 100;
                        totalItemTax += rowTax;
                        if (intra) {
                            rowCgst = rowTax / 2;
                            rowSgst = rowTax / 2;
                        } else {
                            rowIgst = rowTax;
                        }
                    }

                    totalCgst += rowCgst;
                    totalSgst += rowSgst;
                    totalIgst += rowIgst;

                    $(this).find('.item-cgst').val(rowCgst.toFixed(2));
                    $(this).find('.item-sgst').val(rowSgst.toFixed(2));
                    $(this).find('.item-igst').val(rowIgst.toFixed(2));
                    taxAmtInput.val(rowTax.toFixed(2));

                    let rowTot = amt + rowTax;
                    totalAmtInput.val(rowTot.toFixed(2));
                    totalRowAmount += rowTot;
                }
            });

            // Adjust summaries visibility
            if (showTax) {
                $('#grossRow').hide();
                $('#taxableRow').show();
                $('#totTaxable').text('₹' + totalItemTv.toFixed(2));
                $('#total_taxable_value').val(totalItemTv.toFixed(2));
                $('#non_gst_total').val('0.00');

                // GST split
                $('#totCgst').text('₹' + totalCgst.toFixed(2));
                $('#totSgst').text('₹' + totalSgst.toFixed(2));
                $('#totIgst').text('₹' + totalIgst.toFixed(2));
                $('#cgst_input').val(totalCgst.toFixed(2));
                $('#sgst_input').val(totalSgst.toFixed(2));
                $('#igst_input').val(totalIgst.toFixed(2));

                if (partyReg === 'Regular' && !isRcm && totalItemTax > 0) {
                    if (intra) {
                        $('#cgstRow, #sgstRow').show();
                        $('#igstRow').hide();
                    } else {
                        $('#cgstRow, #sgstRow').hide();
                        $('#igstRow').show();
                    }
                } else {
                    $('#cgstRow, #sgstRow, #igstRow').hide();
                }

                $('#total_gst_tax_amount').val(totalItemTax.toFixed(2));
                $('#total_gst_amount').val(totalRowAmount.toFixed(2));
                $('#finalTaxTotal').val(totalItemTax.toFixed(2));
            } else {
                $('#grossRow').show();
                $('#taxableRow').hide();
                $('#cgstRow, #sgstRow, #igstRow').hide();
                $('#grossValue').text('₹' + totalItemTv.toFixed(2));

                $('#non_gst_total').val(totalItemTv.toFixed(2));
                $('#total_taxable_value').val('0.00');
                $('#total_gst_tax_amount').val('0.00');
                $('#total_gst_amount').val('0.00');
                $('#finalTaxTotal').val('0.00');
                $('#cgst_input, #sgst_input, #igst_input').val('0.00');
            }

            let gross = showTax ? (totalItemTv + totalItemTax) : totalItemTv;
            $('#gross_total').val(gross.toFixed(2));

            // Discount
            let discount = parseFloat($('#discountInput').val()) || 0;
            let afterDiscount = gross - discount;

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

            let netTotal = afterDiscount + roundOffVal;
            $('#invoiceTotal').text('₹' + netTotal.toFixed(2));
            $('#net_total').val(netTotal.toFixed(2));

            // Payments
            if ($('#is_party_cash_bank').val() === 'yes') {
                $('#total_paid').val(netTotal.toFixed(2));
                $('#totalPaid').text('₹' + netTotal.toFixed(2));
            } else {
                let paySum = 0;
                $('.totalPaidAmount').each(function() {
                    paySum += parseFloat($(this).val()) || 0;
                });
                $('#total_paid').val(paySum.toFixed(2));
                $('#totalPaid').text('₹' + paySum.toFixed(2));
            }

            let total_paid = parseFloat($('#total_paid').val()) || 0;
            let balance = netTotal - total_paid;
            $('#balance').val(balance.toFixed(2));
            $('#balanceAmt').text('₹' + balance.toFixed(2));

            // RCM Self assessment totals
            let rcmTotal = 0;
            if (isRcm) {
                $('#linesBody tr').each(function() {
                    let amt = parseFloat($(this).find('.item-amount').val()) || 0;
                    let slab = parseFloat($(this).find('.item-tax-slab').val()) || 0;
                    rcmTotal += (amt * slab) / 100;
                });
            }
            if (rcmTotal > 0) {
                $('#rcmPayableBlock').show();
                $('#rcmPayableAmt').text('₹' + rcmTotal.toFixed(2));
            } else {
                $('#rcmPayableBlock').hide();
            }
        }
    </script>
@endpush