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

    #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;
    }
</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">Transfer Outward</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">Transfer</li>
                <li class="breadcrumb-item active" aria-current="page">Transfer Outward </li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!--FormValidaton -->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="outward_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-3">
                                    <label class="form-label" for="po_date">Supplier Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="po_date" class="form-control" name="po_date" required />
                                </div>

                                <div class="col-md-3 mb-3">
                                    <label class="form-label" for="po_date">Transfer Outward No</label>
                                    <input type="text" id="transfer_no" class="form-control" name="transfer_no"
                                        value="{{transfer_no}}" readonly />
                                </div>

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

                                <div class="col-md-3 mb-5">
                                    <label class="form-label" for="supplier_id">Transfer Request No <span
                                            style="color: red;">*</span></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="row">
                                    <div class="col-md-3 mb-5">
                                        <label class="form-label" for="imei_number">IMEI Number</label>
                                        <div class="input-group">
                                            <input type="text" id="imei_number" class="form-control" name="imei_number"
                                                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" title="Demo Stock">
                                                <span class="ms-1 small">Demo</span>
                                            </div>
                                        </div>
                                        <div class="invalid-feedback" id="imei-error"></div>
                                        <input type="hidden" id="item_id" name="item_id" />
                                    </div>



                                    <div class="col-md-3 mb-5">
                                        <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="col-md-3 mb-3">
                                        <label class="form-label" for="po_date">Outstanding</label>
                                        <input type="text" id="outstanding" class="form-control" name="outstanding"
                                            value="{{outstanding}}" readonly />
                                    </div>
                                </div>

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

                                        </select>
                                        <div class="invalid-feedback" id="brand-error"></div>
                                    </div>
                                    <div class="col-md-3 form-control-validation mb-3">
                                        <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-3">
                                        <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-3">
                                        <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-3">
                                        <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-3">
                                        <div class="row">

                                            <div class="col-md-12 form-control-validation mb-3">
                                                <label class="form-label" for="rate">Amount</label>
                                                <input type="number" id="rate" class="form-control" name="rate"
                                                    min="0" />
                                                <div class="invalid-feedback" id="rate-error"></div>
                                                <input type="hidden" id="quantity" class="form-control" name="quantity"
                                                    value="1">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <div class="row">
                                            <!-- <div class="col-md-6 form-contr ol-validation mb-3">
                                                <label class="form-label" for="amount">Amount </label>
                                                
                                            </div> -->
                                            <div class="col-md-6 text-start mt-5">
                                                <button type="button" class="btn btn-success" name="add_item"
                                                    id="add_item" onclick="addInwardRow()">+ Add</button>
                                                <input type="hidden" id="amount" name="amount" />
                                                <input type="hidden" id="mop_price" name="mop_price" />
                                                <input type="hidden" id="bop_price" name="bop_price" />
                                                <input type="hidden" id="db_price" name="db_price" />
                                                <input type="hidden" id="fsp_price" name="fsp_price" />
                                                <input type="hidden" id="wsp_price" name="wsp_price" />
                                                <input type="hidden" id="mrp" name="mrp" />
                                                <input type="hidden" id="edit_po_id" name="edit_po_id" />
                                                <input type="hidden" id="hsn_code" name="hsn_code" />
                                                <input type="hidden" id="price_id" name="price_id" />
                                                <input type="hidden" id="ean_number" name="ean_number" />
                                            </div>
                                        </div>
                                    </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>Subcategory</th>
                                                        <th>Brand</th>
                                                        <th>Model</th>
                                                        <th>Variant</th>
                                                        <th>Color</th>
                                                        <th>IMEI</th>
                                                        <th>Quantity</th>
                                                        <th>Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="col-md-4 custom-col-4 mt-0 " style="padding: 2%;">
                            <div class="row">
                                <div class="col-12" id="imei_table_wrapper" style="padding: 0px; padding-bottom: 20px;">
                                    <h6 class="text-muted">Available IMEIs</h6>
                                    <div id="imeiListContainer"
                                        style="max-height: 200px; overflow-y: auto; border: 1px solid #f0f0f0; border-radius: 4px; background-color: #f9f9f9; padding: 10px;">
                                        <!-- Content populated by JS -->
                                        <div class="text-center text-muted">Loading...</div>
                                    </div>
                                </div>

                                <div class="col-12" id="stock_table_wrapper" style="padding: 0px; padding-top: 0px">
                                    <div style="max-height: 200px; overflow-y: auto;">
                                        <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 align="center">EAN</th>
                                                    <th align="center">Requested Quantity</th>
                                                </tr>
                                            </thead>
                                            <tbody style="background-color: #EAF4FD;" align="center">
                                                <tr class="no-data">
                                                    <td colspan="2">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" style="padding: 0px; padding-top: 0px;">
                                    <div>
                                        <table id="summaryTable" class="table table-bordered mb-0"
                                            style="border: 1px solid #f2f2f2; background-color: #c3c3f1;">
                                            <thead style="background-color: #9cd3f3;">
                                                <tr>
                                                    <th colspan="2" style="text-align: center;">Summary Table</th>
                                                </tr>
                                            </thead>
                                            <tbody style="background-color: #EAF4FD;">
                                                <tr>
                                                    <td> Total Quantity</td>
                                                    <td align="end" colspan="2" id="qty_total_placeholder">0</td>
                                                </tr>
                                                <tr>
                                                    <td>Sub Total</td>
                                                    <td align="end" colspan="2" id="sub_total_placeholder">0.00</td>
                                                </tr>
                                                <tr>
                                                    <td>RoundOff</td>
                                                    <td align="end" colspan="2" id="round_off_placeholder">0.00</td>
                                                </tr>

                                                <tr>
                                                    <td>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 'material_outward/order_js.html' %}
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script>

    let loadedPOs = new Set();


    $(document).ready(function () {
        CurrentDate('po_date');
        loadTypeahead('#ean_number', { 'ean': 'ean', 'item_id': 'id' }, '/load_ean_number/');

        // Auto-load logic from URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const branchId = urlParams.get('branch_id');
        const poId = urlParams.get('po_id');

        if (branchId) {
            $('#supply_branch_id').val(branchId).trigger('change');
            if (poId) {
                // Wait a tiny bit for the first trigger if needed, or just call directly
                loadMaterialPOs([poId]);
            }
        } else {
            $('#supply_branch_id').select2('open');
        }

        $('#supply_branch_id').on('select2:select', function () {
            $('#imei_number').val('').focus().select();
        });

        fetchIMEITableData();
    });



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


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



    function updateSummaryTable() {

        let totalQty = 0;
        let totalDiscount = 0;
        let totalTax = 0;
        let subTotal = 0;

        $('#itemTable tbody tr').each(function () {

            let qty = parseFloat($(this).find('.quantity').text()) || 0;
            let rate = parseFloat($(this).find('.rate').text()) || 0;

            totalQty += qty;
            subTotal += rate * qty;
        });

        $('#qty_total_placeholder').text(totalQty);
        $('#sub_total_placeholder').text(subTotal.toFixed(2));

        // 🔄 Round-off (only once – like civilized accounting)
        let roundedTotal = Math.round(subTotal);
        let roundOff = roundedTotal - subTotal;

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



    }


    function loadMaterialPOs(selectedPOs = []) {
        const supplyBranchId = $('#supply_branch_id').val();
        const editId = $('#tm_id').val() || 0;

        if (supplyBranchId) {
            $.ajax({
                url: '/load_material_po/',
                type: 'GET',
                data: {
                    supply_branch_id: supplyBranchId,
                    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>`
                        );
                    });

                    if (selectedPOs && selectedPOs.length > 0) {
                        poSelect.val(selectedPOs).trigger('change');
                    }
                },
                error: function () {
                    showToast('error', 'Failed to load purchase orders');
                }
            });
        }
    }


    $('#supply_branch_id').on('change', function () {
        const supplyBranchId = $('#supply_branch_id').val();
        if ((supplyBranchId && supplyBranchId !== 'select')) {
            loadMaterialPOs();
        }
    });

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

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

        $.ajax({
            url: '/load_transfer_items/',
            type: 'GET',
            data: {
                material_po_id: poIds.join(','),
                edit_id: editId
            },
            success: function (res) {

                // If backend returns a message, show it
                if (res.message) {
                    showToast('info', res.message);
                    clearPOData();
                    return;
                }

                // Show stock table section
                $('#stock_table_wrapper').show();
                $('#stock_table_hr').show();

                const tbody = $('#stock_table tbody');
                tbody.empty();

                // ---------------------------------------------------
                // Display stock_data (EAN + Remaining Qty) in stock table
                // ---------------------------------------------------
                if (res.stock_data && res.stock_data.length) {
                    res.stock_data.forEach(stock => {
                        tbody.append(`
                        <tr>
                            <td>${stock.ean || ''}</td>
                            <td class="text-end">${stock.remaining_qty || 0}</td>
                        </tr>
                    `);
                    });
                } else {
                    tbody.append(`<tr><td colspan="7" class="text-center">No stock available</td></tr>`);
                }

                // ---------------------------------------------------
                // If needed, also process allocated items (optional)
                // ---------------------------------------------------
                if (res.items && res.items.length) {
                    res.items.forEach(item => {
                        updateInwardTable(
                            item.request_id, item.po_id, item.ean, item.hsn_code,
                            item.subcategory_id, item.subcategory_name,
                            item.brand_id, item.brand_name,
                            item.model_id, item.model_name,
                            item.variant_id, item.variant_name,
                            item.color_id, item.color_name,
                            item.imei_no, item.rate, item.quantity, item.amount,
                            item.fsp_price, item.wsp_price,
                            item.mop_price, item.bop_price,
                            item.db_price, item.mrp,
                            item.price_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();
    }




    /* ---------- 1. MAIN ADD FUNCTION ---------- */
    function addInwardRow() {
        // Start with a clean slate
        clearInvalidStates();
        isEditingRow = false;
        let supplyBranchId = $('#supply_branch_id').val() || 0;

        // 1️⃣ Get Values
        let itemId = $('#item_id').val();
        let poId = $('#edit_po_id').val() || 0;
        let hsnCode = $('#hsn_code').val() ? $('#hsn_code').val().trim() : '';
        let eanNumber = $('#ean_number').val() ? $('#ean_number').val().trim() : '';
        let imeiNo = $('#imei_number').val() ? $('#imei_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 quantity = parseFloat($('#quantity').val()) || 0;
        let amount = parseFloat($('#amount').val()) || 0;

        // Additional pricing fields
        let fspRate = parseFloat($('#fsp_price').val()) || 0;
        let wsRate = parseFloat($('#wsp_price').val()) || 0;
        let mopPrice = parseFloat($('#mop_price').val()) || 0;
        let bopPrice = parseFloat($('#bop_price').val()) || 0;
        let dbPrice = parseFloat($('#db_price').val()) || 0;
        let priceId = $('#price_id').val() || 0;
        let mrp = parseFloat($('#mrp').val()) || 0;

        // 2️⃣ Validation
        let hasError = false;

        if (!supplyBranchId) { $('#supply_branch_id').addClass('is-invalid'); hasError = true; }
        if (!imeiNo) { $('#imei_number').addClass('is-invalid'); hasError = true; }
        if (!subcategoryId) { $('#subcategory_id').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 <= 0) { $('#rate').addClass('is-invalid'); hasError = true; }

        if (hasError) return;

        /* ---------- 🔁 DUPLICATE CHECK (TABLE) ---------- */
        let isDuplicate = false;
        $('#itemTable tbody tr').each(function () {
            let rowImei = $(this).data('imei');
            if (rowImei && rowImei.toString().toUpperCase() === imeiNo.toUpperCase()) {
                isDuplicate = true;
                return false; // break loop
            }
        });

        if (isDuplicate) {
            $('#imei_number').addClass('is-invalid');
            $('#imei-error').text('IMEI already exists in table: ' + imeiNo).show();
            return;
        }

        /* ---------- 🗄️ DUPLICATE CHECK (DB) ---------- */
        let dbError = false;
        $.ajax({
            url: '/check-imei-outward/',
            type: 'POST',
            async: false, // Keeping async false as per your original logic
            data: {
                imeis: [imeiNo],
                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(', ')).show();
                    dbError = true;
                }
            }
        });

        if (dbError) return;

        // 3️⃣ Add Row
        updateInwardTable(
            itemId, poId, eanNumber, hsnCode,
            subcategoryId, subcategoryName,
            brandId, brandName, modelId, modelName,
            variantId, variantName, colorId, colorName,
            imeiNo, rate, quantity, amount,
            fspRate, wsRate, mopPrice, bopPrice, dbPrice, mrp, priceId
        );

        // 4️⃣ Reset Form & Clear UI
        resetInwardForm();
    }

    /* ---------- 2. HELPER FUNCTIONS ---------- */

    function resetInwardForm() {
        // Clear the visual error states first
        clearInvalidStates();

        // Reset simple inputs
        $('#rate, #amount, #db_price, #mop_price, #bop_price, #fsp_price, #wsp_price, #edit_po_id, #hsn_code, #mrp').val('');
        $('#quantity').val(1); // Set default back to 1
        $('#price_id').val('');
        $('#imei_number').val('');

        // Reset Select2 or standard dropdowns
        $('#brand_id, #model_id, #variant_id, #color_id, #subcategory_id').val('').trigger('change');

        // Unlock fields on reset
        if (typeof toggleProductFields === 'function') {
            toggleProductFields(false);
        }

        // Force focus back to IMEI for rapid entry
        setTimeout(() => {
            $('#imei_number').focus();
        }, 50);
    }

    function clearInvalidStates() {
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').text('').hide();
        $('#imei-error').text('').hide();
    }

    /* ---------- 3. EVENT LISTENERS ---------- */

    // Handle Enter key on Rate field
    $('#rate').on('keypress', function (e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            e.stopPropagation(); // Stop event bubbling
            addInwardRow();
        }
    });

    function updateInwardTable(
        itemId, poId, ean, hsnCode,
        subcategoryId, subcategoryName,
        brandId, brandName,
        modelId, modelName,
        variantId, variantName,
        colorId, colorName,
        imeiNo, rate, quantity, amount,
        fspRate, wsRate,
        mopPrice, bopPrice,
        dbPrice, mrp, priceId
    ) {
        let unitRate = parseFloat(rate) || 0;
        let qty = parseFloat(quantity) || 0;
        let total = unitRate * qty;
        let rowId = 'row_' + Date.now() + Math.floor(Math.random() * 1000);

        let newRow = `
        <tr id="${rowId}"
            data-item-id="${itemId}"
            data-po-id="${poId}"
            data-imei="${imeiNo}"
            data-subcategory-id="${subcategoryId}"
            data-brand-id="${brandId}"
            data-model-id="${modelId}"
            data-variant-id="${variantId}"
            data-color-id="${colorId}"
            data-hsn-code="${hsnCode}"
            data-ean-no="${ean}"
            data-mop-price="${mopPrice}"
            data-fsp-price="${fspRate}"
            data-wsp-price="${wsRate}"
            data-bop-price="${bopPrice}"
            data-db-price="${dbPrice}"
            data-price-id="${priceId}"
            data-amount-total="${total}"
            data-mrp="${mrp}"
            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(); updateSummaryTable();">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </td>

            <td><strong>${ean}</strong><br><small>HSN:${hsnCode}</small></td>
            <td>${subcategoryName}</td>
            <td>${brandName}</td>
            <td>${modelName}</td>
            <td>${variantName}</td>
            <td>${colorName}</td>
            <td class="imei-cell" style="min-width: 160px; height: 50px; vertical-align: middle;">
                <select class="form-control select2 row_imei_dropdown" style="width: 150px;">
                    <option value="">Select IMEI</option>
                </select>
            </td>
            <td class="quantity text-end">${qty}</td>
            <td class="rate text-end">${unitRate.toFixed(2)}</td>
        </tr>
    `;

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

        // Initialize Select2 for the new row
        let $select = $row.find('.row_imei_dropdown');
        $select.select2({
            dropdownParent: $('body'),
            width: '150px'
        });

        // Load available IMEIs for this specific SKU
        loadImeisForSelection(brandId, modelId, variantId, colorId, $select, imeiNo);


        updateSummaryTable();
    }

    // Row-level IMEI change
    $(document).on('change', '.row_imei_dropdown', function () {
        let imei = $(this).val();
        let $row = $(this).closest('tr');
        let oldImei = $row.attr('data-imei');

        if (!imei) {
            $row.attr('data-imei', '');
            $row.find('.rate').text('0.00');
            updateSummaryTable();
            return;
        }

        // Duplicate check
        let isDuplicate = false;
        $('#itemTable tbody tr').not($row).each(function () {
            if ($(this).attr('data-imei') === imei) {
                isDuplicate = true;
                return false;
            }
        });

        if (isDuplicate) {
            showSweetAlert('warning', 'Duplicate IMEI', 'This IMEI is already added in another row.');
            $(this).val(oldImei).trigger('change.select2');
            return;
        }

        // Fetch rates for this specific IMEI
        loadPurchaseDetails(
            $row.attr('data-brand-id'),
            $row.attr('data-model-id'),
            $row.attr('data-variant-id'),
            $row.attr('data-color-id'),
            false,
            this // pass the current select element
        );
    });


    function editInwardRow(rowId) {
        const $row = $('#' + rowId);
        isEditingRow = true;

        // 1. Extract data from row attributes
        const itemId = $row.attr('data-item-id');
        const poId = $row.attr('data-po-id');
        const ean = $row.attr('data-ean-no');
        const hsnCode = $row.attr('data-hsn-code');
        const imeiNo = $row.attr('data-imei');

        const subcategoryId = $row.attr('data-subcategory-id');
        const brandId = $row.attr('data-brand-id');
        const modelId = $row.attr('data-model-id');
        const variantId = $row.attr('data-variant-id');
        const colorId = $row.attr('data-color-id');
        const rate = $row.find('.rate').text();
        const qty = $row.find('.quantity').text();
        const amount = $row.attr('data-amount-total');
        const fspPrice = $row.attr('data-fsp-price');
        const wspPrice = $row.attr('data-wsp-price');
        const mopPrice = $row.attr('data-mop-price');
        const bopPrice = $row.attr('data-bop-price');
        const dbPrice = $row.attr('data-db-price');
        const mrp = $row.attr('data-mrp-price');
        const priceId = $row.attr('data-price-id');

        // 2. Extract names from table cells
        const subcategoryName = $row.find('td').eq(2).text(); // Subcategory column
        const brandName = $row.find('td').eq(3).text(); // Brand column
        const modelName = $row.find('td').eq(4).text(); // Model column
        const variantName = $row.find('td').eq(5).text(); // Variant column
        const colorName = $row.find('td').eq(6).text(); // Color column

        // 3. Populate form fields
        $('#item_id').val(itemId);
        $('#edit_po_id').val(poId);
        $('#ean_number').val(ean);
        $('#hsn_code').val(hsnCode);

        // 4. Populate dropdowns with single option (no AJAX calls needed)
        $('#subcategory_id').html(`<option value="${subcategoryId}">${subcategoryName}</option>`)
            .val(subcategoryId).trigger('change.select2');

        $('#brand_id').html(`<option value="${brandId}">${brandName}</option>`)
            .val(brandId).trigger('change.select2');

        $('#model_id').html(`<option value="${modelId}">${modelName}</option>`)
            .val(modelId).trigger('change.select2');

        $('#variant_id').html(`<option value="${variantId}">${variantName}</option>`)
            .val(variantId).trigger('change.select2');

        $('#color_id').html(`<option value="${colorId}">${colorName}</option>`)
            .val(colorId).trigger('change.select2');

        // 5. Populate other fields
        $('#rate').val(rate).focus().select();

        // Populate IMEI select with the specific IMEI (ensures it's there even if AJAX is pending)
        $('#imei_number').val(imeiNo);

        $('#fsp_price').val(fspPrice);
        $('#quantity').val(qty);
        $('#amount').val(amount);
        $('#wsp_price').val(wspPrice);
        $('#mop_price').val(mopPrice);
        $('#bop_price').val(bopPrice);
        $('#db_price').val(dbPrice);
        $('#mrp_price').val(mrp);
        $('#price_id').val(priceId);

        // 6. Lock fields if IMEI is present
        if (imeiNo && typeof toggleProductFields === 'function') {
            toggleProductFields(true);
        }


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

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


    function updateAmount(source = '') {

        let qty = parseFloat($('#quantity').val()) || 0;
        let rate = parseFloat($('#rate').val()) || 0; // base price per item (without GST)

        let discountPercent = parseFloat($('#discount_percent').val()) || 0;
        let discountAmount = parseFloat($('#discount_amount').val()) || 0;

        const GST_PERCENT = 18;

        let discountPerItem = 0;

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

        // 2️⃣ Net PER ITEM (without GST)
        let netPerItem = rate - discountPerItem;
        if (netPerItem < 0) netPerItem = 0;

        // 3️⃣ GST PER ITEM
        let gstPerItem = (netPerItem * GST_PERCENT) / 100;
        $('#tax_value').val(gstPerItem.toFixed(2));

        // 4️⃣ Final PER ITEM (with GST)
        let finalPerItem = netPerItem + gstPerItem;

        // 5️⃣ Totals
        let totalWithoutGST = netPerItem * qty;
        let totalWithGST = finalPerItem * qty;

        // 6️⃣ Set values
        $('#amount').val(totalWithoutGST.toFixed(2));       // Net Rate (Without GST)
        $('#amount_tax').val(totalWithGST.toFixed(2));      // Net Rate (With GST)
    }

    // 🔥 Events
    $(document).on('input', '#rate', function () {
        updateAmount();
    });

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

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

        const formEl = this;
        const supplyBranchId = $('#supply_branch_id').val();

        if (!supplyBranchId) {
            showSweetAlert('info', 'Please select a Supplier.');
            return;
        }

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

        const items = [];
        let hasError = false;

        $('#itemTable tbody tr').each(function () {
            const row = $(this);

            // Use .attr('data-imei') for raw string reliability with long numbers
            const imei = (row.attr('data-imei') || '').toString().trim();

            if (!imei) {
                hasError = true;
            }

            items.push({
                item_id: row.data('item-id'), // Matches data-item-id
                po_id: row.data('po-id') || 0,
                imei_no: imei,
                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'),
                hsn_code: row.data('hsn-code') || '',
                ean: row.data('ean-no') || '',
                mop_price: parseFloat(row.data('mop-price')) || 0,
                fsp_price: parseFloat(row.data('fsp-price')) || 0,
                wsp_price: parseFloat(row.data('wsp-price')) || 0,
                bop_price: parseFloat(row.data('bop-price')) || 0,
                db_price: parseFloat(row.data('db-price')) || 0,
                mrp: parseFloat(row.data('mrp')) || 0,
                rate: parseFloat(row.find('.rate').text()) || 0,
                quantity: parseFloat(row.find('.quantity').text()) || 0,
                amount: parseFloat(row.attr('data-amount-total')) || 0,
                price_id: row.data('price-id') || 0,
                hsn_code: row.data('hsn-code') || '',
            });
        });

        if (hasError) {
            showSweetAlert('error', 'Please ensure all items have IMEIs selected.');
            return;
        }

        const formData = new FormData(formEl);
        formData.append('items', JSON.stringify(items));
        formData.append('total_quantity', $('#qty_total_placeholder').text().trim());
        formData.append('grand_total', $('#total_payable').text().trim());
        formData.append('sub_total', $('#sub_total_placeholder').text().trim());
        formData.append('round_off', $('#round_off_placeholder').text().trim());

        const balance = parseFloat($('#balance_placeholder').text()) || 0;
        formData.append('payment', 'credit');
        formData.append('cash', parseFloat($('#cash_cell').text()) || 0);
        formData.append('balance', balance.toFixed(2));

        handleFormSubmit(
            formEl,
            '/add_material_outward/',
            null,
            'outward_form',
            true,
            'Material Outward',
            [
                function () {
                    $('#submit').prop('disabled', false).text('Save');
                    $('#itemTable tbody').empty();
                    // Clear and reset UI
                    $('#supply_branch_id').val('').trigger('change');
                    $('#qty_total_placeholder').text('0');
                    $('#sub_total_placeholder').text('0.00');
                    $('#total_payable').text('0.00');
                    $('#po_id').val(null).trigger('change');
                    console.log('✅ Post-submit callback executed');
                    window.location.href = '/transfer-outward';

                }
            ],
            formData,
            false
        );
    });
    // 


</script>