@extends('layouts.app')
@section('title',config('setting.site_name').'  - Tracking Page')
@section('content')
<div class="content">
	
	<!-- Start Content-->
	<div class="container-fluid">
		
		<!-- start page title -->
		<div class="row">
			<div class="col-12">
				<div class="page-title-box">
					<div class="page-title-right">
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item"><a href="javascript: void(0);">{{config('setting.site_name')}}</a></li>
							<li class="breadcrumb-item active">Tracking Page</li>
						</ol>
					</div>
					<h4 class="page-title">Tracking Page</h4>
				</div>
			</div>
		</div>     
		<!-- end page title --> 
		<div class="mb-2 removeAll" style="display:none;"> 
			<button onclick="addAgent()" class="btn btn-danger deleteAll"><i class="mdi mdi-delete-outline" aria-hidden="true"></i> Delete All</button>
		</div>    
		<div class="row">
			<div class="col-12">
				<div class="card-box table-responsive"> 
					<table id="tracking_datatable" class="table table-bordered  dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
						<thead>
							<tr>
								<th>
									<input type="checkbox" id="checkboxesMain">  
								</th>
								<th>Sr.No</th>
								<th>Ip Address</th> 
								<th>Page Link</th> 
								<th>Browser Type</th>
								<th>Reffered Link</th>
								<th>Created At</th> 
							</tr>
						</thead> 
					</table>
				</div>
			</div>
		</div> <!-- end row -->
	</div> <!-- end container-fluid -->
	
</div> <!-- end content -->
@endsection

@push('js')
<script>
	var dataTable = $('#tracking_datatable').DataTable({
		processing:true,
		"language": {
			'loadingRecords': '&nbsp;',
			'processing': 'Loading...'
		},
		serverSide:true,
		bLengthChange: true,
		responsive: false,
		searching: true,
		bFilter: true,
		bInfo: true,
		iDisplayLength: 10,
		columnDefs: [
            { orderable: false, targets: 0 } // Disable sorting for the first column (index 0)
        ],
		bAutoWidth: false,			 
		"ajax":{
			"url": "{{ route('page-tracking.list.ajax') }}",
			"dataType": "json",
			"type": "POST",
			"data": function (d) {
				d._token   = "{{csrf_token()}}";
				d.search   = $('input[type="search"]').val(); 
			}
		},
		"columns": [
		{ "data": "checkbox" }, 
		{ "data": "id" }, 
		{ "data": "ip_address" },   
		{ "data": "page_link" },   
		{ "data": "browser_type" },     
		{ "data": "reffered_link" },  
		{ "data": "created_at" },  
		]
	}); 
	
	$('#checkboxesMain').on('click', function(e) 
	{
		if ($(this).is(':checked', true))
		{
			$(".checkbox").prop('checked', true);
			$('.removeAll').show();
		} 
		else 
		{
			$(".checkbox").prop('checked', false);
			$('.removeAll').hide();
		}
	});
	$(document).on('click', '.checkbox',function() 
	{  
		if ($('.checkbox:checked').length == $('.checkbox').length)
		{
			$('#checkboxesMain').prop('checked', true); 
		} 
		else 
		{
			$('#checkboxesMain').prop('checked', false); 
		}
		
		if ($('.checkbox:checked').length > 0 )
		{
			$('.removeAll').show();
		} 
		else 
		{
		   $('.removeAll').hide();
		}
	});
	
	$('.deleteAll').on('click', function(e) {
		var studentIdArr = [];
		$(".checkbox:checked").each(function() {
			studentIdArr.push($(this).attr('data-id'));
		});
		if (studentIdArr.length <= 0) 
		{   
			Swal.fire("Error!","Choose min one item to remove.","error")
		} 
		else 
		{
			Swal.fire({
				title:"Are you sure you want to delete?", 
				type:"warning",
				showCancelButton:!0,
				confirmButtonColor:"#31ce77",
				cancelButtonColor:"#f34943",
				confirmButtonText:"Yes, Deleted it!"
				}).then(function (t) {
				if(t.value)
				{  
					var stuId = studentIdArr.join(","); 
					$.ajax({
						url: "{{route('page-tracking.delete-all')}}",
						type: 'POST', 
						data: {ids:stuId,_token:"{{csrf_token()}}"}, 
						dataType: "Json",
						success: function(res)
						{
							if(res.status == "error")
							{
								Swal.fire("Error!",res.msg,"error")
							}
							else
							{ 
								Swal.fire("Deleted!",res.msg,"success") 
								dataTable.draw();
							}
						} 
					});
				}
			})    
		}
	});
   
</script>
@endpush