@extends('layouts.app')

        @section('styles')

        @endsection

            @section('content')
            
            <style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #1c1c1c;
}

input:focus + .slider {
  box-shadow: 0 0 1px #1c1c1c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Products</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                         <li class="breadcrumb-item"><a href="javascript:void(0)">Products</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Add Product</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <!-- ROW-1 OPEN -->
                            @canany(['products-create','products-edit'])
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Add Product</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="createproductForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="product_id" name="product_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                <div class="form-row">
                                                       <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Category *</label>
                                                            <select data-parsley-required-message="Category Name Required" class="form-control"  name="category" id="category" required>
                                                            <option value="">--  Choose Category  --</option>
                                                            @foreach ($data['category'] as $category)
                                                                <option value="{{$category->category_id}}">{{$category->category_name}}</option>
                                                            @endforeach
                                                            </select>
                                                            
                                                    </div>
                                                       <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Sub Category </label>
                                                        <select class="form-control"  name="sub_category" id="sub_category">
                                                            <option value="">--  Choose Subcategory  --</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Brand *</label>
                                                            <select data-parsley-required-message="Brand Name Required" class="form-control"  name="brand" id="brand" required>
                                                            <option value="">--  Choose Brand  --</option>
                                                            @foreach ($data['brands'] as $brand)
                                                                <option value="{{$brand->brand_id}}">{{$brand->brand_name}}</option>
                                                            @endforeach
                                                            </select>
                                                            
                                                    </div>

                                                    


                                                    
                                                    
                                                    
                                                <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Product Name *</label>
                                                        <input data-parsley-required-message="Product Name  Required" type="text" class="form-control" name="product_name" id="product_name"
                                                            value="" required>
                                                            
                                            </div>
                                           
                                            <div class="col-xl-3 mb-3">
                                                <label for="validationTooltip02">Stock Alert Limit *</label>
                                                <input type="number" data-parsley-required-message="Stock Alert Limit required" class="form-control" name="reorder_point" min="0"  id="reorder_point"
                                                    value="" required>
                                            </div>
                                
        
                                            <div class="col-xl-6 mb-3">
                                                <label for="validationTooltip02">Product Description</label>
                                                <textarea  class="form-control" name="product_desc_english" id="product_desc_english" value="" ></textarea>
                                            </div>
                                           <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Power *</label>
                                                         <select data-parsley-required-message="Power field Required" class="form-control" name="power" id="power" required>
                                                   <option value="">Choose Power</option>
                                                   <option value="1">Yes</option>
                                                   <option value="0">No</option>
                                                   <option value="2">Without Power/With Power</option>
                                                              </select>
                                                            
                                                    </div>

                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Title Image ({{env('PRODUCTIMAGESIZE')}}px) *</label>
                                                <input type="file" data-parsley-required-message="Title image required" required="required" class="form-control custom-input-file" name="title_product_image" id="title_product_image" value="" >
                                            </div>
                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Product Image 1 ({{env('PRODUCTIMAGESIZE')}}px)</label>
                                                <input type="file" class="form-control custom-input-file" name="product_image_1" id="product_image_1" value="" >
                                            </div>
                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Product Image 2 ({{env('PRODUCTIMAGESIZE')}}px)</label>
                                                <input type="file"  class="form-control custom-input-file" name="product_image_2" id="product_image_2" value="" >
                                            </div>
                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Product Image 3 ({{env('PRODUCTIMAGESIZE')}}px)</label>
                                                <input type="file"  class="form-control custom-input-file" name="product_image_3" id="product_image_3" value="" >
                                            </div>
                                            <div class="col-xl-4 mb-3">
                                                <label for="validationTooltip02">Product Image 4 ({{env('PRODUCTIMAGESIZE')}}px)</label>
                                                <input type="file" class="form-control custom-input-file" name="product_image_4" id="product_image_4" value="" >
                                            </div>
                                                 
                                                </div>


                                                <div class="form-row">
                                         <div class="col-xl-12 mb-3">
                                            
                                     	<div class="card-body">
                                        <div class="table-responsive">
                                            <table style="border: 3px solid #e9edf4!important;" class="table table-bordered add_new_product_table text-nowrap mb-0" id="new-edit">
                                                <thead style="border-color:#c1c2c4">
                                                    <tr style="text-align:center;">
                                                        <th>#</th>
                                                        <th>Product Variant</th>
                                                        <th>Color</th>
                                                        <th>Stock</th>
                                                        <th>Sale Price</th>
                                                         <th>Action</th>
                                                </thead>
                                                <tbody id="add_new_products">
                                                 <tr class="row_product_table_tr" id="row_id_add_new_product1">
                                                 	<td style="text-align:center">1</td>
                                                 	<td>
                                                               <select data-parsley-required-message="Product Variant Required" class="form-control size"   name="sizes[]"  required>
                                                            <option value="">Choose Variant</option>
                                                            </select>  
                                        </td>
                                        <td><select data-parsley-required-message="Color  Required" class="form-control"  name="color[]" id="color" required>
                                                            <option value="">Choose Color</option>
                                                            @foreach ($data['colors'] as $colors)
                                                                <option value="{{$colors->color_id}}">{{$colors->color_name}}</option>
                                                            @endforeach
                                                            </select></td>
                                        <td><input type="text" data-parsley-required-message="Stock Required" required class="form-control" name="stock[]"></td>
                                        <td><input type="text" data-parsley-required-message="Sale Price Required" required class="form-control" name="saleprc[]"></td>
                                        <td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row text-danger" onclick="remove_row_add_new_product(1)" aria-hidden="true"></i></td>
                                        
                                        </tr>
                                        <tr style="width:100%;" class="detailings_rows_tr" id="row_id_detailing1">
                                            <td colspan="6">
                                            <table id="container_add_row_prod1" style="width:100%;">
                                                    <td style="text-align:center">1</td>
                                                    <td colspan="5">
                                                <textarea name="prodct_detailing1[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2"></textarea>
                                                {{-- <input class="form-control product_autocomplete" list="product_detail_list" name="prodct_detailing[]" id="spec_head" placeholder="Enter Specs" onclick="autocomplete_product_list()"> --}}
                                        </td>
                                        <td><span style="margin-top: 1%;" onclick="add_new_row_detailing(1)" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_detailing"> Add New Row</span></td>
                                        </table>
                                            </td>
                                        </tr>
                                          </tbody>
                                            </table>
                                        </div>
                                        
                                        <span style="margin-top: 1%;" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_products"> Add New Row</span>
                                    </div>
                                         </div>
                                                </div>


                                     
                                                @can('products-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('admin/add_product')}}', 'createproductForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('products-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('admin/update_product')}}', 'createproductForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                @endcan
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                    @can('products-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View Products</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">SKU</th>
                                                        <th class="wd-15p border-bottom-0">Category</th>
                                                        <th class="wd-15p border-bottom-0">Product Name</th>
                                                        <!--<th class="wd-15p border-bottom-0">Status</th>-->
                                                        <th class="wd-15p border-bottom-0">Price</th>
                                                        <th class="wd-15p border-bottom-0">Added By</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan 
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Product ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>


                         {{-- #########################View Modal################################### --}}
<div class="modal fade show" id="largemodal" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
            <div class="modal-dialog modal-lg " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Product Details</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body"  id="view_modal_body">
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}

                        
                        

            @endsection
              @section('scripts')  
              <script>
                         let options="<option value=''>Choose Variant</option>";
         

        
              </script>

              <script>
                  var colors='<option value="">Choose Color</option>'   ;
        @foreach ($data['colors'] as $colors)
            var colors=colors+'<option value="{{$colors->color_id}}">{{$colors->color_name}}</option>';
            @endforeach
              </script>
              
              <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>


{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
        <script>
            
       $('.add_new_row_products').click(function(){
        var rowCount = $('.row_product_table_tr').length;
        var rowCount = rowCount+1;
        $('.add_new_product_table').append('<tr class="row_product_table_tr" id="row_id_add_new_product'+rowCount+'"><td style="text-align:center">'+rowCount+'</td><td><select data-parsley-required-message="Product Variant Required" class="form-control size" name="sizes[]"  required>'+options+'</select></td><td><select data-parsley-required-message="Color  Required" class="form-control"  name="color[]" id="color" required>'+colors+'</select></td><td><input type="text" data-parsley-required-message="Stock Required" required class="form-control" name="stock[]"></td><td><input type="text" data-parsley-required-message="Sale Price Required" required class="form-control" name="saleprc[]"></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row text-danger" onclick="remove_row_add_new_product('+rowCount+')" aria-hidden="true"></i></td></tr><tr style="width:100%;" class="detailings_rows_tr" id="row_id_detailing'+rowCount+'"><td colspan="6"><table id="container_add_row_prod'+rowCount+'" style="width:100%;"><tr><td style="text-align:center">1</td><td colspan="5"><textarea name="prodct_detailing'+rowCount+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2"></textarea></td><td><span style="margin-top: 1%;" onclick="add_new_row_detailing('+rowCount+')" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_detailing"> Add New Row</span></td></tr></table></td></tr>');
      });

      function add_new_row_detailing(prodno){
        var prodno = prodno;
        var rowCount = $('#container_add_row_prod'+prodno+' tr').length + 1;
        $('#container_add_row_prod'+prodno).append('<tr class="detailings_rows_tr" id="row_id_detailing_'+prodno+'_'+rowCount+'"><td style="text-align:center">'+rowCount+'</td><td colspan="5"><textarea name="prodct_detailing'+prodno+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2"></textarea></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row  text-danger" onclick="remove_row_detailing('+prodno+','+rowCount+')" aria-hidden="true"></i></td></tr>')
      };

      $('.add_new_row_sizing').click(function(){
        var rowCount = $('.size_fit_product_table tr').length;
        $('.size_fit_product_table').append('<tr id="row_id_row_size'+rowCount+'"><td style="text-align:center">'+rowCount+'</td>	<td><textarea name="product_size_fit_care[]" class="form-control" placeholder="Enter Size, Fit & Care"  id="" cols="40" rows="2"></textarea></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i onclick=remove_row_size_fit('+rowCount+') class="fa fa-times-circle remove_row text-danger" aria-hidden="true"></i></td></tr>')
      });

      function remove_row_detailing(prodno,id){
        $('#row_id_detailing_'+prodno+'_'+id).remove();
      }


      function remove_row_size_fit(id){
        $('#row_id_row_size'+id).remove();
      }
      
      function remove_row_add_new_product(id){
        $('#row_id_add_new_product'+id).remove();
        $('#row_id_detailing'+id).remove();
      }
      

      var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    var coloumn_data=['product_id','product_sku','category_name','product_name_en','product_approved_status','name','product_id'];
    var coloumn_array=[];
    for (let i = 0; i <coloumn_data.length; i++) {
        coloumn_array.push({"data": ""+coloumn_data[i]+"", "name": ""+coloumn_data[i]+""});
    }
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,coloumn_data.length-1],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,5]},
           {"className": "text-left", "targets": [2,3]},
           {"className": "text-end", "targets": [4,5]}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/admin/product_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns":coloumn_array,
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          var created_at=aData.created_at.substring(0, 10);
            //View Function
            var action=action+'&nbsp;<button title="View"  onclick=View('+aData.product_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
            //Edit Action 
            @can('products-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.product_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('products-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.product_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            // if(aData.product_active_status==0){
            //     var checked="checked";
            // }
            // else{
            //      var checked="";
            // }
            
            $('td:eq(0)', nRow).html(index);
            $('td:eq(1)', nRow).html(aData.product_sku);
            // $('td:eq(4)', nRow).html('<label class="switch"><input onchange="change_active_status('+aData.product_id+','+aData.product_active_status+')"  type="checkbox" '+checked+'><span class="slider round"></span></label>');
            $('td:eq(4)', nRow).html(aData.product_price);
            $('td:eq(5)', nRow).html(aData.name);
            $('td:eq(6)', nRow).html(action).addClass('text-center');
           
         
 }
 });

