@extends('layout.app')
@section('title', 'Create Expense Voucher')

@push('header_script')
<style>
    .readonly {
        background-color: #e9ecef;
    }

    .width-85 {
        margin-top: 10px;
        width: 100px !important;
        margin-right: 15px !important;
    }

    .shopPayment {
        display: none !important;
    }

    /* ── Table tweaks ── */
    #nonGstTable th,
    #nonGstTable td,
    #gstExpenseTable th,
    #gstExpenseTable td {
        vertical-align: middle;
        font-size: 0.87rem;
        padding: 6px 8px;
    }

    /* Section heading */
    .sec-heading {
        font-weight: 700;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #0d6efd;
        margin-bottom: 10px;
    }

    /* Payment rows */
    .payment-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .payment-row select {
        width: 45%;
    }

    .payment-row input {
        width: 45%;
    }
</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 d-lg-flex flex-row">
        <div class="d-flex flex-row gap-1 day-sorting">
            <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>

<div class="app-body">
    <div class="card-body">
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card mb-3">
                    <div class="card-body">

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

                        {{-- ══ Voucher No ══ --}}
                        <div class="col-md-3 col-12">
                            <label class="form-label" for="voucher_no">
                                Voucher No.<span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control readonly" id="voucher_no" name="voucher_no"
                                required
                                value="{{ $count + 1 < 10 ? 'EXP-0' . ($count + 1) : 'EXP-' . ($count + 1) }}"
                                readonly>
                            <div class="text-danger">{{ $errors->first('voucher_no') }}</div>
                        </div>

                        {{-- ══ Expense Type ══ --}}
                        <div class="col-md-2 col-12">
                            <label class="form-label">Expense Type</label>
                            <div class="mt-2 d-flex gap-3">
                                <div>
                                    <input type="radio" value="non_gst" name="expense_type" id="radioNonGst" checked>
                                    <label for="radioNonGst" class="ms-1">Non-GST</label>
                                </div>
                                <div>
                                    <input type="radio" value="gst" name="expense_type" id="radioGst">
                                    <label for="radioGst" class="ms-1">GST</label>
                                </div>
                            </div>
                        </div>

                        {{-- ══ Party ══ --}}
                        <div class="col-md-4 col-12">
                            <label class="form-label" for="party_account_ledger_id">
                                Party Name<span class="text-danger">*</span>
                                <button type="button" class="btn btn-sm btn-primary ms-1" data-bs-toggle="modal"
                                    data-bs-target="#commonPartyModal" data_type="purchase_party">
                                    <i class="ri-add-circle-line"></i>
                                </button>
                            </label>
                            {!! Form::select(
                            'party_account_ledger_id',
                            ['' => '--Select--'] + $partyLedger,
                            old('party_account_ledger_id'),
                            ['class' => 'form-control select2', 'id' => 'party_account_ledger_id', 'required'],
                            ) !!}
                            <small class="text-muted d-block mt-1">
                                Balance: <span id="party_balance" class="fw-bold"></span>
                            </small>
                            <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 class="col-md-3 col-12">
                            <label class="form-label" for="voucher_date">
                                Date<span class="text-danger">*</span>
                            </label>
                            <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">
                            <label class="form-label" for="created_by">
                                Created By<span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control readonly" 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-md-3 col-12">
                            <label class="form-label" for="invoice_number">Invoice Number</label>
                            <input type="text" class="form-control" id="invoice_number" name="invoice_number"
                                value="{{ old('invoice_number') }}">
                            <div class="text-danger">{{ $errors->first('invoice_number') }}</div>
                        </div>


                        <div class="col-md-3 col-12">
                            <label class="form-label" for="doc">Document Upload</label>
                            <input type="file" class="form-control" id="doc" name="doc">
                            <div class="text-danger">{{ $errors->first('doc') }}</div>
                        </div>


                        <div class="col-md-12" id="nonGstSection">
                            <div class="sec-heading">Particulars</div>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle" id="nonGstTable">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="50%">Expense Ledger</th>
                                            <th width="25%">Amount</th>
                                            <th width="20%">Remark</th>
                                            <th width="5%" class="text-center">
                                                <button type="button" id="addNonGstRow"
                                                    class="btn btn-sm btn-primary">
                                                    <i class="ri-add-circle-fill"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="nonGstBody">
                                        <tr>
                                            <td>
                                                {!! Form::select('non_gst_ledger_id[]', ['' => '--Select--'] + $expenseLedger, null, [
                                                'class' => 'form-control select2 nonGstLedger',
                                                ]) !!}
                                            </td>
                                            <td>
                                                <input type="text" name="non_gst_amount[]"
                                                    class="form-control floatnumber nonGstAmount" value="0">
                                            </td>
                                            <td>
                                                <input type="text" name="non_gst_remark[]" class="form-control">
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="2" class="text-end fw-bold">Total</td>
                                            <td>
                                                <input type="text" id="nonGstTotal"
                                                    class="form-control readonly text-end fw-bold" readonly
                                                    value="0.00">
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>


                        <div class="col-md-12" id="gstExpSection" style="display:none;">
                            <div class="sec-heading">Particulars</div>
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle" id="gstExpenseTable">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="25%">Expense Ledger</th>
                                            <th width="15%">Remark</th>
                                            <th width="15%">Taxable Amount</th>
                                            <th width="12%">Tax Rate (%)</th>
                                            <th width="13%">Tax Amount</th>
                                            <th width="15%">Total Amount</th>
                                            <th width="5%" class="text-center">
                                                <button type="button" id="addGstRow" class="btn btn-sm btn-primary">
                                                    <i class="ri-add-circle-fill"></i>
                                                </button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="gstBody">
                                        <tr>
                                            <td>
                                                {!! Form::select('gst_ledger_id[]', ['' => '--Select--'] + $expenseLedger, null, [
                                                'class' => 'form-control select2 gstLedger',
                                                ]) !!}
                                            </td>
                                            <td>
                                                <input type="text" name="gst_remark[]" class="form-control">
                                            </td>
                                            <td>
                                                <input type="text" name="gst_taxable_amount[]"
                                                    class="form-control floatnumber gstTaxable" value="0.00">
                                            </td>
                                            <td>
                                                <input type="hidden" name="gst_tax_slab[]" class="gstTaxSlab"
                                                    value="0">
                                                {!! Form::select('gst_tax_group_id[]', ['' => '--Select--'] + $taxGroup, null, [
                                                'class' => 'form-control select2 gstTaxGroup',
                                                ]) !!}
                                            </td>
                                            <td>
                                                <input type="text" name="gst_tax_amount[]"
                                                    class="form-control readonly gstTaxAmount" readonly
                                                    value="0.00">
                                            </td>
                                            <td>
                                                <input type="text" name="gst_total_amount[]"
                                                    class="form-control readonly gstRowTotal" readonly value="0.00">
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="2" class="text-end fw-bold">Total</td>
                                            <td>
                                                <input type="text" id="totalTaxableValue"
                                                    name="total_taxable_value"
                                                    class="form-control readonly text-end fw-bold" readonly
                                                    value="0.00">
                                            </td>
                                            <td></td>
                                            <td>
                                                <input type="text" id="totalGstTaxAmount"
                                                    name="total_gst_tax_amount"
                                                    class="form-control readonly text-end fw-bold" readonly
                                                    value="0.00">
                                            </td>
                                            <td>
                                                <input type="text" id="totalGstAmount" name="total_gst_amount"
                                                    class="form-control readonly text-end fw-bold" readonly
                                                    value="0.00">
                                            </td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                            {{-- ════ GST BREAKUP — same structure as purchase voucher ════ --}}
                            <div id="gstBreakupSection" style="display:none;">

                                <div id="cgstSgstBlock" style="display:none;">
                                    <div class="row mb-2">
                                        <div class="col-md-8"><label>CGST Input</label></div>
                                        <div class="col-md-4">
                                            <input type="text" name="cgst_input" id="cgst_input"
                                                value="{{ old('cgst_input', 0) }}" readonly
                                                class="form-control form-control-sm text-end fw-semibold">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-8"><label>SGST Input</label></div>
                                        <div class="col-md-4">
                                            <input type="text" name="sgst_input" id="sgst_input"
                                                value="{{ old('sgst_input', 0) }}" readonly
                                                class="form-control form-control-sm text-end fw-semibold">
                                        </div>
                                    </div>
                                </div>

                                <div id="igstBlock" style="display:none;">
                                    <div class="row mb-3">
                                        <div class="col-md-8"><label>IGST Input</label></div>
                                        <div class="col-md-4">
                                            <input type="text" name="igst_input" id="igst_input"
                                                value="{{ old('igst_input', 0) }}" readonly
                                                class="form-control form-control-sm text-end fw-semibold">
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {{-- END GST BREAKUP --}}

                        </div>
                        {{-- END GST SECTION --}}

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

                        {{-- ══ Gross Total ══ --}}
                        <div class="col-12">
                            <div class="row mb-3">
                                <div class="col-md-8"><label class="fw-semibold">Gross Total</label></div>
                                <div class="col-md-4">
                                    <input type="text" name="gross_total" id="gross_total"
                                        value="{{ old('gross_total', 0) }}" readonly
                                        class="form-control form-control-sm text-end fw-semibold">
                                </div>
                            </div>

                            {{-- ══ Round Off ══ --}}
                            {{-- <div class="row mb-2">
                                    <div class="col-md-8"><label>Round Off</label></div>
                                    <div class="col-md-4">
                                        <input type="text" name="round_off" id="round_off"
                                            value="{{ old('round_off', 0) }}"
                            class="form-control form-control-sm text-end">
                        </div>
                    </div> --}}

                    {{-- ══ Net Total ══ --}}
                    <div class="row mb-3">
                        <div class="col-md-8"><label class="fw-bold">Net Total</label></div>
                        <div class="col-md-4">
                            <input type="text" name="net_total" id="net_total" readonly
                                class="form-control form-control-sm text-end fw-bold">
                        </div>
                    </div>

                    {{-- ══ Payment Section ══ --}}
                    <div class="row mb-4 paymentSection">
                        <div class="col-md-8 d-flex flex-column">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <label>Payment Type</label>
                                <button type="button" id="addPayment"
                                    class="btn btn-sm btn-primary">+</button>
                            </div>
                            <div id="paymentTable" class="flex-grow-1"></div>
                        </div>
                        <div class="col-md-4 d-flex flex-column justify-content-end">
                            <input type="text" name="total_paid" id="total_paid"
                                value="{{ old('total_paid', 0) }}" readonly
                                class="form-control form-control-sm text-end fw-semibold">
                        </div>
                    </div>

                    {{-- ══ Discount ══ --}}
                    <div class="row mb-2">
                        <div class="col-md-8"><label>Discount</label></div>
                        <div class="col-md-4">
                            <input type="text" name="discount" id="discount"
                                value="{{ old('discount', 0) }}"
                                class="form-control form-control-sm text-end floatnumber">
                        </div>
                    </div>

                    {{-- ══ Balance ══ --}}
                    <div class="row mt-2">
                        <div class="col-md-8"><label class="fw-bold">Balance</label></div>
                        <div class="col-md-4">
                            <input type="text" name="balance" id="balance"
                                value="{{ old('balance', 0) }}" readonly
                                class="form-control form-control-sm text-end fw-bold">
                        </div>
                    </div>

                </div>

                {{-- ══ Remark ══ --}}
                <div class="col-md-12 col-12">
                    <label class="form-label" for="remark">Remark</label>
                    <textarea class="form-control" name="remark">{{ old('remark') }}</textarea>
                    <div class="text-danger">{{ $errors->first('remark') }}</div>
                </div>

                <div class="col-xl-12 col-md-12 col-12">
                    <button class="btn btn-primary mt-1" id="BtnSubmit" type="submit">Submit</button>
                </div>

                {!! Form::close() !!}

            </div>{{-- card-body --}}
        </div>{{-- card --}}
    </div>
