{% 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 Order</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i> 
                    </a>
                </li>
                <li class="breadcrumb-item">Purchase</li>    
                <li class="breadcrumb-item active" aria-current="page">Purchase Order </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 form-control-validation mb-5">
                                    <label class="form-label" for="po_date">PO No</label>
                                    <input  type="text"  id="po_no"  class="form-control" name="po_no" disabled/>
                                </div>

                                <div class="col-md-3 form-control-validation mb-5">
                                    <label class="form-label" for="po_date">PO 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 form-control-validation mb-5">
                                    <label class="form-label" for="supplier_id">Supplier</label>
                                    <select class="select2  form-control" id="supplier_id" name="supplier_id" disabled>
                                        <option value="">Select</option>
                                        {% for k in supplier %}
                                        <option value="{{k.id}}">{{k.name}}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                 <div class="col-md-3 mb-5 form-control-validation">
                                    <label class="form-label" for="supplier_id">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="row">                              
                                    <div class="col-md-3 mb-5 form-control-validation">
                                        <label class="form-label" for="item_code">EAN Number</label>
                                        <input  type="text" id="ean_number"  class="form-control typeahead" name="ean_number"  onkeydown="handleEanKeydown(event)" autocomplete="off"  style="background-color: #fffacd;" />
                                        <input type="hidden" id="item_id" name="item_id" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="item_code">Subcategory</label>
                                        <select class="select2 form-control" id="subcategory_id" name="subcategory_id">
                                            <option value="">Select</option>   
                                            {% for k in subcategory %}                                 
                                            <option value="{{k.id}}">{{k.name}}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="invalid-feedback" id="brand-error"></div>
                                    </div>
                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="item_code">Brand</label>
                                        <select class="select2 form-control" id="brand_id" name="brand_id">
                                            <option value="">Select</option>   
                                            {% for k in brand %}                                 
                                            <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="uom_id">Model</label>
                                        <select class="select2  form-control" id="model_id" name="model_id"  >
                                            <option value="">Select</option>                               
                                        </select>
                                        <div class="invalid-feedback" id="model-error"></div>
                                    </div>
                                    
                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="uom_id">Variant</label>
                                        <select class="select2  form-control" id="variant_id" name="variant_id"  >
                                            <option value="">Select</option>                               
                                        </select>
                                        <div class="invalid-feedback" id="variant-error"></div>
                                    </div>  

                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="uom_id">Color</label>
                                        <select class="select2  form-control" id="color_id" name="color_id" >
                                            <option value="">Select</option>                               
                                        </select>
                                        <div class="invalid-feedback" id="color-error"></div>
                                    </div>  

                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="rate">Rate</label>
                                        <input  type="number"  id="rate"  class="form-control" name="rate"  min="0"/>
                                        <small class="text-muted mt-2" id="mop_price_text" style="display:none;">MOP: ₹0 </small>
                                        <div class="invalid-feedback" id="rate-error"></div>
                                    </div>
                                    <div class="col-md-3 form-control-validation mb-5">
                                        <label class="form-label" for="quantity">Quantity </label>
                                        <input  type="number"  id="quantity"  class="form-control" name="quantity" min="1" />
                                        <div class="invalid-feedback" id="quantity-error"></div>
                                    </div>
                                    <div class="col-md-3   form-control-validation mb-5">
                                        <label class="form-label" for="amount">Amount (inclusive ₹)</label>
                                        <input  type="number"  id="amount"  class="form-control" name="amount" min="0" readonly />
                                    </div>
                                
                                    <div class="col-md-3 form-control-validation text-start mt-6">
                                        <button type="button"  class="btn btn-primary" onclick="historyBack()">Back</button>&nbsp; &nbsp;
                                        <button type="button" class="btn btn-success" name="add_item" id="add_item" onclick="addTable()">+Add</button>
                                    </div>

                                    <div class="col-md-12 mt-5">
                                        <div class="table-responsive text-nowrap">
                                            <table class="datatables-ajax table table-bordered" 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>Rate (₹)</th>
                                                        <th>Quantity</th>
                                                        <th>Amount (₹)</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                        
                        
                        <div class="col-md-3">
                            <div class="row" style="padding: 5%;">
                               <div class="col-12 mb-5 mt-5">
                                     <table id="summaryTable" class="table table-bordered w-100" style="border: 1px solid #f2f2f2; margin-top: 3%;">
                                        <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>Grand Total (₹)</td>
                                                <td colspan="2"  id="total_payable" align="end" style="background-color: #9cd3f3; color: black; font-size: 21px;" contenteditable="true">
                                                    0.00
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table> 
                                </div>

                                <div class="col-12 mt-5 mb-4">
                                    <label class="form-label" for="supplier_id">Remarks</label>
                                    <textarea class="form-control" id="description" rows="3" name="description" readonly></textarea>
                                </div>


                               <div class="col-12 d-flex justify-content-center form-control-validation">                            
                                    <input type="hidden" id="tm_id" name="tm_id" value="{{id}}">
                                    <input type="hidden" id="tx_id" name="tx_id">
                                    <input type="hidden" id="item_id" name="item_id" />
                                    <input type="hidden" id="hsn_code" name="hsn_code" />
                                    <input type="hidden" id="db_price" name="db_price" />
                                    <input type="hidden" id="fsp" name="fsp" />
                                    <input type="hidden" id="wsp" name="wsp" />
                                    <input type="hidden" id="mop" name="mop" />
                                    <input type="hidden" id="bop" name="bop" />
                                    <input type="hidden" id="mrp" name="mrp" />
                                </div>

                            </div>
                           


                        </div>
                       



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

            

        </div>
    </div>



</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}
{% include 'purchase_order/order_js.html' %}
<script>
    let isEditingRow ;

    function historyBack() {
         window.location.href = '/purchase-order' // Replace with your actual main page URL
    }

    var table;

    $(document).ready(function () {
        preventNegativeInput('#rate');
        preventNegativeInput('#quantity');
        preventNegativeInput('#amount');

        safeValue('#po_no', '{{ purchase.po_no|escapejs }}');
        safeValue('#po_date', '{{ purchase.po_date|escapejs }}');
        safeValue('#description', '{{ purchase.remarks|escapejs }}');
        safeSelectValue('#supplier_id', '{{ purchase.supplier_id|escapejs }}');
        safeSelectValue('#store_id', '{{ purchase.supply_branch_id|escapejs }}');
        safeSelectValue('#employee_id', '{{ purchase.employee_id|escapejs }}');
        refresh_data();
        

        loadTypeahead('#ean_number', { 'ean': 'ean', 'item_id': 'id' }, '/load_ean_number/');         

    });
        
    function displaySummary() {
        let totalQuantity = 0;
        let subTotal = 0;

        $('#itemTable tbody tr').each(function () {
            let quantity = parseFloat($(this).find('td:eq(7)').text()) || 0; 
            let amount = parseFloat($(this).find('td:eq(8)').text()) || 0;    // 6th column = Amount

            totalQuantity += quantity;
            subTotal += amount;
        });

        // Update placeholders
        $('#qty_total_placeholder').text(totalQuantity);
        $('#sub_total_placeholder').text(subTotal.toFixed(2));
        $('#cash_total_placeholder').text(subTotal.toFixed(2));

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

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

        let grandTotalDisplay = $('#total_payable');
        if (!grandTotalDisplay.is(':focus')) {
            grandTotalDisplay.text(roundedTotal.toFixed(2));}
    }

    
    function updateAmount() {
        let qty = parseFloat($('#quantity').val()) || 0;
        let rate = parseFloat($('#rate').val()) || 0;
        let amount = qty * rate;
        $('#amount').val(amount.toFixed(2));
    }

    $('#quantity, #rate').on('input', function () {
        updateAmount();
    });




    function initializeDataTable() {
        table = $('#itemTable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "dom":"t",
            "columns": [
                { "data": "action", "title": "Action" },
                { "data": "ean", "title": "EAN" },
                { "data": "subcategory", "title": "Subcategory" },
                { "data": "brand", "title": "Brand" },
                { "data": "model", "title": "Model" },
                { "data": "variant", "title": "Variant" },
                { "data": "color", "title": "Color" },
                { "data": "rate", "title": "Rate","className": "text-end" },
                { "data": "qty", "title": "Quantity" ,"className": "text-end"},
                { "data": "amt", "title": "Amount","className": "text-end" }
            ],
            "ajax": {
                "url": '/ajax_po_edit/',
                "type": "POST",
                "data": function(data){
                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    data.po_id = $('#tm_id').val();
                },
                dataSrc: function (response) {
                    if (response.message === 'warning') {
                        showToast('warning', response.error_message || 'You do not have permission to view the user role.');
                        table.clear().draw();
                        return [];  
                    }

                    return response.data || [];
                }
            },
            
            "drawCallback": function(settings) {
                displaySummary();
            }
        });
    }


    function refresh_data() {
        if (!table) {
            initializeDataTable();
        } else {
            table.ajax.reload();
        }
    }
    


    $('#rate').on('keydown', function(event) {
        if (event.key === 'Enter') {
            event.preventDefault(); 
            $('#quantity').focus().select();
        }
    });
    
    $('#quantity').on('keydown', function(event) {
        if (event.key === 'Enter') {
            event.preventDefault(); 
            addTable();
        }
    });
    
