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



<div class="container-xxl flex-grow-1 container-p-y">

    <!-- Breadcrumb -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Purchase Return</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/store/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Purchase Return </li>
            </ol>
        </nav>
    </div>
    <div class="row">
        <!-- FormValidation -->
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="add_form" class="row g-6 pt-5">
                        {% csrf_token %}
                        <div class="col-9">
                            <div class="row">
                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="po_date">Purchase Return 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-5 form-control-validation">
                                    <label class="form-label" for="po_date">Purchase Return No <span
                                            style="color: red;">*</span></label>
                                    <input type="text" id="po_no" class="form-control" name="po_no" />
                                    <div class="invalid-feedback" id="po_no-error"></div>
                                </div>

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

                                <!-- Purchase Inward dropdown removed - auto-derived from IMEI -->

                            </div>
                            <div class="row">
                                <div class="col-md-3 form-control-validation mb-6">
                                    <label class="form-label" for="imei_number">IMEI <span
                                            style="color: red;">*</span></label>
                                    <input type="text" class="form-control" id="imei_number" name="imei_number"
                                        placeholder="Enter or click IMEI" autocomplete="off" style="background-color: #dbf7ff;">
                                    <div class="invalid-feedback" id="imei-error"></div>
                                </div>

                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id"><span style="color: red;">*</span>
                                        Purchase Return Status</label>
                                    <select class="select2  form-control" id="return_status" name="return_status">
                                        <option value="">Select</option>
                                        <option value="pending" >Pending</option>
                                        <option value="approved" selected>Approved</option>
                                        <option value="reversed">Reversed</option>
                                    </select>
                                </div>


                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id">Employee</label>
                                    <select class="select2  form-control" id="employee_id" name="employee_id">
                                        <option value="">Select</option>
                                        {% for emp in employee %}
                                        <option value="{{ emp.id }}" {% if emp.selected %}selected{% endif %}>
                                            {{ emp.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="item_code">Subcategory</label>
                                    <select class="select2  form-control" id="subcategory_id" name="subcategory_id">
                                        <option value="">Select</option>
                                        {% for subcat in subcategory %}
                                        <option value="{{subcat.id}}">{{subcat.name}}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback" id="subcategory-error"></div>
                                </div>

                                <div class="col-md-3 form-control-validation mb-6">
                                    <label class="form-label" for="uom_id">Brand</label>
                                    <select class="select2  form-control" id="brand_id" name="brand_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="brand-error"></div>
                                </div>

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

                                <div class="col-md-3 form-control-validation">
                                    <label class="form-label" for="rate">Variant</label>
                                    <select class="select2  form-control" id="variant_id" name="variant_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="variant-error"></div>
                                </div>

                                <div class="col-md-3 form-control-validation">
                                    <label class="form-label" for="rate">Color</label>
                                    <select class="select2  form-control" id="color_id" name="color_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="color-error"></div>
                                </div>
                                <div class="col-3 form-control-validation">
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label" for="amount">Rate (₹) </label>
                                            <input type="number" id="rate" class="form-control" name="rate" />
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label" for="amount">CGST (₹) </label>
                                            <input type="number" id="tax_cgst" class="form-control" name="tax_cgst"
                                                readonly />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-3 form-control-validation">
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label" for="tax_sgst">SGST (₹) </label>
                                            <input type="number" id="tax_sgst" class="form-control" name="tax_sgst"
                                                readonly />
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label" for="amount">IGST (₹) </label>
                                            <input type="number" id="tax_igst" class="form-control" name="tax_igst"
                                                readonly />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-3 form-control-validation">
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label" for="amount">Amount (₹)</label>
                                            <input type="number" id="amount" class="form-control" name="amount"
                                                readonly />
                                            <div class="invalid-feedback" id="amount-error"></div>
                                        </div>
                                        <div class="col-6">
                                            <button type="button" class="btn btn-success mt-5" name="add_item"
                                                id="add_item" onclick="addRow()">+Add</button>
                                            <input type="hidden" name="inward_id" id="inward_id">
                                            <input type="hidden" name="db_price" id="db_price">
                                            <input type="hidden" name="mrp" id="mrp">
                                            <input type="hidden" name="fsp" id="fsp">
                                            <input type="hidden" name="wsp" id="wsp">
                                            <input type="hidden" name="mop" id="mop">
                                            <input type="hidden" name="bop" id="bop">
                                            <input type="hidden" name="quantity" id="quantity" value="1">
                                            <input type="hidden" name="ean_number" id="ean_number">
                                            <input type="hidden" name="hsn_code" id="hsn_code">
                                            <input type="hidden" name="tax_percent" id="tax_percent">
                                            <input type="hidden" name="tax_amount" id="tax_amount">
                                        </div>
                                    </div>
                                </div>





                                <div class="col-12">
                                    <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>Rate (₹)</th>
                                                    <th>CGST (₹)</th>
                                                    <th>SGST (₹)</th>
                                                    <th>IGST (₹)</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="col-md-3 mt-5 mb-5 form-control-validation" style="padding: 2%;">
                            <div class="row">

                                <!-- IMEI Reference Table -->
                                <div class="col-12" style="padding: 0px; padding-bottom: 20px;">
                                    <h6 class="text-muted">Available IMEIs</h6>
                                    <div style="max-height: 200px; overflow-y: auto;">
                                        <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">Select a supplier to view available
                                                IMEIs</div>
                                        </div>
                                    </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: #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> 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"
                                        id="updateBtn">Save</button>
                                </div>

                            </div>
                        </div>




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



        </div>
    </div>



</div>




{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'purchase_return/return_js.html' %}

<script>
    $(document).ready(function () {
        CurrentDate('po_date');
        $('#supplier_id').select2('open');
    });

    // Auto-focus IMEI input after supplier selection
    $('#supplier_id').on('select2:select', function () {
        setTimeout(function () {
            $('#imei_number').focus();
        }, 300);
    });

    // Load IMEI reference table when supplier changes
    $('#supplier_id').on('change', function () {
        const supplierId = $(this).val();
        const editId = $('#tm_return_id').val() || 0;

        // Clear IMEI input and reference table
        $('#imei_number').val('');
        $('#imeiReferenceTable tbody').empty();

        if (!supplierId) {
            $('#imeiListContainer').html('<div class="text-center text-muted">Select a supplier to view available IMEIs</div>');
            return;
        }

        // Load IMEI reference list
        $.ajax({
            url: '/get-supplier-imei-reference/',
            type: 'GET',
            data: { supplier_id: supplierId, edit_id: editId },
            success: function (response) {
                const container = $('#imeiListContainer');
                container.empty();

                if (response.length === 0) {
                    container.html('<div class="text-center text-muted">No available IMEIs for this supplier</div>');
                    return;
                }

                response.forEach(item => {
                    // Format: IMEI (Inward No)
                    //         SKU Text
                    let displayTextHeader = `<strong>${item.imei_no}</strong> <span class="text-muted">(${item.pu_no})</span>`;

                    let listItem = `
                        <div class="p-2 mb-2 border rounded imei-item" 
                             style="background: #e6f7ff; cursor: pointer; transition: background 0.2s;"
                             data-imei="${item.imei_no}"
                             onclick="selectAvailableIMEI('${item.imei_no}')"
                             onmouseover="this.style.background='#bae7ff'" 
                             onmouseout="this.style.background='#e6f7ff'">
                            
                            <div style="font-size: 1rem; color: #1890ff; text-align: center; margin-bottom: 4px;">
                                ${displayTextHeader}
                            </div>
                            <div style="font-size: 0.85rem; font-weight: 500; color: #555; text-align: center;">
                                ${item.sku_text}
                            </div>
                        </div>
                    `;
                    container.append(listItem);
                });
            },
            error: function () {
                $('#imeiListContainer').html('<div class="text-center text-danger">Error loading IMEIs</div>');
            }
        });
    });

    // Helper to select IMEI
    window.selectAvailableIMEI = function (imei) {
        $('#imei_number').val(imei).focus();
    };




    $('#add_form').on('submit', function (e) {
        e.preventDefault();

        const formEl = this;
        const supplierId = $('#supplier_id').val();

        if (!supplierId) {
            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);
            const imei = (row.find('.imei_no').text() || '').toString().trim();

            if (!imei) {
                hasError = true;
            }

            items.push({
                po_id: row.data('po-id') || 0,
                ean: row.data('ean-number') || '',
                hsn_code: row.data('hsn-code') || '',
                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: parseFloat(row.data('fsp-price')) || 0,
                wsp_price: parseFloat(row.data('wsp-price')) || 0,
                mop_price: parseFloat(row.data('mop-price')) || 0,
                bop_price: parseFloat(row.data('bop-price')) || 0,
                mrp: parseFloat(row.data('mrp-price')) || 0,
                quantity: parseFloat(row.find('.quantity').text()) || 1,
                db_price: parseFloat(row.data('db-price')) || 0,
                imei_no: imei,
                rate: parseFloat(row.find('.rate').text()) || 0,
                tx_cgst: parseFloat(row.find('.tax_cgst').text()) || 0,
                tx_sgst: parseFloat(row.find('.tax_sgst').text()) || 0,
                tx_igst: parseFloat(row.find('.tax_igst').text()) || 0,
                tax_percent: row.data('tax-percent') || 0,
                tax_amount: parseFloat(row.data('tax-amount')) || 0,
                amount: parseFloat(row.find('.amount').text()) || 0,
            });
        });

        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('sub_total', $('#sub_total_placeholder').text().trim());
        formData.append('total_cgst', $('#total_tax_cgst').text().trim());
        formData.append('total_sgst', $('#total_tax_sgst').text().trim());
        formData.append('total_tds', $('#total_tax_tds').text().trim());
        formData.append('total_amount', $('#total_amount').text().trim());
        formData.append('total_quantity', $('#qty_total_placeholder').text().trim());
        formData.append('grand_total', $('#total_payable').text().trim());
        formData.append('round_off', $('#round_off_placeholder').text().trim());



        handleFormSubmit(
            formEl,
            '/add_purchase_return/',
            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 = '/purchase-return';

                }
            ],
            formData,
            false
        );
    });






</script>