{% 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="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" /> 
                                </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;">
                                                </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">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">Charges Mode</span>
                                                    <div class="value">
                                                        <label><input type="radio" name="card_mode" id="card_mode_cash" value="cash" checked> Cash</label>
                                                        <label><input type="radio" name="card_mode" id="card_mode_bank" 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">Other Charges</span>
                                                    <input type="number" class="value" id="card_charges"
                                                        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>

                                            <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" name="finance_mode" value="cash" checked> Cash</label>
                                                        <label><input type="radio" 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>

                                                <!-- Single Finance Charges Input -->
                                                <div class="summary-row2" id="finance_charges_row">
                                                    <span class="label">Finance Charges</span>
                                                    <input type="number" class="value" id="finance_charges" value="0.00" step="0.01" style="text-align: right;">
                                                </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>

    $(document).ready(function () {
        CurrentDate('sales_date');  
         $('#customer_id').select2('open');
    }); 




$('#customer_id').on('select2:select', function () {
    setTimeout(function() {
        $('#po_id').select2('open');
    }, 300); // 300ms delay
});

$('#po_id').on('select2:select', function () {
    setTimeout(function() {
        $('#imei_number').select2('open');
    }, 300); // 300ms delay
});



$('#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({
            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 });
    }

    // 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 });
    }

    // Exchange
    let exchangeAmt = parseFloat($('#exchange_amount').val()) || 0;
    let exchangeDetails = $('#exchange_details').val() || '';
    if (exchangeAmt > 0) {
        payments.push({ type: 'exchange', details: exchangeDetails, amount: exchangeAmt, charges: 0 });
    }

    // Finance
    let financeAmt  = parseFloat($('#finance_amount').val()) || 0;
    let financeId   = $('#finance_id').val() || 0;
    let financeCustomer = $('#finance_customer').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 financeName = $('#finance_id option:selected').text() || '';
    if (financeAmt > 0) {
        payments.push({ type: 'finance', customer: financeCustomer, details: financeName, id: financeId, amount: financeAmt, charges: financeCharges, mode: financeMode, bank_id: financeBankId });
    }

    // Card
    let cardAmt  = parseFloat($('#card_amount').val()) || 0;
    let cardId   = $('#card_id').val() || 0;
    let cardName = $('#card_id option:selected').text() || '';
    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;
    if (cardAmt > 0) {
        payments.push({ type: 'card', details: cardName, id: cardId, amount: cardAmt, charges: cardCharges, cashback: cashback, mode: cardMode, bank_id: cardBankId });
    }

    console.log('Payments array ready for backend:', payments);

    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,
        '/add_sales_return/',
        null,
        'add_form',
        true,
        'Sales Return',
        [
            function () {
                
                window.location.href = '/sales-return';
            }
        ],
        formData,
        false
    );   
});

</script>