</div>
</div>
</div>
</div>
</div>

@include('common.modal.common_party')

@endsection

@push('footer_script')
<script>
    $(".select2").select2();

    // Remove 0 when input is focused, and restore if left empty
    $(document).on('focus', '.floatnumber', function() {
        if ($(this).val() == '0' || $(this).val() == '0.00') {
            $(this).data('default-val', $(this).val());
            $(this).val('');
        }
    });

    $(document).on('blur', '.floatnumber', function() {
        if ($(this).val() === '') {
            let def = $(this).data('default-val') || '0';
            $(this).val(def);
            $(this).trigger('input'); // Trigger input to recalculate totals
        }
    });

    $(document).on('input', '.floatnumber', function() {
        this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    });

    $(document).ready(function() {

        @if(session('new_party'))
        var newParty = @json(session('new_party'));
        var label = newParty.party_name + (newParty.gst_no ? ' - ' + newParty.gst_no : '');
        $('#party_account_ledger_id')
            .append(new Option(label, newParty.ledger_id, true, true))
            .trigger('change');
        @endif

        // Default show Non-GST
        showSection('non_gst');

        // Toggle sections on radio change
        $('input[name="expense_type"]').on('change', function() {
            showSection($(this).val());
        });
    });

    function showSection(type) {
        if (type === 'non_gst') {
            $('#nonGstSection').show();
            $('#gstExpSection').hide();
        } else {
            $('#nonGstSection').hide();
            $('#gstExpSection').show();
        }
        calculation();
    }

    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 CHANGE — exactly like purchase voucher
    ══════════════════════════════════════════════════════════ */
    $(document).ready(function() {

        let companyStateId = parseInt(@json($companyDetails->state_id));
        let taxGroupNoneId = @json($taxGroupNone->id);

        let initialPartyLedgerId = $('#party_account_ledger_id').val();
        if (initialPartyLedgerId) {
            loadLedgerBalance(initialPartyLedgerId, 'party_balance');
        }

        $('#party_account_ledger_id').on('change', function() {
            let party_account_ledger_id = $(this).val();
            if (!party_account_ledger_id) {
                loadLedgerBalance(null, 'party_balance');
                return;
            }
            loadLedgerBalance(party_account_ledger_id, 'party_balance');

            $.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];

                    let isRegular = partyData && partyData.register_type === 'Regular';

                    if (isCashBank === 'yes' || !isRegular) {

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

                        // Reset GST — same as purchase voucher
                        $('.gstTaxGroup').val(taxGroupNoneId).trigger('change');
                        $('.gstTaxAmount').val('0.00');
                        $('.gstRowTotal').val('0.00');
                        $('#totalGstTaxAmount').val('0.00');
                        $('#totalGstAmount').val('0.00');
                        $('#totalTaxableValue').val('0.00');
                        $('#party_register_type').val('');
                        $('#party_state_id').val('');
                        $('#sgst_input, #cgst_input, #igst_input').val('0.00');
                        $('#gstBreakupSection').hide();
                        $('#cgstSgstBlock').hide();
                        $('#igstBlock').hide();

                    } else {

                        $('.paymentSection').removeClass('shopPayment');
                        $('#is_party_cash_bank').val('no');
                        $('#party_register_type').val('Regular');

                        let partyStateId = parseInt(partyData.state_id || 0);
                        $('#party_state_id').val(partyStateId);

                        // Recalc all existing GST rows with new party state
                        recalcAllGstRows();

                        if (!partyStateId) {
                            $('#gstBreakupSection').hide();
                            $('#cgstSgstBlock').hide();
                            $('#igstBlock').hide();
                        } else if (partyStateId === companyStateId) {
                            $('#gstBreakupSection').show();
                            $('#cgstSgstBlock').show();
                            $('#igstBlock').hide();
                        } else {
                            $('#gstBreakupSection').show();
                            $('#cgstSgstBlock').hide();
                            $('#igstBlock').show();
                        }
                    }

                    calculation();
                },
                error: function(xhr, status, error) {
                    console.error('Party AJAX Error:', status, error);
                }
            });
        });
    });

    /* ══════════════════════════════════════════════════════════
       NON-GST TABLE — ADD / DELETE / TOTAL
    ══════════════════════════════════════════════════════════ */
    let ngIdx = 11;

    $('#addNonGstRow').on('click', function() {
        let row = `<tr>
                <td>
                    <select name="non_gst_ledger_id[]" class="form-control select2 nonGstLedger">
                        <option value="">--Select--</option>
                        @foreach ($expenseLedger as $key => $val)
                            <option value="{{ $key }}">{{ $val }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="text" name="non_gst_amount[]"
                        class="form-control floatnumber nonGstAmount" value="0">
                </td>
                <td>
                    <input type="text" name="non_gst_remark[]" class="form-control">
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger delNonGstRow">
                        <i class="ri-delete-bin-line"></i>
                    </button>
                </td>
            </tr>`;
        $('#nonGstBody').append(row);
        $(".select2").select2();
        ngIdx++;
        calcNonGstTotal();
    });

    $(document).on('input', '.nonGstAmount', function() {
        calcNonGstTotal();
    });

    $(document).on('click', '.delNonGstRow', function() {
        $(this).closest('tr').remove();
        calcNonGstTotal();
    });

    function calcNonGstTotal() {
        let sum = 0;
        $('.nonGstAmount').each(function() {
            sum += parseFloat(this.value) || 0;
        });
        $('#nonGstTotal').val(sum.toFixed(2));
        calculation();
    }

    /* ══════════════════════════════════════════════════════════
       GST TABLE — ADD ROW
    ══════════════════════════════════════════════════════════ */
    let gIdx = 11;

    $('#addGstRow').on('click', function() {

        let taxGroupNoneId = @json($taxGroupNone->id);
        let checkParty = $('#party_register_type').val();
        let isCashBank = $('#is_party_cash_bank').val();

        let taxOptions = `<option value="">--Select--</option>
                @foreach ($taxGroup as $key => $val)
                    <option value="{{ $key }}">{{ $val }}</option>
                @endforeach`;

        let expOptions = `<option value="">--Select--</option>
                @foreach ($expenseLedger as $key => $val)
                    <option value="{{ $key }}">{{ $val }}</option>
                @endforeach`;

        let row = `<tr>
                <td>
                    <select name="gst_ledger_id[]" class="form-control select2 gstLedger">${expOptions}</select>
                </td>
                <td>
                    <input type="text" name="gst_remark[]" class="form-control">
                </td>
                <td>
                    <input type="text" name="gst_taxable_amount[]"
                        class="form-control floatnumber gstTaxable" value="0.00">
                </td>
                <td>
                    <input type="hidden" name="gst_tax_slab[]" class="gstTaxSlab" value="0">
                    <select name="gst_tax_group_id[]" class="form-control select2 gstTaxGroup">${taxOptions}</select>
                </td>
                <td>
                    <input type="text" name="gst_tax_amount[]"
                        class="form-control readonly gstTaxAmount" readonly value="0.00">
                </td>
                <td>
                    <input type="text" name="gst_total_amount[]"
                        class="form-control readonly gstRowTotal" readonly value="0.00">
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger delGstRow">
                        <i class="ri-delete-bin-line"></i>
                    </button>
                </td>
            </tr>`;

        $('#gstBody').append(row);
        $(".select2").select2();

        // If non-regular party → disable tax on new row
        if (isCashBank === 'yes' || checkParty !== 'Regular') {
            $('#gstBody tr:last .gstTaxGroup').val(taxGroupNoneId).attr('disabled', true);
        }

        gIdx++;
    });

    /* ══════════════════════════════════════════════════════════
       GST TAX GROUP CHANGE — fetch slab from server
       same as purchase: passes party_account_ledger_id
    ══════════════════════════════════════════════════════════ */
    $(document).on('change', '.gstTaxGroup', function() {
        let tax_group_id = $(this).val();
        let $row = $(this).closest('tr');
        let party_ledger_id = $('#party_account_ledger_id').val() || 0;

        if (!tax_group_id) {
            $row.find('.gstTaxSlab').val(0);
            calcGstRow($row);
            return;
        }

        $.ajax({
            url: '{{ route("getTaxGroupDetailById") }}',
            type: 'GET',
            data: {
                tax_group_id,
                party_account_ledger_id: party_ledger_id
            },
            success: function(result) {
                $row.find('.gstTaxSlab').val(result.tax_slab || 0);
                calcGstRow($row);
            },
            error: function(x, s, e) {
                console.error('Tax group AJAX Error:', e);
            }
        });
    });
    $(document).on('input', '.gstTaxable', function() {
        calcGstRow($(this).closest('tr'));
    });
    $(document).on('click', '.delGstRow', function() {
        $(this).closest('tr').remove();
        calcGstTotals();
    });

    function calcGstRow($row) {
        let party_register_type = $('#party_register_type').val();
        let taxable = parseFloat($row.find('.gstTaxable').val()) || 0;
        let slab = parseFloat($row.find('.gstTaxSlab').val()) || 0;

        if (party_register_type === 'Regular') {
            let taxAmt = (taxable * slab / 100);
            $row.find('.gstTaxAmount').val(taxAmt.toFixed(2));
            $row.find('.gstRowTotal').val((taxable + taxAmt).toFixed(2));
        } else {
            $row.find('.gstTaxAmount').val('0.00');
            $row.find('.gstRowTotal').val(taxable.toFixed(2));
        }

        calcGstTotals();
    }

    function recalcAllGstRows() {
        $('#gstBody tr').each(function() {
            calcGstRow($(this));
        });
    }

    function calcGstTotals() {
        let taxableSum = 0,
            taxAmtSum = 0,
            totalSum = 0;

        $('#gstBody tr').each(function() {
            taxableSum += parseFloat($(this).find('.gstTaxable').val()) || 0;
            taxAmtSum += parseFloat($(this).find('.gstTaxAmount').val()) || 0;
            totalSum += parseFloat($(this).find('.gstRowTotal').val()) || 0;
        });

        $('#totalTaxableValue').val(taxableSum.toFixed(2));
        $('#totalGstTaxAmount').val(taxAmtSum.toFixed(2));
        $('#totalGstAmount').val(totalSum.toFixed(2));

        updateGstBreakup(taxAmtSum);
        calculation();
    }

    function updateGstBreakup(totalTax) {
        if (totalTax === undefined) {
            totalTax = parseFloat($('#totalGstTaxAmount').val()) || 0;
        }
        let companyStateId = parseInt(@json($companyDetails->state_id));
        let partyStateId = parseInt($('#party_state_id').val()) || 0;
        $('#cgst_input, #sgst_input, #igst_input').val('0.00');

        if (!partyStateId) {
            $('#gstBreakupSection').hide();
            $('#cgstSgstBlock').hide();
            $('#igstBlock').hide();
            return;
        }

        $('#gstBreakupSection').show();

        if (partyStateId === companyStateId) {
            let cgst = (totalTax / 2).toFixed(2);
            let sgst = (totalTax - parseFloat(cgst)).toFixed(2);
            $('#cgst_input').val(cgst);
            $('#sgst_input').val(sgst);
            $('#cgstSgstBlock').show();
            $('#igstBlock').hide();
        } else {
            $('#igst_input').val(totalTax.toFixed(2));
            $('#cgstSgstBlock').hide();
            $('#igstBlock').show();
        }
    }

    $(document).ready(function() {
        let k = 11;

        $('#addPayment').on('click', function() {
            addPayment(0);
            calculation();
        });

        $('#total_paid').on('change', function() {
            addPayment($(this).val());
            calculation();
        });

        function addPayment(paidAmount) {
            let newRow = $('<div class="d-flex">');
            let cols =
                '<select name="payment_account_ledger_id[]" style="width:45%;" class="form-control select2" id="payment_account_ledger_id_' +
                k + '" 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 totalPaidAmount" value="' +
                parseFloat(paidAmount).toFixed(2) + '" required type="text" id="paid_amount_' + k + '">' +
                '<button type="button" id="del_payment_btn_' + k +
                '" style="border-radius:15px;height:20px;width:20px;margin-top:10px;margin-left:5px;" class="btn btn-danger btn-sm"><i class="ri-delete-bin-2-line ri-sm" style="position:relative;bottom:6px;right:4px;"></i></button>';
            k++;
            newRow.append(cols);
            $('#paymentTable').append(newRow);
            $(".select2").select2();
            newRow.find('.floatnumber').on('input', function() {
                this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
            });
        }

        $(document).on('input', "input[id^='paid_amount_']", function() {
            paymentCal();
        });

        $(document).on('click', "button[id^='del_payment_btn_']", function() {
            $(this).closest('.d-flex').remove();
            paymentCal();
        });
    });

    function paymentCal() {
        let total = 0;
        $('.totalPaidAmount').each(function() {
            total += parseFloat(this.value) || 0;
        });
        $('#total_paid').val(total.toFixed(2));
        calculation();
    }

    $('#round_off').on('change input', function() {
        calculation();
    });
    $('#discount').on('input', function() {
        calculation();
    });

    /* ══════════════════════════════════════════════════════════
       FINAL CALCULATION — same formula as purchase voucher
       non_gst : gross = nonGstTotal
       gst     : gross = taxable + taxAmt
       net     = gross + round_off
       balance = net - paid - discount
    ══════════════════════════════════════════════════════════ */
    function calculation() {
        let expenseType = $('input[name="expense_type"]:checked').val();
        let gross_total = 0;

        if (expenseType === 'non_gst') {

            gross_total = parseFloat($('#nonGstTotal').val()) || 0;

            // Hide GST breakup when in non-gst mode
            $('#gstBreakupSection').hide();
            $('#cgstSgstBlock').hide();
            $('#igstBlock').hide();
            $('#cgst_input, #sgst_input, #igst_input').val('0.00');
            $('#finalTaxTotal').val('0.00');

        } else {

            let taxable = parseFloat($('#totalTaxableValue').val()) || 0;
            let taxAmt = parseFloat($('#totalGstTaxAmount').val()) || 0;
            gross_total = taxable + taxAmt;

            // GST split — same as purchase calculation()
            let companyStateId = parseInt(@json($companyDetails->state_id));
            let partyStateId = parseInt($('#party_state_id').val()) || 0;

            $('#finalTaxTotal').val(taxAmt.toFixed(2));

            if (partyStateId && partyStateId === companyStateId) {
                let cgst = (taxAmt / 2).toFixed(2);
                let sgst = (taxAmt - parseFloat(cgst)).toFixed(2);
                $('#cgst_input').val(cgst);
                $('#sgst_input').val(sgst);
                $('#igst_input').val('0.00');
            } else {
                $('#cgst_input').val('0.00');
                $('#sgst_input').val('0.00');
                $('#igst_input').val(taxAmt.toFixed(2));
            }
        }

        $('#gross_total').val(gross_total.toFixed(2));

        let roundOff = parseFloat($('#round_off').val()) || 0;
        let netAmount = gross_total + roundOff;
        $('#net_total').val(netAmount.toFixed(2));

        // Cash/bank party → auto-set payment
        if ($('#is_party_cash_bank').val() === 'yes') {
            $('#total_paid').val(netAmount.toFixed(2));
        }

        let total_paid = parseFloat($('#total_paid').val()) || 0;
        let discount = parseFloat($('#discount').val()) || 0;
        $('#balance').val((netAmount - total_paid - discount).toFixed(2));
    }
</script>

<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    $(".datepicker").daterangepicker({
        singleDatePicker: true,
        startDate: moment().startOf("hour"),
        endDate: moment().startOf("hour").add(32, "hour"),
        locale: {
            format: "DD-MM-YYYY"
        }
    });
</script>
@endpush