{% 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" value="{{generated_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"  required/>
                                </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" >
                                        <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" >
                                        <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">EAN Number</label>
                                    <input  type="text" id="ean_number"  class="form-control typeahead" name="ean_number" autocomplete="off" onkeydown="handleEanKeydown(event)"  style="background-color: #fffacd;" />
                                    <input type="hidden" id="item_id" name="item_id" />
                                </div>
                            </div>

                            <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="subcategory-error"></div>
                                </div>

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

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

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

                                <div class="col-md-3 form-control-validation mb-5">
                                    <div class="row">
                                        <div class="col-6">
                                            <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-6 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>
                                </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-1 form-control-validation text-start mt-5">
                                    <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" />
                                    <button type="button" class="btn btn-success" name="add_item" id="add_item" onclick="addRow()">+Add</button>
                                </div>
                                <div class="col-md-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>Rate (₹)</th>
                                                    <th>Quantity</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </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;" >
                                                    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"></textarea>
                                </div>


                                <div class="col-12 mt-4 d-flex justify-content-center form-control-validation">                            
                                    <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 'includes/load_dropdown.html' %}
{% include 'purchase_order/order_js.html' %}

<script>
let isEditingRow = false;


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

    $('#supplier_id').on('change', function () {
        clearTable();
    });

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

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

    

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 clearTable() {
    $('#itemTable tbody').empty(); 
    $('#brand_id').val('').trigger('change');
    $('#model_id').val('').trigger('change');       
    $('#variant_id').val('').trigger('change');
    $('#color_id').val('').trigger('change');
    $('#rate').val('');
    $('#quantity').val('');
    $('#amount').val('');
}



function addRow() {
    clearErrors();
    
    let itemId          = $('#item_id').val();
    let EanNumber       = $('#ean_number').val().trim();
    let subcategoryId   = $('#subcategory_id').val();
    let subcategoryName = $('#subcategory_id option:selected').text();
    let brandId         = $('#brand_id').val();
    let brandName       = $('#brand_id option:selected').text();
    let modelId         = $('#model_id').val();
    let modelName       = $('#model_id option:selected').text();
    let variantId       = $('#variant_id').val();
    let variantName     = $('#variant_id option:selected').text();
    let colorId         = $('#color_id').val();
    let colorName       = $('#color_id option:selected').text();
    let rate            = parseFloat($('#rate').val()) || 0;
    let amount          = parseFloat($('#amount').val()) || 0;
    let quantity        = parseFloat($('#quantity').val()) || 0;
    let hsnCode         = $('#hsn_code').val();
    let dbPrice         = $('#db_price').val();
    let fsp             = $('#fsp').val() || 0;
    let wsp             = $('#wsp').val() || 0;
    let mop             = $('#mop').val() || 0;
    let bop             = $('#bop').val() || 0;
    let mrp             = $('#mrp').val() || 0;

    let hasError = false;
    if (!brandId) {
        $('#brand_id').addClass('is-invalid');
        $('#brand_id').focus().select();
        $('#brand-error').text('Please select a brand.');
        hasError = true;
    }
    if (!subcategoryId) {
        $('#subcategory_id').addClass('is-invalid');
        $('#subcategory_id').focus().select();
        $('#subcategory-error').text('Please select a subcategory.');
        hasError = true;
    }
    if (!modelId) {
        $('#model_id').addClass('is-invalid');
        $('#model_id').focus().select();
        $('#model-error').text('Please select a model.');
        hasError = true;
    }
    if (!variantId) {
        $('#variant_id').addClass('is-invalid');
        $('#variant_id').focus().select();
        $('#variant-error').text('Please select a variant.');
        hasError = true;
    }
    if (!colorId) {
        $('#color_id').addClass('is-invalid');
        $('#color_id').focus().select();
        $('#color-error').text('Please select a color.');
        hasError = true;
    }



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

    

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

    if (hasError) return;

    updateOrAddRow(itemId, EanNumber, 
                    subcategoryId, subcategoryName, 
                    brandId, brandName, 
                    modelId, modelName, 
                    variantId, variantName, 
                    colorId, colorName, 
                    rate, quantity, 
                    hsnCode, dbPrice, 
                    fsp, wsp, mop, bop, mrp
                );

    $('#ean_number').focus();
    $('#ean_number').val('');
    $('#item_id').val('');
    $('#subcategory_id').val('').trigger('change');
    $('#brand_id').val('').trigger('change');
    $('#model_id').val('').trigger('change');
    $('#variant_id').val('').trigger('change');
    $('#color_id').val('').trigger('change');
    $('#rate').val('');
    $('#quantity').val('');
    $('#amount').val('');
    $('#hsn_code').val('');
    $('#db_price').val('');
    $('#fsp').val('');
    $('#wsp').val('');
    $('#mop').val('');
    $('#bop').val('');
    $('#mrp').val('');
}


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


 function updateOrAddRow(itemId, EanNumber,
                        subcategoryId, subcategoryName, 
                        brandId, brandName, 
                        modelId, modelName, 
                        variantId, variantName, 
                        colorId, colorName, 
                        rate, quantity, 
                        hsnCode, dbPrice, 
                        fsp, wsp, mop, bop, mrp) {
    rate = parseFloat(rate).toFixed(2);
    quantity = parseFloat(quantity);

    let selector = `#itemTable tbody tr[data-brand-id="${brandId}"][data-model-id="${modelId}"][data-variant-id="${variantId}"][data-color-id="${colorId}"][data-rate="${rate}"]`;
    let existingRow = $(selector);

    let totalQuantity = quantity;
    let totalAmount = (rate * quantity).toFixed(2);

    if (existingRow.length > 0) {
        let currentQty = parseFloat(existingRow.find('.quantity').text()) || 0;
        totalQuantity += currentQty;
        totalAmount = (totalQuantity * rate).toFixed(2);

        existingRow.find('.quantity').text(totalQuantity);
        existingRow.find('.amount').text(totalAmount);
    } else {

        let newRow = `
            <tr 
                data-brand-id="${brandId}" 
                data-model-id="${modelId}" 
                data-variant-id="${variantId}" 
                data-color-id="${colorId}" 
                data-rate="${rate}"  
                data-mrp="${mrp}"  
                data-db-price="${dbPrice}"  
                data-fsp="${fsp}"  
                data-wsp="${wsp}"  
                data-mop="${mop}"  
                data-bop="${bop}"
                data-ean-no="${EanNumber}"
                data-hsn-code="${hsnCode}"  
                data-subcategory-id="${subcategoryId}">
                <td>
                    <button type="button" class="btn btn-outline-success btn-xs p-1 edit-btn"><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(); bindEditableCellEvents();"><i class="fas fa-trash-alt"></i></button>
                </td>
                <td class="ean">${EanNumber} <br>                    
                    <small>HSN: ${hsnCode}</small>
                </td>
                <td>${subcategoryName}</td>
                <td>${brandName}</td>
                <td>${modelName}</td>
                <td>${variantName}</td>
                <td>${colorName}</td>
                <td class="rate">${rate}</td>
                <td class="quantity">${quantity}</td>
                <td class="amount">${totalAmount}</td>
            </tr>
        `;

        $('#itemTable tbody').append(newRow);
    }
    updateSummaryTable();
}


function updateSummaryTable() {
    let totalQty = 0;
    let subTotal = 0;

    $('#itemTable tbody tr').each(function () {
        let qty = parseFloat($(this).find('.quantity').text()) || 0;
        let amount = parseFloat($(this).find('.amount').text()) || 0;

        totalQty += qty;
        subTotal += amount;
    }); 

    totalQty = parseFloat(totalQty);
    subTotal = parseFloat(subTotal.toFixed(2));

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

    // Update placeholders in summary table
    $('#qty_total_placeholder').text(totalQty);
    $('#sub_total_placeholder').text(subTotal.toFixed(2));
    $('#round_off_placeholder').text(roundOff.toFixed(2));
    $('#total_payable').text(roundedTotal.toFixed(2));
}

function bindEditableCellEvents() {
    $('#itemTable tbody').on('input', '.quantity, .rate', function () {
        let row = $(this).closest('tr');
        let rate = parseFloat(row.find('.rate').text()) || 0;
        let qty = parseFloat(row.find('.quantity').text()) || 0;
        let amount = (rate * qty).toFixed(2);
        row.find('.amount').text(amount);
        updateSummaryTable();
    });
}


$(document).on('click', '.edit-btn', function () {
    handleEditRow(this);  // pass the button, not the row
});



function handleEditRow(btn) {
    let $row = $(btn).closest('tr');

    isEditingRow = true; // 🔒 lock rate override

    let subcategoryId = $row.data('subcategory-id');
    let brandId   = $row.data('brand-id');
    let modelId   = $row.data('model-id');
    let variantId = $row.data('variant-id');
    let colorId   = $row.data('color-id');
    let ean       = $row.data('ean-no');
    let rate      = $row.find('.rate').text();
    let amount    = $row.find('.amount').text();
    let quantity  = $row.find('.quantity').text();
    let mrp       = $row.find('.mrp').text();
    let dbPrice   = $row.find('.db_price').text();
    let fsp       = $row.find('.fsp').text();
    let wsp       = $row.find('.wsp').text();
    let mop       = $row.find('.mop').text();
    let bop       = $row.find('.bop').text();
    let hsnCode   = $row.data('hsn-code');

    

    $('#ean_number').val(ean);
    $('#rate').val(rate).focus().select();
    $('#quantity').val(quantity);

    $('#subcategory_id').val(subcategoryId).trigger('change');
    loadBrand('subcategory_id', 'brand_id', brandId, function() {
        loadModels('brand_id', 'model_id', modelId, function() {
            loadVariants('brand_id', 'model_id', 'variant_id', variantId, function() {
                loadColors('brand_id', 'model_id', 'variant_id', 'color_id', colorId, function() {
                });
            });
        });
    });
     $('#hsn_code').val(hsnCode);
     $('#db_price').val(dbPrice);
     $('#fsp').val(fsp);
     $('#wsp').val(wsp);
     $('#mop').val(mop);
     $('#bop').val(bop);
     $('#mrp').val(mrp);
     $('#amount').val(amount);

   

    $row.remove();
    updateSummaryTable();
}




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

    let supplierId = $('#supplier_id').val();

    if (!supplierId) {
        showToast('info', 'Please select either a Supplier or a Supply Store.');
        return;
    }

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

    let formData = new FormData(this);

    let items = [];
    
    $('#itemTable tbody tr').each(function () {
            let item = {
                subcategory_id : $(this).data('subcategory-id'),
                brand_id       : $(this).data('brand-id'),
                model_id       : $(this).data('model-id'),
                variant_id     : $(this).data('variant-id'),
                color_id       : $(this).data('color-id'),
                ean_number     : $(this).data('ean-no'),
                rate           : $(this).find('.rate').text(),
                quantity       : $(this).find('.quantity').text(),
                amount         : $(this).find('.amount').text(),
                hsn_code       : $(this).data('hsn-code'), 
                mrp            : $(this).data('mrp') || 0,
                fsp            : $(this).data('fsp') || 0,
                wsp            : $(this).data('wsp') || 0,
                mop            : $(this).data('mop') || 0,
                bop            : $(this).data('bop') || 0,
                db_price       : $(this).data('db-price') || 0,
            };
            items.push(item);
        });

        formData.append('items', JSON.stringify(items));
        formData.append('total_quantity', $('#qty_total_placeholder').text());
        formData.append('sub_total', $('#sub_total_placeholder').text());
        formData.append('round_off', $('#round_off_placeholder').text());  
        formData.append('grand_total', $('#total_payable').text());       

        handleFormSubmit(
            this,
            '/add_purchase_order/',
            null,
            'add_form',
            true,
            'Purchase Order',
             [
                function (response) {
                    $('#submit').attr('disabled', false);
                    $('#submit').text('Save');
                    resetSelectFields('#supplier_id');
                    $('#itemTable tbody').empty();
                    $('#qty_total_placeholder').text('0');
                    $('#sub_total_placeholder').text('0.00');
                    $('#total_payable').val('0.00');
                    $('#po_id').val(null).trigger('change');
                     sessionStorage.setItem('addSuccessMessage', true);
                    window.location.href = '/purchase-order';

                    updateSummaryTable();

                
                }
            ],
            formData, 
            false
        );
    });


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







</script>