function addTable() {

    try {
        console.log('🧹 Clearing previous errors');
        clearErrors();

        let tm_id      = $('#tm_id').val();
        let tx_id      = $('#tx_id').val();
        let ean_number = $('#ean_number').val()?.trim();

        let subcategoryId    = $('#subcategory_id').val();
        let brandId    = $('#brand_id').val();
        let modelId    = $('#model_id').val();
        let variantId  = $('#variant_id').val();
        let colorId    = $('#color_id').val();  

        let rate       = parseFloat($('#rate').val()) || 0;
        let amount     = parseFloat($('#amount').val()) || 0;
        let quantity   = parseInt($('#quantity').val()) || 0;
        let hsn_code   = $('#hsn_code').val();
        let db_price   = parseFloat($('#db_price').val()) || 0;
        let fsp        = parseFloat($('#fsp').val()) || 0;
        let wsp        = parseFloat($('#wsp').val()) || 0;
        let mop        = parseFloat($('#mop').val()) || 0;
        let bop        = parseFloat($('#bop').val()) || 0;
        let mrp        = parseFloat($('#mrp').val()) || 0;

        let editId     = parseInt($('#edit_id').val()) || 0;

        

        let hasError = false;

        if (!brandId) {
            $('#brand_id').addClass('is-invalid');
            $('#brand-error').text('Please select a brand.');
            hasError = true;
        }

        if (!modelId) {
            $('#model').addClass('is-invalid');
            $('#model-error').text('Please select a model.');
            hasError = true;
        }

        if (!variantId) {
            $('#variant').addClass('is-invalid');
            $('#variant-error').text('Please select a variant.');
            hasError = true;
        }

        if (!colorId) {
            $('#color').addClass('is-invalid');
            $('#color-error').text('Please select a color.');
            hasError = true;
        }

        if (!rate) {
            $('#rate').addClass('is-invalid');
            $('#rate-error').text('Rate is required.');
            hasError = true;
        }

        if (!quantity) {
            $('#quantity').addClass('is-invalid');
            $('#quantity-error').text('Quantity is required.');
            hasError = true;
        }

        if (hasError) {            
            return;
        }        

        saveOrder(
            tm_id,
            tx_id,
            ean_number,
            subcategoryId,
            brandId,
            modelId,
            variantId,
            colorId,
            rate,
            quantity,
            amount,
            hsn_code,
            db_price,
            fsp,
            wsp,
            mop,
            bop,
            mrp,
            editId
        );


        $('#subcategory_id, #brand_id, #model, #variant, #color').val('').trigger('change');
        $('#rate, #quantity, #amount, #edit_id').val('');
        $('#add_item').text('+Add');
        $('#ean_number').focus();

    } catch (err) {
        console.error('🔥 addTable() crashed:', err);
    }

    console.groupEnd();
}



    function clearErrors() {
    $('#brand_id, #model, #variant, #color, #rate, #quantity').removeClass('is-invalid');
    $('#brand-error, #model-error, #variant-error, #color-error, #rate-error, #quantity-error, #mrp-error').text('');
}




