@extends("front.dashboard.layouts.app")

	@section("style")
	<link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
	@endsection

		@section("wrapper")

		<!--start page wrapper -->
		<div class="page-wrapper">
			<div class="page-content">
				<!--breadcrumb-->
				<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
					<div class="breadcrumb-title pe-3">All {{ ucfirst($module) }}</div>
					
					<div class="ms-auto">
						<!-- <a href="#!" class="btn btn-sm btn-danger mb-3 mb-lg-0" onclick="selected_delete();"><i class="bx bxs-trash"></i>Delete Selected</a> -->
						<a href="{{ $route->add }}" class="btn btn-sm btn-primary mb-3 mb-lg-0" ><i class="bx bxs-plus-square"></i>New {{ $single_heading }}</a>
					</div>
				</div>
				<!--end breadcrumb-->
				
				<hr/>
				

			<div class="wrapper">

            <div class="card">
               <div class="card-body">
                  <div class="table-responsive">
                     <table id="dataTable" class="table table-striped table-bordered " style="width:100%">
                        <thead>
                           <tr>
                           <th><!--<input class="form-check-input me-3" type="checkbox" id="checkAll" onclick="CheckAll(this);">--> S.No.</th>
                           <th>Name</th>
                           <th>Description</th>
                           <th>Products</th>
                           <th>Status</th>
                           <th>Created </th>
                           <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                           
                        </tbody>
                        
                     </table>
                  </div>
               </div>
            </div>
       
      </div>
					
				</div>
				
			</div>
		</div>
		<!--end page wrapper -->
		@endsection
	
	@section("page-js-script")
	<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
	
	<script>
   $(document).ready(function(){
	  
         // user management
         window.dataTable = $('#dataTable').DataTable({
           'processing': true,
           'serverSide': true,
           'serverMethod': 'post',
           //'searching': false,
           'ajax': {
             'headers': {
                       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                   },
              'url': "{{ route('dashboard.catalogs.list') }}",
              'data': function(data){
                    
              }
           },
           'lengthMenu': [10, 20, 50, 100, 200, 500],
           'columns': [
              { data: 'sno' }, 
              { data: 'name' }, 
              { data: 'description' }, 
              { data: 'products' }, 
              {data :'status'},
              { data: 'created_at' },
              { data: 'action' },
            ],
           "order": [[1, 'asc' ]],
		   "columnDefs": [
			{ 
				"targets": [0 ], //first column / numbering column
				"orderable": false, //set not orderable
			}]
         });
		  $('#datatable').on('page.dt', function() {
            $('#checkAll').prop("checked", false);
            $('.filed_check').prop("checked", false);
        });
   });
   
  function CheckAll(e) {
        if ($('#checkAll').prop("checked") == true) {
            $('.filed_check').prop("checked", true);
        } else {
            $('.filed_check').prop("checked", false);
        }
    }


 function selected_delete() {
        var count = 0;
        $('.filed_check').each(function() {
            if ($(this).prop("checked") == true) {
                count++;
            }
        });
        if (count == 0) {
            toastr.error('Please select atleat one row', 'Error');
        } else {
            if (confirm("Are you sure, You want to delete selected rows ?")) {
               var ids = [];
                $('.filed_check').each(function() {
                    if ($(this).prop("checked") == true) {
                        ids.push($(this).val());
                    }
                   
                });
                $.ajax({     
                    url :"{{ route('dashboard.products.destroy.multiple') }}", 
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },  
                    method:"POST",  
                    data:{ids:ids},
                    success: function(data){ 
                       dataTable.draw(false); 
                       toastr.success(data.message,'Success');
                    }
                    
                }); 
            }
        }
    }	

     function delete_product_row(url,id){  

        url = url.replace(':id',id);
      
         if(confirm('Are you sure you want to delete this?')){
            $.ajax({     
                    url :url, 
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },  
             method:"GET",  
             data:{},
             dataType: "JSON",
             success: function(data){ 
                  toastr.success(data.message,'Success');
                  /*dataTable.draw(false);*/
                   location.reload();
             },
             
           }); 
         }else{ 
           return false; 
         }
     }
   
</script>
	@endsection