{% load static %}
{% include 'includes/header.html' %}

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

    /* Hide action column for rejected records */
    .hide-action-col th:first-child,
    .hide-action-col td:first-child {
        display: none;
    }
</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">
        <!-- FormValidation -->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="outward_form" class="row g-6 pt-5">
                        {% if info_message %}
                        <div class="col-12 mb-4">
                            <div class="alert alert-info d-flex align-items-center" role="alert">
                                <span class="alert-icon text-info me-2">
                                    <i class="fas fa-info-circle"></i>
                                </span>
                                <div>
                                    <strong>{{ info_message }}</strong>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        {% 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">Transfer Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="po_date" class="form-control" name="po_date" readonly />
                                </div>

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


                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id">Supply Branch</label>
                                    <select class="select2  form-control" id="supply_branch_id" name="supply_branch_id"
                                        disabled>
                                        <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 form-control-validation">
                                    <label class="form-label" for="supplier_id">Material Order</label>
                                    <select class="select2 form-control" id="po_id" name="po_id" multiple disabled>
                                    </select>
                                </div>


                            </div>
                            <div class="row">
                                <div class="col-md-3 mb-5 form-control-validation">
                                    <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 form-control-validation">
                                    <label class="form-label" for="supplier_id">Employee</label>
                                    <select class="select2  form-control" id="employee_id" name="employee_id" disabled>
                                        <option value="">Select</option>
                                        {% for emp in employee %}
                                        <option value="{{ emp.id }}">
                                            {{ emp.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id">Outstanding</label>
                                    <input type="text" id="outstanding" class="form-control" name="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>
                                        {% 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-3">
                                    <div class="row">
                                        <div class="col-md-6   form-control-validation mb-3">
                                            <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 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>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-3">
                                    <div class="row">

                                        <div class="col-md-6 text-start mt-5">
                                            <input type="hidden" id="amount" name="amount" />
                                            {% if purchase.outward_status != 'rejected' %}
                                            <button type="button" class="btn btn-success" name="add_item" id="add_item"
                                                onclick="addInwardRow()">+ Add</button>
                                            {% endif %}
                                            <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="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" />
                                            <input type="hidden" id="tm_material_id" name="tm_material_id" />
                                            <input type="hidden" id="mrp" name="mrp" />
                                        </div>
                                    </div>
                                </div>


                                <div class="col-12">
                                    <table
                                        class="table mt-5 {% if purchase.outward_status == 'rejected' %}hide-action-col{% endif %}"
                                        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 class="col-md-3 custom-col-4 mt-0 mb-5 form-control-validation" 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; display: none;">
                                    <div style="max-height: 300px; 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">Item Name</th>
                                                    <th align="center">Ordered 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" 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;
                                    {% if is_editable %}
                                    <button type="submit" id="submit" name="submitButton" class="btn btn-success"
                                        id="updateBtn">Update</button>
                                    {% endif %}
                                </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>

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



        $('#cash_total_placeholder').text('{{ purchase.total_amount|escapejs }}')
        $('#cash_cell').text('{{ purchase.cash|escapejs }}')
        $('#bank_cell').text('{{ purchase.bank|escapejs }}')


        safeValue('#po_date', '{{ purchase.transfer_date|escapejs }}');
        safeValue('#tm_material_id', '{{ purchase.id    |escapejs }}');
        safeValue('#transfer_no', '{{ purchase.transfer_no|escapejs }}');
        safeValue('#description', '{{ purchase.remarks|escapejs }}');
        safeSelectValue('#supply_branch_id', '{{ purchase.supply_branch_id|escapejs }}');
        safeSelectValue('#employee_id', '{{ purchase.employee_id|escapejs }}');
        // refresh_data();
        // updateSummaryTable();     
        refresh_data();
        fetchIMEITableData();

        {% if purchase.outward_status == 'rejected' %}
        showSweetAlert('warning', 'This transfer is rejected. Update actions are disabled for this record.');
        $(document).ajaxStop(function () {
            $('#itemTable').addClass('hide-action-col');
        });
        {% endif %}

        // ✅ Enforce read-only mode for non-editable outwards
        {% if not is_editable %}
        // Disable all form inputs, selects, and textareas
        $('#outward_form input, #outward_form select, #outward_form textarea').prop('disabled', true);

        // Hide save/update button
        $('#save_btn').hide();

        // Disable IMEI input and Demo checkbox
        $('#imei_number').prop('disabled', true);
        $('#is_demo').prop('disabled', true);

        // Hide action column in item table
        $('#itemTable').addClass('hide-action-col');
        {% endif %}
    });




    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();

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

                    if (selectedPOs && selectedPOs.length > 0) {
                        const stringSelectedPOs = selectedPOs.map(String);
                        poSelect.val(stringSelectedPOs).trigger('change');
                    } else {
                        poSelect.trigger('change');
                    }
                },
                error: function () {
                    if (typeof showToast === "function") {
                        showToast('error', 'Failed to load purchase orders');
                    }
                }
            });
        }
    }


    function refresh_data() {
        const tmId = $('#tm_material_id').val();
        if (!tmId || tmId === '') return;

        $.ajax({
            url: '/ajax_tx_material_outward_view/',
            type: 'POST',
            data: {
                csrfmiddlewaretoken: document.getElementsByName("csrfmiddlewaretoken")[0].value,
                po_id: tmId // This is the edit transaction ID
            },
            success: function (response) {
                console.log("AJAX response:", response);

                if (response.message === 'permission') {
                    showToast('error', response.error_message);
                    return;
                }

                const items = response.items || [];
                const materialIds = response.material_ids || [];

                // 🔥 THIS is the key line
                loadMaterialPOs(materialIds);

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

                items.forEach((item, idx) => {
                    updateOrAddRow(
                        item.item_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.qty,
                        item.amount,
                        item.bop_price,
                        item.mop_price,
                        item.fsp_price,
                        item.wsp_price,
                        item.db_price,
                        item.mrp,
                        item.price_list_id,
                        item.tm_id,
                        item.po_id
                    );
                });

                updateSummaryTable();
            },

            error: function (xhr, status, error) {
                console.error("AJAX Error:", error);
            }
        });
    }

    let isLoadingPOs = false;


    function updateOrAddRow(
        itemId,
        ean,
        hsnCode,
        subcategoryId,
        subcategoryName,
        brandId,
        brandName,
        modelId,
        modelName,
        variantId,
        variantName,
        colorId,
        colorName,
        imeiNo,
        rate,
        quantity,
        amount,
        bopPrice,
        mopPrice,
        fsp_price,
        wsp_price,
        dbPrice,
        mrp,
        priceListId,
        tmId,
        poId
    ) {


        rate = parseFloat(rate) || 0;
        quantity = parseFloat(quantity) || 0;
        amount = parseFloat(amount) || 0;

        let rowId = 'row_' + Date.now() + Math.floor(Math.random() * 1000);

        let newRow = `
            <tr id="${rowId}"
                data-item-id="${itemId}" 
                data-hsn-code="${hsnCode}"
                data-po-id="${poId}"
                data-imei="${imeiNo}"
                data-ean-no="${ean}"
                data-imeis='${imeiNo}'
                data-mop-price="${mopPrice}"
                data-bop-price="${bopPrice}"
                data-db-price="${dbPrice}"
                data-fsp-price="${fsp_price}"
                data-wsp-price="${wsp_price}"
                data-price-list-id="${priceListId}"
                data-subcategory-id="${subcategoryId}" 
                data-brand-id="${brandId}" 
                data-model-id="${modelId}"
                data-variant-id="${variantId}" 
                data-color-id="${colorId}"
                data-amount-total="${amount}"
                data-mrp="${mrp}"

                data-tm-id="${tmId}">

                <td class="text-center">
                        <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">${quantity}</td>
                <td class="rate text-end">${rate.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 handler
    $(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 addInwardRow() {
        clearErrors();
        isEditingRow = false;

        $('#imei_number').removeClass('is-invalid');
        $('#imei-error').text('').hide();

        // 1️⃣ Get Values
        let itemId = $('#item_id').val();
        let poId = $('#edit_po_id').val() || 0;
        let hsnCode = $('#hsn_code').val().trim();
        let eanNumber = $('#ean_number').val().trim();
        let imeiNo = ($('#imei_number').val() || '').toString().trim().toUpperCase();

        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;
        let fspRate = parseFloat($('#fsp_price').val()) || 0;
        let wsRate = parseFloat($('#ws_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;
        let tmId = $('#tm_material_id').val() || 0;

        // 2️⃣ Validation
        let hasError = false;
        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) { $('#rate').addClass('is-invalid'); hasError = true; }

        if (hasError) return;

        /* ---------- 🔁 DUPLICATE CHECK (TABLE) ---------- */
        let tableImeis = [];

        $('#itemTable tbody tr').each(function () {
            let rowImei = $(this).data('imei'); // 👈 SINGLE IMEI
            if (rowImei) {
                tableImeis.push(rowImei.toString().toUpperCase());
            }
        });

        if (tableImeis.includes(imeiNo)) {
            $('#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,
            data: {
                imeis: [imeiNo],
                tm_id: tmId,
                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
        updateOrAddRow(
            itemId, eanNumber, hsnCode,
            subcategoryId, subcategoryName,
            brandId, brandName, modelId, modelName,
            variantId, variantName, colorId, colorName,
            imeiNo, rate, quantity, amount,
            bopPrice, mopPrice, fspRate, wsRate, dbPrice, mrp, priceId, tmId, poId
        );
        resetInwardForm();

    }


    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-danger').text('').hide();
    }




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

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

    $('#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,
            '/update_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>