function saveOrder(tm_id, tx_id, ean_number, subcategoryId, brandId, modelId, variantId, colorId, rate, quantity,  amount, hsn_code, db_price, fsp, wsp, mop, bop, mrp, edit_id = 0) {

    const payload = {
        tm_id: tm_id,
        tx_id: tx_id,
        ean_number: ean_number,
        subcategory_id: subcategoryId,
        brand_id: brandId,
        model_id: modelId,
        variant_id: variantId,
        color_id: colorId,
        rate: parseFloat(rate),
        quantity: parseInt(quantity),
        amount: parseFloat(amount),
        hsn_code: hsn_code,
        db_price: parseFloat(db_price),
        fsp: parseFloat(fsp),
        wsp: parseFloat(wsp),
        mop: parseFloat(mop),
        bop: parseFloat(bop),
        mrp: parseFloat(mrp),
        edit_id: edit_id
    };        

    $.ajax({
        url: '/update_purchase_order/',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(payload),
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        },
        success: function (response) {
            isEditingRow = false;

            if (response.info === false) {
                showSweetAlert('info', response.message || 'This Purchase Order is locked.');
                return;
            }

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

            if (response.success) {
                const msgMap = {
                    added: 'Purchase Order added successfully.',
                    updated: 'Purchase Order quantity updated.',
                    edited: 'Purchase Order updated successfully.'
                };

                showToast('success', msgMap[response.action] || 'Purchase Order updated.');
                $('brand_id').val('').trigger('change');
                 $('#model_id').val('').trigger('change');
                 $('#variant_id').val('').trigger('change');
                 $('#color_id').val('').trigger('change');
                 $('#tx_id').val('');
                 $('#ean_number').val('');
                 clearErrors();

                refresh_data();
            }
            else if (response.message === 'infos') {
                showSweetAlert('info', response.error_message);
            }
            
            else {
                showToast('error', response.message || 'Failed to save item.');
            }

        },

        error: function (xhr, status, error) {           
            showToast('error', 'Error saving item to Purchase Order.');
        }
    });
}



    function delete_data(id) {
        deleteEntity('/delete_tx_po/', id, '{{ csrf_token }}', 'Purchase Order');
    }

    

    
    function edit_data(id, name) {
        isEditingRow = true; // Prevent override in loadItemDetails
        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;

        $.post('/edit_material_request/', { id: id, csrfmiddlewaretoken: tkn }, function(res) {
            $('#tx_id').val(res.id);
            $('#subcategory_id').val(res.subcategory_id).trigger('change');
            loadBrand('subcategory_id', 'brand_id', res.brand_id, function() {
                loadModels('brand_id', 'model_id', res.model_id, function() {
                    loadVariants('brand_id', 'model_id', 'variant_id', res.variant_id, function() {
                        loadColors('brand_id', 'model_id', 'variant_id', 'color_id', res.color_id, function() {
                        });
                    });
                });
            });
            $('#ean_number').val(res.ean);
            $('#rate').val(res.rate);
            $('#quantity').val(res.quantity);
            $('#amount').val(res.amount);
            $('#hsn_code').val(res.hsn_code);
            $('#db_price').val(res.db_price);
            $('#fsp').val(res.fsp);
            $('#wsp').val(res.wsp);
            $('#mop').val(res.mop);
            $('#bop').val(res.bop);
            $('#mrp').val(res.mrp);

            $('#add_item').text('Update');
        });
    }
    
    
    
  


</script>