@extends('layouts.admin_default')
@section('title', 'Product Table')
@section('page', 'Product / List')
@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc0/dist/js/select2.min.js"></script>

<style>
   .select2-container--default .select2-selection--multiple{
      border: none !important;
   }
   .select2-container{
      display: block;
      width: 100% !important;
      height: calc(2.25rem + 2px);
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      box-shadow: inset 0 0 0 transparent;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   }
</style>

<div class="layout-px-spacing">
   <div class="row layout-top-spacing">
      <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
         <div class="widget-content widget-content-area br-6">
            <div id="delete_bd_ms"></div>
             @if(isset($errors) && $errors->any())
             @foreach($errors->all() as $error )
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
                {{$error}}
            </div>
            @endforeach
            @endif
            @if(session()->has('message'))
            <div class="alert alert-success fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('message') }}
            </div>
            @elseif(session()->has('error'))
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('error') }}
            </div>
            @endif
            <div class="col-md-12 text-right">
               <a class="btn btn-success mb-2" href="javascript:void();" onclick="csvAddModal();">Import Product</a>
               <a class="btn btn-success mb-2" href="{{ route('export-product') }}">Export Product</a>
               <a href="javascript:void();" onclick="addModal();" class="btn btn-primary mb-2">Add +</a>
            </div>
            <div class="col-md-12 text-left">
               <div class="" id="#error"></div>
               <div class="multiple-action">
                  <button type="button" onclick="multiple_del()" class="btn btn-danger del">Delete</button>
                  {{-- <button type="button" onclick="multiple_active()" class="btn btn-success active-status">Active</button>
                  <button type="button"  onclick="multiple_deactive()" class="btn btn-danger inactive-status">Inactive</button> --}}
               </div>
               <small>Apply action on checked record.</small>
            </div>

            <div class="mb-4 mt-4">
               <table id="multi-column-ordering" class="table table-hover">
                  <thead>
                     <tr>
                        <th><input type="checkbox" class="new-control-input" id="contact-check-all"></th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Image</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Created Date</th>
                        <th>Status</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody id="tableItem">
                  </tbody>
                  <!-- <tfoot>
                     <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Image</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Created Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                  </tfoot> -->
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<!--end of listing -->
<!-- add modal start -->
<div class="modal fade" id="add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="productForm" method="post" action="{{route('savedproduct')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Add Product</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="category name">Product Variant*</label>
                        <select class="custom-select mySelect" multiple name="product_variant[]" required>
                           @php $variant = \App\Models\ProductVariation::distinct()->get(['id', 'title']); @endphp
                           @foreach($variant as $item)
                           <option value="{{$item->id}}">{{$item->title}}</option>
                           @endforeach
                         </select>                         
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="category name">Product Name*</label>
                        <input type="text" class="form-control" name="product_name" required id="productname">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <div class="form-group">
                        <label for="description">Description*</label>
                        <textarea col='3' class="form-control" required name="description" id="desc"></textarea>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                        <label for="formFile" class="form-label">Additional Image*</label><br>
                        <input type="file"  multiple="" class="form-control" required name="additional_images[]" id="addimage">
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                        <label for="formFile" class="form-label">Genral Image*</label><br>
                        <input type="file"  required class="form-control" name="general_image" id="image">
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="quantity">Stock Quantity*</label>
                        <input type="number" class="form-control" name="quantity" required id="quan">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="price">Price*</label>
                        <input type="number" class="form-control" name="price" required id="price">
                     </div>
                  </div>
                  @php $category = \App\Models\Category::distinct()->get(['id', 'title']); @endphp
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="parent id">Category*</label>
                        <select class="form-control" name="category" required id="category">
                                     <option value="">--Select Category--</option>
                                     @foreach($category as $categorys)
                                    <option value="{{ $categorys->id }}">{{ $categorys->title }}</option>
                                    @endforeach
                        </select>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="parent id">Product Type*</label>
                        <select class="form-control" name="pro_type" required id="type">
                                     <option value="">--Select Product Type--</option>
                                    <option value="Type1">Type1</option>
                                    <option value="Type2">Type2</option>
                                    <option value="Type3">Type3</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="sku">SKU*</label>
                        <input type="text" class="form-control" name="sku" required id="sku">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="Model number">Model Number*</label>
                        <input type="text" class="form-control" name="model" required id="model">
                     </div>
                  </div>
                  <!-- model -->
                  <div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="weight">Weight*</label>
      <input type="text" class="form-control" name="weight" required id="weight">
   </div>
</div>

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="height">Height*</label>
      <input type="text" class="form-control" name="height" required id="height">
   </div>
</div>

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="size">Size*</label>
      <input type="text" class="form-control" name="size" required id="size">
   </div>
</div>
@php $compt = \App\Models\Compatibility::distinct()->get(['id', 'title']); @endphp
         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="brand">Compatability*</label>
                               <select class="form-control" name="compatibility" required id="compatibility">
                                  @foreach($compt as $compts)
                                    <option value="{{ $compts->id }}">{{ $compts->title }}</option>
                                    @endforeach
                           </select>
            </div>
         </div>
       
@php $brand = \App\Models\Brand::distinct()->get(['id', 'name']); @endphp

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="brand">Brand*</label>
                            <select class="form-control" name="brand" required id="brand">
                              <option value="">--Select Beand--</option>
                                     @foreach($brand as $brands)
                                    <option value="{{ $brands->id }}">{{ $brands->name }}</option>
                                    @endforeach
                           </select>
            </div>
         </div>
      

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="tax_rate">Tax Rate*</label>
               <input type="text" class="form-control" name="tax_rate"required id="tax_rate">
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="warranty_duration_type">Warranty Duration Type*</label>
               <select class="form-control" name="warranty_duration_type"required id="warranty_duration_type">
                  <option value="month">Month</option>
                  <option value="year">Year</option>
                  <option value="days">Days</option>
               </select>
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="warranty_duration">Warranty Duration*</label>
               <input type="number" class="form-control" name="warranty_duration" required id="warranty_duration">
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="warranty_coverage">Warranty Coverage*</label>
                     <textarea class="form-control" name="warranty_coverage" required id="warranty_coverage"></textarea>
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="extended_warranty_type">Extended Warranty Type*</label>
               <select class="form-control" required name="extended_warranty_type" id="extended_warranty_type">
                  <option value="month">Month</option>
                  <option value="year">Year</option>
                  <option value="days">Days</option>
               </select>
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="extended_warranty">Extended Warranty*</label>
               <input type="number" class="form-control" required name="extended_warranty" id="extended_warranty">
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="status">Status*</label>
               <select class="form-control" name="status"required id="status">
                  <option value="1">Active</option>
                  <option value="0">In-Acrive</option>
               </select>
            </div>
         </div>

               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- add modal end -->
<!-- edit modal start -->
<div class="modal fade" id="edit_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="productEditForm" method="post" action="{{route('savedproduct')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <input type="hidden" name="id" id="id">
            <div class="modal-header">
               <h5 class="modal-title">Edit Product</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="category name">Product Variant*</label>
                        <select class="custom-select mySelect" id="product_variant" multiple name="product_variant[]" required>
                           @php $variant = \App\Models\ProductVariation::distinct()->get(['id', 'title']); @endphp
                           @foreach($variant as $item)
                           <option value="{{$item->id}}">{{$item->title}}</option>
                           @endforeach
                         </select>                         
                     </div>
                  </div>
               <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="category name">Product Name*</label>
                        <input type="text" class="form-control" name="product_name" required id="product_name">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <div class="form-group">
                        <label for="description">Description*</label>
                        <textarea col='3' class="form-control" required name="description" id="pdesc"></textarea>
                     </div>
                  </div>               
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="quantity">Stock Quantity*</label>
                        <input type="number" class="form-control" name="quantity" required id="pquan">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="price">Price*</label>
                        <input type="number" class="form-control" name="price" required id="pprice">
                     </div>
                  </div>
                  @php $category = \App\Models\Category::distinct()->get(['id', 'title']); @endphp
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="parent id">Category*</label>
                        <select required class="form-control" name="category" id="pcategory">
                                     <option value="">--Select Category--</option>
                                     @foreach($category as $categorys)
                                    <option value="{{ $categorys->id }}">{{ $categorys->title }}</option>
                                    @endforeach
                        </select>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="parent id">Product Type*</label>
                        <select class="form-control" name="pro_type" required id="ptype">
                                     <option value="">--Select Product Type--</option>
                                    <option value="Type1">Type1</option>
                                    <option value="Type2">Type2</option>
                                    <option value="Type3">Type3</option>
                        </select>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="sku">SKU*</label>
                        <input type="text" class="form-control" name="sku" required id="psku">
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="Model number">Model Number*</label>
                        <input type="text" class="form-control" name="model" required id="pmodel">
                     </div>
                  </div>
                  <!-- model -->
                  <div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="weight">Weight*</label>
      <input type="text" class="form-control" name="weight" required id="pweight">
   </div>
</div>

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="height">Height*</label>
      <input type="text" class="form-control" name="height" required id="pheight">
   </div>
</div>

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="size">Size*</label>
      <input type="text" class="form-control" name="size" required id="psize">
   </div>
</div>

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <!-- <label for="compatibility">Compatibility</label>
      <select class="form-control" name="compatibility"required id="ocompatibility">
         <option value="e-rickshaw">E-Rickshaw</option>
         <option value="charger">Charger</option>
      </select> -->
      @php $compt = \App\Models\Compatibility::distinct()->get(['id', 'title']); @endphp
         {{-- <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group"> --}}
               <label for="brand">Compatability*</label>
                               <select class="form-control" name="compatibility" required id="ocompatibility">
                                  @foreach($compt as $compts)
                                    <option value="{{ $compts->id }}">{{ $compts->title }}</option>
                                    @endforeach
                           </select>
            {{-- </div>
         </div> --}}
       

   </div>
</div>
@php $brand = \App\Models\Brand::distinct()->get(['id', 'name']); @endphp

<div class="col-sm-6 col-md-6 col-lg-6">
   <div class="form-group">
      <label for="brand">Brand*</label>
                            <select class="form-control" name="brand" required id="pbrand">
                              <option value="">--Select Beand--</option>
                                     @foreach($brand as $brands)
                                    <option value="{{ $brands->id }}">{{ $brands->name }}</option>
                                    @endforeach
                           </select>
            </div>
         </div>
       

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="tax_rate">Tax Rate*</label>
               <input type="text" class="form-control" name="tax_rate"required id="ptax_rate">
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="warranty_duration_type">Warranty Duration Type*</label>
               <select class="form-control" name="warranty_duration_type"required id="pwarranty_duration_type">
                  <option value="month">Month</option>
                  <option value="year">Year</option>
                  <option value="days">Days</option>
               </select>
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="warranty_duration">Warranty Duration*</label>
               <input type="number" class="form-control" name="warranty_duration" required id="pwarranty_duration">
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="warranty_coverage">Warranty Coverage*</label>
                     <textarea class="form-control" name="warranty_coverage" required id="pwarranty_coverage"></textarea>
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="extended_warranty_type">Extended Warranty Type*</label>
               <select class="form-control" name="extended_warranty_type" id="pextended_warranty_type">
                  <option value="month">Month</option>
                  <option value="year">Year</option>
                  <option value="days">Days</option>
               </select>
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="extended_warranty">Extended Warranty*</label>
               <input type="number" class="form-control" name="extended_warranty" id="pextended_warranty">
            </div>
         </div>

         <div class="col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
               <label for="status">Status*</label>
               <select class="form-control" name="status"required id="pstatus">
                  <option value="1">Active</option>
                  <option value="0">In-Acrive</option>
               </select>
            </div>
         </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                        <label for="formFile" class="form-label">Additional Image*</label><br>
                        <input type="file" class="form-control" multiple name="additional_images[]" id="addimage">
                  </div>
                  <div id="additionalImagesContainer">
                  </div>

                  <div class="col-sm-6 col-md-6 col-lg-6">
                        <label for="formFile" class="form-label">Genral Image*</label><br>
                        <input type="file" class="form-control" name="general_image" id="genimage">
                  </div>

                  <div id="imageContainer">
                  </div>

               </div>
               
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
</div>
<!-- edit modal end -->
<!-- view modal start -->
<div class="modal fade" id="view_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form method="post">
            <div class="modal-header">
               <h5 class="modal-title">Category Details</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body" id="detailContent">
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
                  <button type="button" class="btn btn-danger" onclick="ajax_delete_item();" >Yes, Delete</button> -->
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- view modal end -->
<!-- import csv file to add Category start -->
<div class="modal fade" id="csv_add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="addCsvForm" method="post" action="{{route('importProduct')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Import Csv - importProduct</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group mb-4">
                        <div class="custom-file text-left">
                           <input type="file" name="csv_file" required class="custom-file-input" id="csv_file">
                           <label class="custom-file-label" for="csv_file">Choose file</label>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <a class="btn btn-success csvSample" href="{{route('sample-file-download-product')}}">Download Sample</a>
                  </div>
               </div>
            </div>
            <div class="modal-footer justify-content-between">
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<!-- import csv file to add Category end -->
@endsection
@section('footer')
<script type="text/javascript">
   // function destroy(url){
   //   swal({
   //     title: "Are you sure?",
   //     text: "Do you want to delete this Category!",
   //     type: "warning",
   //     showCancelButton: true,
   //     confirmButtonText: "Yes, delete it!",
   //     cancelButtonText: "No, cancel plx!",
   //     closeOnConfirm: false,
   //   }, function(isConfirm) {
   //     if (isConfirm) {
   //       document.location.href = url;
   //     }
   //   });
   // }

</script>

<script>
   $(document).ready(function() {
     $('.mySelect').select2({
      placeholder: 'Select options',
      allowClear: true,
     });
   });
</script>
   
<script type="text/javascript">
   $(document).ready(function(){
     $('#multi-column-ordering').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        ajax: "{{route('getProductDetails')}}",
        columns: [
           { data: 'checkall', orderable: false, searchable: false },
           { data: 'name' },
           { data: 'description' },
         //   { data: 'image' },
         {
                data: 'image',
                render: function(data, type, row) {
                    if (type === 'display' && data) {
                        // Display the image using an HTML img element
                        return '<img src="general_images/' + data + '" alt="Image" width="100">';
                     }
                    return data; // Return the image filename for other types (e.g., sorting)
                }
            },
         { data: 'category' },
         { data: 'price' },
         { data: 'stock_quantity' },
           
           { data: 'created_at' },
           { data: 'status', orderable: false, searchable: false },
           { data: 'action', orderable: false, searchable: false },
        ],
        order: [[1, 'asc']],
        drawCallback: function (settings) {

           var response = settings.json;
           // $('#totalRecords').text(response.totalRecords);
           // $('#activeRecords').text(response.activeRecords);
           // $('#inactiveRecords').text(response.inactiveRecords);
           // $('#deletedRecords').text(response.deletedRecords);
           console.log(response);
           updateIcon()

       },
     });


       /*ajax header setup*/
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });
   });


   function addModal(){
        $("#add_blog_modal").modal('show');
   }

   // function view_item(id){
   //     let _url = "{{route('getProductViewDetails')}}";
   //     let _token = $('meta[name="csrf-token"]').attr('content');
   //     $.ajax({
   //         url: _url,
   //         type: 'POST',
   //         data: {
   //          id: id,
   //           _token: _token
   //         },
   //         success: function(response) {
   //             console.log(response);
   //             let result = JSON.parse(response);
   //             if(result.status){
   //                 var itemDetails = result.data;
   //                 var d = new Date(itemDetails.created_at);
   //                 var imgHtml = '<img src="general_images/' + itemDetails.image + '" alt="Image" width="100">';
   //                 var created_at = d.toDateString() + ', '+d.getUTCHours() +':'+ d.getUTCMinutes()+':'+ d.getUTCSeconds();
   //                 $('#detailContent').html('');
   //                 $('#detailContent').append('<div class="table-responsive"><table class="table table-bordered"><tr><th>name</th><td>'+itemDetails.name+'</td><th>Description</th><td>'+itemDetails.description+'</td></tr><tr><th>Image</th> <td>'+imgHtml+'</td><th>Price</th> <td>'+itemDetails.price+'</td><th>Quantity</th> <td>'+itemDetails.stock_quantity+'</td><th>Created Date</th><td>'+created_at+'</td></tr></table></div>');
   //                 $("#view_blog_modal").modal('show');

   //          }else{
   //                 myFaildToast('Something went wrong.');
   //             }
   //         }
   //     });
   // }
   function view_item(id){
    let _url = "{{ route('getProductViewDetails') }}";
    let _token = $('meta[name="csrf-token"]').attr('content');
    
    $.ajax({
        url: _url,
        type: 'POST',
        data: {
            id: id,
            _token: _token
        },
        success: function (response) {
            console.log(response);
            if (response.status) {
               var itemDetails = response.data[0]; // Access the object in the array
                // Rest of your code to display itemDetails
                var d = new Date(itemDetails.created_at);
                var imgHtml = '<img src="general_images/' + itemDetails.image + '" alt="Image" width="100">';
                var created_at = d.toDateString() + ', ' + d.getUTCHours() + ':' + d.getUTCMinutes() + ':' + d.getUTCSeconds();
                $('#detailContent').html('');
               //  $('#detailContent').append('<div class="table-responsive"><table class="table table-bordered"><tr><th>Name</th><td>' + itemDetails.name + '</td><th>Description</th><td>' + itemDetails.description + '</td></tr><tr><th>Image</th> <td>' + imgHtml + '</td><th>Price</th> <td>' + itemDetails.price + '</td><th>Quantity</th> <td>' + itemDetails.stock_quantity + '</td><th>Created Date</th><td>' + created_at + '</td></tr></table></div>');
               $('#detailContent').append('<div class="table-responsive"><table class="table table-bordered"><tr><th>Name</th><th>Description</th><th>Image</th><th>Price</th><th>Quantity</th><th>Created Date</th></tr><tr><td>' + itemDetails.name + '</td><td>' + itemDetails.description + '</td><td>' + imgHtml + '</td><td>' + itemDetails.price + '</td><td>' + itemDetails.stock_quantity + '</td><td>' + created_at + '</td></tr></table></div>');

               $("#view_blog_modal").modal('show');
            } else {
                myFaildToast('Something went wrong.');
            }
        }
    });
}

   function edit_item(id) {
    let _url = "{{ route('getProductEditDetails') }}";
    let _token = $('meta[name="csrf-token"]').attr('content');
    
    $.ajax({
        url: _url,
        type: 'POST',
        data: {
            id: id,
            _token: _token
        },
        success: function (response) {
            console.log(response);
            if (response.status) {
                $('#imageContainer').empty();
                console.log(response.data); // This should print your array of additional images
                var product = response.data[0]; // Assuming it's an array with a single product object
                $('#id').val(product.id);
               $('#product_name').val(product.name);
               $('#pdesc').val(product.description);
               $('#pprice').val(product.price);
               $('#pquan').val(product.stock_quantity);
               $('#pcategory').val(product.category);
               $('#ptype').val(product.product_type);
               $('#psku').val(product.sku);
               $('#pmodel').val(product.model);
               $('#pweight').val(product.weight);
               $('#pheight').val(product.height);
               $('#psize').val(product.size);
               $('#ocompatibility').val(product.compatibility);
               $('#pbrand').val(product.brand);
               $('#pdealer').val(product.dealer);
               $('#ptax_rate').val(product.tax_rate);
               $('#pwarranty_duration_type').val(product.warranty_duration_type);
               $('#pwarranty_duration').val(product.warranty_duration);
               $('#pwarranty_coverage').val(product.warranty_coverage);
               $('#pextended_warranty_type').val(product.extended_waranty_type);
               $('#pextended_warranty').val(product.extended_waranty);
               $('#pstatus').val(product.status);
               $('#product_variant').val(product.product_variant);

                // Do not set the value of the file input fields
                var imageUrl = product.image;
                
                var imgHtml = '<img src="general_images/' + imageUrl + '" alt="Image" width="100">';

                $('#imageContainer').append(imgHtml);
               var additionalImagesArray = JSON.parse(product.additional_image);

               if (additionalImagesArray && additionalImagesArray.length > 0) {
                  var additionalImagesHtml = '';

                  additionalImagesArray.forEach(function (image) {
                     additionalImagesHtml += '<img src="additional_images/' + image + '" alt="Additional Image" width="100">';
                  });

                  $('#additionalImagesContainer').html(additionalImagesHtml);
               }

                  $('#category').val(product.category);
                $("#edit_blog_modal").modal('show');
            } else {
                myFaildToast('Something went wrong.');
            }
        }
    });
}

</script>
<!-- form validation start -->
<script>
   $( "#productForm" ).validate({
     // rules: {
     //   field: {
     //     required: true,
     //   }
     // }
   });


   $( "#productEditForm" ).validate({
     // rules: {
     //   field: {
     //     required: true,
     //   }
     // }
   });


   $( "#addCsvForm" ).validate({ });



</script>
<!-- form validation end -->
<!-- getting item details start -->
<!-- getting item details end -->
<!-- add csv modal start -->
<!-- getting item details end -->
<!-- add csv modal start -->
<script type="text/javascript">
   function csvAddModal(){
        $("#csv_add_blog_modal").modal('show');
   }
</script>
<script>
   // Add the following code if you want the name of the file appear on select
   $(".custom-file-input").on("change", function() {
     var fileName = $(this).val().split("\\").pop();
     $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
   });
</script>


<!-- check all record start -->
<script type="text/javascript">
   $("#contact-check-all").click(function(){
       $('input:checkbox[name="multicheck[]"]').not(this).prop('checked', this.checked);
   });


   function multiple_del(){
      var multicheck = []
      $("input[name='multicheck[]']:checked").each(function ()
      {
          multicheck.push(parseInt($(this).val()));
      });
      if(multicheck.length > 0){
          Swal.fire({
           title: 'Are you sure?',
           text: "Do you want to delete selected product!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes'
           }).then((result) => {
           if (result.isConfirmed) {
               $.ajax({
                    url: "{{route('product-multipleDel')}}",
                    method: 'post',
                    data: {ids: multicheck},
                })
                .done(function(obj) {
                    console.log(obj);
                    let result = JSON.parse(obj);
                    if(result.status){
                         mySuccessToast(result.message);
                         setTimeout(() => {
                           $('#contact-check-all').prop('checked', false);
                         }, 500);
                    }else{
                         myFaildToast('Something went wrong.');
                    }
                     $('#multi-column-ordering').DataTable().ajax.reload();
                });
           }else{
               // alert('false');
           }
       })
      }else{
         myFaildToast('Please select a record.');
      }


   } 
</script>
<!-- footer script if required -->
@endsection