{% load static %}
{% include 'includes/header.html' %}
<style>
    .modal-xl {
  max-width: 55% !important; /* or 100% if you want full width */
}
</style>

{% include 'includes/sidebar.html' %}
{% include 'includes/navbar.html' %}

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">Items</h4> 
            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#add_modal">Add</button>  &nbsp
        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i> 
                    </a>
                </li>
                <li class="breadcrumb-item">Items</li>
                <li class="breadcrumb-item active" aria-current="page"> Items</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-header border-bottom">         
           <div class="row mt-2">
                <div class="col-2">
                    <label for="filter_category_id" class="form-label">Category</label>
                    <select class="select2 form-control" id="filter_category_id" name="category_id" >
                        <option value="">Select</option>
                        {% for k in category %}
                            <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-2">
                    <label for="filter_subcategory_id" class="form-label">Sub Category</label>
                    <select class="select2 form-control" id="filter_subcategory_id" name="subcategory_id">
                        <option value="">Select</option>
                        {% for k in sub_category %}
                            <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-2">
                    <label for="filter_uom_id" class="form-label">Brand</label>
                    <select class="select2 form-control" id="filter_brand_id" name="filter_brand_id">
                        <option value="">Select</option>
                        {% for k in brand %}
                            <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-2">
                    <label for="filter_model_id" class="form-label">Model</label>
                    <select class="select2 form-control" id="filter_model_id" name="filter_model_id">
                        <option value="">Select</option>
                        {% for k in model %}
                            <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                        
                    </select>
                </div>
                <div class="col-2">
                    <label for="filter_variant_id" class="form-label">Variant</label>
                    <select class="select2 form-control" id="filter_variant_id" name="filter_variant_id">
                        <option value="">Select</option>
                        {% for k in variant %}
                            <option value="{{k.id}}">{{k.name}}</option>
                        {% endfor %}
                        
                    </select>
                </div>
                <div class="col-2 mt-6">
                    <button type="button" class="btn btn-primary" onclick="refresh_data()">Refresh</button>                    
                </div>
            </div>
        </div>
        <div class="card-body">  
            <div class="card-datatable table-responsive">
                <table class="datatables-basic table table-bordered" id="datatable">
                  <thead>
                    <tr>
                        <th>Id</th>
                        <th>Action</th>
                        <th>category</th>
                        <th>Sub category</th>
                        <th>Brand</th>
                        <th>Model</th>
                        <th>Variant</th>
                        <th>Color</th>
                        <th>Tax </th>
                        <th>UOM </th>
                        <th>HSN Code</th>
                        <th>EAN Number</th>
                        <th>Cell Life</th>
                        <th>Image</th>
                        <th>Db Price</th>
                        <th>WSP</th>
                        <th>FSP</th>
                        <th>MOP Price</th>
                        <th>BOP Price</th>
                        <th>MRP</th>
                        <th>Description</th>
                        <th>Status</th>                       
                    </tr>
                    
                  </thead>
                </table>
              </div>          
        </div>
    </div>
    
    
    <!-- add modal -->
    <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Add Items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="add_form">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="row">                       
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Category</label>
                                <select class="select2  form-control" id="category_id" name="category_id" required>
                                    <option value="">Select</option>
                                    {% for k in category %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"> <span style="color: red;">*</span> Sub Category</label>
                                <select class="select2  form-control" id="sub_category_id" name="sub_category_id" required>
                                    <option value="">Select</option>
                                    {% for k in sub_category %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4">
                                <label for="filter_uom_id" class="form-label"><span style="color: red;">*</span> Brand</label>
                                <select class="select2 form-control" id="brand_id" name="brand_id" required>
                                    <option value="">Select</option>
                                    {% for k in brand %}
                                        <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Model</label>
                                <select class="select2  form-control" id="model_id" name="model_id" required>
                                   <option value="">Select</option>
                                   
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Variant</label>
                                 <select class="select2 form-control" id="variant_id" name="variant_id" required>
                                    <option value="">Select</option>
                                    
                                </select>
                            </div>

                             <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Color</label>
                                <select class="select2  form-control" id="color_id" name="color_id" required>
                                   <option value="">Select</option>
                                  
                                </select>
                            </div>


                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"> UOM</label>
                                <select class="select2  form-control" id="uom_id" name="uom_id">
                                    <option value="">Select</option>                                    
                                    {% for k in uom %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Tax</label>
                                <select class="select2  form-control" id="tax_id" name="tax_id" required>
                                     <option value="">Select</option>
                                    {% for k in tax %}
                                    <option value="{{k.id}}">{{k.name}} - {{k.percentage}}%</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="image" class="form-label">HSN Code</label>
                                <input class="form-control" type="text" id="hsn_code" name="hsn_code">
                            </div>

                            <div class="col-4 mb-4">
                                <label for="image" class="form-label"><span style="color: red;">*</span> EAN Number</label>
                                 <input class="form-control" type="text" id="ean_number" name="ean_number"  onkeyup="checkName('ean_number', $('#brand_id').val(), $('#model_id').val(), $('#variant_id').val(), $('#color_id').val(),'name_error','submit_btn')" required>
                                <small class="text-danger d-none" id="name_error"></small>
                            </div> 
                            <div class="col-4 mb-4">
                                <label for="image" class="form-label">Image</label>
                                <input class="form-control image-input" type="file" id="image" name="image">
                                <div class="invalid-feedback d-block image-error" style="display: none;"></div>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="image" class="form-label"><span style="color: red;">*</span> Shelf Life (in days)</label>
                                <input class="form-control" type="number" id="cell_life" name="cell_life" required>
                               
                            </div>
                             <div class="d-flex align-items-center mb-3 mt-4">
                                    <h5 class="mb-0 me-2" >Price Details</h5>
                                    <div class="flex-grow-1">
                                        <hr class="mt-2 mb-0" >
                                    </div>
                                </div>
                                                       
                            
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> DB Price</label>
                                <input class="form-control" type="number" step="0.02" id="db_price" name="db_price" required>
                            </div>                            

                             <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Wholesale Selling Price (%)</label>
                                <input class="form-control" type="number" step="0.02" id="wsp" name="wsp" placeholder="In Percentage" required>
                                <small class="text-muted" id="wsp_price_text" style="display:none;"></small>
                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Franchise Selling Price (%)</label>
                                <input class="form-control" type="number" step="0.02" id="fsp" name="fsp" placeholder="In Percentage"  required>
                                <small class="text-muted" id="fsp_price_text" style="display:none;"></small>

                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> MOP Price</label>
                                <input class="form-control" type="number" step="0.02" id="mop_price" name="mop_price" required>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> BOP Price</label>
                                <input class="form-control" type="number" step="0.01" id="bop_price" name="bop_price" required>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> MRP</label>
                                <input class="form-control" type="number" step="0.01" id="mrp" name="mrp" required>
                            </div>
                            <div class="col-12 mb-4">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" rows="3" name="description"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="is_active" value="1">
                        <input type="hidden" id="wsp_amount" name="wsp_amount">
                        <input type="hidden" id="fsp_amount" name="fsp_amount">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="submit_btn" >Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="edit_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Edit Items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="edit_form">
                    <div class="modal-body">
                        {% csrf_token %}
                        <div class="row">
                            
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Category</label>
                                <select class="select2  form-control" id="edit_category_id" name="category_id" required>
                                    <option value="0">Select</option>
                                    {% for k in category %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Sub Category</label>
                                <select class="select2  form-control" id="edit_sub_category_id" name="sub_category_id" required>
                                    <option value="0">Select</option>
                                    {% for k in sub_category %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                             <div class="col-4">
                                <label for="filter_uom_id" class="form-label"><span style="color: red;">*</span> Brand</label>
                                <select class="select2 form-control" id="edit_brand_id" name="brand_id" required>
                                    <option value="">Select</option>
                                    {% for k in brand %}
                                        <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Model</label>
                                <select class="select2  form-control" id="edit_model_id" name="model_id" required>
                                    <option value="0">Select</option>
                                    {% for k in model %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Variant</label>
                                <select class="select2  form-control" id="edit_variant_id" name="variant_id" required>
                                    <option value="0">Select</option>
                                    {% for k in variant %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Color</label>
                                <select class="select2  form-control" id="edit_color_id" name="color_id" required>
                                    <option value="">Select</option>
                                    {% for k in color %}
                                        <option value="{{k.id}}" data-color="{{ k.name }}">{{k.name}}</option>
                                    {% endfor %} 
                                </select>
                            </div>



                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"> UOM</label>
                                <select class="select2  form-control" id="edit_uom_id" name="uom_id">
                                    <option value="0">Select</option>
                                    {% for k in uom %}
                                    <option value="{{k.id}}">{{k.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            

                             <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Tax</label>
                                <select class="select2  form-control" id="edit_tax_id" name="tax_id" required>
                                    {% for k in tax %}
                                    <option value="{{k.id}}">{{k.name}} - {{k.percentage}}%</option>
                                    {% endfor %}
                                </select>
                            </div>
                           
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"> HSN Code</label>
                                <input class="form-control" type="text" id="edit_hsn_code" name="hsn_code">
                            </div>
                             <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> EAN Number</label>
                                 <input class="form-control" type="text" id="edit_ean_number" name="ean_number"  onkeyup="checkName('edit_ean_number', $('#edit_brand_id').val(), $('#edit_model_id').val(), $('#edit_variant_id').val(), $('#edit_color_id').val(),'edit_name_error','edit_submit_btn',$('#edit_id').val())" required>
                                 <small class="text-danger d-none" id="edit_name_error"></small>
                            </div>
                            <div class="col-4 mb-4">
                                <label for="image" class="form-label">Image</label>
                                <input class="form-control image-input" type="file" id="edit_image" name="image">
                                <div class="invalid-feedback d-block image-error" style="display: none;"></div>
                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Shelf Life (in days)</label>
                                <input class="form-control" type="number" id="edit_cell_life" name="cell_life" required>
                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label">Status</label>
                                <select class="select2  form-control" id="edit_is_active" name="is_active" >
                                    <option value="">Select</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                            <div class="d-flex align-items-center mb-3 mt-4">
                                    <h5 class="mb-0 me-2" >Price Details</h5>
                                    <div class="flex-grow-1">
                                        <hr class="mt-2 mb-0" >
                                    </div>
                                </div>
                                                       
                            
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> DB Price</label>
                                <input class="form-control" type="number" step="0.02" id="edit_db_price" name="db_price" required>
                            </div>                            

                             <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Wholesale Selling Price (%)</label>
                                <input class="form-control" type="number" step="0.02" id="edit_wsp" name="wsp" placeholder="In Percentage" required>
                                <small class="text-muted" id="edit_wsp_price_text" style="display:none;"></small>

                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> Franchise Selling Price (%)</label>
                                <input class="form-control" type="number" step="0.02" id="edit_fsp" name="fsp" placeholder="In Percentage"  required>
                                <small class="text-muted" id="edit_fsp_price_text" style="display:none;"></small>
                            </div>
                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> MOP Price</label>
                                <input class="form-control" type="number" step="0.02" id="edit_mop_price" name="mop_price" required>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> BOP Price</label>
                                <input class="form-control" type="number" step="0.02" id="edit_bop_price" name="bop_price" required>
                            </div>

                            <div class="col-4 mb-4">
                                <label for="name" class="form-label"><span style="color: red;">*</span> MRP</label>
                                <input class="form-control" type="number" step="0.02" id="edit_mrp" name="mrp" required>    
                            </div>
                           
                            <div class="col-12 mb-4">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="edit_description" rows="3" name="description"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" id="edit_id" name="id">
                       <input type="hidden" id="edit_wsp_amount" name="wsp_amount">
                        <input type="hidden" id="edit_fsp_amount" name="fsp_amount">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

   



</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}

<script>
    var table;

    $('#filter_brand_id').on('change', function () {
        loadModels('filter_brand_id', 'filter_model_id');
    });

    $('#brand_id').on('change', function () {
        loadModels('brand_id', 'model_id');
    });

    $('#edit_brand_id').on('change', function () {
        loadModels('edit_brand_id', 'edit_model_id');
    });


     $('#model_id').on('change', function () {
        loadVariants('brand_id', 'model_id', 'variant_id');
    });

    $('#edit_model_id').on('change', function () {
        loadVariants('edit_brand_id', 'edit_model_id', 'edit_variant_id');
    });

    $('#filter_model_id').on('change', function () {
        loadVariants('filter_brand_id', 'filter_model_id', 'filter_variant_id');
    });


    
     $('#variant_id').on('change', function () {
        loadColors('brand_id', 'model_id', 'variant_id', 'color_id');
    });

    $('#edit_variant_id').on('change', function () {
        loadColors('edit_brand_id', 'edit_model_id', 'edit_variant_id', 'edit_color_id');
    });
   

    $(document).ready(function(){
        refresh_data();
       

      

        
    });

    $('.image-input').on('change', function () {
        validateImageSize(this);
    });


    function initializeDataTable() {
        table = $('#datatable').DataTable({
            "processing": true,
            "pageLength": 50,
            "destroy": true,
            "order": [],
            "searching": false,
           "dom": getDataTableDom(),
            "buttons": getExportButtons(),
            "columns": [
                { "data": "id", "title": " ID #" },
                { "data": "action", "title": "Action" },
                { "data": "category", "title": "Category" },
                { "data": "sub_category", "title": "Sub Category" },
                { "data": "brand", "title": "Brand" },
                { "data": "variant", "title": "Variant" },
                { "data": "model", "title": "Model" },
                { "data": "color", "title": "Color" },
                { "data": "tax", "title": "tax" },
                { "data": "uom", "title": "UOM" },
                { "data": "hsn_code", "title": "HSN Code" },
                { "data": "ean_number", "title": "EAN Number" },
                { "data": "cell_life", "title": "Shelf Life" },
                { "data": "image", "title": " image" },
                { "data": "db", "title": "DB Price","className":"text-end" },
                { "data": "wsp", "title": "WSP(%)","className":"text-end"},
                { "data": "fsp", "title": "FSP(%)","className":"text-end"},
                { "data": "mop", "title": "MOP Price","className":"text-end"},
                { "data": "bop", "title": "BOP Price","className":"text-end"},
                { "data": "mrp", "title": "MRP","className":"text-end"},
                { "data": "description", "title": " Description" },
                { "data": "status", "title": "Status" }
            ],
            "ajax": {
                "url": '/item_view/',
                "type": "POST",
                "data": function(data){

                    data.csrfmiddlewaretoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
                    const categoryId = $('#filter_category_id').val();
                    const subcategoryId = $('#filter_subcategory_id').val();
                    const brandId = $('#filter_brand_id').val();
                    const itemType = $('#filter_item_type').val();
                    const keyword = $('#keyword_search').val();
                    const sales = $('#is_sales').val();
                    const searchType = $("input[name='search_type']:checked").val();
                    if (categoryId) data.category_id = categoryId;
                    if (subcategoryId) data.subcategory = subcategoryId;
                    if (brandId) data.brand_id = brandId;
                    if (keyword) data.keyword_search = keyword;
                    if (searchType) data.search_type = searchType;
                    if (itemType) data.item_type = itemType;
                    if (sales) data.is_sales = sales;                   
                },

                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 || [];
                }
            }
        });
    }


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

    $("#add_form").submit(function (e) {
        e.preventDefault();     
        handleFormSubmit(this, '/item_add/', 'add_modal', 'add_form', true, 'Items');
    });

        function clearAllFieldErrors(formId) {
            $(`#${formId} .is-invalid`).removeClass('is-invalid');
            $(`#${formId} .text-danger`).addClass('d-none').text('');
        }


        $('#add_modal').on('hidden.bs.modal', function () {
            clearAllFieldErrors('add_form');
        });

    
    
    function edit_data(id,name) {

        let rowIndex = table
            .row($(event.target).closest('tr'))
            .index();

        localStorage.setItem("edit_row_index", rowIndex);

        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;

        $.post('/item_edit/', { id:id, csrfmiddlewaretoken:tkn }, function(res) {

            $('#edit_id').val(res.id); 
            $('#edit_category_id').val(res.category_id).trigger("change"); 

            loadSubCategories('#edit_category_id', '#edit_sub_category_id', res.sub_category_id);

            $('#edit_brand_id').val(res.brand_id).trigger("change");
           
            loadModels('edit_brand_id', 'edit_model_id', res.model_id, function() {
                loadVariants('edit_brand_id', 'edit_model_id', 'edit_variant_id', res.variant_id, function() {
                    loadColors('edit_brand_id', 'edit_model_id', 'edit_variant_id', 'edit_color_id', res.color_id, function() {
                    });
                });
            });
            
            
            $('#edit_uom_id').val(res.uom_id).trigger("change");
            $('#edit_tax_id').val(res.tax_id).trigger("change"); 


            $('#edit_hsn_code').val(res.hsn_code); 

            $('#edit_ean_number').val(res.ean);
            $('#edit_cell_life').val(res.cell_life);

            $('#edit_db_price').val(res.db_price);
            
            $('#edit_fsp').val(res.franchise_price);
            $('#edit_wsp').val(res.wholesale_price);
            calculateSellingPrice('#edit_db_price','#edit_wsp','#edit_wsp_price_text','#edit_wsp_amount','WSP');

            calculateSellingPrice('#edit_db_price','#edit_fsp', '#edit_fsp_price_text', '#edit_fsp_amount','FSP');

            $('#edit_mop_price').val(res.mop_price);
            $('#edit_bop_price').val(res.bop_price);
            
            $('#edit_mrp').val(res.mrp);

            
           
            $('#edit_description').val(res.description);
            $('#edit_scheme_id').val(res.scheme_id);
            $('#edit_is_active').val(res.is_active).trigger("change"); 

            $('#edit_modal').modal('show');
        });
    }


    function duplicate_data(id,name) {       

        var tkn = document.getElementsByName("csrfmiddlewaretoken")[0].value;

        $.post('/duplicate_item/', { id:id, csrfmiddlewaretoken:tkn }, function(res) {

            $('#category_id').val(res.category_id).trigger("change"); 

            loadSubCategories('#category_id', '#sub_category_id', res.sub_category_id);
            
            $('#brand_id').val(res.brand_id).trigger("change"); 
            
            loadModels('brand_id', 'model_id', res.model_id);
            setTimeout(function () {
                loadVariants(
                    'brand_id',
                    'model_id',
                    'variant_id',
                    res.variant_id
                );
            }, 300);
            setTimeout(function () {
                loadColors(
                    'brand_id',
                    'model_id',
                    'variant_id',
                    'color_id',
                    res.color_id
                );
            }, 500);
            $('#uom_id').val(res.uom_id).trigger("change");
            $('#tax_id').val(res.tax_id).trigger("change"); 

            $('#hsn_code').val(res.hsn_code); 
            $('#ean_number').val(res.ean); 
            $('#cell_life').val(res.cell_life);
            $('#db_price').val(res.db_price);
            $('#wsp').val(res.wholesale_price);
            $('#fsp').val(res.franchise_price);  
             calculateSellingPrice('#db_price','#wsp','#wsp_price_text','#wsp_amount','WSP');

            calculateSellingPrice('#db_price','#fsp', '#fsp_price_text', '#fsp_amount','FSP');
            $('#mop_price').val(res.mop_price);
            $('#bop_price').val(res.bop_price);
            $('#mrp').val(res.mrp);
            $('#description').val(res.description);

            $('#add_modal').modal('show');
        });
    }



    
    

    $("#edit_form").submit(function (e) {
        e.preventDefault();

        const isValid = validateImageSize(document.querySelector('#edit_form .image-input'));

        if (!isValid || $(this).data('valid-sku') === false) {
            showToast('info', 'Please fix form errors before submitting.');
            return;
        }

        let formData = new FormData(this);

        $.ajax({
            url: "/item_update/",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {

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

                // ✅ Validation error from backend
                if (response.message === 'field_error') {
                    showToast('error', response.error);
                    return;
                }

                // ✅ Form error
                if (response.message === 'error') {
                    showToast('error', 'Form validation failed');
                    return;
                }
            
                if (response.message === 'success') {


                    let updatedRow = response.updated_row;

                    let rowIndex = localStorage.getItem("edit_row_index");

                    if (rowIndex !== null) {
                        updatedRow.id = parseInt(rowIndex) + 1;
                        table.row(rowIndex).data(updatedRow).draw(false);

                    } else {
                        console.warn("⚠️ No row index found in localStorage.");
                        showToast('error', 'Row position lost. Please refresh.');
                        return;
                    }

                    localStorage.removeItem("edit_row_index");

                    $('#edit_modal').modal('hide');
                    showToast('success', 'Item updated successfully');
                }
            },

            error: function (xhr) {
                console.error(xhr.responseText);
                showToast('error', 'Something went wrong while updating.');
            }
        });
    });



    function delete_data(id) {
        deleteEntity('/item_delete/', id, '{{ csrf_token }}', 'Items');
    }



    function loadSubCategories(categorySelector, subCategorySelector, selectedSubCategoryId = null) {
        const categoryId = $(categorySelector).val();

        if (!categoryId) {
            $(subCategorySelector).html('<option value="">Select</option>');
            return;
        }

        $.ajax({
            url: "/load_subcategories/",
            type: "GET",
            data: {
                category_id: categoryId
            },
            success: function(data) {
                const subCategoryDropdown = $(subCategorySelector);
                subCategoryDropdown.empty();
                subCategoryDropdown.append('<option value="">Select</option>');

                $.each(data.subcategories, function(index, subcategory) {
                    const selected = (selectedSubCategoryId && selectedSubCategoryId == subcategory.id) ? 'selected' : '';
                    subCategoryDropdown.append('<option value="' + subcategory.id + '" ' + selected + '>' + subcategory.name + '</option>');
                });

                subCategoryDropdown.trigger('change');
            }
        });
    }

    $('#category_id').on('change', function() {
        loadSubCategories('#category_id', '#sub_category_id');
    });

    $('#edit_category_id').on('change', function() {
        loadSubCategories('#edit_category_id', '#edit_sub_category_id');
    });

    $('#filter_category_id').on('change', function() {
        loadSubCategories('#filter_category_id', '#filter_subcategory_id');
    });



    function checkName(inputId, brandId, modelId, variantId, colorId, errorId, submitBtnId, dataId = '') {
             const ean = $('#' + inputId).val().trim();
            if (!ean) return;

            $.ajax({
                url: '/check-ean-name/',
                type: 'POST',
                data: {
                     ean: ean,   
                    data_id: dataId,
                    brand_id: brandId,
                    model_id: modelId,
                    variant_id: variantId,
                    color_id: colorId,
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function (res) {
                    if (res.exists) {
                        $('#' + errorId).text(res.message).removeClass('d-none');
                        $('#' + submitBtnId).prop('disabled', true);
                    } else {
                        $('#' + errorId).addClass('d-none').text('');
                        $('#' + submitBtnId).prop('disabled', false);
                    }
                }
            });
        }


        
function calculateSellingPrice(dbInput, percentInput, outputText, amountInput, label) {

    let db = parseFloat($(dbInput).val()) || 0;
    let percent = parseFloat($(percentInput).val()) || 0;

    if (!db || !percent) {
        $(outputText).hide();
        $(amountInput).val('');
        return;
    }

    let price = db + (db * percent / 100);
    price = price.toFixed(2);

    $(outputText)
        .text(label + ' Price: ₹ ' + price)
        .show();

    $(amountInput).val(price);
}

$('#db_price, #wsp').on('input', function () {
    calculateSellingPrice('#db_price','#wsp','#wsp_price_text','#wsp_amount','WSP');
});

$('#db_price, #fsp').on('input', function () {
    calculateSellingPrice('#db_price','#fsp','#fsp_price_text','#fsp_amount','FSP');
});


$('#edit_db_price, #edit_wsp').on('input', function () {
    calculateSellingPrice('#edit_db_price','#edit_wsp','#edit_wsp_price_text','#edit_wsp_amount','WSP');
});

$('#edit_db_price, #edit_fsp').on('input', function () {
    calculateSellingPrice('#edit_db_price','#edit_fsp','#edit_fsp_price_text','#edit_fsp_amount','FSP');
});

</script>