@extends('layouts.header')

@section('content')
	
	<div class="row my-4 align-items-center">
		<div class="col-md-6 text-md-left text-center">
			<h2 class="page-title">Activity Logs</h2>
		</div>
		<div class="col-md-6 text-md-right text-center">
			<button type="button" class="btn btn-primary" onClick="clearDate()">Reset</button>
		</div>
	</div>


<div class="row">
	<div class="col-md-3 mb-3">
		<div class="selectParent mr-3">
			<select class="select-option" id="statusFilter">
				<option value="" selected>All Action</option>
				<option value="CREATED">Created</option>
				<option value="DELETED">Deleted</option>
				<option value="DOWNLOADED">Downloaded</option>
				<option value="LOGIN">Login</option>
				<option value="LOGOUT">Logout</option>
				<option value="PERMISSION">Permission Updated</option>
				<option value="RENAMED">Renamed</option>
				<option value="RESTORED">Restored</option>

		   </select>
		</div>
	</div>

	<div class="col-md-3 mb-3">
		<div class="selectParent mr-3">
			<select class="select-option" id="userFilter">
				<option value="" selected>All Users</option>
				@foreach($user_list as $user)
				<option value="{{ $user->first_name}} {{ $user->last_name}}">{{ $user->first_name}}&nbsp;{{ $user->last_name}}</option>
				@endforeach
		   </select>
		</div>
	</div>

	<div class="col-lg-3 mb-3">
		<input type="text" class="form-control" id="start_date" name="start_date" placeholder="Start date" style="height:45px;">
	</div>

	<div class="col-lg-3 mb-3">
		<input type="text" class="form-control" id="end_date" name="end_date" placeholder="End date" style="height:45px;">
	</div>

	

	</div>


	<table class="table table-style-1 table-responsive mb-4 table-bordered table-striped" id="TableTools">
			  <thead>
				<tr>
				  <th scope="col" class="srno-th">Sr. No.</th>
				  <th scope="col">User Name</th>
				  <th scope="col">Folder/File Name</th>
				  <th scope="col">Action</th>
				  <th scope="col">Modified Date Time </th>
				</tr>
			  </thead>
            
			</table>
			


@endsection
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

@section('append')
<script src="/assets/js/jquery.dataTables.min.js"></script>
	<script src="/assets/js/dataTables.bootstrap4.min.js"></script>
	<script src="/assets/js/moment.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    var t = "";
	var start_date = "";
	var end_date = "";

	$(document).ready(function() {
		setTimeout(() => {
			tabledata();
		}, 1000);
		initendDate();
        initStartDate();
	});

  function tabledata(){
	  
    t = $('#TableTools').DataTable({
                processing: true,
				serverSide: true,
				searchable:true,
				bPaginate: true,
                // retrieve: true,
                // destroy: true,
				dom:"lrtip",
                // order:[ 5, "desc" ],
                ajax: {
					url:"{{ route('logs.data')}}",
					'data': function(data){
						var sd = $('#start_date').val();
						var ed = $('#end_date').val();

						data.start_date = sd;
						data.end_date = ed;
					}
				},
                "rowCallback": function (nRow, aData, iDisplayIndex) {
					var oSettings = this.fnSettings ();
					$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
					return nRow;
				},
                columns: [
                    { data: 'id', name: 'id', orderable:false },
                    { data: 'first_name', name: 'first_name' },
                    { data: 'name', name: 'name' },
                    { data: 'action', name: 'action' },
                    { data: 'created_at', name: 'created_at' },
                ],
				 
			});
    }

	$('#statusFilter').on('change', function(){
			t.columns(3).search($(this).val()).draw();
	});
	$('#userFilter').on('change', function(){
			t.columns(1).search($(this).val()).draw();
	});
	
	// $("#start_date").datepicker({ changeMonth: true, changeYear: true, dateFormat:'dd-mm-yy' });
    // $("#end_date").datepicker({  changeMonth: true, changeYear: true, dateFormat:'dd-mm-yy' });


	function initStartDate(){
		$('#start_date').datepicker({
			dateFormat: 'dd-mm-yy',
			changeMonth: true, 
			changeYear: true,
			maxDate:end_date,
			

	}).on('change',function(){
				start_date = $("#start_date").val();
				$("#end_date").datepicker( "destroy" );
				initendDate();

	}).datepicker("setDate", new Date());
	}

	function initendDate(){
		$('#end_date').datepicker({
				dateFormat: 'dd-mm-yy',
				changeMonth: true, 
				changeYear: true,
				minDate:start_date,
				

		}).on('change',function(){
				end_date=$("#end_date").val();
				$( "#start_date" ).datepicker( "destroy" );
				initStartDate();

	}).datepicker("setDate", new Date());
	}



	$('#start_date').change(function () {
		start_date = $(this).val();
		end_date = $('#end_date').val();
		if(end_date == ""){
			toastr.warning("Please select end date");
		}
		searchData();
	});

	$('#end_date').change(function () {
		end_date = $(this).val();
		start_date = $('#start_date').val();

		if(start_date == ""){
			toastr.warning("Please select start date");
		}
	
		searchData();
	});

	function searchData(){
		if(start_date !== "" && end_date !== ""){
				$('#TableTools').DataTable().draw();
			}
	}

	function clearDate(){
		$('#start_date').val("");
		$('#end_date').val("");
		$('#statusFilter').val("").trigger('change');
		$('#userFilter').val("").trigger('change');

		$('#TableTools').DataTable().draw();
	}

</script>

@endsection