{% load static %}
{% include 'includes/header.html' %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css">

<style>
    .custom-col-8 {
        width: 77% !important;
    }

    .custom-col-4 {
        width: 23% !important;
    }

    :root {
        --tagify-dd-color-primary: #57adf1;
    }

    .tagify__tag {
        --tag-bg: #57adf1;
        --tag-hover: #469cdb;
        --tag-text-color: #fff;
        --tag-remove-btn-color: #fff;
    }

    .tagify__tag>div::before {
        box-shadow: 0 0 0 1.1em #57adf1 inset !important;
    }

    .tagify__tag:hover:not([readonly]) div::before {
        box-shadow: 0 0 0 1.1em #469cdb inset !important;
    }

    .tagify {
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
    }

    #cash_table td {
        vertical-align: middle;
    }

    .item-details-column {
        min-width: 180px;
        max-width: 250px;
        white-space: normal !important;
        /* Forces text wrapping */
        word-wrap: break-word;
        vertical-align: top;
        line-height: 1.4;
    }

    .text-wrap-detail {
        display: inline-block;
        font-size: 0.9rem;
        color: #333;
    }

    /* Standardizes table input appearance */
    .table-imei {
        font-size: 12px;
    }
</style>

{% 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">Purchase Inward</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item">Purchase</li>
                <li class="breadcrumb-item active" aria-current="page">Purchase Inward </li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!-- FormValidaton -->
        <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-8 custom-col-8">
                            <div class="row">

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

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






                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id">Purchase Order</label>
                                    <select class="select2 form-control" id="po_id" name="po_id" multiple>
                                    </select>
                                    <div class="invalid-feedback" id="sales-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 class="row">
                                    <div class="col-md-3 mb-5 form-control-validation">
                                        <label class="form-label" for="item_code">EAN Number</label>
                                        <input type="text" id="ean_number" class="form-control typeahead"
                                            name="ean_number" autocomplete="off" onkeydown="handleEanKeydown(event)"
                                            style="background-color: #fffacd;" />
                                        <input type="hidden" id="item_id" name="item_id" />
                                    </div>

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

                                    <div class="col-md-3 mb-5 form-control-validation">
                                        <label class="form-label" for="po_date">Supplier Invoice No <span
                                                style="color: red;">*</span></label>
                                        <input type="text" id="supplier_no" class="form-control" name="supplier_no"
                                            required />
                                        <div class="invalid-feedback" id="supplier-no-error"></div>
                                    </div>
                                    <div class="col-3 mb-5">
                                        <input class="form-check-input " type="checkbox" id="is_demo" name="is_demo"
                                            value=1 style="height: 25px; width: 25px; margin-top:8%; ">
                                        <label class="form-check-label" for="is_demo" style="margin-top: 9%;">Is Demo
                                            Stock</label>
                                    </div>



                                </div>

                                <div class="row">
                                    <div class="col-md-3 form-control-validation mb-5">
                                        <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 k in subcategory %}
                                            <option value="{{k.id}}">{{k.name}}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="invalid-feedback" id="brand-error"></div>
                                    </div>
                                    <div class="col-md-3 form-control-validation mb-5">
                                        <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="brand-error"></div>
                                    </div>

                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="uom_id">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 mb-5">
                                        <label class="form-label" for="uom_id">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 mb-5">
                                        <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 class="invalid-feedback" id="color-error"></div>
                                    </div>


                                    <div class="col-md-3 form-control-validation">
                                        <div class="row">
                                            <div class="col-md-6 form-control-validation mb-5">
                                                <label class="form-label" for="rate">Rate (Exclusive ₹)</label>
                                                <input type="number" id="rate" class="form-control" name="rate"
                                                    min="0" />
                                                <div class="invalid-feedback" id="rate-error"></div>
                                            </div>
                                            <div class="col-md-6 form-control-validation mb-5">
                                                <label class="form-label" for="rate">MRP (₹)</label>
                                                <input type="number" id="mrp_price" class="form-control"
                                                    name="mrp_price" min="0" />
                                            </div>

                                        </div>
                                    </div>



                                    <div class="col-md-3 form-control-validation">
                                        <div class="row">
                                            <div class="col-md-6 form-control-validation mb-3">
                                                <label class="form-label" for="quantity">MOP (₹)</label>
                                                <input type="text" id="mop_price" class="form-control" name="mop_price"
                                                    style="background-color: #EAF4FD;" />
                                                <div class="invalid-feedback" id="mop-error"></div>
                                            </div>

                                            <div class="col-md-6 form-control-validation mb-5">
                                                <label class="form-label" for="rate">BOP (₹)</label>
                                                <input type="number" id="bop_price" class="form-control"
                                                    name="bop_price" min="0" style="background-color: #EAF4FD;" />
                                                <div class="invalid-feedback" id="bop-error"></div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-md-3 form-control-validation">
                                        <div class="row">
                                            <div class="col-md-6 form-control-validation mb-3">
                                                <label class="form-label" for="fsp_price">FSP (₹)</label>
                                                <input type="text" id="fsp_price" class="form-control" name="fsp_price"
                                                    style="background-color: #EAF4FD;" readonly />
                                                <small id="fsp_percent" class="form-text text-muted"
                                                    style="display: none;"></small>
                                            </div>

                                            <div class="col-md-6 form-control-validation mb-5">
                                                <label class="form-label" for="rate">WSP (₹)</label>
                                                <input type="number" id="wsp_price" class="form-control"
                                                    name="wsp_price" min="0" style="background-color: #EAF4FD;"
                                                    readonly />
                                                <small id="wsp_percent" class="form-text text-muted"
                                                    style="display: none;"></small>
                                            </div>

                                        </div>
                                    </div>



                                    <div class="col-md-3 form-control-validation mb-3">
                                        <label class="form-label" for="imei_number">IMEI Number</label>
                                        <input type="text" id="imei_number" class="form-control" name="imei_number" />
                                        <div class="invalid-feedback" id="imei-error"></div>
                                    </div>

                                    <div class="col-md-3 form-control-validation mb-5">
                                        <div class="row">
                                            <div class="col-6">
                                                <label class="form-label" for="discount">Discount (%)</label>
                                                <input type="number" id="discount_percent" class="form-control"
                                                    placeholder="%" min="0" />
                                                <div class="invalid-feedback" id="discount-percent-error"></div>
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label" for="discount">Discount (₹)</label>

                                                <input type="number" id="discount_amount" class="form-control"
                                                    placeholder="₹" min="0" />
                                            </div>
                                        </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="quantity">Quantity</label>
                                                <input type="text" id="quantity" class="form-control" name="quantity"
                                                    readonly />
                                            </div>
                                            <div class="col-md-6 form-control-validation">
                                                <label class="form-label" for="amount">Net Rate (₹)</label>
                                                <input type="number" id="net_rate" class="form-control" name="net_rate"
                                                    min="0" readonly />
                                                <div class="invalid-feedback" id="net-rate-error"></div>
                                            </div>
                                        </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="quantity">CGST (₹)(9%)</label>
                                                <input type="text" id="tax_cgst" class="form-control" name="tax_cgst"
                                                    readonly disabled />
                                            </div>
                                            <div class="col-md-6 form-control-validation">
                                                <label class="form-label" for="amount">SGST (₹)(9%)</label>
                                                <input type="number" id="tax_sgst" class="form-control" name="tax_sgst"
                                                    min="0" readonly disabled />
                                            </div>

                                        </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">IGST (₹)(18%)</label>
                                                <input type="number" id="tax_igst" class="form-control" name="tax_igst"
                                                    min="0" readonly disabled />
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label" for="amount">Amount (₹)</label>
                                                <input type="number" id="amount" class="form-control" name="amount"
                                                    min="0" readonly disabled />
                                                <div class="invalid-feedback" id="amount-error"></div>

                                            </div>
                                            <div class="col-md-6">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-3 text-start mt-6">
                                        <button type="button" class="btn btn-success" name="add_item" id="add_item"
                                            onclick="addInwardRow()">+ Add</button>
                                        <input type="hidden" id="price_list_id" name="price_list_id" />
                                        <input type="hidden" id="db_price" name="db_price" />
                                        <input type="hidden" id="tax_amount" name="tax_amount" />
                                        <input type="hidden" id="hsn_code" name="hsn_code" />
                                        <input type="hidden" id="tax_percent" name="tax_percent" />
                                        <input type="hidden" id="base_rate" name="base_rate" />

                                    </div>

                                    <div class="col-12 mt-4">
                                        <div class="table-responsive text-nowrap">
                                            <table class="table mt-5" id="itemTable">
                                                <thead>
                                                    <tr>
                                                        <th>Actions</th>
                                                        <th>EAN</th>
                                                        <th>Rate (₹)</th>
                                                        <th>MOP (₹)</th>
                                                        <th>BOP (₹)</th>
                                                        <th>Discount (₹)</th>
                                                        <th>IMEI</th>
                                                        <th>Quantity</th>
                                                        <th>Net Rate (₹)</th>
                                                        <th>CGST (₹)</th>
                                                        <th>SGST (₹)</th>
                                                        <th>IGST (₹)</th>
                                                        <th>Amount (₹)</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-4 custom-col-4 mt-0 mb-5 form-control-validation" style="padding: 2%;">
                            <div class="row">
                                <div class="col-12" style="padding: 0px; padding-top: 0px;">
                                    <div>
                                        <table id="summaryTable" class="table table-bordered mb-0"
                                            style="border: 1px solid #f2f2f2; background-color: #9cd3f3;">
                                            <thead style="background-color: #9cd3f3;">
                                                <tr>
                                                    <th colspan="2" style="text-align: center;">Summary Table &nbsp; -
                                                        &nbsp;<span style="color: red;">(Quantity&nbsp; : &nbsp;<span
                                                                id="qty_total_placeholder">0</span>) </span></th>
                                                </tr>
                                            </thead>
                                            <tbody style="background-color: #EAF4FD;">

                                                <tr>
                                                    <td>Sub Total (₹)</td>
                                                    <td align="end" colspan="2" id="sub_total_placeholder">0</td>
                                                </tr>
                                                <tr>
                                                    <td>Total Discount (₹)</td>
                                                    <td align="end" colspan="2" id="qty_discount">0</td>
                                                </tr>
                                                <tr>
                                                    <td>Bill Discount (₹)</td>
                                                    <td align="end" colspan="2" id="bill_discount"
                                                        contenteditable="true" style="background-color: #d2efff ;">0
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td> CGST (₹) (9 %)</td>
                                                    <td align="end" colspan="2" id="total_tax_cgst">0</td>
                                                </tr>
                                                <tr>
                                                    <td> SGST (₹) (9 %)</td>
                                                    <td align="end" colspan="2" id="total_tax_sgst">0</td>
                                                </tr>
                                                <tr>
                                                    <td> TDS (₹)</td>
                                                    <td align="end" colspan="2" contenteditable="true"
                                                        id="total_tax_tds" style="background-color: #d2efff;">0</td>
                                                </tr>

                                                <tr>
                                                    <td>Total (₹)</td>
                                                    <td align="end" colspan="2" id="total_amount">0.00</td>
                                                </tr>
                                                <tr>
                                                    <td>RoundOff (₹)</td>
                                                    <td align="end" colspan="2" id="round_off_placeholder">0.00</td>
                                                </tr>

                                                <tr>
                                                    <td>Grand Total (₹)</td>
                                                    <td colspan="2" id="total_payable" align="end"
                                                        style="background-color: #9cd3f3; color: black; font-size: 21px;">
                                                        0.00
                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </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 mb-5 mt-5">
                                    <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">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}
{% include 'purchase_inward/order_js.html' %}
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script>

    let loadedPOs = new Set();
    let imeiTagify = null;


    $(document).ready(function () {
        CurrentDate('supplier_date');
        CurrentDate('invoice_date');
        loadTypeahead('#ean_number', { 'ean': 'ean', 'item_id': 'id' }, '/load_ean_number/');
        initImeiTagify('imei_number', 'quantity', 'imei-error');

        $('#supplier_id').select2('open');



        $('#rate').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                $('#mop_price').focus();
            }
        });

        $('#mop_price').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                $('#bop_price').focus();
            }
        });



        $('#discount_percent').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                $('#discount_amount').focus();
            }
        });

        $('#discount_amount').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addInwardRow();
            }
        });

        $('#bop_price').on('keydown', function (e) {
            if (e.key === 'Enter') {
                e.preventDefault();

                if (typeof imeiTagify !== 'undefined') {
                    setTimeout(() => {
                        imeiTagify.DOM.input.focus();
                        const range = document.createRange();
                        const sel = window.getSelection();
                        range.selectNodeContents(imeiTagify.DOM.input);
                        range.collapse(false);
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }, 50);
                } else {
                    $('#imei_number').focus();
                }
            }
        });

        function resetInputs() {
            $('#rate').val('');
            $('#discount_percent').val('');
            $('#discount_amount').val('');

            imeiTagify.removeAllTags();
            $('#quantity').val('');
            imeiTagify.DOM.input.focus();
        }

        $('#supplier_id').on('select2:select', function () {
            $('#ean_number').focus().select();
        });
    });

    $(document).on('keydown', 'input', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
        }
    });




    function clearErrors() {
        $('#brand_id, #model_id, #variant_id, #color_id, #rate, #imei_number').removeClass('is-invalid');
        $('#brand-error').text('');
        $('#model-error').text('');
        $('#variant-error').text('');
        $('#color-error').text('');
        $('#rate-error').text('');
        $('#imei-error').text('');
    }


    function getEditableNumber(selector) {
        let val = parseFloat($(selector).text());
        return isNaN(val) ? 0 : val;
    }

    function updateSummaryTable() {
        let totalGrossAmount = 0;   // Sum of (Rate * Qty)
        let totalQty = 0;
        let totalDiscount = 0;      // Sum of (UnitDiscount * Qty)
        let totalCGST = 0;
        let totalSGST = 0;
        let totalIGST = 0;
        let totalAmountWithTax = 0; // Grand Total

        $('#itemTable tbody tr').each(function () {
            let qty = parseFloat($(this).find('.quantity').text()) || 0;
            let rate = parseFloat($(this).find('.rate').text()) || 0;
            let discount = parseFloat($(this).find('.discount_amount').text()) || 0;
            let cgst = parseFloat($(this).find('.tax_cgst').text()) || 0;
            let sgst = parseFloat($(this).find('.tax_sgst').text()) || 0;
            let igst = parseFloat($(this).find('.tax_igst').text()) || 0;
            let amount = parseFloat($(this).find('.amount').text()) || 0;

            // Cumulative Totals
            totalQty += qty;
            totalGrossAmount += (rate * qty);
            totalDiscount += (discount * qty); // Discount is per unit
            totalCGST += cgst;
            totalSGST += sgst;
            totalIGST += igst;
            totalAmountWithTax += amount;
        });

        $('#sub_total_placeholder').text(totalGrossAmount.toFixed(2));
        $('#qty_total_placeholder').text(`${totalQty} Nos`).data('qty', totalQty);


        $('#qty_discount').text(totalDiscount.toFixed(2));
        $('#total_tax_cgst').text(totalCGST.toFixed(2));
        $('#total_tax_sgst').text(totalSGST.toFixed(2));
        $('#total_tax_igst').text(totalIGST.toFixed(2)); // Added IGST support

        let tdsAmount = getEditableNumber('#total_tax_tds');

        let subTotal = totalAmountWithTax + tdsAmount;
        $('#total_amount').text(subTotal.toFixed(2));

        let finalPayableRounded = Math.round(subTotal);
        let roundOff = finalPayableRounded - subTotal;

        $('#round_off_placeholder').text(roundOff.toFixed(2));

        let billDiscount = parseFloat($('#bill_discount').val()) || parseFloat($('#bill_discount').text()) || 0;

        let totalPayable = finalPayableRounded - billDiscount;

        $('#total_payable').text(totalPayable.toFixed(2));

        if (typeof updateCashSummary === "function") {
            let cash = typeof getCashAmount === "function" ? getCashAmount() : 0;
            updateCashSummary(totalPayable, cash);
        }
    }
    $(document).on('input', '#total_tax_tds', updateSummaryTable);
    $(document).on('input', '#bill_discount', updateSummaryTable);



    function addInwardRow() {
        clearErrors();
        isEditingRow = false;

        // 1. Capture Inputs
        let itemId = $('#item_id').val();
        let supplierNo = $('#supplier_no').val();
        let poId = $('#po_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_id').val();
        let variantName = $('#variant_id option:selected').text();
        let colorId = $('#color_id').val();
        let colorName = $('#color_id option:selected').text();
        let rate = parseFloat($('#rate').val()) || 0;
        let baseRate = parseFloat($('#base_rate').val()) || 0;
        let fspPrice = parseFloat($('#fsp_price').val()) || 0;
        let wspPrice = parseFloat($('#wsp_price').val()) || 0;
        let mopPrice = parseFloat($('#mop_price').val()) || 0;
        let bopPrice = parseFloat($('#bop_price').val()) || 0;
        let discountAmount = parseFloat($('#discount_amount').val()) || 0;
        let discountPercent = parseFloat($('#discount_percent').val()) || 0;
        let netRate = parseFloat($('#net_rate').val()) || 0;
        let taxCGST = parseFloat($('#tax_cgst').val()) || 0;
        let taxSGST = parseFloat($('#tax_sgst').val()) || 0;
        let taxIGST = parseFloat($('#tax_igst').val()) || 0;
        let amount = parseFloat($('#amount').val()) || 0;
        let dbPrice = parseFloat($('#db_price').val()) || 0;
        let taxAmount = parseFloat($('#tax_amount').val()) || 0;
        let priceListId = $('#price_list_id').val();
        let hsnCode = $('#hsn_code').val();
        let mrpPrice = parseFloat($('#mrp_price').val()) || 0;
        let taxPercent = parseFloat($('#tax_percent').val()) || 0;

        let hasError = false;

        let imeiList = imeiTagify ? imeiTagify.value.map(t => t.value.toUpperCase()) : [];
        let quantity = imeiList.length;

        $('#bop_price, #mop_price').removeClass('is-invalid');
        $('#bop-error, #mop-error').text('');
        if (!supplierNo) {
            $('#supplier_no').addClass('is-invalid');
            $('#supplier_no').focus().select();
            $('#supplier-no-error').text('Supplier No is required');
            hasError = true;
        }

        if (!mopPrice || mopPrice <= 0) {
            $('#mop_price').addClass('is-invalid');
            $('#mop_price').focus().select();
            $('#mop-error').text('MOP must be greater than 0');
            hasError = true;
        }

        if (!bopPrice || bopPrice <= 0) {
            $('#bop_price').addClass('is-invalid');
            $('#bop_price').focus().select();
            $('#bop-error').text('BOP must be greater than 0');
            hasError = true;
        }

        if (mopPrice > 0 && bopPrice > 0 && mopPrice > bopPrice) {
            $('#mop_price, #bop_price').addClass('is-invalid');
            $('#bop-error').text('BOP must be greater than or equal to MOP');
            hasError = true;
        }
        /* ---------- BASIC VALIDATION ---------- */
        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 <= 0) {
            $('#rate').addClass('is-invalid');
            $('#rate').focus().select();
            $('#rate-error').text('Rate must be greater than 0');
            hasError = true;
        }

        if (!amount || amount <= 0) {
            $('#amount').addClass('is-invalid');
            $('#amount').focus().select();
            $('#amount-error').text('Amount must be greater than 0');
            hasError = true;
        }

        if (!netRate || netRate <= 0) {
            $('#net_rate').addClass('is-invalid');
            $('#net_rate').focus().select();
            $('#net-rate-error').text('Net Rate must be greater than 0');
            hasError = true;
        }

        // ---------- DISCOUNT PERCENT VALIDATION ----------
        $('#discount_percent').removeClass('is-invalid');
        $('#discount-percent-error').text('');

        if (discountPercent < 0 || discountPercent > 50) {
            $('#discount_percent').addClass('is-invalid');
            $('#discount_percent').focus().select();
            $('#discount-percent-error').text('Discount percent must be between 0 and 50');
            hasError = true;
        }


        if (imeiList.length === 0) {
            $('#imei_number').addClass('is-invalid');
            $('#imei-error').text('Please enter at least one IMEI');
            hasError = true;
        }

        if (hasError) return;

        /* ---------- DUPLICATE IMEI CHECK (TABLE) ---------- */
        let tableImeis = [];
        $('#itemTable tbody tr').each(function () {
            let rowImeis = $(this).data('imeis') || [];
            tableImeis.push(...rowImeis.map(i => i.toUpperCase()));
        });

        let duplicateTableImeis = imeiList.filter(i => tableImeis.includes(i));
        if (duplicateTableImeis.length > 0) {
            $('#imei_number').addClass('is-invalid');
            $('#imei-error').text('IMEI already exists in table: ' + duplicateTableImeis.join(', '));
            return;
        }

        /* ---------- DUPLICATE IMEI CHECK (DB) ---------- */
        let dbError = false;
        $.ajax({
            url: '/check-imei/',
            type: 'POST',
            async: false,
            data: {
                imeis: imeiList,
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function (res) {
                if (res.exists && res.duplicate_imeis?.length) {
                    $('#imei_number').addClass('is-invalid');
                    $('#imei-error').text('IMEI already exists in system: ' + res.duplicate_imeis.join(', '));
                    dbError = true;
                }
            }
        });

        if (dbError) return;

        // 3. Add Row
        updateInwardTable(
            itemId, poId, eanNumber,
            subcategoryId, subcategoryName,
            brandId, brandName,
            modelId, modelName,
            variantId, variantName,
            colorId, colorName,
            imeiList, quantity,
            rate, baseRate, fspPrice, wspPrice, mopPrice, bopPrice,
            discountAmount, discountPercent,
            netRate, taxCGST, taxSGST, taxIGST,
            amount, dbPrice, taxAmount, priceListId, mrpPrice, hsnCode, taxPercent
        );

        // 4. Full Reset
        resetInwardForm();
    }

    function resetInwardForm() {
        imeiTagify.removeAllTags();
        $('#quantity, #item_id, #po_id, #rate, #fsp_price, #wsp_price, #mop_price, #bop_price, #mrp_price, #hsn_code, #base_rate').val('');
        $('#discount_percent, #discount_amount, #net_rate, #tax_cgst, #tax_sgst, #tax_igst, #amount').val('');
        $('#db_price, #tax_amount, #price_list_id').val('');
        $('#subcategory_id, #brand_id, #model_id, #variant_id, #color_id').val('').trigger('change');
        $('#ean_number').val('');
        $('.is-invalid').removeClass('is-invalid');
        $('#fsp_text, #wsp_text, #mrp_text').hide();
        setTimeout(() => {
            $('#ean_number').focus().select();

        }, 50);

    }

    function updateInwardTable(
        itemId, poId, ean,
        subcategoryId, subcategoryName,
        brandId, brandName,
        modelId, modelName,
        variantId, variantName,
        colorId, colorName,
        imeiList, quantity,
        rate, baseRate, fspPrice, wspPrice, mopPrice, bopPrice,
        discountAmount, discountPercent,
        netRate, taxCGST, taxSGST, taxIGST,
        amount, dbPrice, taxAmount, priceListId, mrpPrice, hsnCode, taxPercent
    ) {
        if (!Array.isArray(imeiList)) {
            if (typeof imeiList === 'string' && imeiList.trim() !== '') {
                imeiList = imeiList.split(',').map(v => v.trim());
            } else {
                imeiList = [];
            }
        }
        rate = parseFloat(rate) || 0;
        quantity = parseFloat(quantity) || 0;
        let rowId = 'row_' + Date.now();
        console.log('discount percent:', discountPercent, typeof discountPercent);


        let newRow = `
        <tr id="${rowId}"
            data-item-id="${itemId}"
            data-po-id="${poId}"
            data-ean-number="${ean}"
            data-subcategory-id="${subcategoryId}"
            data-brand-id="${brandId}"
            data-model-id="${modelId}"
            data-variant-id="${variantId}"
            data-color-id="${colorId}"
            data-imeis='${JSON.stringify(imeiList)}'
            data-fsp-price="${fspPrice}"
            data-wsp-price="${wspPrice}"
            data-discount-percent="${discountPercent}"
            data-tax-amount="${taxAmount}"
            data-db-price="${dbPrice}"
            data-hsn-code="${hsnCode}"
            data-mrp-price="${mrpPrice}"
            data-base-rate="${baseRate}"
            data-tax-percent="${taxPercent}"
            data-price-list-id="${priceListId}">

            <td>
                <div class="d-flex gap-1">
                    <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(); updateSummaryTable();">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </td>

            <td class="item-details-column">
                <strong>${ean}</strong><br>
                <span class="text-wrap-detail">${subcategoryName}</span><br>
                <span class="text-wrap-detail">${brandName} | ${modelName}</span><br>
                <small class="text-muted">${variantName} | ${colorName}</small>
                <small class="text-muted">HSN:${hsnCode}</small><br>
            </td>

            <td class="rate">${rate.toFixed(2)}</td>
            <td class="mop">${mopPrice}</td>
            <td class="bop">${bopPrice}</td>
            <td class="discount_amount">${discountAmount.toFixed(2)}</td>
            <td>
                <input type="text" style="min-width: 150px;"
                       class="form-control table-imei"
                       value='${imeiList.join(",")}' />
                <div class="invalid-feedback serial-error"></div>
            </td>
            <td class="quantity">${quantity}</td>
            <td class="net_rate">${netRate.toFixed(2)}</td>
            <td class="tax_cgst">${taxCGST.toFixed(2)}</td>
            <td class="tax_sgst">${taxSGST.toFixed(2)}</td>
            <td class="tax_igst">${taxIGST.toFixed(2)}</td>
            <td class="amount">${amount.toFixed(2)}</td>
        </tr>
    `;

        $('#itemTable tbody').append(newRow);
        initTableImeiTagify($('#' + rowId).find('.table-imei')[0]);
        updateSummaryTable();
    }



    function initTableImeiTagify(inputEl) {
        let tagify = new Tagify(inputEl, {
            delimiters: ",",
            duplicate: true,
            trim: true,
            dropdown: { enabled: 0 },
            // This is key: prevent Tagify from doing its own "Enter" logic 
            // while we handle it manually
            callbacks: {
                "invalid": (e) => console.log("Invalid tag attempted:", e.detail)
            }
        });

        inputEl._tagify = tagify;

        function syncRowImeis() {
            let values = tagify.value.map(t => (t.value || '').trim()).filter(v => v !== '');
            $(inputEl).closest('tr').attr('data-imeis', JSON.stringify(values));
        }

        // --- KEYDOWN BEHAVIOR (The Controller) ---
        tagify.on('keydown', function (e) {
            const event = (e && e.detail && e.detail.originalEvent) ? e.detail.originalEvent : null;
            if (!event) return;

            const value = tagify.DOM.input.textContent.trim();

            if (event.key === 'Enter') {
                event.preventDefault(); // STOP the browser from moving focus
                event.stopPropagation(); // STOP other scripts from hearing Enter

                if (value.length > 0) {
                    console.log('➕ Manual Add for:', value);
                    tagify.addTags(value);
                    tagify.DOM.input.textContent = '';

                    // FORCE focus back to the input area immediately
                    // We use requestAnimationFrame for better timing than setTimeout
                    requestAnimationFrame(() => {
                        tagify.DOM.input.focus();
                    });
                }
                else {
                    console.log('Empty - Moving to next row');
                    focusNextImeiField(inputEl);
                }
            }
        });

        // --- REFINED ADD EVENT ---
        // Use a small debounce or check to prevent the double-processing seen in logs
        let isProcessing = false;
        tagify.on('add', function (e) {
            if (isProcessing) return;
            isProcessing = true;

            console.log('🏷️ Unique Tag Added:', e.detail.data.value);

            syncRowImeis();
            let currentQty = tagify.value.length;
            validateTableImeis(tagify, inputEl);
            updateRowQuantity(inputEl, currentQty);

            // Allow next tag after UI updates
            setTimeout(() => { isProcessing = false; }, 50);
        });

        tagify.on('remove', function (e) {
            syncRowImeis();
            updateRowQuantity(inputEl, tagify.value.length);
            validateTableImeis(tagify, inputEl);
        });

        syncRowImeis();
        validateTableImeis(tagify, inputEl);
    }


    function focusNextImeiField(currentInput) {
        let allImeiInputs = $('.table-imei').toArray();
        let currentIndex = allImeiInputs.indexOf(currentInput);

        console.log(`Searching for next field. Current index: ${currentIndex}`);

        for (let i = currentIndex + 1; i < allImeiInputs.length; i++) {
            let nextTagify = allImeiInputs[i]._tagify;
            if (nextTagify && nextTagify.value.length === 0) {
                console.log('🎯 Found empty field at index:', i);
                nextTagify.DOM.input.focus();
                return;
            }
        }
        console.log('🚫 No empty fields found ahead.');
    }

    function validateTableImeis(tagify, inputEl) {
        let imeis = tagify.value.map(t => t.value.toUpperCase().trim());
        let $input = $(inputEl);
        let tagifyWrapper = $input.closest('td').find('.tagify');

        console.log('🧪 Validating IMEIs for row:', imeis);

        clearValidation($input);
        tagifyWrapper.removeClass('is-invalid is-valid');

        /* 1️⃣ Local Row Check */
        let duplicates = imeis.filter((item, index) => imeis.indexOf(item) !== index);
        if (duplicates.length > 0) {
            console.warn('❌ Duplicate found inside row:', duplicates);
            markInvalid($input, 'Duplicate in this row: ' + [...new Set(duplicates)].join(', '));
            tagifyWrapper.addClass('is-invalid');
            return;
        }

        /* 2️⃣ Global Table Check */
        let otherImeis = [];
        $('.table-imei').each(function () {
            if (this !== inputEl && this._tagify) {
                this._tagify.value.forEach(v => otherImeis.push(v.value.toUpperCase().trim()));
            }
        });

        let tableDupes = imeis.filter(i => otherImeis.includes(i));
        if (tableDupes.length > 0) {
            console.warn('❌ Duplicate found across table:', tableDupes);
            markInvalid($input, 'Already in table: ' + [...new Set(tableDupes)].join(', '));
            tagifyWrapper.addClass('is-invalid');
            return;
        }

        /* 3️⃣ Server Check */
        if (imeis.length > 0) {
            console.log('🌐 Calling /check-imei/ for:', imeis);
            $.ajax({
                url: '/check-imei/',
                type: 'POST',
                data: {
                    imeis: imeis,
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function (res) {
                    if (res.exists && res.duplicate_imeis?.length) {
                        console.error('❌ Database duplication detected:', res.duplicate_imeis);
                        markInvalid($input, 'System exists: ' + res.duplicate_imeis.join(', '));
                        tagifyWrapper.addClass('is-invalid');
                    } else {
                        console.log('✅ Validation passed.');
                        markValid($input);
                        tagifyWrapper.addClass('is-valid');
                    }
                }
            });
        }
    }

    function updateRowQuantity(inputEl, qty) {
        let $row = $(inputEl).closest('tr');

        // -----------------------------
        // 🔍 READ VALUES
        // -----------------------------
        let rate = parseFloat($row.find('.rate').text()) || 0;
        let discPercent = parseFloat($row.attr('data-discount-percent')) || 0;
        const GST_PERCENT = parseFloat($row.attr('data-tax-percent')) || 18;



        // -----------------------------
        // 💸 DISCOUNT & NET RATE
        // -----------------------------
        let unitDiscount = (rate * discPercent) / 100;
        let netRate = rate - unitDiscount;
        if (netRate < 0) netRate = 0;


        // -----------------------------
        // 📊 TAX CALCULATION
        // -----------------------------
        let totalTaxableValue = netRate * qty;
        let totalTaxAmount = (totalTaxableValue * GST_PERCENT) / 100;

        let totalCGST = totalTaxAmount / 2;
        let totalSGST = totalTaxAmount / 2;
        let totalIGST = 0;



        // -----------------------------
        // 🧮 FINAL TOTAL
        // -----------------------------
        let grandTotal = totalTaxableValue + totalTaxAmount;



        // -----------------------------
        // 🧱 UPDATE UI
        // -----------------------------
        $row.find('.quantity').text(qty);
        $row.find('.discount_amount').text(unitDiscount.toFixed(2));
        $row.find('.net_rate').text(netRate.toFixed(2));
        $row.find('.tax_cgst').text(totalCGST.toFixed(2));
        $row.find('.tax_sgst').text(totalSGST.toFixed(2));
        $row.find('.tax_igst').text(totalIGST.toFixed(2));
        $row.find('.amount').text(grandTotal.toFixed(2));
        $row.attr('data-tax-amount', totalTaxAmount.toFixed(2));

        // -----------------------------
        // 🔁 UPDATE SUMMARY
        // -----------------------------
        if (typeof updateSummaryTable === "function") {
            updateSummaryTable();
        }
    }

    function editInwardRow(rowId) {
        let $row = $('#' + rowId);
        isEditingRow = true; // ✅ Set flag to prevent resets

        let itemId = $row.data('item-id') || 0;
        let poId = $row.data('po-id');
        let ean = $row.data('ean-number');
        let subcategoryId = $row.data('subcategory-id');
        let brandId = $row.data('brand-id');
        let modelId = $row.data('model-id');
        let variantId = $row.data('variant-id');
        let colorId = $row.data('color-id');
        let rate = parseFloat($row.find('.rate').text()) || 0;
        let baseRate = parseFloat($row.data('base-rate')) || 0;
        let fspPrice = $row.data('fsp-price');
        let wspPrice = $row.data('wsp-price');
        let mopPrice = parseFloat($row.find('.mop').text().trim()) || 0;
        let bopPrice = parseFloat($row.find('.bop').text().trim()) || 0;
        let discountPer = parseFloat($row.data('discount-percent')) || 0;
        let discountAmt = parseFloat($row.find('.discount_amount').text()) || 0;
        let netRate = parseFloat($row.data('net-rate')) || 0;
        let taxCGST = parseFloat($row.find('.tax_cgst').text()) || 0;
        let taxSGST = parseFloat($row.find('.tax_sgst').text()) || 0;
        let taxIGST = parseFloat($row.find('.tax_igst').text()) || 0;
        let Amount = parseFloat($row.find('.amount').text()) || 0;
        let dbPrice = $row.data('db-price');
        let taxAmount = parseFloat($row.data('tax-amount')) || 0;
        let priceListId = $row.data('price-list-id');
        let editimeis = $row.data('imeis') || [];
        if (!Array.isArray(editimeis) || editimeis.length === 0) {
            let inputEl = $row.find('input.table-imei')[0];
            if (inputEl && inputEl._tagify) {
                editimeis = inputEl._tagify.value.map(t => t.value);
            } else {
                let val = $row.find('input.table-imei').val() || '';
                editimeis = val.split(',').map(v => v.trim()).filter(v => v !== '');
            }
        }
        console.log(editimeis);
        let mrpPrice = $row.data('mrp-price');
        let hsnCode = $row.data('hsn-code');
        let Quantity = editimeis.length;
        let taxPercent = parseFloat($row.data('tax-percent')) || 18;



        $('#item_id').val(itemId);
        $('#po_id').val(poId);
        $('#ean_number').val(ean);

        $('#subcategory_id').val(subcategoryId).trigger('change');
        loadBrand('subcategory_id', 'brand_id', brandId, function () {
            loadModels('brand_id', 'model_id', modelId, function () {
                loadVariants('brand_id', 'model_id', 'variant_id', variantId, function () {
                    loadColors('brand_id', 'model_id', 'variant_id', 'color_id', colorId, function () {
                        isEditingRow = false; // ✅ Unlock after full chain loads
                    });
                });
            });
        });


        $('#rate').val(rate.toFixed(2));
        $('#base_rate').val(baseRate.toFixed(2));
        $('#mrp_price').val(mrpPrice);
        $('#fsp_price').val(fspPrice);
        $('#wsp_price').val(wspPrice);
        $('#mop_price').val(mopPrice);
        $('#bop_price').val(bopPrice);
        $('#quantity').val(Quantity);
        $('#discount_percent').val(discountPer.toFixed(2));
        $('#discount_amount').val(discountAmt.toFixed(2)); // Fixed the error here
        $('#net_rate').val(netRate.toFixed(2));
        $('#tax_cgst').val(taxCGST.toFixed(2));
        $('#tax_sgst').val(taxSGST.toFixed(2));
        $('#tax_igst').val(taxIGST.toFixed(2));
        $('#amount').val(Amount.toFixed(2)); // Fixed the error here
        $('#db_price').val(dbPrice);
        $('#tax_amount').val(taxAmount.toFixed(2));
        $('#price_list_id').val(priceListId);
        $('#tax_percent').val(taxPercent);
        $('#hsn_code').val(hsnCode);




        // CGST/SGST should be unit-based in the form (total / qty)

        if (imeiTagify) {
            imeiTagify.removeAllTags();
            imeiTagify.addTags(editimeis);
        }

        // 4. Remove row and update summary
        $row.remove();
        updateSummaryTable();

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

    }





    $('#add_form').on('submit', function (e) {
        e.preventDefault();
        let payable = getPayableAmount();
        let cash = getCashAmount();



        const supplierId = $('#supplier_id').val();
        if (!supplierId) {
            showSweetAlert('info', 'Please select a Supplier.');
            return;
        }

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

        const items = [];
        const globalImeiSet = new Set();
        let hasError = false;

        $('#itemTable tbody tr').each(function () {
            const row = $(this);
            let inputEl = row.find('input.table-imei')[0];
            const BrandId = row.data('brand-id');
            let imeiData = [];

            if (inputEl && inputEl._tagify) {
                imeiData = inputEl._tagify.value.map(tag => tag.value);
            } else {
                // Fallback if tagify isn't initialized
                let val = $(inputEl).val();
                imeiData = val ? val.split(',').filter(i => i.trim() !== "") : [];
            }

            if (imeiData.length === 0) {
                hasError = true;
                row.find('.table-imei').addClass('is-invalid');
                return false;
            }

            // Mapping values correctly from data attributes and text cells
            items.push({
                item_id: row.data('item-id'),
                po_id: row.data('po-id') || 0,
                ean: row.data('ean-number'),
                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'),
                fsp_price: row.data('fsp-price') || 0,
                wsp_price: row.data('wsp-price') || 0,
                discount_percent: row.data('discount-percent') || 0,
                tax_amount: parseFloat(row.data('tax-amount')) || 0,
                db_price: row.data('db-price') || 0,
                price_list_id: row.data('price-list-id') || 0,
                rate: parseFloat(row.find('.rate').text()) || 0,
                mop_price: row.find('.mop').text() || 0,
                bop_price: row.find('.bop').text() || 0,
                discount_amt: parseFloat(row.find('.discount_amount').text()) || 0,
                imeis: imeiData,
                quantity: imeiData.length,
                net_rate: row.find('.net_rate').text() || 0,
                tax_cgst: parseFloat(row.find('.tax_cgst').text()) || 0,
                tax_sgst: parseFloat(row.find('.tax_sgst').text()) || 0,
                tax_igst: parseFloat(row.find('.tax_igst').text()) || 0,
                amount: parseFloat(row.find('.amount').text()) || 0,
                mrp_price: row.data('mrp-price') || 0,
                hsn_code: row.data('hsn-code') || 0,
                tax_percent: row.data('tax-percent') || 0,
                base_rate: parseFloat(row.data('base-rate')) || 0,
            });
        });

        if (hasError) {
            showSweetAlert('error', 'Fix IMEI errors before saving.');
            return;
        }

        if (items.length === 0) {
            showSweetAlert('warning', 'No valid items found.');
            return;
        }

        /* -------------------------
           BUILD FORM DATA
        ------------------------- */
        const formData = new FormData(this);
        formData.append('items', JSON.stringify(items));
        formData.append('total_quantity', $('#qty_total_placeholder').data('qty') || 0);

        formData.append('sub_total', $('#sub_total_placeholder').text());
        formData.append('total_discount', $('#qty_discount').text());
        formData.append('bill_discount', $('#bill_discount').text());
        formData.append('total_tax_cgst', $('#total_tax_cgst').text());
        formData.append('total_tax_sgst', $('#total_tax_sgst').text());
        formData.append('total_tds', $('#total_tax_tds').text());
        formData.append('total_amount', $('#total_amount').text());
        formData.append('round_off', $('#round_off_placeholder').text());
        formData.append('grand_total', $('#total_payable').text());
        const balance = parseFloat($('#balance_placeholder').text()) || 0;
        const paymentType = 'credit';
        formData.append('payment', paymentType);
        formData.append('cash', parseFloat($('#cash_cell').text()) || 0);
        formData.append('balance', balance.toFixed(2));


        /* -------------------------
           SUBMIT
        ------------------------- */
        handleFormSubmit(
            this,
            '/add_purchase_inward/',
            null,
            'add_form',
            true,
            'Purchase Inward',
            [
                function () {
                    $('#submit').prop('disabled', false).text('Save');
                    $('#itemTable tbody').empty();
                    $('#qty_total_placeholder').text('0');
                    $('#sub_total_placeholder').text('0.00');
                    $('#total_payable').text('0.00');
                    $('#po_id').val(null).trigger('change');
                    resetSelectFields('#supplier_id');
                    sessionStorage.setItem('addSuccessMessage', true);
                    window.location.href = '/purchase-inward';
                }
            ],
            formData,
            false
        );
    });



    function markInvalid($input, message) {
        $input
            .addClass('is-invalid')
            .removeClass('is-valid');

        $input
            .closest('td')
            .find('.serial-error')
            .text(message)
            .css('display', 'block');   // 🔥 THIS IS THE KEY
    }

    function markValid($input) {
        $input
            .removeClass('is-invalid')
            .addClass('is-valid');

        $input
            .closest('td')
            .find('.serial-error')
            .text('')
            .css('display', 'none');
    }


    function clearValidation($input) {
        $input.removeClass('is-invalid');
        $input.closest('td').find('.serial-error').text('').hide();
    }


    $(document).on('keydown', '.table-imei', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            $('#ean_number').focus().select();
        }
    });







    const cashRadio = document.querySelector('input[name="payment_type"][value="cash"]');
    const creditRadio = document.querySelector('input[name="payment_type"][value="credit"]');

    const cashRow = $('#cash-row');
    const cashCell = document.getElementById('cash_cell');

    function focusCashCell() {
        cashCell.focus();

        // Select all text inside contenteditable
        const range = document.createRange();
        range.selectNodeContents(cashCell);

        const sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }


    function getPayableAmount() {
        return parseFloat($('#total_payable').text()) || 0;
    }

    function getCashAmount() {
        return parseFloat($('#cash_cell').text()) || 0;
    }

    function updateCashSummary(payable, cash) {
        if ($('#cash_total_placeholder').length) {
            $('#cash_total_placeholder').text(payable.toFixed(2));
        }

        let balance = payable - cash;

        $('#balance_placeholder').text(balance.toFixed(2));

        if (cash > payable) {
            $('#payment-error-row').show();
            return false;
        }

        $('#payment-error-row').hide();
        return true;
    }

    $(document).on('focus', '#total_tax_tds', function () {
        const el = this;
        const range = document.createRange();
        range.selectNodeContents(el);

        const sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    });


    $('#cash_cell').on('input', function () {
        let text = $(this).text().replace(/[^0-9.]/g, '');
        $(this).text(text);

        // keep cursor at end
        const range = document.createRange();
        const sel = window.getSelection();
        range.selectNodeContents(this);
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);

        let payable = getPayableAmount();

        if (!$('#cash_total_placeholder').length) {
            $('#payment-error-row')
                .text('Total payable not available')
                .show();
            return;
        }

        let cash = getCashAmount();
        updateCashSummary(payable, cash);
    });

    $(document).on('input', '#mop_price, #bop_price', function () {

        let mop = parseFloat($('#mop_price').val()) || 0;
        let bop = parseFloat($('#bop_price').val()) || 0;

        // Reset errors
        $('#mop_price, #bop_price').removeClass('is-invalid');
        $('#mop-error, #bop-error').text('');

        // ❌ BOP should NOT be below MOP
        if (bop < mop && bop > 0) {
            $('#bop_price').addClass('is-invalid');
            $('#bop-error').text('BOP must be greater than or equal to MOP');
        }

    });


    let lastDiscountSource = 'percent';

    function updateAmount(source = '') {
        if (source === '') {
            source = lastDiscountSource;
        } else {
            lastDiscountSource = source;
        }

        let rate = parseFloat($('#rate').val()) || 0;
        let qty = parseFloat($('#quantity').val()) || 0;
        let discountPercent = parseFloat($('#discount_percent').val()) || 0;
        let discountAmount = parseFloat($('#discount_amount').val()) || 0;
        let mop = parseFloat($('#mop_price').val()) || 0;
        let bop = parseFloat($('#bop_price').val()) || 0;
        const GST_PERCENT = parseFloat($('#tax_percent').val()) || 18;

        let unitDiscount = 0;
        if (source === 'percent') {
            unitDiscount = (rate * discountPercent) / 100;
            $('#discount_amount').val(unitDiscount.toFixed(2));
        } else if (source === 'amount') {
            unitDiscount = discountAmount;
            if (rate > 0) {
                discountPercent = (unitDiscount / rate) * 100;
                $('#discount_percent').val(discountPercent.toFixed(2));
            }
        }

        let netRate = rate - unitDiscount;
        if (netRate < 0) netRate = 0;
        $('#net_rate').val(netRate.toFixed(2));

        let totalTaxableValue = netRate * qty;
        let totalTaxAmount = (totalTaxableValue * GST_PERCENT) / 100;

        let totalCGST = totalTaxAmount / 2;
        let totalSGST = totalTaxAmount / 2;
        let totalIGST = 0;
        let grandTotal = totalTaxableValue + totalTaxAmount;

        $('#tax_cgst').val(totalCGST.toFixed(2));
        $('#tax_sgst').val(totalSGST.toFixed(2));
        $('#tax_igst').val(totalIGST.toFixed(2));
        $('#amount').val(grandTotal.toFixed(2));
        $('#tax_amount').val(totalTaxAmount.toFixed(2));
    }

    // 🔥 Event Listeners
    $(document).on('input', '#rate, #quantity, #mop_price, #bop_price', function () {
        updateAmount();
    });

    $(document).on('input', '#discount_percent', function () {
        updateAmount('percent');
    });

    $(document).on('input', '#discount_amount', function () {
        updateAmount('amount');
    });

    function loadPurchaseOrders(selectedPOs = []) {
        const supplierId = $('#supplier_id').val();
        const editId = $('#tm_id').val() || 0;

        if (supplierId) {
            $.ajax({
                url: '/load_purchase_orders/',
                type: 'GET',
                data: {
                    supplier_id: supplierId,
                    edit_id: editId
                },
                success: function (response) {

                    const poSelect = $('#po_id');
                    poSelect.empty();

                    response.forEach(po => {
                        poSelect.append(
                            `<option value="${po.id}">${po.po_no}</option>`
                        );
                    });

                    // Preselect options based on po_id or sales_id
                    if (selectedPOs.length > 0) {


                        poSelect.val(poIdsToSelect).trigger('change'); // works with select2 multiple
                    }
                },
                error: function () {
                    showToast('error', 'Failed to load purchase orders');
                }
            });
        }
    }

    $('#supplier_id').on('change', function () {
        const supplierId = $('#supplier_id').val();
        if ((supplierId && supplierId !== 'select')) {
            loadPurchaseOrders();
        }
    });

    $('#po_id').on('change', function () {
        const poIds = $('#po_id').val() || [];
        const editId = $('#tm_id').val() || 0;

        if (!poIds.length) {
            clearPOData();
            return;
        }

        $.ajax({
            url: '/load_po_items/',
            type: 'GET',
            data: {
                po_ids: poIds.join(','),
                edit_id: editId
            },
            success: function (res) {
                if (res.message) {
                    showToast('info', res.message);
                    clearPOData();
                    return;
                }

                $('#stock_table_wrapper, #stock_table_hr').show();

                $('#inward_table_body').empty(); // Replace with your actual main table body ID
                $('#stock_table tbody').empty();
                loadedPOs.clear();
                const items = res.items;

                items.forEach(item => {
                    const remaining_quantity = item.remaining_quantity;

                    updateInwardTable(
                        item.item_id, item.po_id, item.ean,
                        item.subcategory_id, item.subcategory_name,
                        item.brand_id, item.brand_name,
                        item.model_id, item.model_name,
                        item.variant_id, item.variant_name,
                        item.color_id, item.color_name,
                        '', 0,
                        item.rate, item.base_rate, item.fsp_price, item.wsp_price, item.mop_price, item.bop_price,
                        item.discount_amount, item.discount_percent,
                        item.net_rate, item.cgst, item.sgst, item.igst,
                        item.amount, item.db_price, item.tax_amount,
                        item.price_id, item.mrp, item.hsn_code, 18
                    );
                    loadedPOs.add(item.po_id);
                });

                updateSummaryTable();
            },
            error: function () {
                showToast('error', 'Failed to load PO items');
            }
        });
    });

    function clearPOData() {
        $('#itemTable tbody').empty();
        $('#stock_table tbody').html('<tr class="no-data"><td colspan="2" class="text-center">No data</td></tr>');
        loadedPOs.clear();
        updateSummaryTable();
    }


</script>