@extends('app') @section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="icon-people"></i> @lang('modules.deviceLogs.deviceLogs')
            <!-- <span class="text-info b-l p-l-10 m-l-5"></span> <span class="font-12 text-muted m-l-5"> @lang('modules.dashboard.totalClients')</span> -->
        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
    
        

    </div>
    <!-- /.breadcrumb -->
</div>
@endsection @push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/custom-select/custom-select.css">
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css"> @endpush @section('content')
<link rel="stylesheet" href="/assets/css/daterangepicker.css">
<div class="row">
	<div class="col-xs-12">
		<section class="col-lg-12 connectedSortable">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="form-label-group">
                            <label for="section">@lang('modules.deviceLogs.device')</label>
                            <select class="form-control select2" id="device_key" name="device_key" class="form-control">
                                <option value=""> @lang('modules.deviceLogs.selectDevice')</option>
                                @foreach($deviceData as $device)
                                <option value="{{$device->devicekey}}">{{$device->devicekey}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3 mt-18">
                        <div class="form-label-group">
                            <label></label>
                            <button class="btn btn-secondary btn-radius mt-4" type="submit" onclick="LogsFilter()">
							@lang('modules.auditlogs.search')    
						</button>
                        </div>
                    </div>
                </div>
        </section>
	</div>
    <div class="col-xs-12">
        <div class="white-box">


            <div class="table-responsive">

                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered" id="organization">
                            <thead>
                                <th>ID</th>
                                <th>Device Key</th>
                                <th>Task Name</th>
                                <th>Count</th>
                                <th></th>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- .row -->

@endsection @push('footer-script')
<script src="/assets/plugins/bower_components/datatables/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="/assets/plugins/bower_components/custom-select/custom-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<!-- <script src="/assets/js/datatables/buttons.server-side.js"></script> -->
<script src="/assets/js/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>

<script>
	$(document).ready(function() {
		var start = moment().subtract(1, 'month');
		var end = moment();
		$('#date_range').daterangepicker({
			startDate: start,
			endDate: end,
		})
        callDt();
	});
	function callDt() {
		$(document).ready(function() {
		   $('#organization').DataTable({
				language:{
					"infoFiltered":""
				},
				"processing": true,
				"serverSide": true,
				dom: 'Bfrtip',
				 "order": [[0, 'desc']],
				buttons: [
					{
					extend: 'copy',
					exportOptions: {
						columns: Array.from(Array($("#organization th").length-1).keys())
					},
					action: serverSideButtonAction
				},
				{
					extend: 'csv',orientation:"landscape",
					exportOptions: {
						columns: Array.from(Array($("#organization th").length-1).keys())
					},
					action: serverSideButtonAction
				},
				{
					extend: 'excel',
					exportOptions: {
						columns: Array.from(Array($("#organization th").length-1).keys())
					},
					action: serverSideButtonAction
				},
				{
					extend: 'pdf',
					exportOptions: {
						columns: Array.from(Array($("#organization th").length-1).keys())
					},
					action: serverSideButtonAction
				},
				{
					extend: 'print',
					exportOptions: {
						columns: Array.from(Array($("#organization th").length-1).keys())
					},
					action: serverSideButtonAction

				}
				],
				"ajax": {
					"url": "{{ route('device-log-details.all',['slug'=>$alias]) }}",
					"dataType": "json",
					"type": "POST",
					"data": {
						_token: "{{csrf_token()}}",
						device_key: $("#device_key").val()
					}
				},
				"columns": [{
					"data": "id",
					render: function(data, type, row, meta) {
						return ($('#organization').DataTable().page.info().page*$('#organization').DataTable().page.info().length)+(meta.row + 1);
					}
				},{
					"data": "devicekey",
				}, {
					"data": "taskname",
				}, {
					"data": "devicekey_count",
				}]

			});
		});
	}
    function LogsFilter() {
        $("#organization").DataTable().destroy();
        callDt();
    }
    
</script>

@endpush