// //        // #################### Edit Section ############################
                function edit(id){
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/admin/edit_product',
                    success: function (result) {
                         $('#category').val(result.product.product_category);
                         $('#brand').val(result.product.product_brand);
                         $('#color').val(result.product.product_color);
                         $('#product_weight').val(result.product.product_weight);
                         $('#product_name').val(result.product.product_name_en);
                         $('#power').val(result.product.product_power);
                         $('#cost_price').val(result.product.product_cost);
                         $('#product_price').val(result.product.product_price);
                         $('#product_mrp').val(result.product.product_mrp);
                         $('#reorder_point').val(result.product.reorder_point);
                         $('#product_desc_english').val(result.product.product_desc_en);
                         var subcategory=result.product.product_subcategory;
                         $("#title_product_image").attr("required", false);
                         $('#product_id').val(result.product.product_id);

      
                // #############Subcategory  Fetching##############
                    $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": result.product.product_category},
                    url: '/admin/fetch_subcategory',
                    success: function (data) {
                    var subcatgories=data.subcatgories;
                    $('#sub_category').html('<option value="">-- Choose Subcategory --</option>');
                     for (let i = 0; i < subcatgories.length; i++) {
                         if(subcatgories[i].subcategory_id==subcategory){   
                             var selected="Selected";
                         }
                         else{
                              var selected="";
                         }
                    $('#sub_category').append('<option  '+selected+' value="'+ subcatgories[i].subcategory_id+'">'+subcatgories[i].subcategory_name+'</option>')
                     }
                 
                    }
                    })
            //Start Of Products Append
            $('.add_new_product_table').html('');
            $('.add_new_product_table').append('<tr style="text-align:center;"><th>#</th><th>Product Variant</th><th>Color</th><th>Stock</th><th>Sale Price</th><th>Action</th></tr>');
            var rowCount=1;
            
            var specsheet="";
            var specsheetcount=1;
            var coloursub='value="'+result.product.product_color+'"';
            if(colors.includes(coloursub))
            {
                var newcolormain = colors.replace(coloursub, 'value="'+result.product.product_color+'" selected ');
            }
            else{
                newcolormain = colors;
            }
            
            var newoptionmain='<option value="">Choose Variant</option>';
            for (let nopi = 0; nopi < result.variants.length; nopi++) {
                if(result.variants[nopi].variant_id==result.product.product_size_id)
                {
                newoptionmain=newoptionmain+'<option selected value="'+result.variants[nopi].variant_id+'">'+result.variants[nopi].variant_name+'</option>';
                }
                else{
                    newoptionmain=newoptionmain+'<option value="'+result.variants[nopi].variant_id+'">'+result.variants[nopi].variant_name+'</option>';
                }
            }
            
            
            
            if(result.product.specsheets.length>0)
            {
                for(var spi=0; spi < result.product.specsheets.length; spi++)
                {
                    if(spi==0){
                     specsheet=specsheet+'<tr><td style="text-align:center">'+specsheetcount+'</td><td colspan="5"><textarea name="prodct_detailing'+rowCount+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2">'+result.product.specsheets[spi].spec_description+'</textarea></td><td><span style="margin-top: 1%;" onclick="add_new_row_detailing('+rowCount+')" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_detailing"> Add New Row</span></td></tr>';  
                    }
                    else
                    {
                        var newspi = parseInt(spi)+1;
                    specsheet=specsheet+'<tr style="width:100%;" class="detailings_rows_tr" id="row_id_detailing_'+rowCount+'_'+specsheetcount+'"><td style="text-align:center">'+newspi+'</td><td colspan="5"><textarea name="prodct_detailing'+rowCount+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2">'+result.product.specsheets[spi].spec_description+'</textarea></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row  text-danger" onclick="remove_row_detailing('+rowCount+','+specsheetcount+')" aria-hidden="true"></i></td></tr>';
                    }
                    specsheetcount++;
                }
            }
            else{
                specsheet='<tr><td style="text-align:center">1</td><td colspan="5"><textarea name="prodct_detailing'+rowCount+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2"></textarea></td><td><span style="margin-top: 1%;" onclick="add_new_row_detailing('+rowCount+')" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_detailing"> Add New Row</span></td></tr>';
            }
            
            
            $('.add_new_product_table').append('<tr class="row_product_table_tr" id="row_id_add_new_product'+rowCount+'"><td style="text-align:center">'+rowCount+'</td><td><select data-parsley-required-message="Product Variant Required" class="form-control size" name="sizes[]"  required>'+newoptionmain+'</select></td><td><select data-parsley-required-message="Color  Required" class="form-control"  name="color[]" id="color" required>'+newcolormain+'</select></td><td><input type="text" data-parsley-required-message="Stock Required" required class="form-control" name="stock[]" value="'+result.product.product_stock+'"></td><td><input type="text" data-parsley-required-message="Sale Price Required" required class="form-control" name="saleprc[]" value="'+result.product.product_price+'"></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row text-danger" onclick="remove_row_add_new_product('+rowCount+')" aria-hidden="true"></i></td></tr><tr style="width:100%;" class="detailings_rows_tr" id="row_id_detailing'+rowCount+'"><td colspan="6"><table id="container_add_row_prod'+rowCount+'" style="width:100%;">'+specsheet+'</table></td></tr>');
            //Start Of Chld Prodcut Append
            var chid_product_row=2;
            var child_products=result.child_product;
            for (var k= 0; k < child_products.length; k++) {
                var childspecsheet="";
            var childspecsheetcount=1;
            var childcoloursub='value="'+child_products[k].product_color+'"';
            if(colors.includes(childcoloursub))
            {
                var newchildcolormain = colors.replace('selected', '');
                var newchildcolormain = newchildcolormain.replace(childcoloursub, 'value="'+child_products[k].product_color+'" selected ');
            }
            else{
                newchildcolormain = colors;
            }
            
            
            var newchildoptionmain='<option value="">Choose Variant</option>';
            for (let childnopi = 0; childnopi < result.variants.length; childnopi++) {
                if(result.variants[childnopi].variant_id==child_products[k].product_size_id)
                {
                newchildoptionmain=newchildoptionmain+'<option selected value="'+result.variants[childnopi].variant_id+'">'+result.variants[childnopi].variant_name+'</option>';
                }
                else{
                    newchildoptionmain=newchildoptionmain+'<option value="'+result.variants[childnopi].variant_id+'">'+result.variants[childnopi].variant_name+'</option>';
                }
            }
            
            
                if(child_products[k].specsheets.length>0)
            {
                for(var chispi=0; chispi < child_products[k].specsheets.length; chispi++)
                {
                    var newchispi = parseInt(chispi)+1;
                    if(chispi==0){
                     childspecsheet=childspecsheet+'<tr><td style="text-align:center">'+newchispi+'</td><td colspan="5"><textarea name="prodct_detailing'+chid_product_row+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2">'+child_products[k].specsheets[chispi].spec_description+'</textarea></td><td><span style="margin-top: 1%;" onclick="add_new_row_detailing('+chid_product_row+')" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_detailing"> Add New Row</span></td></tr>';  
                    }
                    else
                    {
                    childspecsheet=childspecsheet+'<tr style="width:100%;" class="detailings_rows_tr" id="row_id_detailing_'+chid_product_row+'_'+childspecsheetcount+'"><td style="text-align:center">'+newchispi+'</td><td colspan="5"><textarea name="prodct_detailing'+chid_product_row+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2">'+child_products[k].specsheets[chispi].spec_description+'</textarea></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row  text-danger" onclick="remove_row_detailing('+chid_product_row+','+childspecsheetcount+')" aria-hidden="true"></i></td></tr>';
                    }
                    childspecsheetcount++;
                }
            }
            else{
                childspecsheet='<tr><td style="text-align:center">1</td><td colspan="5"><textarea name="prodct_detailing'+chid_product_row+'[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2"></textarea></td><td><span style="margin-top: 1%;" onclick="add_new_row_detailing('+chid_product_row+')" id="table2-new-row-button" class="btn custom-btn-success mb-4 add_new_row_detailing"> Add New Row</span></td></tr>';
            }
                
                
            $('.add_new_product_table').append('<tr class="row_product_table_tr" id="row_id_add_new_product'+chid_product_row+'"><td style="text-align:center">'+chid_product_row+'</td><td><select data-parsley-required-message="Product Variant Required" class="form-control size" name="sizes[]"  required>'+newchildoptionmain+'</select></td><td><select data-parsley-required-message="Color  Required" class="form-control"  name="color[]" id="color" required>'+newchildcolormain+'</select></td><td><input type="text" value="'+child_products[k].product_stock+'" data-parsley-required-message="Stock Required" required class="form-control" name="stock[]"></td><td><input value="'+child_products[k].product_price+'" type="text" data-parsley-required-message="Sale Price Required" required class="form-control" name="saleprc[]"></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i class="fa fa-times-circle remove_row text-danger" onclick="remove_row_add_new_product('+chid_product_row+')" aria-hidden="true"></i></td></tr><tr style="width:100%;" class="detailings_rows_tr" id="row_id_detailing'+chid_product_row+'"><td colspan="6"><table id="container_add_row_prod'+chid_product_row+'" style="width:100%;">'+childspecsheet+'</table></td></tr>');
            chid_product_row++;
            }
            //End Of Child Product Append

            
            //End Of Product Append
            //Strat Of Product Detailing Append
            /*var detailing = result.detailing;
            $("#section_product_detailing").html("");
            for (var j = 0; j < detailing.length; j++) {
                var rowCount = $(".detailings_rows_tr").length;
                $('#row_id_add_new_product1').append('<tr id="row_id_detailing'+rowCount+'"><td style="text-align:center">'+rowCount+'</td>	<td> <textarea name="prodct_detailing[]" placeholder="Enter Detailing" class="form-control" id="" cols="40" rows="2" >' +detailing[j].spec_description +'</textarea></td><td style="text-align:center;font-size: 20px;padding: 10px;"><i onclick=remove_row_detailing('+rowCount+') class="fa fa-times-circle remove_row text-danger" aria-hidden="true"></i></td></tr>')
            }*/
            //End Of Product Detailing Append

            //End Of Product Size Fit Care Append
            
            load_variants();



                         $('#create_btn').hide();
                         $('#update_btn').show();
                         $('#back-to-top').click();
                        // #######################END##########################
                        }
                })
                }
