@extends('layouts.admin_default')
@section('title', 'ImageGallery Table')
@section('page', 'ImageGallery / List')
@section('content')
<style>
   .filter-select {
    width: auto;
    float: left;
    margin-left: 79%;
}
</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">
               <div class="filter-select">
                   <select  class="form-control" name="image_type_fileter" id="image_type_fileter" onchange="filterImage()">
                   <option value="">Select Type</option>
                   <option value="spare_parts">Spare Parts</option>
                   <option value="category_images">Category</option>
                   <option value="brand_images">Brand</option>
                   <option value="aadhar_cards">Aadhar Cards</option>
                   </select>
               </div>
               <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>Image</th>
                        <th>Image Name</th>
                        <!-- <th>Created Date</th> -->
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody id="tableItem">
                  </tbody>
                  <tfoot>
                     <tr>
                        <th></th>
                        <th>Image</th>
                        <th>Image Name</th>
                        <!-- <th>Created Date</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="ImageGalleryForm" method="post" action="{{route('save_image_gallery')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="modal-header">
               <h5 class="modal-title">Add Image Gallery</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">
                        <label for="formFile" class="form-label">Image*</label><br>
                        <input type="file" multiple required class="form-control" name="images[]" id="image">
                  </div>

                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="image_type">Image For*</label>
                        <select required class="form-control" name="image_type" id="image_type">
                           <option value="">--Select Image For--</option>
                           <option value="spare_parts">Spare Parts</option>
                           <option value="category_images">Category</option>
                           <option value="brand_images">Brand</option>
                           <option value="aadhar_cards">Aadhar Cards</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 -->


@endsection
@section('footer')

<script type="text/javascript">
   $(document).ready(function(){
    table = $('#multi-column-ordering').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        // ajax: "{{route('getImageGalleryDetails')}}",
        ajax: {
            "url": "{{route('getImageGalleryDetails')}}",
            "data": function ( d ) {
                        d.image_type_fileter = $("#image_type_fileter").val();
                    }
         },

        columns: [
            { data: 'checkall', orderable: false, searchable: false },
            { data: 'image', orderable: false, searchable: false },
            { data: 'image_name' , orderable: false, searchable: false },
           // { data: 'created_at' },
           { 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 filterImage(){ 
      table.ajax.reload();
   }



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

   

</script>


<!-- form validation start -->
<script>
   $( "#ImageGalleryForm" ).validate({
   });

</script>
<!-- form validation end -->




<!-- 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 image gallery!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'Yes'
           }).then((result) => {
           if (result.isConfirmed) {
               $.ajax({
                    url: "{{route('image_gallery-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 -->

<script>
function copyCouponCode(id) {
  // Get the text field
  var copyText = document.getElementById("img_id_"+id);
  // var copyText = document.getElementById("myInput");

  // Select the text field
  // copyText.select();
  // copyText.setSelectionRange(0, 99999); // For mobile devices

  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText.innerHTML);
  $(".before-apply").css("color", "#000");
  copyText.style.color = "green";
  
  // Alert the copied text
  // alert("Copied the text: " + copyText.innerHTML);
}
</script>
@endsection