{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}
{% include 'includes/datatable_css.html' %}

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">Voucher</h4>
            <!-- <a href="/voucher/add"><button type="button" class="btn btn-success btn-sm">Add</button></a>  &nbsp -->
            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                data-bs-target="#add_modal">Add</button> &nbsp
            <!-- <button type="button" class="btn btn-primary btn-sm" onclick="refresh_data()">Refresh</button> -->
        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">Master</li>
                <li class="breadcrumb-item active" aria-current="page">Voucher</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-header border-bottom">
            <div class="row mt-2">
                <div class="col-3">
                    <label class="form-label">Date Filter</label>
                    <input type="checkbox" id="is_date" checked>
                    <input type="text" id="date_filter" class="form-control" style="cursor: pointer;" />
                    <input type="hidden" id="from_date" name="from_date">
                    <input type="hidden" id="to_date" name="to_date">
                </div>

                <div class="col-md-3 mb-5 form-control-validation">
                    <label class="form-label" for="supply_store_id"> Voucher Type</label>
                    <select class="select2  form-control" id="filter_voucher" name="filter_voucher">
                        <option value="">Select</option>
                        <option value="receipt">Receipt</option>
                        <option value="payment">Payment</option>
                        <option value="debit">Debit Note</option>
                        <option value="credit">Credit Note</option>
                        <option value="advance">Advance Amount</option>
                    </select>
                </div>




                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()"> Refresh</button>

                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-bordered" id="datatable">
                    <thead>
                        {% csrf_token %}
                        <tr>
                            <th>Id</th>
                            <th>Action</th>
                            <th>Voucher</th>
                            <th>Voucher DateTime</th>
                            <th>Voucher Type</th>
                            <th>Supply Store</th>
                            <th>Supplier</th>
                            <th>Customer</th>
                            <th>Finance</th>
                            <th>Card</th>
                            <th>Payment Mode</th>
                            <th>Payment Remarks</th>
                            <th>Payable Amount</th>
                            <th>Receivable Amount</th>
                            <th>Remarks</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <th colspan="12" class="text-end fw-bold">Total :</th>
                        <th id="footer_payable" class="text-end fw-bold"></th>
                        <th id="footer_receivable" class="text-end fw-bold"></th>
                        <th id="footer_remarks" class="text-end fw-bold"></th>
                        <th id="footer_status" class="text-end fw-bold"></th>

                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Add Voucher</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="add_form">
                    <div class="modal-body">
                        {% csrf_token %}

                        <div class="row">

                            <div class="col-md-12 form-control-validation mb-6 mt-1">
                                <label class="form-label d-block mb-2" for="payment_mode">Voucher Type</label>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="voucher_type" id="receipt"
                                        value="receipt">
                                    <label class="form-check-label" for="payment_cash">Receipt</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="voucher_type" id="payment"
                                        value="payment">
                                    <label class="form-check-label" for="payment_cheque">Payment</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="voucher_type" id="debit"
                                        value="debit">
                                    <label class="form-check-label" for="payment_bank">Debit Note</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="voucher_type" id="credit"
                                        value="credit">
                                    <label class="form-check-label" for="payment_bank">Credit Note</label>
                                </div>
                            </div>



                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supply_store_id">Supply Store</label>
                                <select class="select2  form-control" id="supply_store_id" name="supply_store_id">
                                    <option value="">Select</option>
                                    {% for k in branch %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Supplier</label>
                                <select class="select2  form-control" id="supplier_id" name="supplier_id">
                                    <option value="">Select</option>
                                    {% for k in supplier %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Customer</label>
                                <select class="select2  form-control" id="customer_id" name="customer_id">
                                    <option value="">Select</option>
                                    {% for k in customer %}
                                    <option value="{{k.id}}">{{k.name}}-{{k.phone}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Finance</label>
                                <select class="select2  form-control" id="finance_id" name="finance_id">
                                    <option value="">Select</option>
                                    {% for k in finance %}
                                    {% if k.f_type == 'finance' %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endif %}
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Card</label>
                                <select class="select2  form-control" id="card_id" name="card_id">
                                    <option value="">Select</option>
                                    {% for k in finance %}
                                    {% if k.f_type == 'card' %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endif %}
                                    {% endfor %}
                                </select>
                            </div>



                            <div class="col-md-3 form-control-validation mb-6">
                                <label class="form-label" for="payable_amount">Payable Amount </label>
                                <input type="number" id="payable_amount" class="form-control" name="payable_amount" />
                            </div>

                            <div class="col-md-3 form-control-validation mb-6">
                                <label class="form-label" for="amount">Receivable Amount </label>
                                <input type="number" id="receivable_amount" class="form-control"
                                    name="receivable_amount" />
                            </div>

                            <div class="col-md-3 form-control-validation mb-6">
                                <label class="form-label" for="amount">Outstanding </label>
                                <input type="number" id="outstanding" class="form-control" name="outstanding"
                                    readonly />
                            </div>
                            <div class="col-12" id="payment_section_container">
                                <div class="row">
                                    <div class="col-md-3 form-control-validation mb-6 mt-1">
                                        <label class="form-label d-block mb-2" for="payment_mode">Payment Mode</label>

                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment_mode"
                                                id="payment_cash" value="cash" checked>
                                            <label class="form-check-label" for="payment_cash">Cash</label>
                                        </div>

                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment_mode"
                                                id="payment_bank" value="bank_transfer">
                                            <label class="form-check-label" for="payment_bank">Bank Transfer</label>
                                        </div>

                                    </div>
                                    <div class="col-md-3 mb-5 form-control-validation">
                                        <label class="form-label" for="supplier_id"> Bank </label>
                                        <select class="select2  form-control" id="bank_id" name="bank_id" disabled>
                                            <option value="">Select</option>
                                            {% for k in bank %}
                                            <option value="{{k.id}}">{{k.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>



                            <div class="col-md-6 form-control-validation mb-6 mt-5">
                                <label class="form-label" for="remarks">Remarks</label>
                                <textarea class="form-control" id="remarks" rows="3" name="remarks"></textarea>
                            </div>

                            <div class="col-md-6 form-control-validation mb-6 mt-5">
                                <label class="form-label" for="supplier_id">Payment Remarks</label>
                                <textarea class="form-control" id="payment_remarks" rows="3"
                                    name="payment_remarks"></textarea>
                            </div>


                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="branch_id" name="branch_id" value="{{ request.session.branch_id }}">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="edit_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Edit Voucher</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="edit_form">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="row">

                            <div class="col-md-12 form-control-validation mb-6 mt-1">
                                <label class="form-label d-block mb-2" for="payment_mode">Voucher Type</label>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="edit_voucher_type"
                                        id="edit_receipt" value="receipt">
                                    <label class="form-check-label" for="payment_cash">Receipt</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="edit_voucher_type"
                                        id="edit_payment" value="payment">
                                    <label class="form-check-label" for="payment_cheque">Payment</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="edit_voucher_type"
                                        id="edit_debit" value="debit">
                                    <label class="form-check-label" for="payment_bank">Debit Note</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="edit_voucher_type"
                                        id="edit_credit" value="credit">
                                    <label class="form-check-label" for="payment_bank">Credit Note</label>
                                </div>


                            </div>
                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supply_store_id">Supply Store</label>
                                <select class="select2  form-control" id="edit_supply_store_id" name="supply_store_id">
                                    <option value="">Select</option>
                                    {% for k in branch %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Supplier</label>
                                <select class="select2  form-control" id="edit_supplier_id" name="supplier_id">
                                    <option value="">Select</option>
                                    {% for k in supplier %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Customer</label>
                                <select class="select2  form-control" id="edit_customer_id" name="customer_id">
                                    <option value="">Select</option>
                                    {% for k in customer %}
                                    <option value="{{k.id}}">{{k.name}}-{{k.phone}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Finance</label>
                                <select class="select2  form-control" id="edit_finance_id" name="finance_id">
                                    <option value=" ">Select</option>
                                    {% for k in finance %}
                                    {% if k.f_type == 'finance' %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endif %}
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-3 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_id"> Card</label>
                                <select class="select2  form-control" id="edit_card_id" name="card_id">
                                    <option value="">Select</option>
                                    {% for k in finance %}
                                    {% if k.f_type == 'card' %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endif %}
                                    {% endfor %}
                                </select>
                            </div>


                            <div class="col-md-3 form-control-validation mb-6">
                                <label class="form-label" for="payable_amount">Payable Amount </label>
                                <input type="number" id="edit_payable_amount" class="form-control"
                                    name="payable_amount" />
                            </div>

                            <div class="col-md-3 form-control-validation mb-6">
                                <label class="form-label" for="amount">Receivable Amount </label>
                                <input type="number" id="edit_receivable_amount" class="form-control"
                                    name="receivable_amount" />
                            </div>

                            <div class="col-md-3 form-control-validation mb-6">
                                <label class="form-label" for="amount">Outstanding </label>
                                <input type="number" id="edit_outstanding" class="form-control" name="outstanding" />
                            </div>



                            <div class="col-12" id="edit_payment_section_container">
                                <div class="row">
                                    <div class="col-md-3 form-control-validation mb-6 mt-1">
                                        <label class="form-label d-block mb-2" for="payment_mode">Payment Mode</label>

                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment_mode"
                                                id="edit_payment_cash" value="cash" checked>
                                            <label class="form-check-label" for="payment_cash">Cash</label>
                                        </div>

                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment_mode"
                                                id="edit_payment_bank" value="bank_transfer">
                                            <label class="form-check-label" for="payment_bank">Bank Transfer</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-5 form-control-validation">
                                        <label class="form-label" for="supplier_id"> Bank </label>
                                        <select class="select2  form-control" id="edit_bank_id" name="bank_id" disabled>
                                            <option value="">Select</option>
                                            {% for k in bank %}
                                            <option value="{{k.id}}">{{k.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->





                            <div class="col-md-6 form-control-validation mb-6 mt-5">
                                <label class="form-label" for="remarks">Remarks</label>
                                <textarea class="form-control" id="edit_remarks" rows="3" name="remarks"></textarea>
                            </div>

                            <div class="col-md-6 form-control-validation mb-6 mt-5">
                                <label class="form-label" for="supplier_id">Payment Remarks</label>
                                <textarea class="form-control" id="edit_payment_remarks" rows="3"
                                    name="payment_remarks"></textarea>
                            </div>


                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="edit_id" name="voucher_id">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}

<script>
    var table;

    $(document).ready(function () {
        initializeDateRangePicker('this_month');
        refresh_data();
    });


    function initializeDataTable() {
        table = $('#datatable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],

            "columns": [
                { "data": "id", "title": " ID #" },
                { "data": "action", "title": "Action" },
                { "data": "voucher_no", "title": "Voucher No" },
                { "data": "date", "title": "DateTime" },
                { "data": "type", "title": "Voucher Type" },
                { "data": "supply", "title": "Supply Store" },
                { "data": "supplier", "title": "Supplier" },
                { "data": "customer", "title": "Customer" },
                { "data": "finance", "title": "Finance" },
                { "data": "card", "title": "Card" },
                { "data": "remarks", "title": "Remarks" },
                { "data": "mode", "title": "Payment Mode" },
                { "data": "amount", "title": "Payable Amount" },
                { "data": "receivable", "title": "Receivable Amount" },
                { "data": "payment", "title": "Payment Remarks" },
                { "data": "status", "title": "Status" }
            ],
            "ajax": {
                "url": '/ajax_voucher_view/',
                "type": "POST",
                "data": function (data) {
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    const isDateChecked = $('#is_date').is(":checked");
                    const fromDate = $('#from_date').val();
                    const toDate = $('#to_date').val();
                    const voucherType = $('#filter_voucher').val();
                    if (isDateChecked && fromDate && toDate) {
                        data.from_date = fromDate;
                        data.to_date = toDate;
                    }
                    if (voucherType) data.voucher_type = voucherType;


                },
                dataSrc: function (response) {
                    if (response.message === 'permission') {
                        showSweetAlert('warning', response.error_message || 'You do not have permission to view the user role.');
                        table.clear().draw();
                        return [];
                    }

                    return response.data || [];
                }
            },
            footerCallback: function (row, data, start, end, display) {
                const api = this.api();

                const intVal = function (i) {
                    return typeof i === 'string'
                        ? parseFloat(i.replace(/[^0-9.-]+/g, '')) || 0
                        : typeof i === 'number'
                            ? i
                            : 0;
                };

                const Payable = data.reduce((sum, row) => sum + intVal(row.amount), 0);
                const Receivable = data.reduce((sum, row) => sum + intVal(row.receivable), 0);


                // Upate footer cells
                $('#footer_payable').html(Payable.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_receivable').html(Receivable.toLocaleString(undefined, { minimumFractionDigits: 2 }));
                $('#footer_remarks').html('-');
                $('#footer_status').html('-');


            },
        });
    }

    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }





    function handleVoucherType(prefix = '') {
        // Cache selectors
        const store = $(`#${prefix}supply_store_id`);
        const supplier = $(`#${prefix}supplier_id`);
        const customer = $(`#${prefix}customer_id`);
        const finance = $(`#${prefix}finance_id`);
        const card = $(`#${prefix}card_id`);
        const payable = $(`#${prefix}payable_amount`);
        const receivable = $(`#${prefix}receivable_amount`);

        // Disable all by default
        store.prop('disabled', true);
        supplier.prop('disabled', true);
        customer.prop('disabled', true);
        payable.prop('disabled', true);
        finance.prop('disabled', true);
        card.prop('disabled', true);
        receivable.prop('disabled', true);

        const selected = $(`input[name="${prefix}voucher_type"]:checked`).val();

        if (selected === 'receipt') {
            customer.prop('disabled', false);
            store.prop('disabled', false);
            finance.prop('disabled', false);
            card.prop('disabled', false);
            receivable.prop('disabled', false);
        } else if (selected === 'payment') {
            supplier.prop('disabled', false);
            store.prop('disabled', false);
            payable.prop('disabled', false);
        } else if (selected === 'credit') {
            store.prop('disabled', false);
            customer.prop('disabled', false);
            finance.prop('disabled', false);
            card.prop('disabled', false);
            receivable.prop('disabled', false);

        } else if (selected === 'debit') {
            supplier.prop('disabled', false);
            store.prop('disabled', false);
            payable.prop('disabled', false);
        }
        else if (selected === 'advance') {
            receivable.prop('disabled', false);
        }

        // Hide payment section for non-monetary voucher types
        const paymentSection = $(`#${prefix}payment_section_container`);
        if (selected === 'debit' || selected === 'credit' || selected === 'advance') {
            paymentSection.hide();
        } else {
            paymentSection.show();
        }
    }


    $(function () {
        // Bind voucher type changes
        $('input[name="voucher_type"]').on('change', function () {
            handleVoucherType('');
        });

        $('input[name="edit_voucher_type"]').on('change', function () {
            handleVoucherType('edit_');
        });

        // Initial run (in case default is pre-selected)
        handleVoucherType('');
        handleVoucherType('edit_');
    });

    function validateAndSubmitVoucherForm(formId, prefix, url, modalId, title) {

        const voucherType = $(`input[name="${prefix}voucher_type"]:checked`).val();

        const store = $(`#${prefix}supply_store_id`);
        const supplier = $(`#${prefix}supplier_id`);
        const customer = $(`#${prefix}customer_id`);
        const finance = $(`#${prefix}finance_id`);
        const card = $(`#${prefix}card_id`);
        const payable = $(`#${prefix}payable_amount`);
        const receivable = $(`#${prefix}receivable_amount`);

        const storeSelected = !!store.val();
        const supplierSelected = !!supplier.val();
        const customerSelected = !!customer.val();
        const financeSelected = !!finance.val();
        const cardSelected = !!card.val();

        const payableEntered = parseFloat(payable.val()) > 0;
        const receivableEntered = parseFloat(receivable.val()) > 0;

        let errorMessage = '';

        if (voucherType === 'receipt') {
            if ([customerSelected, storeSelected].filter(Boolean).length !== 1) {
                errorMessage = 'Select only one: Customer or Store for Receipt.';
            } else if (!receivableEntered) {
                errorMessage = 'Enter Receivable Amount for Receipt.';
            } else if ([financeSelected, cardSelected].filter(Boolean).length !== 1) {
                errorMessage = 'Select only one: Finance or Card for Receipt.';
            }

        } else if (voucherType === 'payment') {
            if ([supplierSelected, storeSelected].filter(Boolean).length !== 1) {
                errorMessage = 'Select only one: Supplier or Store for Payment.';
            } else if (!payableEntered) {
                errorMessage = 'Enter Payable Amount for Payment.';
            }

        } else if (voucherType === 'debit') {
            if ([customerSelected, storeSelected].filter(Boolean).length !== 1) {
                errorMessage = 'Select only one: Customer or Store for Debit.';
            } else if (!payableEntered) {
                errorMessage = 'Enter Payable Amount for Debit.';
            }

        } else if (voucherType === 'credit') {
            if ([supplierSelected, storeSelected].filter(Boolean).length !== 1) {
                errorMessage = 'Select only one: Supplier or Store for Credit.';
            } else if (!receivableEntered) {
                errorMessage = 'Enter Receivable Amount for Credit.';
            } else if ([financeSelected, cardSelected].filter(Boolean).length !== 1) {
                errorMessage = 'Select only one: Finance or Card for Credit.';
            }
        }
        if (errorMessage) {
            showToast('warning', errorMessage);
            return;
        }

        handleFormSubmit(document.getElementById(formId), url, modalId, formId, true, title);

        // $(`#${formId}`)[0].reset();
        refresh_data();
    }


    // Hook for Add Form
    $("#add_form").submit(function (e) {
        e.preventDefault();
        validateAndSubmitVoucherForm('add_form', '', '/add_voucher/', 'add_modal', 'Voucher Details');
    });



    $("#edit_form").submit(function (e) {
        e.preventDefault();
        validateAndSubmitVoucherForm('edit_form', 'edit_', '/voucher_update/', 'edit_modal', 'Update Voucher Details');
    });


    function delete_data(id) {
        deleteEntity('/voucher_delete/', id, '{{ csrf_token }}', 'Voucher Details');
    }


    function edit_data(id, name) {
        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;
        $.post('/voucher_edit/', { id: id, csrfmiddlewaretoken: tkn }, function (res) {
            $('#edit_id').val(res.id);

            $(`input[name="edit_voucher_type"][value="${res.voucher_type}"]`).prop('checked', true);
            handleVoucherType('edit_');

            if (res.supply_branch_id != 0) {
                $('#edit_supply_store_id').val(res.supply_branch_id).trigger('change');
            }
            if (res.supplier_id != 0) {
                $('#edit_supplier_id').val(res.supplier_id).trigger('change');
            }
            if (res.customer_id != 0) {
                $('#edit_customer_id').val(res.customer_id).trigger('change');
            }

            if (res.finance_id != 0) {
                $('#edit_finance_id').val(res.finance_id).trigger('change');
            }
            if (res.card_id != 0) {
                $('#edit_card_id').val(res.card_id).trigger('change');
            }
            bank_id = res.bank_id
            if (bank_id != 0) {
                $('#edit_bank_id').val(bank_id).trigger('change');
            }
            toggleBankField('#edit_modal');
            $(`input[name="payment_mode"][value="${res.payment_mode}"]`).prop('checked', true).trigger('change');
            $('#edit_payable_amount').val(res.payable_amount);
            $('#edit_outstanding').val(res.outstanding);
            $('#edit_receivable_amount').val(res.receivable_amount);
            $('#remarks').val(res.remarks);
            $('#edit_payment_remarks').val(res.payment_remarks);
            $('#edit_is_active').val(res.is_active).trigger("change");

            $('#edit_modal').modal('show');
        });
    }




    function toggleBankField(container = document) {
        const paymentMode = $(container)
            .find('input[name="payment_mode"]:checked')
            .val();

        // Detect correct bank field (add or edit)
        const bankSelect = $(container).find('#edit_bank_id').length
            ? $(container).find('#edit_bank_id')
            : $(container).find('#bank_id');

        if (paymentMode === 'bank_transfer') {
            bankSelect.prop('disabled', false);
        } else {
            bankSelect.prop('disabled', true).val('').trigger('change');
        }
    }

    $(document).on('change', 'input[name="payment_mode"]', function () {
        toggleBankField($(this).closest('.modal, body'));
    });


    // Party Dropdown Mutual Exclusion and Outstanding Fetch
    $(document).ready(function () {
        const addPartyFields = [
            '#supply_store_id', '#supplier_id', '#customer_id', '#finance_id', '#card_id'
        ];
        const editPartyFields = [
            '#edit_supply_store_id', '#edit_supplier_id', '#edit_customer_id', '#edit_finance_id', '#edit_card_id'
        ];

        function handlePartyChange(fields, outstandingField) {
            $(fields.join(', ')).on('change', function () {
                const selectedFields = fields.filter(f => $(f).val() && $(f).val() !== '' && $(f).val() !== '0');

                if (selectedFields.length > 1) {
                    // Multiple selected - Show Alert
                    showToast('warning', 'More than one party selected! Please select only one party to continue.');
                    $(outstandingField).val('0.00');
                } else if (selectedFields.length === 1) {
                    const $activeField = $(selectedFields[0]);
                    const currentVal = $activeField.val();
                    const data = {
                        csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()
                    };

                    const id = $activeField.attr('id').replace('edit_', '');
                    if (id === 'supply_store_id') data.supply_branch_id = currentVal;
                    else if (id === 'supplier_id') data.supplier_id = currentVal;
                    else if (id === 'customer_id') data.customer_id = currentVal;
                    else if (id === 'finance_id') data.finance_id = currentVal;
                    else if (id === 'card_id') data.card_id = currentVal;

                    $.post('/ajax_get_outstanding/', data, function (res) {
                        $(outstandingField).val(res.outstanding.toFixed(2));
                    });
                } else {
                    // Zero or Multiple selected - Clear Outstanding field
                    $(outstandingField).val('0.00');
                }
            });
        }

        handlePartyChange(addPartyFields, '#outstanding');
        handlePartyChange(editPartyFields, '#edit_outstanding');
    });

</script>