// //       // #################### End Of Edit Section ####################
// //      // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#product_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#product_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/delete_product',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
// //      // #################### End Of Delete Section ##################

        // #########################View Section ##########################
        function View(id){
            $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/view_product',
                        success: function (result) {    
                           $('#view_modal_body').html(result);
                           $('#largemodal').modal('show');
                        }
                    })
        }
        // ###############################################################

//  ###########################Categiry Change ################
     $('#category').change(function(){
         var id=$('#category').val();
                  $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/admin/fetch_subcategory',
                    success: function (result) {
                    var subcatgories=result.subcatgories;
                    var sizes=result.sizes;
                    $('#sub_category').html('<option value="">-- Choose Subcategory --</option>');
                     for (let i = 0; i < subcatgories.length; i++) {
                    $('#sub_category').append('<option value="'+ subcatgories[i].subcategory_id+'">'+subcatgories[i].subcategory_name+'</option>')
                     }
                     $('.size').html('');
                      $('.size').html('<option value="">Choose Variant</option>');
                     for (let i = 0; i < sizes.length; i++) {
                    $('.size').append('<option value="'+ sizes[i].variant_id+'">'+sizes[i].variant_name+'</option>');
                    options=options+'<option value="'+ sizes[i].variant_id+'">'+sizes[i].variant_name+'</option>';
                     }
                    }
                })
     });       

//  ###########################END OF CATEGORY CHANGE###########
//#######################Product Active Status Change###########

    function change_active_status(id,product_active_status){
     
              $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id,"product_active_status":product_active_status},
                    url: '/admin/change_active_status',
                    success: function (result) {
                     toast(result,datatable_name);
                    
                    }
                })
                
     
    }
//#######################End Of Product Active Status ##########


function load_variants(){
    var id=$('#category').val();
                  $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/admin/fetch_subcategory',
                    success: function (result) {
                    var sizes=result.sizes;
                    
                     for (let i = 0; i < sizes.length; i++) {
                    options=options+'<option value="'+ sizes[i].variant_id+'">'+sizes[i].variant_name+'</option>';
                     }
                    }
                })
}


        </script>
        @endsection