{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.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>

        </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-body">
            <div class="row container" style="padding-left: 10%;padding-right: 10%; padding-top: 5%;">
                <div class="col-12">
                    <form id="add_form" class="row g-6 pt-5">
                        {% csrf_token %}


                        <div class="row">

                            <div class="col-md-6 mb-5 form-control-validation">
                                <label class="form-label" for="po_date">Voucher Type </label>
                                <select class="select2  form-control" id="voucher_type" name="voucher_type" required>
                                    <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>
                                </select>
                            </div>

                            <div class="col-md-6 mb-5 form-control-validation">
                                <label class="form-label" for="supplier_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-6 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-6 form-control-validation mb-6">
                                <label class="form-label" for="payable_amount">Payable Amount (₹)</label>
                                <input type="text" id="payable_amount" class="form-control" name="payable_amount"
                                    readonly />
                            </div>

                            <div class="col-md-6 form-control-validation mb-6">
                                <label class="form-label" for="amount"> Amount (₹)</label>
                                <input type="text" id="amount" class="form-control" name="amount" />
                            </div>
                            <div class="col-md-6 form-control-validation mb-6">
                                <button type="button" class="btn btn-success mt-5" onclick="LoadBill()">Load
                                    Bill</button>
                            </div>



                            <div class="col-md-12 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">
                                    <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_cheque"
                                        value="cheque">
                                    <label class="form-check-label" for="payment_cheque">Cheque</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="payment_mode" id="payment_dd"
                                        value="dd">
                                    <label class="form-check-label" for="payment_dd">DD</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>

                                <!-- Cheque Details -->
                                <div id="chequeDetails" class="row mt-3" style="display: none;">
                                    <div class="col-md-6 mb-5">
                                        <label for="cheque_number" class="form-label">Cheque Number</label>
                                        <input type="text" class="form-control" id="cheque_number" name="cheque_number">
                                    </div>
                                    <div class="col-md-6 mb-5">
                                        <label for="cheque_date" class="form-label">Cheque Date</label>
                                        <input type="date" class="form-control" id="cheque_date" name="cheque_date">
                                    </div>
                                </div>

                                <!-- Bank Transfer Details -->
                                <div id="bankDetails" class="row mt-3" style="display: none;">
                                    <div class="col-md-6 mb-5">
                                        <label for="bank_name" class="form-label">Bank Name</label>
                                        <input type="text" class="form-control" id="bank_name" name="bank_name">
                                    </div>
                                    <div class="col-md-6 mb-5">
                                        <label for="account_number" class="form-label">Account Number</label>
                                        <input type="text" class="form-control" id="account_number"
                                            name="account_number">
                                    </div>
                                    <div class="col-md-6 mb-5">
                                        <label for="ifsc_code" class="form-label">IFSC Code</label>
                                        <input type="text" class="form-control" id="ifsc_code" name="ifsc_code">
                                    </div>
                                    <div class="col-md-6 mb-6">
                                        <label for="transaction_date" class="form-label">Transaction Date</label>
                                        <input type="date" class="form-control" id="transaction_date"
                                            name="transaction_date">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="transfer_mode" class="form-label">Payment Mode</label>
                                        <select class="form-control" id="transfer_mode" name="transfer_mode">
                                            <option value="">Select</option>
                                            <option value="NEFT">NEFT</option>
                                            <option value="RTGS">RTGS</option>
                                            <option value="IMPS">IMPS</option>
                                        </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>

                    </form>
                </div>


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



</div>

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

<script>

    $(document).ready(function () {
        togglePaymentModeFields();

        $('input[name="payment_mode"]').on('change', function () {
            togglePaymentModeFields();
        });


        $('#supply_store_id').prop('disabled', true);
        $('#supplier_id').prop('disabled', true);

        $('#voucher_type').on('change', toggleVoucherTypeFields);
    });



    function togglePaymentModeFields() {
        const selected = $('input[name="payment_mode"]:checked').val();
        if (selected === 'cheque') {
            $('#chequeDetails').slideDown();
        } else {
            $('#chequeDetails').slideUp();
        }

        if (selected === 'bank_transfer') {
            $('#bankDetails').slideDown();
        } else {
            $('#bankDetails').slideUp();
        }
    }


    function toggleVoucherTypeFields() {
        const voucherType = $('#voucher_type').val();
        const $supplyStore = $('#supply_store_id');
        const $supplier = $('#supplier_id');
        $supplyStore.prop('disabled', true);
        $supplier.prop('disabled', true);

        if (voucherType === 'receipt' || voucherType === 'debit') {
            $supplyStore.prop('disabled', false);
        } else if (voucherType === 'payment' || voucherType === 'credit') {
            $supplier.prop('disabled', false);
        }
    }


    function LoadStoreAmount() {
        var store_id = $('#supply_store_id').val();
        var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;

        $.ajax({
            type: 'POST',
            url: '/get_store_amount/',
            data: {
                'store_id': store_id,
                'csrfmiddlewaretoken': csrfToken
            },
            success: function (data) {
                if (data.payable_amount !== undefined) {
                    $('#payable_amount').val(data.payable_amount); // Set the payable amount in the input field
                }
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }


    function LoadSupplierAmount() {
        var supplier_id = $('#supplier_id').val();
        var csrfToken = document.getElementsByName('csrfmiddlewaretoken')[0].value;

        $.ajax({
            type: 'POST',
            url: '/get_supplier_amount/',
            data: {
                'supplier_id': supplier_id,
                'csrfmiddlewaretoken': csrfToken
            },
            success: function (data) {
                if (data.payable_amount !== undefined) {
                    $('#payable_amount').val(data.payable_amount); // Set the payable amount in the input field
                }
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });


        function LoadBill() {
            const customerId = $('#supply_store_id').val();
            const supplierId = $('#supplier_id').val();

            if (!customerId && !supplierId) {
                alert('Please select a customer or supplier first.');
                return;
            }

            $.ajax({
                url: '/load_bill/',
                type: 'GET',
                data: {
                    'store_id': customerId,
                    'supplier_id': supplierId,
                    'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()
                },
                success: function (response) {
                    billData = response;
                    $('#bill_table_body').empty();

                    let initialAmount = parseFloat($('#amount').val()) || 0;
                    let advance = parseFloat(response.advance_amount) || 0;
                    let remainingAmount = initialAmount + advance;

                    response.bills.forEach(function (bill) {
                        let billAmount = parseFloat(bill.bill_amount) || 0;
                        let amountToDeduct = 0;

                        if (remainingAmount > 0) {
                            if (remainingAmount >= billAmount) {
                                amountToDeduct = billAmount;
                                remainingAmount -= billAmount;
                            } else {
                                amountToDeduct = remainingAmount;
                                remainingAmount = 0;
                            }
                        }

                        const balanceAmount = billAmount - amountToDeduct;
                        console.log('b-amt:', balanceAmount);

                        const row = `
                    <tr>
                        <td><input type="checkbox" class="bill-checkbox" checked></td>
                        <td>${bill.bill_date}</td>
                        <td>${bill.bill_number}</td>
                        <td class="editable-bill-amount" data-bill-id="${bill.id}" data-initial-amount="${billAmount.toFixed(2)}">${billAmount.toFixed(2)}</td>
                        <td contenteditable="true" class="entered-amount" data-bill-id="${bill.id}" data-bill-amount="${billAmount.toFixed(2)}">${amountToDeduct.toFixed(2)}</td>
                        <td class="balance-amount">${balanceAmount.toFixed(2)}</td>
                        <td style="display:none" class="remaining-amount">${remainingAmount.toFixed(2)}</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-danger removeRow"><i class="bx bxs-trash"></i></button>
                        </td>
                    </tr>
                `;
                        $('#bill_table_body').append(row);
                    });

                    recalculateAmountsAfterEdit(); // Call once after initial load

                    $('.editable-bill-amount').on('input', function () {
                        const maxAmount = parseFloat($(this).data('initial-amount'));
                        let updatedAmount = parseFloat($(this).text()) || 0;

                        if (updatedAmount > maxAmount) {
                            alert(`Amount cannot exceed ${maxAmount}`);
                            $(this).text(maxAmount.toFixed(2));
                        }

                        recalculateAmountsAfterEdit();
                    });

                    $(document).on('change', '.bill-checkbox', function () {
                        const row = $(this).closest('tr');
                        const enteredAmountCell = row.find('.entered-amount');
                        if (!$(this).is(':checked')) {
                            enteredAmountCell.text('0.00');
                        }
                        recalculateAmountsAfterEdit();
                    });

                    function recalculateAmountsAfterEdit() {
                        let initialAmount = parseFloat($('#amount').val()) || 0;
                        let advance = parseFloat(billData.advance_amount) || 0;
                        let totalAvailable = initialAmount + advance;
                        let remaining = totalAvailable;

                        $('#bill_table_body tr').each(function () {
                            const checkbox = $(this).find('.bill-checkbox');
                            const enteredAmountCell = $(this).find('.entered-amount');
                            const billAmount = parseFloat(enteredAmountCell.data('bill-amount')) || 0;

                            // if (checkbox.prop('checked')) {





                            if (checkbox.prop('checked')) {
                                let currentText = enteredAmountCell.text().trim();
                                let enteredValue = parseFloat(currentText) || 0;
                                console.log('amt-paid:', enteredValue);

                                if (enteredValue > 0 && enteredValue <= billAmount && enteredValue <= remaining) {
                                    enteredAmountCell.text(enteredValue.toFixed(2));
                                    $(this).find('.balance-amount').text((billAmount - enteredValue).toFixed(2));
                                    remaining -= enteredValue;
                                } else {
                                    let autoValue = Math.min(remaining, billAmount);
                                    console.log('auto-value:', autoValue);
                                    enteredAmountCell.text(autoValue.toFixed(2));
                                    $(this).find('.balance-amount').text((billAmount - autoValue).toFixed(2));
                                    remaining -= autoValue;
                                }

                            } else {
                                enteredAmountCell.text('0.00');
                                $(this).find('.balance-amount').text(billAmount.toFixed(2));
                            }
                        });

                        // Remove previous advance if exists
                        $('.advance-amount').closest('tr').remove();

                        // Check if there's still any checked row that could consume the remaining
                        let stillApplicable = false;

                        $('#bill_table_body tr').each(function () {
                            const checkbox = $(this).find('.bill-checkbox');
                            const enteredAmountCell = $(this).find('.entered-amount');
                            const billAmount = parseFloat(enteredAmountCell.data('bill-amount')) || 0;
                            const currentValue = parseFloat(enteredAmountCell.text().trim()) || 0;

                            if (checkbox.prop('checked') && (billAmount - currentValue > 0)) {
                                stillApplicable = true;
                                return false; // break loop
                            }
                        });

                        // Only append advance amount if no row can take more
                        if (remaining > 0 && !stillApplicable) {
                            let splitAmount = splitAmountDisplay(remaining);
                            console.log('split-amt:', splitAmount);
                            const advanceRow = `
                        <tr>
                            <td colspan="4" class="text-right font-weight-bold">Advance Amount</td>
                            <td colspan="2" class="advance-amount">${splitAmount.formattedAmount}</td>
                        </tr>
                    `;
                            $('#bill_table_body').append(advanceRow);
                        }
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error loading bill:', error);
                    alert('Failed to load the bill. Please try again.');
                }
            });
        }

        function splitAmountDisplay(amount) {
            amount = parseFloat(amount) || 0;
            let amountString = amount.toFixed(2);
            if (amountString.length > 6) {
                let part1 = amountString.slice(0, -5);
                let part2 = amountString.slice(-5);
                // return { formattedAmount: `${part1} + ${part2} = ${amount.toFixed(2)}` };
                return { formattedAmount: ` ${amount.toFixed(2)}` };
            }
            return { formattedAmount: amount.toFixed(2) };
        }

    }



</script>