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



<div class="container-xxl flex-grow-1 container-p-y">

    <!-- Breadcrumb -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Sales Return</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/store/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Sales Return</li>
            </ol>
        </nav>
    </div>

    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="add_form" class="row g-6 pt-5">
                        {% csrf_token %}

                        <div class="col-9">
                            <div class="row">
                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="po_date">Sales Return Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="sales_date" class="form-control" name="sales_date"
                                        required />
                                </div>

                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="po_date">Sales Return No <span
                                            style="color: red;">*</span></label>
                                    <input type="text" id="sales_return_no" class="form-control" name="sales_return_no"
                                        value="{{generated_po_no}}" readonly />
                                </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">Sales No </label>
                                    <select class="select2 form-control" id="po_id" name="po_id">
                                        <option value="">Select</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3 form-control-validation mb-6">
                                    <label class="form-label" for="supplier_id">IMEI</label>
                                    <select class="select2  form-control" id="imei_number" name="imei_number">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="imei-error"></div>
                                </div>


                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id">Employee</label>
                                    <select class="select2  form-control" id="employee_id" name="employee_id">
                                        <option value="">Select</option>
                                        {% for emp in employee %}
                                        <option value="{{ emp.id }}" {% if emp.selected %}selected{% endif %}>
                                            {{ emp.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="item_code">Subcategory</label>
                                    <select class="select2  form-control" id="subcategory_id" name="subcategory_id">
                                        <option value="">Select</option>
                                        {% for subcat in subcategory %}
                                        <option value="{{subcat.id}}">{{subcat.name}}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback" id="subcategory-error"></div>
                                </div>

                                <div class="col-md-3 form-control-validation mb-6">
                                    <label class="form-label" for="uom_id">Brand</label>
                                    <select class="select2  form-control" id="brand_id" name="brand_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="brand-error"></div>
                                </div>

                                <div class="col-md-3 form-control-validation">
                                    <label class="form-label" for="rate">Model</label>
                                    <select class="select2  form-control" id="model_id" name="model_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="model-error"></div>
                                </div>

                                <div class="col-md-3 form-control-validation">
                                    <label class="form-label" for="rate">Variant</label>
                                    <select class="select2  form-control" id="variant_id" name="variant_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="variant-error"></div>
                                </div>

                                <div class="col-md-3 form-control-validation">
                                    <label class="form-label" for="rate">Color</label>
                                    <select class="select2  form-control" id="color_id" name="color_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="color-error"></div>
                                </div>
                                <div class="col-md-3 form-control-validation mb-4">
                                    <div class="row">
                                        <div class="col-md-12 form-control-validation">
                                            <label class="form-label" for="amount">Rate</label>
                                            <input type="number" id="rate" class="form-control" name="rate" readonly />
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-3 form-control-validation ">
                                    <label class="form-label" for="discount">Discount</label>
                                    <div class="d-flex gap-2">
                                        <input type="number" id="discount_percent" class="form-control" placeholder="%"
                                            min="0" readonly />
                                        <input type="number" id="discount_amount" class="form-control" placeholder="₹"
                                            min="0" readonly />
                                    </div>
                                </div>

                                <div class="col-md-3 form-control-validation mb-4">
                                    <div class="row">
                                        <div class="col-md-6 form-control-validation">
                                            <label class="form-label" for="amount">CGST (Inclusive)</label>
                                            <input type="number" id="tax_cgst" class="form-control" name="tax_cgst"
                                                readonly />
                                        </div>
                                        <div class="col-md-6 form-control-validation">
                                            <label class="form-label" for="amount">SGST (Inclusive)</label>
                                            <input type="number" id="tax_sgst" class="form-control" name="tax_sgst"
                                                readonly />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3  form-control-validation">
                                    <label class="form-label" for="amount">Net Rate </label>
                                    <input type="number" id="net_rate" class="form-control" name="net_rate" readonly />
                                    <small class="text-muted mt-2" id="mop_price_text" style="display:none;">MOP: ₹0
                                    </small>
                                    <div class="invalid-feedback" id="rate-error"></div>

                                </div>


                                <div class="col-md-3 form-control-validation mb-6 text-start">
                                    <button type="button" class="btn btn-success mt-5" name="add_item" id="add_item"
                                        onclick="addInwardRow()">+Add</button>
                                    <input type="hidden" name="inward_id" id="inward_id">
                                    <input type="hidden" name="mrp" id="mrp">
                                    <input type="hidden" name="fsp" id="fsp">
                                    <input type="hidden" name="wsp" id="wsp">
                                    <input type="hidden" name="mop" id="mop">
                                    <input type="hidden" name="bop" id="bop">
                                    <input type="hidden" name="db_price" id="db_price" />

                                    <input type="hidden" name="tax_amount" id="tax_amount" />
                                    <input type="hidden" name="tax_percent" id="tax_percent" />
                                    <input type="hidden" name="ean_number" id="ean_number" />
                                    <input type="hidden" name="tm_id" id="tm_id" />

                                    <input type="hidden" name="special_id" id="special_id" />
                                    <input type="hidden" name="special_amount" id="special_amount" />
                                    <input type="hidden" name="claim_amount" id="claim_amount" />

                                    <input type="hidden" name="upgrade_id" id="upgrade_id" />
                                    <input type="hidden" name="upgrade_amount" id="upgrade_amount" />
                                    <input type="hidden" name="collect_amount" id="collect_amount" />

                                    <input type="hidden" id="cash_tx_id">
                                    <input type="hidden" id="bank_tx_id">
                                    <input type="hidden" id="card_tx_id">
                                    <input type="hidden" id="finance_tx_id">
                                    <input type="hidden" id="exchange_tx_id">
                                </div>

                                <div class="col-md-12 mt-3 ">
                                    <div class="table-responsive text-nowrap">
                                        <table class="table mt-5" id="itemTable">
                                            <thead>
                                                <th>Actions</th>
                                                <th>Subcategory</th>
                                                <th>Brand</th>
                                                <th>Model</th>
                                                <th>Variant</th>
                                                <th>Color</th>
                                                <th>IMEI</th>
                                                <th>Rate</th>
                                                <th>Discount</th>
                                                <th>CGST</th>
                                                <th>SGST</th>
                                                <th>Amount</th>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>




                            </div>
                        </div>

                        <div class="col-md-3 mt-5 mb-5 form-control-validation" style="padding: 2%; padding-top: 0px;">
                            <div class="row">
                                <!-- <div class="col-12" style="padding:0;">
                                    <div style="max-height:300px; overflow-y:auto;">

                                        <h5 class="text-center mb-2">Scheme Details</h5>

                                        <table id="stock_table"
                                            class="table table-bordered mb-0"
                                            style="border:1px solid #f2f2f2; background-color:#c3c3f1;  ">

                                            <thead style="background-color:#9cd3f3; position:sticky; top:0; z-index:1;">
                                                <tr>
                                                    <th>Scheme Type</th>
                                                    <th>Amount</th>
                                                </tr>
                                            </thead>

                                            <tbody style="background-color:#EAF4FD;">
                                                <tr class="no-data">
                                                    <td colspan="2" align="center">No data</td>
                                                </tr>
                                            </tbody>

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


                                <div class="col-12">
                                    <hr style="border-top: 2px dashed #999; margin-top: 3%;">
                                </div> -->


                                <div class="col-12 mb-4 mt-5">
                                    <div class="summary-box shadow"
                                        style="border: 1px solid #ddd; padding: 24px 28px;  background:#EAF4FD; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
                                        <h5 style="text-align:center;background:#9cd3f3;padding:5px;
                                            border-radius:8px;font-weight:600;color:#333;">
                                            Sales Summary (<small style="color: red;">Total Quantity - <span
                                                    id="total_quantity">0</span></small>)
                                        </h5>



                                        <div class="summary-row">
                                            <span class="label">MRP</span>
                                            <span class="value" id="sub_total">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Discount</span>
                                            <span class="value" id="total_discount">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Taxable Value</span>
                                            <span class="value" id="total_tax">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Tax CGST @9%</span>
                                            <span class="value" id="total_tax_cgst">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Tax SGST @9%</span>
                                            <span class="value" id="total_tax_sgst">0.00</span>
                                        </div>



                                        <!-- Payment Options -->
                                        <div class="summary-upi" style="margin-top:12px;">
                                            <h5 style="text-align:center;color:#333;">Payment Modes</h5>

                                            <div
                                                style="display:flex;justify-content:center;gap:16px;margin-bottom:10px;flex-wrap: wrap;">
                                                <label>
                                                    <input type="checkbox" class="payment-option" data-target="cashBox">
                                                    Cash
                                                </label>
                                                <label>
                                                    <input type="checkbox" class="payment-option" data-target="bankBox">
                                                    Bank
                                                </label>
                                                <label>
                                                    <input type="checkbox" class="payment-option"
                                                        data-target="exchangeBox"> Exchange
                                                </label>
                                                <label>
                                                    <input type="checkbox" class="payment-option" data-target="cardBox">
                                                    Credit Card
                                                </label>
                                                <label>
                                                    <input type="checkbox" class="payment-option"
                                                        data-target="financeBox"> Finance
                                                </label>
                                            </div>
                                            <div class="payment-box" id="cashBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Cash Amount</span>
                                                    <input type="number" class="value" id="cash_amount" value="0.00"
                                                        step="0.01"
                                                        style="text-align: right; background-color: white !important; border: 1px solid #ced4da; border-radius: 4px;">
                                                </div>
                                                <div class="col-12" id="dividerCash" style="display:none;">
                                                    <hr>
                                                </div>
                                            </div>

                                            <div class="payment-box" id="bankBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Bank Details</span>
                                                    <select class="value select2" id="bank_id" name="bank_id">
                                                        <option value="">Select</option>
                                                        {% for b in bank %}
                                                        <option value="{{ b.id }}">{{ b.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Bank Amount</span>
                                                    <input type="number" class="value" id="bank_amount" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>
                                            </div>
                                            <div class="col-12" id="dividerBank" style="display:none;">
                                                <hr>
                                            </div>

                                            <div class="payment-box" id="exchangeBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Exchange Details</span>
                                                    <input type="text" class="value" id="exchange_details">
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Exchange Amount</span>
                                                    <input type="number" class="value" id="exchange_amount" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                    <input type="hidden" class="value" id="exchange_status">
                                                    <input type="hidden" class="value" id="exchange_claim">
                                                </div>
                                            </div>
                                            <div class="col-12" id="dividerExchange" style="display:none;">
                                                <hr>
                                            </div>


                                            <!-- Credit Card -->
                                            <div class="payment-box" id="cardBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Card Details</span>
                                                    <select class="value select2" id="card_id" name="card_id">
                                                        <option value="">Select</option>
                                                        {% for b in card %}
                                                        <option value="{{ b.id }}">{{ b.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Charges Mode</span>
                                                    <div class="value">
                                                        <label><input type="radio" id="card_mode" name="card_mode"
                                                                value="cash" checked> Cash</label>
                                                        <label><input type="radio" id="card_mode" name="card_mode"
                                                                value="bank"> Bank</label>
                                                    </div>
                                                </div>
                                                <div class="summary-row2" id="card_bank_dropdown_row"
                                                    style="display:none;">
                                                    <span class="label">Bank</span>
                                                    <select class="value select2" id="card_bank_id" name="card_bank_id">
                                                        <option value="">Select Bank</option>
                                                        {% for b in bank %}
                                                        <option value="{{ b.id }}">{{ b.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Card Amount</span>
                                                    <input type="number" class="value" id="card_amount" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Cashback</span>
                                                    <input type="number" class="value" id="cashback" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Card Charges</span>
                                                    <input type="number" class="value" id="card_charges" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                    <input type="hidden" id="card_is_collect" value="0">
                                                    <input type="hidden" id="card_collect_status" value="0">
                                                    <input type="hidden" id="card_collect_amount" value="0.00">
                                                    <input type="hidden" id="card_collected_on" value="">
                                                    <input type="hidden" id="card_charge_status">
                                                    <input type="hidden" id="card_amount_collect" value="0.00">
                                                    <input type="hidden" id="card_charge_collect_on" value="">
                                                </div>
                                            </div>

                                            <div class="col-12" id="dividerCard" style="display:none;">
                                                <hr>
                                            </div>


                                            <div class="payment-box" id="financeBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Finance Details</span>
                                                    <select class="value select2" id="finance_id" name="finance_id">
                                                        <option value="">Select</option>
                                                        {% for b in finance %}
                                                        <option value="{{ b.id }}">{{ b.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Finance Customer</span>
                                                    <input type="text" class="value" id="finance_customer">
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Disbursed Amount</span>
                                                    <input type="number" class="value" id="finance_amount" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Charges Mode</span>
                                                    <div class="value">
                                                        <label><input type="radio" id="finance_mode" name="finance_mode"
                                                                value="cash" checked> Cash</label>
                                                        <label><input type="radio" id="finance_mode" name="finance_mode"
                                                                value="bank"> Bank</label>
                                                    </div>
                                                </div>
                                                <!-- Bank Dropdown (hidden initially) -->
                                                <div class="summary-row2" id="finance_bank_dropdown_row"
                                                    style="display:none;">
                                                    <span class="label">Bank</span>
                                                    <select class="value select2" id="finance_bank_id"
                                                        name="finance_bank_id">
                                                        <option value="">Select Bank</option>
                                                        {% for b in bank %}
                                                        <option value="{{ b.id }}">{{ b.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                                <div class="summary-row2">
                                                    <span class="label">Finance Charges</span>
                                                    <input type="number" class="value" id="finance_charges" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                    <input type="hidden" id="finance_is_collect" value="0">
                                                    <input type="hidden" id="finance_collect_status" value="0">
                                                    <input type="hidden" id="finance_collect_amount" value="0.00">
                                                    <input type="hidden" id="finance_collected_on" value="">
                                                    <input type="hidden" id="finance_charge_status">
                                                    <input type="hidden" id="finance_amount_collect" value="0.00">
                                                    <input type="hidden" id="finance_charge_collect_on" value="">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <hr style="border-top:2px dashed #999;margin-top:3%;">
                                        </div>

                                        <!-- Total -->
                                        <div class="summary-row total-row">
                                            <span class="label">Total</span>
                                            <span class="value" id="total_payable">0.00</span>
                                        </div>

                                        <div class="summary-row2">
                                            <span class="label">Balance</span>
                                            <span class="value" id="balance_amount">0.00</span>
                                        </div>
                                        <div id="overpay_warning" style="
                                                display:none;
                                                background:#ffe5e5;
                                                color:#b30000;
                                                font-size:14px;
                                                margin-top:10px;
                                                text-align:center;
                                                font-weight:700;
                                                padding:8px 12px;
                                                border:1px solid #ff4d4d;
                                                border-radius:8px;
                                                box-shadow:0 0 6px rgba(255,77,77,0.6);
                                            ">
                                            ⚠ Overpayment detected. Please adjust payment amount.
                                        </div>

                                    </div>
                                </div>





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

                                <div class="col-12 d-flex justify-content-center form-control-validation">
                                    <button type="button" class="btn btn-primary"
                                        onclick="history.back()">Back</button>&nbsp; &nbsp;
                                    <button type="submit" id="submit" name="submitButton" class="btn btn-success"
                                        id="updateBtn">Save</button>
                                </div>

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




    </div>



</div>



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

<script>

    function updateAmountField(selector, value) {
        if (value !== 0 && value !== 0.0 && value !== '0' && value !== '0.0') {
            $(selector).text(value);
        }
    }

    var table;
    $(document).ready(function () {



        safeValue('#sales_date', '{{ sales.sr_date|escapejs }}');
        safeValue('#sales_return_no', '{{ sales.sr_no|escapejs }}');
        safeValue('#tm_id', '{{ sales.id|escapejs }}');
        safeValue('#description', '{{ sales.remarks|escapejs }}');
        safeSelectValue('#customer_id', '{{ sales.customer_id|escapejs }}');
        safeSelectValue('#employee_id', '{{ sales.employee_id|escapejs }}');



        refresh_data();
    });



    function refresh_data() {
        $.ajax({
            url: '/ajax_tx_return_edit/',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: document.getElementsByName("csrfmiddlewaretoken")[0].value,
                sales_id: $('#tm_id').val()
            },
            success: function (response) {
                const materialIds = response.pu_ids || [];
                console.log('materialIds:', materialIds);
                loadSalesOrders(materialIds);

                const items = response.items || [];
                items.forEach((item, idx) => {
                    try {
                        updateInwardTable(
                            item.sales_id, item.ean,
                            item.subcategory_id, item.subcategory_name,
                            item.brand_id, item.brand_name,
                            item.model_id, item.model_name,
                            item.variant_id, item.variant_name,
                            item.color_id, item.color_name,
                            item.imei_no, item.rate,
                            item.tax_percent, item.tax_amount, item.tax_sgst, item.tax_cgst,
                            item.discount_percent, item.discount_amount,
                            item.amount,
                            item.mop_price, item.bop_price, item.wsp_price,
                            item.fsp_price, item.db_price,
                            item.special_id, item.special_amount, item.claim_amount,
                            item.upgrade_id, item.upgrade_amount, item.collect_amount,
                            'sales_return', item.id
                        );
                    } catch (err) {
                        console.error(`Error processing item #${idx + 1}:`, err);
                    }
                });

                const transactions = response.tx_transaction || [];
                console.log(transactions);
                transactions.forEach(tx => {
                    const type = tx.payment_type.toLowerCase();
                    const amt = tx.amount;
                    const isCollect = tx.is_collect;
                    const collectStatus = tx.collect_status;
                    const collectAmount = tx.collect_amount;
                    const collectedOn = tx.collected_on;
                    const chargeMode = tx.charge_mode;
                    const chargeBankId = tx.charge_bank_id;
                    const chargeStatus = tx.charge_status;
                    const chargeAmountCollect = tx.charge_amount_collect;
                    const chargeCollectOn = tx.charge_collect_on;
                    const charges = tx.charges;

                    if (type === 'cash') {
                        updatePaymentVisibility('cashBox', true);
                        $('#cash_amount').val(amt);
                        $('#cash_tx_id').val(tx.id);
                    }
                    else if (type === 'bank') {
                        updatePaymentVisibility('bankBox', true);
                        $('#bank_id').val(tx.bank_id).trigger('change');
                        $('#bank_amount').val(amt);
                        $('#bank_tx_id').val(tx.id);
                    }
                    else if (type === 'exchange') {
                        updatePaymentVisibility('exchangeBox', true);
                        $('#exchange_amount').val(amt);
                        $('#exchange_details').val(tx.reference_no);
                        $('#exchange_status').val(tx.exchange_status);
                        $('#exchange_claim').val(tx.exchange_claim);
                        $('#exchange_tx_id').val(tx.id);
                    }
                    else if (type === 'card' || type === 'credit_card') {
                        updatePaymentVisibility('cardBox', true);
                        $('#card_amount').val(amt);
                        $('#card_details').val(tx.reference_no);
                        $('#cashback').val(tx.cashback);
                        $('#card_charges').val(charges);
                        $('#card_tx_id').val(tx.id);

                        $('#card_id').val(tx.card_id).trigger('change');
                        $('#card_is_collect').val(isCollect);
                        $('#card_collect_status').val(collectStatus);
                        $('#card_collect_amount').val(collectAmount);
                        $('#card_collected_on').val(collectedOn);
                        $('#card_charge_mode').val(chargeMode);
                        toggleChargesMode('input[name="card_mode"]', '#card_bank_dropdown_row', chargeMode);
                        $('#card_bank_id').val(chargeBankId).trigger('change');
                        $('#card_charge_status').val(chargeStatus);
                        $('#card_charge_amount_collect').val(chargeAmountCollect);
                        $('#card_charge_collect_on').val(chargeCollectOn);

                    }
                    else if (type === 'finance') {
                        updatePaymentVisibility('financeBox', true);
                        $('#finance_amount').val(amt);
                        $('#finance_customer').val(tx.finance_customer);
                        $('#finance_name').val(tx.reference_no);
                        $('#finance_id').val(tx.finance_id).trigger('change');
                        $('#finance_charges').val(charges);
                        $('#finance_tx_id').val(tx.id);
                        $('#finance_is_collect').val(isCollect);
                        $('#finance_collect_status').val(collectStatus);
                        $('#finance_collect_amount').val(collectAmount);
                        $('#finance_collected_on').val(collectedOn);
                        $('#finance_charge_mode').val(chargeMode);
                        toggleChargesMode('input[name="finance_mode"]', '#finance_bank_dropdown_row', chargeMode);
                        $('#finance_bank_id').val(chargeBankId).trigger('change');
                        $('#finance_charge_status').val(chargeStatus);
                        $('#finance_charge_amount_collect').val(chargeAmountCollect);
                        $('#finance_charge_collect_on').val(chargeCollectOn);
                    }



                    if (tx.balance) $('#balance_amount').text(tx.balance);
                });

                // 4. Final Recalculation
                if (typeof updateSalesSummary === "function") {
                    updateSalesSummary();
                }
            },
            error: function (xhr, status, error) {
                console.error("Error loading sales data:", error);
            }
        });
    }


    $('#add_form').on('submit', function (e) {
        e.preventDefault();

        let $customer = $('#customer_id');
        if ($customer == 0) {
            showToast('error', 'Customer Name is required');
            return;
        }

        if ($('#itemTable tbody tr').length === 0) {
            showToast('info', 'Please add at least one item to the table.');
            return;
        }

        // ---------------------------
        // Collect items
        // ---------------------------
        let items = [];
        $('#itemTable tbody tr').each(function () {
            let $row = $(this);
            items.push({
                item_id: $row.data('item-id'),
                sales_id: $row.data('return-id'),
                ean: $row.data('ean'),
                subcategory_id: $row.data('subcategory-id'),
                brand_id: $row.data('brand-id'),
                model_id: $row.data('model-id'),
                variant_id: $row.data('variant-id'),
                color_id: $row.data('color-id'),
                imei: $row.find('.imei').text().trim(),
                rate: parseFloat($row.find('.rate').text()) || 0,
                tax_percent: $row.data('tax-percent') || 0,
                tax_amount: $row.data('tax-amount'),
                tax_cgst: $row.find('.tax_cgst').text() || 0,
                tax_sgst: $row.find('.tax_sgst').text() || 0,
                discount_percent: $row.data('discount-percent'),
                discount_amount: parseFloat($row.find('.discount').text().trim()) || 0,
                net_rate: parseFloat($row.find('.net_rate').text()) || 0,
                mop_price: $row.data('mop-price'),
                bop_price: $row.data('bop-price'),
                fsp_price: $row.data('fsp-price'),
                wsp_price: $row.data('wsp-price'),
                db_price: $row.data('db-price'),
                special_id: $row.data('special-id'),
                special_amount: $row.data('special-amount'),
                claim_amount: $row.data('claim-amount'),
                upgrade_id: $row.data('upgrade-id'),
                upgrade_amount: $row.data('upgrade-amount'),
                collect_amount: $row.data('collect-amount'),
            });
        });

        // ---------------------------
        // Collect payment summary
        // ---------------------------
        let payments = [];

        // Cash
        let cashVal = parseFloat($('#cash_amount').val()) || 0;
        if (cashVal > 0) {
            payments.push({ type: 'cash', details: '', amount: cashVal, charges: 0, tx_id: $('#cash_tx_id').val() });
        }

        // Bank
        let bankVal = parseFloat($('#bank_amount').val()) || 0;
        let bankId = $('#bank_id').val() || 0;
        let bankName = $('#bank_id option:selected').text() || '';
        if (bankVal > 0) {
            payments.push({ type: 'bank', details: bankName, id: bankId, amount: bankVal, charges: 0, tx_id: $('#bank_tx_id').val() });
        }

        // Exchange
        let exchangeAmt = parseFloat($('#exchange_amount').val()) || 0;
        let exchangeDetails = $('#exchange_details').val() || '';
        let exchangeStatus = $('#exchange_status').val() || '';
        let exchangeClaim = parseFloat($('#exchange_claim').val()) || 0;

        if (exchangeAmt > 0) {
            payments.push({ type: 'exchange', details: exchangeDetails, amount: exchangeAmt, charges: 0, exchange_status: exchangeStatus, exchange_claim: exchangeClaim, tx_id: $('#exchange_tx_id').val() });
        }

        // Finance
        let financeAmt = parseFloat($('#financeBox input[type="number"]').val()) || 0;
        let financeName = $('#finance_name').val() || '';
        let financeMode = $('input[name="finance_mode"]:checked').val() || '';
        let financeBankId = financeMode === 'bank'
            ? ($('#finance_bank_id').val() || 0)
            : 0;

        let financeCharges = parseFloat($('#finance_charges').val()) || 0;
        let financeId = $('#finance_id').val() || 0;
        let isCollect = $('#finance_is_collect').val() || 0;
        let collectStatus = $('#finance_collect_status').val() || 0;
        let collectAmount = parseFloat($('#finance_collect_amount').val()) || 0;
        let collectedOn = $('#finance_collected_on').val() || '';
        let chargeStatus = $('#finance_charge_status').val() || 0;
        let chargeAmountCollect = parseFloat($('#finance_amount_collect').val()) || 0;
        let chargeCollectedOn = $('#finance_charge_collect_on').val() || '';


        if (financeAmt > 0) {
            payments.push({
                type: 'finance',
                details: financeName,
                id: financeId,
                amount: financeAmt,
                is_collect: isCollect,
                collect_status: collectStatus,
                collect_amount: collectAmount,
                collected_on: collectedOn,
                charges: financeCharges,
                mode: financeMode,
                charge_bank_id: financeBankId,
                charge_status: chargeStatus,
                charge_amount_collect: chargeAmountCollect,
                charge_collect_on: chargeCollectedOn,
                tx_id: $('#finance_tx_id').val()
            });
        }

        // Card
        let cardAmt = parseFloat($('#cardBox input[type="number"]').val()) || 0;
        let cardName = $('#card_details').val() || '';
        let cardId = $('#card_id').val() || 0;
        let cardMode = $('input[name="card_mode"]:checked').val() || '';
        let cardBankId = cardMode === 'bank'
            ? ($('#card_bank_id').val() || 0)
            : 0;

        let cardCharges = parseFloat($('#card_charges').val()) || 0;
        let cashback = parseFloat($('#cashback').val()) || 0;
        let isCollectCard = $('#card_is_collect').val() || 0;
        let collectStatusCard = $('#card_collect_status').val() || 0;
        let collectAmountCard = parseFloat($('#card_collect_amount').val()) || 0;
        let collectedOnCard = $('#card_collected_on').val() || '';
        let cardChargeStatus = $('#card_charge_status').val() || 'pending';
        let cardChargeAmountCollect = parseFloat($('#card_amount_collect').val()) || 0;
        let cardChargeCollectedOn = $('#card_charge_collect_on').val() || '';

        if (cardAmt > 0) {
            payments.push({
                type: 'card',
                details: cardName,
                id: cardId,
                amount: cardAmt,
                charges: cardCharges,
                is_collect: isCollectCard,
                collect_status: collectStatusCard,
                collect_amount: collectAmountCard,
                collected_on: collectedOnCard,
                cashback: cashback,
                mode: cardMode,
                charge_bank_id: cardBankId,
                charge_status: cardChargeStatus,
                charge_amount_collect: cardChargeAmountCollect,
                charge_collect_on: cardChargeCollectedOn,
                tx_id: $('#card_tx_id').val()
            });
        }


        let subTotal = parseFloat($('#sub_total').text()) || 0;
        let totalAmount = parseFloat($('#total_payable').text()) || 0;
        let otherCharges = parseFloat($('#other_charges').text()) || 0;
        let totalDiscount = parseFloat($('#total_discount').text()) || 0;
        let totalCGST = parseFloat($('#total_tax_cgst').text()) || 0;
        let totalSGST = parseFloat($('#total_tax_sgst').text()) || 0;

        let totalPaid = cashVal + bankVal + exchangeAmt + financeAmt + cardAmt;
        let balance = parseFloat($('#balance_amount').text()) || 0;


        if (totalPaid > totalAmount) {
            showSweetAlert('warning', 'Over-payment detected. Adjust the amounts before submitting.');
            return;
        }


        // ---------------------------
        // Append to FormData
        // ---------------------------
        let formData = new FormData(this);
        formData.append('items', JSON.stringify(items));
        formData.append('payments', JSON.stringify(payments));
        formData.append('total_quantity', $('#total_quantity').text());
        formData.append('sub_total', subTotal);
        formData.append('total_paid', totalPaid);
        formData.append('charges', otherCharges);
        formData.append('balance', balance);
        formData.append('total_discount', totalDiscount);
        formData.append('total_tax_cgst', totalCGST);
        formData.append('total_tax_sgst', totalSGST);
        formData.append('total_payable', totalAmount);


        let csrfToken = $("input[name=csrfmiddlewaretoken]").val();
        handleFormSubmit(
            this,
            '/update_sales_return/',
            null,
            'add_form',
            true,
            'Sales Return',
            [
                function () {

                    window.location.href = '/sales-return';
                }
            ],
            formData,
            false
        );
    });



</script>