{% load static %}
{% include 'includes/header.html' %}
<style>
    .custom-col-8 {
        width: 72% !important;
    }

    .custom-col-4 {
        width: 28% !important;
    }
</style>
{% 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 </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 </li>
                <li class="breadcrumb-item" aria-current="page">Sales </li>
            </ol>
        </nav>
    </div>

    <div class="row">

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

                        <div class="col-8 custom-col-8">
                            <div class="row">
                                <div class="col-md-3 mb-4 form-control-validation mt-4">
                                    <label class="form-label" for="po_date">INV Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="sales_date" class="form-control" name="sales_date"
                                        required />
                                </div>

                                {% if request.session.is_ho == 1 %}
                                <div class="col-md-3 mb-5 mt-3 form-control-validation">
                                    <label class="form-label mt-1">Customer Mode</label>
                                    <div class="mt-1 d-flex gap-3">
                                        <div class="form-check form-check-inline mb-0">
                                            <input class="form-check-input" type="radio" name="customer_source_mode"
                                                id="customer_source_b2b_customer" value="b2b_customer" checked>
                                            <label class="form-check-label" for="customer_source_b2b_customer"> Customer</label>
                                        </div>
                                        <div class="form-check form-check-inline mb-0">
                                            <input class="form-check-input" type="radio" name="customer_source_mode"
                                                id="customer_source_b2b_boys" value="b2b_boys">
                                            <label class="form-check-label" for="customer_source_b2b_boys">B2B
                                                Boys</label>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                                <div class="col-3 mb-5 mt-3">
                                    <div class="d-flex">
                                        <label class="form-label mt-1" for="serial_number">Customer <span
                                                style="color: red;">*</span></label>

                                        <button type="button" class="btn btn-success btn-sm rounded-circle d-flex align-items-center justify-content-center mx-2" id="add_b2c_btn" title="Add B2C Customer" data-bs-toggle="modal"data-bs-target="#add_b2c_modal" style="width: 20px; height: auto;">
                                            <i class="fas fa-user fa-xs"></i>
                                        </button>
                                        {% if request.session.is_ho == 1%}

                                        <!-- B2B Button -->
                                        <button type="button" id="add_b2b_btn"
                                            class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center d-none"
                                            title="Add B2B Customer" data-bs-toggle="modal"
                                            data-bs-target="#add_b2b_modal" style="width: 20px; height: auto;">
                                            <i class="fas fa-building fa-xs"></i>
                                        </button>
                                        {% endif %}
                                    </div>

                                    <div class="mt-1">
                                        <select class="form-control select2" id="customer_id" name="customer_id"
                                            autocomplete="off" required>
                                        </select>
                                        <input type="hidden" id="customer_phone" class="form-control" name="customer_phone"  />

                                    </div>
                                </div>

                                {% if request.session.is_ho == 1 %}
                                <div class="col-3 mb-5 mt-3">
                                    <div class="d-flex">
                                        <label class="form-label mt-1 mb-0" for="ws_po_id">Sales Request (WholesalePO)</label> &nbsp;
                                        <button type="button" class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center d-none" id="view_sales_request_btn" title="View Sales Request Details" style="width: 20px; height: auto; display: none;">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        
                                    </div>

                                    <div class="mt-1">
                                         <select class="form-control select2" id="ws_po_id" name="ws_po_id" disabled>
                                            <option value="">Select Sales Request</option>
                                        </select>
                                    </div>
                                </div>
                                {% endif %}

                                {% if request.session.is_ho != 1 %}
                                <div class="col-md-3 mb-5 mt-3 form-control-validation">
                                    <label class="form-label mt-1" for="customer_phone">Customer Type</label>
                                    <input type="text" class="form-control mt-1" value="Retail" readonly />
                                    <input type="hidden" id="customer_type" class="form-control" name="customer_type" />
                                    <input type="hidden" id="customer_name" class="form-control" name="customer_name" />
                                </div>

                                <div class="col-md-3 mb-5 mt-3 form-control-validation">
                                    <label class="form-label mt-1" for="employee_id">Employee</label>
                                    <select class="select2 form-control mt-1" 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>
                                {% endif %}

                                





                            </div>

                            <div class="row">

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Search IMEI Number</label>
                                    <div class="input-group">
                                        <input type="text" id="imei_number_enter" class="form-control typeahead"
                                            name="imei_number_enter" placeholder="Type and enter" autocomplete="off"
                                            style="background-color: #dbf7ff;" />
                                        <div class="input-group-text">
                                            <input class="form-check-input mt-0" type="checkbox" value="1" id="is_demo"
                                                name="is_demo" aria-label="Checkbox for following text input">
                                            <span class="ms-1">Demo</span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback" id="imei-error"></div>

                                </div>

                                {% if request.session.is_ho == 1 %}
                                <div class="col-md-3 mb-4 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>
                                {% endif %}

                                {% if request.session.is_ho == 1 %}
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="customer_phone">Customer Type</label>
                                    <div class="mt-1 d-flex gap-3">
                                        <div class="form-check form-check-inline mb-0">
                                            <input class="form-check-input" type="radio" name="customer_type_mode"
                                                id="customer_type_wholesale" value="wholesale">
                                            <label class="form-check-label" for="customer_type_wholesale">Wholesale</label>
                                        </div>
                                        <div class="form-check form-check-inline mb-0">
                                            <input class="form-check-input" type="radio" name="customer_type_mode"
                                                id="customer_type_retail" value="retail">
                                            <label class="form-check-label" for="customer_type_retail">Retail</label>
                                        </div>
                                    </div>
                                    <input type="hidden" id="customer_type" class="form-control" name="customer_type" />
                                    <input type="hidden" id="customer_name" class="form-control" name="customer_name" />
                                </div>
                                {% endif %}
                            </div>

                            <div class="row">

                                <div class="col-md-3 mb-4 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 subcategory in subcategory %}
                                        <option value="{{ subcategory.id }}">{{ subcategory.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Brand</label>
                                    <select class="select2  form-control" id="brand_id" name="brand_id">
                                        <option value="">Select</option>

                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

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

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="batch_no">Variant</label>
                                    <select class="select2  form-control" id="variant_no" name="variant_no">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="serial-error"></div>
                                </div>



                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="uom_id">Color</label>
                                    <select class="select2  form-control" id="color_id" name="color_id">
                                        <option value="">Select</option>
                                    </select>
                                </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" />
                                        <input type="number" id="discount_amount" class="form-control" placeholder="₹"
                                            min="0" />
                                    </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 text-start mt-5 form-control-validation text">
                                    <button type="button" class="btn btn-success" name="add_item" id="add_item"
                                        onclick="addInwardRow()">+Add</button>
                                </div>
                                <div class="col-12">
                                    <input type="hidden" name="price_id" id="price_id" />
                                    <input type="hidden" name="upgrade_id" id="upgrade_id" />
                                    <input type="hidden" name="upgrade_amount" id="upgrade_amount" />
                                    <input type="hidden" name="special_id" id="special_id" />
                                    <input type="hidden" name="special_amount" id="special_amount" />
                                    <input type="hidden" name="mop_price" id="mop_price" />
                                    <input type="hidden" name="bop_price" id="bop_price" />
                                    <input type="hidden" name="wsp_price" id="wsp_price" />
                                    <input type="hidden" name="fsp_price" id="fsp_price" />
                                    <input type="hidden" name="db_price" id="db_price" />
                                    <input type="hidden" name="source" id="source" />
                                    <input type="hidden" name="sales_channel" id="sales_channel" value="retail" />
                                    <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="purchase_price" id="purchase_price" />
                                </div>

                                <div class="col-md-12 ">
                                    <div class="table-responsive text-nowrap">
                                        <table class="table mt-5" id="itemTable">
                                            <thead>
                                                <tr>
                                                    <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>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 custom-col-4 mt-5 mb-4 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;">

                                        <!-- Heading -->
                                        <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;">Transaction 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>

                                <!-- Remarks -->
                                <div class="col-12 mb-4">
                                    <label class="form-label">Remarks</label>
                                    <textarea class="form-control" rows="3" id="description"></textarea>
                                </div>

                                <!-- Actions -->
                                <div class="col-12 d-flex justify-content-end gap-3 mb-4">
                                    <button type="button" class="btn btn-primary" onclick="history.back()">Back</button>
                                    <button type="submit" class="btn btn-success px-4">Save</button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--B2B Customer  -->

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


<div class="modal fade" id="salesRequestViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sales_request_modal_title">Sales Request Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered w-100">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>EAN</th>
                                <th>Subcategory</th>
                                <th>Brand</th>
                                <th>Model</th>
                                <th>Variant</th>
                                <th>Color</th>
                                <th class="text-end">Qty</th>
                                <th class="text-end">Rate</th>
                                <th class="text-end">Amount</th>
                            </tr>
                        </thead>
                        <tbody id="sales_request_modal_body">
                            <tr>
                                <td colspan="10" class="text-center">No data</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>



{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}
{% include 'sales_order/sales_js.html' %}

<script>

    const IS_HO = Number('{{ request.session.is_ho|default:0 }}') === 1;

    function getSelectedCustomerSource() {
        return $('input[name="customer_source_mode"]:checked').val() || '';
    }

    function isB2BBoysSelected() {
        return IS_HO && getSelectedCustomerSource() === 'b2b_boys';
    }

    function normalizeCustomerType(typeValue) {
        const type = String(typeValue || '').toLowerCase();
        if (type === 'wholesale' || type === 'retail') {
            return type;
        }
        return '';
    }

    function setCustomerTypeSelection(typeValue, shouldDisable) {
        const type = normalizeCustomerType(typeValue);
        $('#customer_type_wholesale').prop('checked', type === 'wholesale');
        $('#customer_type_retail').prop('checked', type === 'retail');
        $('#customer_type_wholesale, #customer_type_retail').prop('disabled', !!shouldDisable);
        $('#customer_type').val(type ? `${type.charAt(0).toUpperCase()}${type.slice(1)}` : '');
    }

    function updateCustomerTypeControls() {
        if (!IS_HO) {
            setCustomerTypeSelection('retail', true);
            return;
        }

        const source = IS_HO ? getSelectedCustomerSource() : 'b2b_customer';
        const selected = $('#customer_id').find(':selected');
        const customerId = $('#customer_id').val() || '';
        const selectedCustomerType = normalizeCustomerType(selected.data('customer-type'));

        if (source === 'b2b_boys') {
            setCustomerTypeSelection('wholesale', true);
            return;
        }

        if (!customerId) {
            setCustomerTypeSelection('', false);
            return;
        }

        if (selectedCustomerType === 'retail') {
            setCustomerTypeSelection('retail', true);
            return;
        }

        if (selectedCustomerType === 'wholesale') {
            setCustomerTypeSelection('wholesale', false);
            return;
        }

        setCustomerTypeSelection('', false);
    }

    function resetSalesRequestSelection(disableDropdown = true) {
        const $salesRequest = $('#ws_po_id');
        $salesRequest.empty().append('<option value="">Select Sales Request</option>');
        $salesRequest.val('').trigger('change');
        $salesRequest.prop('disabled', disableDropdown);
        $('#view_sales_request_btn').addClass('d-none');
    }

    function loadSalesRequestsForCustomer(customerId) {
        if (!customerId || !isB2BBoysSelected()) {
            resetSalesRequestSelection(true);
            return;
        }

        const $salesRequest = $('#ws_po_id');
        resetSalesRequestSelection(false);

        $.ajax({
            url: '/ajax_load_sales_requests/',
            type: 'GET',
            data: { customer_id: customerId },
            success: function (response) {
                const uniqueIds = new Set();
                (response.data || []).forEach(row => {
                    const poId = row.id || 0;
                    if (!poId || uniqueIds.has(poId)) return;
                    uniqueIds.add(poId);
                    $salesRequest.append(`<option value="${poId}">${row.po_no || '-'}</option>`);
                });
                $salesRequest.prop('disabled', false);
            },
            error: function () {
                resetSalesRequestSelection(false);
                showToast('error', 'Unable to load sales requests');
            }
        });
    }

    function openSalesRequestDetailsModal(poId) {
        if (!poId) return;

        const poNo = $('#ws_po_id option:selected').text() || '-';
        $('#sales_request_modal_title').text(`Sales Request Details | Request No: ${poNo}`);
        $('#sales_request_modal_body').html('<tr><td colspan="10" class="text-center">Loading...</td></tr>');

        $.ajax({
            url: '/ajax_sales_request_view_details/',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                po_id: poId
            },
            success: function (response) {
                const rows = response.data || [];
                if (!rows.length) {
                    $('#sales_request_modal_body').html('<tr><td colspan="10" class="text-center">No data</td></tr>');
                } else {
                    const html = rows.map(item => `
                        <tr>
                            <td>${item.id || ''}</td>
                            <td>${item.ean || '-'}</td>
                            <td>${item.subcategory || '-'}</td>
                            <td>${item.brand || '-'}</td>
                            <td>${item.model || '-'}</td>
                            <td>${item.variant || '-'}</td>
                            <td>${item.color || '-'}</td>
                            <td class="text-end">${item.qty || 0}</td>
                            <td class="text-end">${item.rate || '0.00'}</td>
                            <td class="text-end">${item.amount || '0.00'}</td>
                        </tr>
                    `).join('');
                    $('#sales_request_modal_body').html(html);
                }
                $('#salesRequestViewModal').modal('show');
            },
            error: function () {
                $('#sales_request_modal_body').html('<tr><td colspan="10" class="text-center">No data</td></tr>');
                showToast('error', 'Unable to load sales request details');
            }
        });
    }

    function resetCustomerSelection() {
        const $customer = $('#customer_id');
        $customer.empty().append('<option value="">Select Customer</option>').trigger('change');
        $('#customer_name').val('');
        $('#customer_phone').val('');
        setCustomerTypeSelection('', false);
        resetSalesRequestSelection(true);
        updateSalesChannel();
    }

    function updateSalesChannel() {
        let channel = 'retail';
        const selected = $('#customer_id').find(':selected');
        const cType = String(selected.data('c-type') || '').toLowerCase(); // Matches 'B2B BOYS' or others

        if (IS_HO) {
            const source = getSelectedCustomerSource();
            if (source === 'b2b_boys') {
                channel = 'wholesale_internal';
            } else if (source === 'b2b_customer') {
                channel = (cType === 'b2c' || cType === '') ? 'retail' : 'wholesale_external';
            }
        } else {
            // For branches, if they select a B2B Boys customer, set as internal wholesale
            if (cType === 'b2b boys') {
                channel = 'wholesale_internal';
            } else if (cType !== 'b2c' && cType !== '') {
                channel = 'wholesale_external';
            }
        }

        $('#sales_channel').val(channel);
    }

    function updateCustomerControls() {
        if (!IS_HO) {
            $('#customer_id').prop('disabled', false);
            $('#add_b2c_btn').removeClass('d-none');
            resetSalesRequestSelection(true);
            updateCustomerTypeControls();
            updateSalesChannel();
            return;
        }

        const source = getSelectedCustomerSource();
        const hasSource = source !== '';
        const isB2BBoysMode = source === 'b2b_boys';

        $('#customer_id').prop('disabled', !hasSource);
        $('#add_b2c_btn').toggleClass('d-none', isB2BBoysMode);
        $('#add_b2b_btn').toggleClass('d-none', isB2BBoysMode || source !== 'b2b_customer');

        if (source === 'b2b_boys') {
            resetSalesRequestSelection(false);
            const customerId = $('#customer_id').val() || '';
            if (customerId) {
                loadSalesRequestsForCustomer(customerId);
            }
        } else {
            resetSalesRequestSelection(true);
        }

        if (!hasSource) {
            resetCustomerSelection();
        } else {
            updateCustomerTypeControls();
            updateSalesChannel();
        }
    }

    $(document).ready(function () {
        CurrentDate('sales_date');
        resetSalesRequestSelection(true);

        if (IS_HO) {
            updateCustomerControls();
            loadCustomers(getSelectedCustomerSource() || 'b2b_customer');
        } else {
            updateCustomerTypeControls();
            loadCustomers('b2b_customer');
            updateSalesChannel();
        }

        loadTypeahead('#ean_number', { 'ean': 'ean', 'item_id': 'id' }, '/load_ean_number/');
        $('#customer_id').on('select2:select', function () {
            $('#imei_number_enter').val('').focus().select();
        });

        $('#ws_po_id').on('change', function () {
            const hasValue = !!($(this).val() || '');
            $('#view_sales_request_btn').toggleClass('d-none', !hasValue);
        });

        $('#view_sales_request_btn').on('click', function () {
            const poId = $('#ws_po_id').val() || '';
            if (poId) {
                openSalesRequestDetailsModal(poId);
            }
        });

        $('input[name="customer_type_mode"]').on('change', function () {
            const value = normalizeCustomerType($(this).val());
            $('#customer_type').val(value ? `${value.charAt(0).toUpperCase()}${value.slice(1)}` : '');
        });

        if (IS_HO) {
            $('input[name="customer_source_mode"]').on('change', function () {
                updateCustomerControls();
                const source = getSelectedCustomerSource();
                if (source) {
                    loadCustomers(source);
                }
                resetSalesRequestSelection(source !== 'b2b_boys');
                if (source === 'b2b_boys') {
                    const customerId = $('#customer_id').val() || '';
                    if (customerId) {
                        loadSalesRequestsForCustomer(customerId);
                    }
                }
            });
        }
    });


    function addInwardRow() {
        clearErrors();
        $('#imei_number_enter').removeClass('is-invalid');
        $('#net_rate').removeClass('is-invalid');
        $('#rate-error').text('').hide();
        $('#imei-error').text('').hide();

        let itemId = $('#item_id').val() || 0;
        let eanNumber = $('#ean_number').val().trim();
        let subcategoryId = $('#subcategory_id').val();
        let subcategoryName = $('#subcategory_id option:selected').text();
        let brandId = $('#brand_id').val();
        let brandName = $('#brand_id option:selected').text();
        let modelId = $('#model_id').val();
        let modelName = $('#model_id option:selected').text();
        let variantId = $('#variant_no').val();
        let variantName = $('#variant_no option:selected').text();
        let colorId = $('#color_id').val();
        let colorName = $('#color_id option:selected').text();
        let imeiNo = $('#imei_number_enter').val(); // Single IMEI value
        let rate = parseFloat($('#rate').val()) || 0;
        let taxPercent = parseFloat($('#tax_percent').val()) || 0;
        let taxAmount = parseFloat($('#tax_amount').val()) || 0;
        let taxSGST = parseFloat($('#tax_sgst').val()) || 0;
        let taxCGST = parseFloat($('#tax_cgst').val()) || 0;
        let discountPercent = parseFloat($('#discount_percent').val()) || 0;
        let discountAmount = parseFloat($('#discount_amount').val()) || 0;
        let netRate = parseFloat($('#net_rate').val()) || 0;
        let upgradeId = $('#upgrade_id').val() || 0;
        let upgradeAmount = parseFloat($('#upgrade_amount').val()) || 0;
        let specialId = $('#special_id').val() || 0;
        let specialAmount = parseFloat($('#special_amount').val()) || 0;
        let priceId = $('#price_id').val() || 0;
        let mopPrice = parseFloat($('#mop_price').val()) || 0;
        let bopPrice = parseFloat($('#bop_price').val()) || 0;
        let wsRate = parseFloat($('#wsp_price').val()) || 0;
        let fspRate = parseFloat($('#fsp_price').val()) || 0;
        let dbPrice = parseFloat($('#db_price').val()) || 0;
        let purchasePrice = parseFloat($('#purchase_price').val()) || 0;

        let source = $('#source').val() || '';
        let customerType = $('#customer_type').val() || '';
        isEdit = false;
        let hasError = false;

        // 1. Basic Field Validations
        if (!imeiNo) { $('#imei_number_enter').addClass('is-invalid'); hasError = true; }
        if (!brandId) { $('#brand_id').addClass('is-invalid'); hasError = true; }
        if (!modelId) { $('#model_id').addClass('is-invalid'); hasError = true; }
        if (!variantId) { $('#variant_id').addClass('is-invalid'); hasError = true; }
        if (!colorId) { $('#color_id').addClass('is-invalid'); hasError = true; }
        if (!rate) { $('#rate').addClass('is-invalid'); hasError = true; }
        if (customerType.toLowerCase() !== 'wholesale') {
            if (netRate < mopPrice) {
                $('#net_rate').addClass('is-invalid');
                $('#net_rate').focus().select();
                $('#rate-error').text(`Net Rate (₹${netRate}) cannot be below MOP (₹${mopPrice})`).show();
                hasError = true;
            }
        }

        let isDuplicate = false;
        $('#itemTable tbody tr').each(function () {
            let existingImei = $(this).find('td.imei').text().trim();
            if (existingImei === imeiNo.trim()) {
                isDuplicate = true;
                return false; // Break the loop
            }
        });

        if (isDuplicate) {
            $('#imei_number_enter').addClass('is-invalid');
            $('#imei-error').text(`Duplicate Error: IMEI ${imeiNo} is already added to the list.`).show();
            $('#imei_number_enter').focus().select();
            hasError = true;
        }

        if (hasError) return;

        // --- Success: Add to Table ---
        updateInwardTable(
            itemId, eanNumber,
            subcategoryId, subcategoryName,
            brandId, brandName,
            modelId, modelName,
            variantId, variantName,
            colorId, colorName,
            imeiNo, rate,
            taxPercent, taxAmount, taxSGST, taxCGST,
            discountPercent, discountAmount,
            netRate,
            upgradeId, upgradeAmount,
            specialId, specialAmount,
            priceId,
            mopPrice, bopPrice, wsRate, fspRate, dbPrice, source, purchasePrice,
        );
        $('#rate').val('');
        $('#imei_number_enter').val('');
        $('#net_rate').val('');
        $('#discount_percent').val('');
        $('#discount_amount').val('');
        $('#tax_cgst').val('');
        $('#tax_sgst').val('');
        $('#upgrade_id').val('');
        $('#upgrade_amount').val('');
        $('#special_id').val('');
        $('#special_amount').val('');
        $('#mop_price').val('');
        $('#bop_price').val('');
        $('#wsp_price').val('');
        $('#fsp_price').val('');
        $('#source').val('');
        $('#tax_amount').val('');
        $('#tax_percent').val('');
        $('#purchase_price').val('');
        $('#db_price').val('');
        $('#ean_number').val('');
        $('#brand_id').val('').trigger('change');
        $('#subcategory_id').val('').trigger('change');
        $('#model_id').val('').trigger('change');
        $('#variant_id').val('').trigger('change');
        $('#color_id').val('').trigger('change');
        $('#imei_number').val('').trigger('change');
        $('#mop_price_text').text('MOP: ₹0').hide();
        setTimeout(() => {
            const $imeiInput = $('#imei_number_enter');
            $imeiInput.focus().select();
            if (!$imeiInput.is(':focus')) {
                $imeiInput.trigger('focus');
            }
        }, 100);
    }



    function updateInwardTable(
        itemId, ean,
        subcategoryId, subcategoryName,
        brandId, brandName,
        modelId, modelName,
        variantId, variantName,
        colorId, colorName,
        imeiNo, rate,
        taxPercent, taxAmount, taxSGST, taxCGST,
        discountPercent, discountAmount,
        netRate,
        upgradeId, upgradeAmount,
        specialId, specialAmount,
        priceId,
        mopPrice, bopPrice, wsRate, fspRate, dbPrice, source, purchasePrice
    ) {
        console.log('Tax amount:', taxAmount, 'discount amount:', discountAmount)

        let unitRate = parseFloat(rate) || 0;
        let rowId = 'row_' + Date.now() + '_' + Math.floor(Math.random() * 1000);


        let newRow = `  
        <tr id="${rowId}"
            data-item-id="${itemId}"
            data-ean="${ean}"
            data-subcategory-id="${subcategoryId}"
            data-brand-id="${brandId}"
            data-model-id="${modelId}"
            data-variant-id="${variantId}"
            data-color-id="${colorId}"
            data-tax-percent="${taxPercent}"
            data-tax-amount="${taxAmount}"
            data-discount-percent="${discountPercent}"
            data-upgrade-id="${upgradeId}"
            data-upgrade-amount="${upgradeAmount}"
            data-special-id="${specialId}"
            data-special-amount="${specialAmount}"
            data-price-id="${priceId}"
            data-mop-price="${mopPrice}"
            data-bop-price="${bopPrice}"
            data-wsp-price="${wsRate}"
            data-fsp-price="${fspRate}"
            data-db-price="${dbPrice}"
            data-source="${source}"
            data-purchase-price="${purchasePrice}"
            style="vertical-align: middle;">

            <td>
                <button type="button" class="btn btn-outline-success btn-xs p-1" onclick="editInwardRow('${rowId}')">
                    <i class="fas fa-edit"></i>
                </button>
                <button type="button" class="btn btn-outline-danger btn-xs p-1" onclick="$(this).closest('tr').remove(); updateSalesSummary();">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </td>

            <td>${subcategoryName}</td>
            <td>${brandName}</td>
            <td>${modelName}</td>
            <td>${variantName}</td>
            <td>${colorName}</td>
            <td class="imei">${imeiNo}</td>            
            <td class="rate">${rate}</td>
            <td class="discount">${discountAmount}</td>   
            <td class="tax_cgst">${taxCGST}</td>
            <td class="tax_sgst">${taxSGST}</td>
            <td class="net_rate">${netRate}</td>
        </tr>
    `;

        let $row = $(newRow);
        $('#itemTable tbody').append($row);

        updateSalesSummary();
    }





    function editInwardRow(rowId) {
        const $row = $('#' + rowId);
        if (!$row.length) return;

        isEdit = true;
        console.log('[editInwardRow] START - isEdit locked');

        const data = {
            itemId: $row.attr('data-item-id'),
            ean: $row.attr('data-ean'), // Fallback check
            subcategoryId: $row.attr('data-subcategory-id'),
            brandId: $row.attr('data-brand-id'),
            modelId: $row.attr('data-model-id'),
            variantId: $row.attr('data-variant-id'),
            colorId: $row.attr('data-color-id'),
            mopPrice: $row.attr('data-mop-price'),
            taxP: $row.attr('data-tax-percent'),
            taxAmount: $row.attr('data-tax-amount'),
            discP: $row.attr('data-discount-percent') || '',
            upgradeId: $row.attr('data-upgrade-id'),
            upgradeAMt: $row.attr('data-upgrade-amount'),
            specialId: $row.attr('data-special-id'),
            specialAMt: $row.attr('data-special-amount'),
            priceId: $row.attr('data-price-id'),
            mopPrice: $row.attr('data-mop-price'),
            bopPrice: $row.attr('data-bop-price'),
            wspPrice: $row.attr('data-wsp-price'),
            fspPrice: $row.attr('data-fsp-price'),
            dbPrice: $row.attr('data-db-price'),
            source: $row.attr('data-source'),
            imei: $row.find('.imei').text().trim(),
            rate: $row.find('.rate').text().trim(),
            net: $row.find('.net_rate').text().trim(),
            discA: $row.find('.discount').text().trim() || '',
            taxCGST: $row.find('.tax_cgst').text().trim() || '',
            taxSGST: $row.find('.tax_sgst').text().trim() || '',
            purchasePrice: $row.attr('data-purchase-price'),
        };
        $('#imei_number_enter').val(data.imei);

        $('#item_id').val(data.itemId);
        $('#ean_number').val(data.ean);
        $('#rate').val(data.rate);
        $('#tax_percent').val(data.taxP);
        $('#tax_amount').val(data.taxAmount);
        $('#tax_cgst').val(data.taxCGST);
        $('#tax_sgst').val(data.taxSGST);
        $('#discount_percent').val(data.discP);
        $('#discount_amount').val(data.discA);
        $('#net_rate').val(data.net);
        $('#upgrade_id').val(data.upgradeId);
        $('#upgrade_amount').val(data.upgradeAMt);
        $('#special_id').val(data.specialId);
        $('#special_amount').val(data.specialAMt);
        $('#mop_price').val(data.mopPrice);
        $('#bop_price').val(data.bopPrice);
        $('#wsp_price').val(data.wspPrice);
        $('#fsp_price').val(data.fspPrice);
        $('#source').val(data.source);
        $('#price_id').val(data.priceId);
        $('#db_price').val(data.dbPrice);
        $('#purchase_price').val(data.purchasePrice);

        $('#subcategory_id').val(data.subcategoryId).trigger('change');

        loadBrand('subcategory_id', 'brand_id', data.brandId, function () {
            loadModels('brand_id', 'model_id', data.modelId, function () {
                loadVariants('brand_id', 'model_id', 'variant_no', data.variantId, function () {
                    loadColors('brand_id', 'model_id', 'variant_no', 'color_id', data.colorId, function () {
                    });
                });
            });
        });


        $('#rate').val(data.rate);

        $row.remove();

        if (typeof updateSalesSummary === "function") updateSalesSummary();

        setTimeout(() => {
            isEdit = false;
            console.log('[editInwardRow] END - isEdit unlocked');
        }, 3000);

        $('html, body').animate({ scrollTop: $("#ean_number").offset().top - 100 }, 500);
    }




    // Payment Mode Validation Function
    function validatePaymentModes() {
        let errors = [];

        // Get checkbox states
        const cashChecked = $('.payment-option[data-target="cashBox"]').is(':checked');
        const bankChecked = $('.payment-option[data-target="bankBox"]').is(':checked');
        const exchangeChecked = $('.payment-option[data-target="exchangeBox"]').is(':checked');
        const cardChecked = $('.payment-option[data-target="cardBox"]').is(':checked');
        const financeChecked = $('.payment-option[data-target="financeBox"]').is(':checked');

        // Cash validation
        if (cashChecked) {
            const cashAmount = parseFloat($('#cash_amount').val()) || 0;
            if (cashAmount <= 0) {
                errors.push('Cash amount is required when Cash mode is selected');
            }
        }

        // Bank validation
        if (bankChecked) {
            const bankId = $('#bank_id').val();
            const bankAmount = parseFloat($('#bank_amount').val()) || 0;

            if (!bankId || bankId === '') {
                errors.push('Bank selection is required when Bank mode is selected');
            }
            if (bankAmount <= 0) {
                errors.push('Bank amount is required when Bank mode is selected');
            }
        }

        // Exchange validation
        if (exchangeChecked) {
            const exchangeDetails = $('#exchange_details').val() || '';
            if (exchangeDetails === '') {
                errors.push('Exchange details are required when Exchange mode is selected');
            }
            const exchangeAmount = parseFloat($('#exchange_amount').val()) || 0;
            if (exchangeAmount <= 0) {
                errors.push('Exchange amount is required when Exchange mode is selected');
            }
        }

        // Card validation
        if (cardChecked) {
            const cardId = $('#card_id').val();
            const cardAmount = parseFloat($('#card_amount').val()) || 0;

            if (!cardId || cardId === '') {
                errors.push('Card/Finance selection is required when Credit Card mode is selected');
            }
            if (cardAmount <= 0) {
                errors.push('Card amount is required when Credit Card mode is selected');
            }

            // Card charges bank validation - check mode regardless of charge amount
            const cardMode = $('input[name="card_mode"]:checked').val();
            if (cardMode === 'bank') {
                const cardBankId = $('#card_bank_id').val();
                if (!cardBankId || cardBankId === '') {
                    errors.push('Bank selection is required when Card charge mode is Bank');
                }
            }
        }

        // Finance validation
        if (financeChecked) {
            const financeId = $('#finance_id').val();
            const financeAmount = parseFloat($('#finance_amount').val()) || 0;

            if (!financeId || financeId === '') {
                errors.push('Finance selection is required when Finance mode is selected');
            }
            if (financeAmount <= 0) {
                errors.push('Finance amount is required when Finance mode is selected');
            }

            // Finance charges bank validation - check mode regardless of charge amount
            const financeMode = $('input[name="finance_mode"]:checked').val();
            if (financeMode === 'bank') {
                const financeBankId = $('#finance_bank_id').val();
                if (!financeBankId || financeBankId === '') {
                    errors.push('Bank selection is required when Finance charge mode is Bank');
                }
            }
        }

        return errors;
    }

    $('#sales_form').on('submit', function (e) {
        e.preventDefault();
        // Trigger browser's built-in validation
        if (!this.checkValidity()) {
            this.reportValidity();
            return;
        }

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

        // Validate payment modes
        const paymentErrors = validatePaymentModes();
        if (paymentErrors.length > 0) {
            // Show all errors in a SweetAlert
            const errorList = paymentErrors.map(err => `• ${err}`).join('\n');
            showSweetAlert('warning', errorList);
            return;
        }

        // ---------------------------
        // Collect items
        // ---------------------------
        let items = [];
        $('#itemTable tbody tr').each(function () {
            let $row = $(this);
            items.push({
                item_id: $row.data('item-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,
                upgrade_id: $row.data('upgrade-id'),
                upgrade_amount: $row.data('upgrade-amount'),
                special_id: $row.data('special-id'),
                special_amount: $row.data('special-amount'),
                price_id: $row.data('price-id'),
                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'),
                source: $row.data('source'),
                purchase_price: $row.data('purchase-price'),
            });
        });

        // ---------------------------
        // 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_order/',
            null,
            'sales_form',
            true,
            'Sales Order',
            [
                function () {
                    $('#sales_form')[0].reset();
                    $('#itemTable tbody').empty();
                    $('#total_quantity').text('0');
                    $('#sub_total').text('0.00');
                    $('#total_payable').text('0.00');
                    $('#balance_amount').text('0.00');
                    $('#cash_amount, #bank_amount, #exchangeBox input[type="number"], #cardBox input[type="number"], #financeBox input[type="number"]').val('0.00');
                    $('#ean_number').focus().select();
                    window.location.href = '/sales';
                }
            ],
            formData,
            false
        );
    });


    function sanitizeNumericInput(element) {
        let $el = $(element);
        let val = $el.is('input') ? $el.val() : $el.text();

        let cleaned = val.replace(/[^0-9.]/g, '');

        let parts = cleaned.split('.');
        if (parts.length > 2) {
            cleaned = parts[0] + '.' + parts.slice(1).join('');
        }

        if (val !== cleaned) {
            if ($el.is('input')) {
                $el.val(cleaned);
            } else {
                $el.text(cleaned);
                const el = element;
                const range = document.createRange();
                const sel = window.getSelection();
                range.selectNodeContents(el);
                range.collapse(false); // Move to the end
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }

    $(document).on('input', '#rate, #discount_percent, #discount_amount', function () {
        sanitizeNumericInput(this);
        let source = '';
        if (this.id === 'discount_percent') source = 'percent';
        if (this.id === 'discount_amount') source = 'amount';
        calculateAmount(source);
    });

    $(document).on('input', '#cash_amount, #bank_amount, #exchange_amount, #card_amount, #finance_amount, #other_charges', function () {
        sanitizeNumericInput(this); // Clean the input first
        updateSalesSummary();
    });

    $("#b2c_form").submit(function (e) {
        e.preventDefault();
        if (!$('#b2c-phone-error').hasClass('d-none')) {
            $('#b2c_phone').focus();
            return false;
        }
        handleFormSubmit(
            this,
            '/customer_add/',
            'add_b2c_modal',
            'b2c_form',
            true,
            'Customer',
            [
                function () {
                    loadCustomers(getSelectedCustomerSource() || 'b2b_customer');
                }
            ]
        );
    });

    $("#b2b_form").submit(function (e) {
        console.log("B2B Form submit triggered!");
        e.preventDefault();
        if (!$('#b2b-phone-error').hasClass('d-none')) {
            $('#b2b_phone').focus();
            return false;
        }

        // All good → submit
        handleFormSubmit(
            this,
            '/customer_add/',
            'add_b2b_modal',
            'b2b_form',
            true,
            'Customer',
            [
                function () {
                    loadCustomers(getSelectedCustomerSource() || 'b2b_customer');
                }
            ]
        );
    });

    function checkCustomerPhone(inputId, errorId, url, paramName) {
        const $field = $(inputId);
        const $error = $(errorId);
        const value = $field.val().trim();

        if (value.length < 3) {
            $error.addClass('d-none');
            $field.removeClass('is-invalid');
            return;
        }

        $.ajax({
            url: url,
            type: 'GET',
            data: { [paramName]: value }, // Uses ES6 computed property name
            success: function (res) {
                if (res.exists) {
                    $error.removeClass('d-none');
                    $field.addClass('is-invalid');
                } else {
                    $error.addClass('d-none');
                    $field.removeClass('is-invalid');
                }
            },
            error: function (err) {
                console.error("Validation check failed", err);
            }
        });
    }

    $('#b2b_phone').on('blur', function () {
        checkCustomerPhone('#b2b_phone', '#b2b-phone-error', '/check_customer_phone/', 'phone');
    });

    $('#b2c_phone').on('blur', function () {
        checkCustomerPhone('#b2c_phone', '#b2c-phone-error', '/check_customer_phone/', 'phone');
    });
    function loadCustomers(customerSource = 'b2b_customer') {
        $.ajax({
            url: '/ajax_load_customers/',
            type: 'GET',
            data: { customer_source: customerSource },
            success: function (response) {
                const $customer = $('#customer_id');
                $customer.empty();
                $customer.append('<option value="">Select Customer</option>');

                response.data.forEach(c => {
                    const phone = c.phone || '';
                    const cType = c.c_type || '';
                    $customer.append(`
                    <option
                        value="${c.id}"
                        data-phone="${phone}"
                        data-name="${c.name}"
                        data-customer-type="${c.customer_type || ''}"
                        data-c-type="${cType}">
                        ${c.name} - ${phone}${cType ? ` (${cType})` : ''}
                    </option>
                `);
                });

                $customer.select2({
                    placeholder: 'Select Customer',
                    dropdownParent: $('#customer_id').parent()
                });

                if (!$customer.prop('disabled')) {
                    $customer.select2('open');
                }

                resetSalesRequestSelection(!isB2BBoysSelected());
                updateCustomerTypeControls();
                updateSalesChannel();
            }
        });
    }

    $('#customer_id').on('change', function () {
        const selected = $(this).find(':selected');
        const customerId = $(this).val() || '';
        $('#customer_name').val(selected.data('name') || '');
        $('#customer_phone').val(selected.data('phone') || '');
        updateCustomerTypeControls();
        resetSalesRequestSelection(!isB2BBoysSelected());
        if (isB2BBoysSelected() && customerId) {
            loadSalesRequestsForCustomer(customerId);
        }
        updateSalesChannel();
    });

</script>