@extends('admin.layouts.app')

@section('title', 'Add Invoice')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-12">

            <div class="card border-0 shadow-lg rounded-4">
                {{-- Header --}}
                <div class="card-header bg-white border-bottom py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="card-title mb-1 text-primary fw-bold">
                                <i class="ri-file-list-3-line align-middle me-1"></i> Add New Invoice
                            </h4>
                            <p class="text-muted mb-0 small">Create a new invoice record for a customer.</p>
                        </div>

                        <a href="{{ route('admin.invoices.index') }}" class="btn btn-sm btn-light border">
                            <i class="ri-arrow-left-line align-middle me-1"></i> Back to List
                        </a>
                    </div>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('admin.invoices.store') }}" method="POST">
                        @csrf

                        {{-- SECTION 1: Customer & Invoice Info --}}
                        <h6 class="text-uppercase text-muted fw-bold fs-12 mb-3">Basic Information</h6>

                        <div class="row g-3 mb-4">
                            {{-- Customer Selection (Optional) --}}
                            <div class="col-md-12">
                                <label class="form-label fw-semibold">
                                    Select Customer <span class="text-muted small">(optional)</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-user-search-line"></i>
                                    </span>
                                    <select name="customer_id" id="customer_select"
                                            class="form-select @error('customer_id') is-invalid @enderror">
                                        <option value="">-- Search & Select Customer --</option>
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}"
                                                {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                                {{ $customer->brauser_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('customer_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Bank Select --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Select Bank</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-bank-line"></i>
                                    </span>
                                    <select id="bank_select" name="customer_bank_id"
                                            class="form-select @error('customer_bank_id') is-invalid @enderror">
                                        <option value="">-- Select Bank --</option>
                                        @foreach ($banks as $bank)
                                            <option value="{{ $bank->id }}"
                                                {{ old('customer_bank_id') == $bank->id ? 'selected' : '' }}>
                                                {{ $bank->bank }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('customer_bank_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Branch Select --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Select Branch</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-map-pin-line"></i>
                                    </span>
                                    <select id="branch_select" name="customer_branch_id"
                                            class="form-select @error('customer_branch_id') is-invalid @enderror">
                                        <option value="">-- Select Branch --</option>
                                        {{-- Options will be loaded via JS based on selected bank --}}
                                    </select>
                                    @error('customer_branch_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Invoice No --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Invoice No <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-hashtag"></i>
                                    </span>
                                    <input type="text"
                                           name="invoice_no"
                                           value="{{ old('invoice_no', $generatedInvoiceNo ?? '') }}"
                                           class="form-control @error('invoice_no') is-invalid @enderror"
                                           readonly>
                                    @error('invoice_no')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Invoice Date --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Invoice Date <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-calendar-event-line"></i>
                                    </span>
                                    <input type="date"
                                           name="invoice_date"
                                           value="{{ old('invoice_date', date('Y-m-d')) }}"
                                           class="form-control @error('invoice_date') is-invalid @enderror"
                                           required>
                                    @error('invoice_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr class="border-light my-4">

                        {{-- SECTION 2: Item Details --}}
                        <h6 class="text-uppercase text-muted fw-bold fs-12 mb-3">Item Details</h6>

                        <div class="row g-3 mb-3">
                            {{-- Quantity --}}
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">Quantity</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-scales-3-line"></i>
                                    </span>
                                    <input type="number"
                                           step="0.01"
                                           id="item_quantity"
                                           name="item_quantity"
                                           value="{{ old('item_quantity') }}"
                                           class="form-control"
                                           placeholder="Qty">
                                </div>
                            </div>

                            {{-- Rate --}}
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">Rate (₹)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">₹</span>
                                    <input type="number"
                                           step="0.01"
                                           id="item_rate"
                                           name="item_rate"
                                           value="{{ old('item_rate') }}"
                                           class="form-control"
                                           placeholder="Rate per unit">
                                </div>
                            </div>

                            {{-- Item Total --}}
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">Item Total (₹)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light fw-bold">₹</span>
                                    <input type="number"
                                           step="0.01"
                                           id="item_total"
                                           name="item_total"
                                           value="{{ old('item_total') }}"
                                           class="form-control"
                                           placeholder="0.00"
                                           readonly>
                                </div>
                            </div>

                            {{-- Per Quantity Price --}}
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">Per Quantity Price (₹)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light fw-bold">₹</span>
                                    <input type="number"
                                           step="0.01"
                                           id="per_qty_price"
                                           class="form-control"
                                           placeholder="0.00"
                                           readonly>
                                </div>
                            </div>
                        </div>

                      

                        {{-- SECTION 2B: Extra Charges --}}
                        <h6 class="text-uppercase text-muted fw-bold fs-12 mb-3">Extra Charges</h6>

                        <div class="card border-0 bg-light-subtle mb-4">
                            <div class="card-body py-3">
                                <div id="extraChargesContainer" class="row g-2">
                                    {{-- Initially empty, user can add rows --}}
                                </div>

                                <button type="button"
                                        id="addExtraChargeBtn"
                                        class="btn btn-sm btn-outline-secondary mt-2">
                                    <i class="ri-add-line"></i> Add Extra Charge
                                </button>
                            </div>
                        </div>

                        {{-- SECTION 3: Payment Summary --}}
                        <h6 class="text-uppercase text-muted fw-bold fs-12 mb-3">Payment Details</h6>

                        <div class="row g-3 mb-4">
                            {{-- Total Amount (base + extra + round off) --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Total Amount (₹) <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light fw-bold">₹</span>
                                    <input type="number"
                                           step="0.01"
                                           id="total_amount_input"
                                           name="total_amount"
                                           value="{{ old('total_amount') }}"
                                           class="form-control @error('total_amount') is-invalid @enderror"
                                           placeholder="0.00"
                                           required>
                                    @error('total_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted">
                                    Auto: Item Total + Extra Charges + Round Off (Tax only displayed separately).
                                </small>
                            </div>

                            {{-- Round Off --}}
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">Round Off</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-exchange-dollar-line"></i>
                                    </span>
                                    <input type="number"
                                           step="0.01"
                                           id="round_off_input"
                                           name="round_off"
                                           value="{{ old('round_off') }}"
                                           class="form-control @error('round_off') is-invalid @enderror"
                                           placeholder="0.00">
                                    @error('round_off')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Unit (Optional) --}}
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">Unit (Optional)</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-scales-3-line"></i>
                                    </span>
                                    <input type="number"
                                           step="0.01"
                                           name="unit"
                                           value="{{ old('unit') }}"
                                           class="form-control"
                                           placeholder="Qty">
                                </div>
                            </div>

                            {{-- Amount in Words --}}
                            <div class="col-12">
                                <label class="form-label fw-semibold">Amount in Words</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-text"></i>
                                    </span>
                                    <input type="text"
                                           id="amount_in_words_input"
                                           name="amount_in_words"
                                           value="{{ old('amount_in_words') }}"
                                           class="form-control @error('amount_in_words') is-invalid @enderror"
                                           placeholder="e.g. FIVE THOUSAND RUPEES ONLY">
                                    @error('amount_in_words')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

  {{-- SECTION 2A: Tax / Charges --}}
                        <h6 class="text-uppercase text-muted fw-bold fs-12 mb-3">Tax / Charges</h6>

                        <div class="card border-0 bg-light-subtle mb-3">
                            <div class="card-body py-3">
                                <div id="taxRowsContainer" class="row g-2">
                                    {{-- Default Tax Row --}}
                                    <div class="col-12 tax-row align-items-center border rounded-3 p-2 mb-2">
                                        <div class="row g-2 align-items-center">
                                            <div class="col-md-1 text-center">
                                                <div class="form-check mt-2">
                                                    <input class="form-check-input tax-apply-checkbox"
                                                           type="checkbox"
                                                           checked>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <select class="form-select tax-type-select">
                                                    <option value="GST">GST</option>
                                                    <option value="CGST">CGST</option>
                                                    <option value="SGST">SGST</option>
                                                    <option value="IGST">IGST</option>
                                                    <option value="SERVICE CHARGE">Service Charge</option>
                                                </select>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="input-group">
                                                    <input type="number"
                                                           step="0.01"
                                                           class="form-control tax-percent-input"
                                                           placeholder="Tax %">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="input-group">
                                                    <span class="input-group-text">₹</span>
                                                    <input type="number"
                                                           step="0.01"
                                                           class="form-control tax-amount-input"
                                                           placeholder="Amount"
                                                           readonly>
                                                </div>
                                            </div>

                                            <div class="col-md-2 text-end">
                                                <button type="button"
                                                        class="btn btn-sm btn-outline-danger remove-tax-row-btn d-none">
                                                    <i class="ri-close-line"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button type="button"
                                        id="addTaxRowBtn"
                                        class="btn btn-sm btn-outline-primary mt-2">
                                    <i class="ri-add-line"></i> Add Tax / Charge
                                </button>

                                <div class="mt-3 small text-muted">
                                    Example: Add multiple taxes like 5%, 3%, 3% – all will be calculated from Payment Total Amount.
                                </div>
                            </div>
                        </div>
                            {{-- Hidden fields for backend calculations --}}
                            <input type="hidden"
                                   id="base_amount_input"
                                   name="base_amount"
                                   value="{{ old('base_amount') }}">

                            <input type="hidden"
                                   id="total_tax_amount_input"
                                   name="total_tax_amount"
                                   value="{{ old('total_tax_amount') }}">

                            <input type="hidden"
                                   id="total_extra_charges_input"
                                   name="total_extra_charges"
                                   value="{{ old('total_extra_charges') }}">
                        </div>

                        <hr class="border-light my-4">

                        {{-- SECTION 4: Banking Information --}}
                        <h6 class="text-uppercase text-muted fw-bold fs-12 mb-3">Banking Information</h6>

                        <div class="row g-3">
                            {{-- Bank Name --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Bank Name</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-bank-line"></i>
                                    </span>
                                    <input type="text"
                                           name="bank"
                                           value="{{ old('bank') }}"
                                           class="form-control @error('bank') is-invalid @enderror"
                                           placeholder="Enter bank name">
                                    @error('bank')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Account Number --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Bank Account No</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-bank-card-line"></i>
                                    </span>
                                    <input type="text"
                                           name="bank_account_no"
                                           value="{{ old('bank_account_no') }}"
                                           class="form-control @error('bank_account_no') is-invalid @enderror"
                                           placeholder="Enter account number">
                                    @error('bank_account_no')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- IFSC Code --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">IFSC Code</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-qr-code-line"></i>
                                    </span>
                                    <input type="text"
                                           name="ifsc_code"
                                           value="{{ old('ifsc_code') }}"
                                           class="form-control @error('ifsc_code') is-invalid @enderror"
                                           placeholder="Enter IFSC code"
                                           style="text-transform: uppercase;">
                                    @error('ifsc_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Udayam Number --}}
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Udayam Number</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-light">
                                        <i class="ri-article-line"></i>
                                    </span>
                                    <input type="text"
                                           name="company_pan"
                                           value="{{ old('company_pan') }}"
                                           class="form-control @error('company_pan') is-invalid @enderror"
                                           placeholder="Enter Udayam Number">
                                    @error('company_pan')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Actions --}}
                        <div class="d-flex justify-content-end gap-2 mt-5 pt-3 border-top">
                            <a href="{{ route('admin.invoices.index') }}" class="btn btn-light px-4">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="ri-save-line align-middle me-1"></i> Save Invoice
                            </button>
                        </div>
                    </form>
                </div> {{-- End Card Body --}}
            </div> {{-- End Card --}}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ------------ Element References ------------ */

    const itemQtyInput       = document.getElementById('item_quantity');
    const itemRateInput      = document.getElementById('item_rate');
    const itemTotalInput     = document.getElementById('item_total');
    const perQtyPriceInput   = document.getElementById('per_qty_price');

    const totalAmountInput   = document.getElementById('total_amount_input');
    const roundOffInput      = document.getElementById('round_off_input');

    const amountInWordsInput = document.getElementById('amount_in_words_input');

    const baseAmountInput        = document.getElementById('base_amount_input');
    const totalTaxAmountInput    = document.getElementById('total_tax_amount_input');
    const totalExtraChargesInput = document.getElementById('total_extra_charges_input');

    const taxRowsContainer   = document.getElementById('taxRowsContainer');
    const addTaxRowBtn       = document.getElementById('addTaxRowBtn');

    const extraChargesContainer = document.getElementById('extraChargesContainer');
    const addExtraChargeBtn     = document.getElementById('addExtraChargeBtn');

    const bankSelect   = document.getElementById('bank_select');
    const branchSelect = document.getElementById('branch_select');


    /* ------------ Amount in Words (Indian System) ------------ */

    function convertNumberToWords(num) {
        const a = ['', 'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE', 'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN',
            'ELEVEN', 'TWELVE', 'THIRTEEN', 'FOURTEEN', 'FIFTEEN', 'SIXTEEN',
            'SEVENTEEN', 'EIGHTEEN', 'NINETEEN'];
        const b = ['', '', 'TWENTY', 'THIRTY', 'FORTY', 'FIFTY',
            'SIXTY', 'SEVENTY', 'EIGHTY', 'NINETY'];

        num = parseFloat(num);
        if (isNaN(num)) return "";

        let numStr = num.toFixed(2);
        let parts = numStr.split('.');
        let integerPart = parseInt(parts[0]);
        let decimalPart = parseInt(parts[1]);

        function inWords(n) {
            if (n < 20) return a[n];
            if (n < 100) return b[Math.floor(n / 10)] + (n % 10 ? " " + a[n % 10] : "");
            return a[Math.floor(n / 100)] + " HUNDRED" + (n % 100 ? " AND " + inWords(n % 100) : "");
        }

        let str = integerPart.toString().padStart(9, '0');
        let crores = parseInt(str.substring(0, 2));
        let lakhs = parseInt(str.substring(2, 4));
        let thousands = parseInt(str.substring(4, 6));
        let hundreds = parseInt(str.substring(6, 9));

        let words = "";

        if (crores) words += inWords(crores) + " CRORES ";
        if (lakhs) words += inWords(lakhs) + " LAKHS ";
        if (thousands) words += inWords(thousands) + " THOUSAND ";
        if (hundreds) words += inWords(hundreds);

        words = words.trim();

        if (decimalPart > 0) {
            words += " AND " + inWords(decimalPart) + " PAISE";
        }

        return words || "ZERO";
    }

    function updateAmountInWords() {
        const amount = parseFloat(totalAmountInput.value || 0);
        amountInWordsInput.value = amount > 0
            ? convertNumberToWords(amount) + " RUPEES ONLY"
            : "";
    }


    /* ------------ Calculations: Item, Extra, Total, Tax ------------ */

    function recalcItem() {
        const qty  = parseFloat(itemQtyInput.value || 0);
        const rate = parseFloat(itemRateInput.value || 0);

        const total = qty * rate;

        itemTotalInput.value = total ? total.toFixed(2) : "";
        baseAmountInput.value = total ? total.toFixed(2) : "";

        return total;
    }

    function recalcExtra() {
        let totalExtra = 0;
        document.querySelectorAll('.extra-charge-amount').forEach(input => {
            totalExtra += parseFloat(input.value || 0);
        });

        totalExtraChargesInput.value = totalExtra ? totalExtra.toFixed(2) : "";
        return totalExtra;
    }

    // Total Amount = Item Total + Extra Charges + Round Off
    function recalcTotalAmount() {
        const base  = recalcItem();
        const extra = recalcExtra();
        const roundOff = parseFloat(roundOffInput.value || 0);

        const grand = base + extra + roundOff;
        totalAmountInput.value = grand ? grand.toFixed(2) : "";

        // Per quantity price based on final payment total
        if (parseFloat(itemQtyInput.value || 0) > 0 && grand > 0) {
            perQtyPriceInput.value = (grand / parseFloat(itemQtyInput.value)).toFixed(2);
        } else {
            perQtyPriceInput.value = "";
        }

        return grand;
    }

    // TAX from Payment Total Amount (totalAmountInput)
    function recalcTaxesFromTotal() {
        const baseForTax = parseFloat(totalAmountInput.value || 0);
        let totalTax = 0;

        document.querySelectorAll('.tax-row').forEach(row => {
            const applyCheckbox = row.querySelector('.tax-apply-checkbox');
            const percentInput  = row.querySelector('.tax-percent-input');
            const amountInput   = row.querySelector('.tax-amount-input');

            const apply   = applyCheckbox.checked;
            const percent = parseFloat(percentInput.value || 0);

            let taxAmount = (apply && percent && baseForTax)
                ? (baseForTax * percent) / 100
                : 0;

            amountInput.value = taxAmount ? taxAmount.toFixed(2) : "";
            totalTax += taxAmount;
        });

        totalTaxAmountInput.value = totalTax ? totalTax.toFixed(2) : "";
        return totalTax;
    }

    function recalcAll() {
        recalcTotalAmount();
        recalcTaxesFromTotal();
        updateAmountInWords();
    }


    /* ------------ Tax Row Helpers ------------ */

    function attachTaxRowEvents(row) {
        const percentInput = row.querySelector('.tax-percent-input');
        const applyCheckbox = row.querySelector('.tax-apply-checkbox');
        const removeBtn = row.querySelector('.remove-tax-row-btn');

        if (percentInput) {
            percentInput.addEventListener('input', recalcAll);
        }
        if (applyCheckbox) {
            applyCheckbox.addEventListener('change', recalcAll);
        }
        if (removeBtn) {
            removeBtn.addEventListener('click', function () {
                row.remove();
                recalcAll();
            });
        }
    }

    // Attach events to default tax row
    document.querySelectorAll('.tax-row').forEach(attachTaxRowEvents);

    addTaxRowBtn.addEventListener('click', function () {
        const row = document.createElement('div');
        row.className = "col-12 tax-row align-items-center border rounded-3 p-2 mb-2";

        row.innerHTML = `
            <div class="row g-2 align-items-center">
                <div class="col-md-1 text-center">
                    <div class="form-check mt-2">
                        <input class="form-check-input tax-apply-checkbox" type="checkbox" checked>
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select tax-type-select">
                        <option value="GST">GST</option>
                        <option value="CGST">CGST</option>
                        <option value="SGST">SGST</option>
                        <option value="IGST">IGST</option>
                        <option value="SERVICE CHARGE">Service Charge</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <input type="number"
                               step="0.01"
                               class="form-control tax-percent-input"
                               placeholder="Tax %">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="number"
                               step="0.01"
                               class="form-control tax-amount-input"
                               placeholder="Amount"
                               readonly>
                    </div>
                </div>
                <div class="col-md-2 text-end">
                    <button type="button"
                            class="btn btn-sm btn-outline-danger remove-tax-row-btn">
                        <i class="ri-close-line"></i>
                    </button>
                </div>
            </div>
        `;

        taxRowsContainer.appendChild(row);
        attachTaxRowEvents(row);
        recalcAll();
    });


    /* ------------ Extra Charges ------------ */

    addExtraChargeBtn.addEventListener('click', function () {
        const row = document.createElement('div');
        row.className = "col-12 mb-2";

        row.innerHTML = `
            <div class="row g-2">
                <div class="col-md-6">
                    <input type="text"
                           name="extra_charges_descriptions[]"
                           class="form-control"
                           placeholder="Description">
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="number"
                               step="0.01"
                               name="extra_charges_amounts[]"
                               class="form-control extra-charge-amount"
                               placeholder="0.00">
                    </div>
                </div>
                <div class="col-md-2 text-end">
                    <button type="button"
                            class="btn btn-sm btn-outline-danger remove-extra-row-btn">
                        <i class="ri-close-line"></i>
                    </button>
                </div>
            </div>
        `;

        extraChargesContainer.appendChild(row);

        const amountInput = row.querySelector('.extra-charge-amount');
        const removeBtn   = row.querySelector('.remove-extra-row-btn');

        amountInput.addEventListener('input', recalcAll);
        removeBtn.addEventListener('click', function () {
            row.remove();
            recalcAll();
        });
    });


    /* ------------ Bank → Branch (Independent of Customer) ------------ */

    bankSelect.addEventListener('change', function () {
        const bankId = this.value;

        // Reset branches
        branchSelect.innerHTML = `<option value="">-- Select Branch --</option>`;

        if (!bankId) {
            return;
        }

        // Adjust this URL to match your route:
        // Route::get('admin/banks/{bankId}/branches', [InvoiceController::class, 'getBankBranches']);
        const url = "{{ url('admin/banks') }}/" + bankId + "/branches";

        fetch(url)
            .then(res => res.json())
            .then(data => {
                data.forEach(branch => {
                    const option = document.createElement('option');
                    option.value = branch.id;
                    option.textContent = branch.branch_address;
                    branchSelect.appendChild(option);
                });
            })
            .catch(err => console.error('ERROR loading branches:', err));
    });


    /* ------------ Event Bindings for Recalculation ------------ */

    itemQtyInput.addEventListener('input', recalcAll);
    itemRateInput.addEventListener('input', recalcAll);
    roundOffInput.addEventListener('input', recalcAll);

    // If user edits total manually, just update words & tax display
    totalAmountInput.addEventListener('input', function () {
        recalcTaxesFromTotal();
        updateAmountInWords();
    });


    /* ------------ Initial Calculate on Page Load ------------ */

    recalcAll();
});
</script>
@endpush