@extends('layout')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4><i class="icon-arrow-left52 mr-2"></i>Data Download Logs</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">

			<div class="card-body">
				
				<div class="form-group row">
					<div class="col-md-4">
						<label>Tanggal :</label>
						<input class="form-control daterange-buttons" type="text" id="date" name="date" value="{{date('Y/m/d', strtotime($f))}} - {{date('Y/m/d', strtotime($t))}}">
					</div>
				</div>

				<div class="form-group row">
					<div class="col">
						<a id="btn-filter" class="btn btn-success" href="{{ url('downloadlog').'?t='.date('Y-m-d', strtotime('-1 week'))}}" data-uri="{{ url('downloadlog') }}"><i class="icon-paperplane mr-1"></i> Filter</a>
						<a class="btn btn-info" href="{{ url('downloadlog')}}"><i class="icon-spinner11 mr-1"></i> View Last 7 Days Data</a>
					</div>
				</div>

			</div>

			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th>No</th>
						<th>User</th>
						<th>Datetime</th>
						<th>Menu</th>
					</tr>
				</thead>
				<tbody>
                    
				</tbody>
			</table>
		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

    <!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
				    @csrf
				    @method('DELETE')
					<div class="modal-body" align="center">
						<h2> Hapus Data? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-danger">Hapus</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->


@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
    <script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
	
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/picker_date.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/jgrowl.min.js')}}"></script>
	<script>
		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		$('#date').change(function(){
            var uri = $('#btn-filter').data('uri');
            let val1 = $(this).val();
            // let val2 = $('#dateto').val();
            let href = `${uri}?t=${val1}`;
			// console.log(uri);
            $('#btn-filter').attr('href', href);
        })


var DatatableBasic = function() {
	
	// Basic Datatable examples
	var _componentDatatableBasic = function() {
		if (!$().DataTable) {
			console.warn('Warning - datatables.min.js is not loaded.');
			return;
		}
		
		// Setting datatable defaults
		$.extend( $.fn.dataTable.defaults, {
			autoWidth: false,
			columnDefs: [{ 
				orderable: false,
				width: 150,
				// targets: [ 5 ]
			}],
			dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
			language: {
				search: '<span>Filter:</span> _INPUT_',
				searchPlaceholder: 'Type to filter...',
				lengthMenu: '<span>Show:</span> _MENU_',
				paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
			}
		});
		
		// Basic datatable
		// ajax: "{{route('activitylog-datatable')}}",
		
		$('.datatable-basic').DataTable({
					processing: true,
					serverSide: true,
					order: [[2, 'desc']],
					@if(isset($_GET['t']))
						ajax: "{{route('downloadlog-datatable')}}?t={{$_GET['t']}}",
					@else
						ajax: "{{route('downloadlog-datatable')}}",
					@endif
					columns:[
						{data:'DT_RowIndex', name:'no'},
						{data:null, render:function(data, type, row){
							if (data.user) {
								return ucwords(data.user.nama)
							} else {
								return '-'
							}
						}},
						{data:null, name:'created_at', render:function(data, type, row){
							return moment(data.created_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm')
						}},
						{data:null, render:function(data, type, row){
							return data.menu
						}},
					]
				});
		
		// Alternative pagination
		$('.datatable-pagination').DataTable({
			pagingType: "simple",
			language: {
				paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
			}
		});
		
		// Datatable with saving state
		$('.datatable-save-state').DataTable({
			stateSave: true
		});
		
		// Scrollable datatable
		var table = $('.datatable-scroll-y').DataTable({
			autoWidth: true,
			scrollY: 300
		});
		
		// Resize scrollable table when sidebar width changes
		$('.sidebar-control').on('click', function() {
			table.columns.adjust().draw();
		});
	};
	


	// Select2 for length menu styling
	var _componentSelect2 = function() {
		if (!$().select2) {
			console.warn('Warning - select2.min.js is not loaded.');
			return;
		}

		// Initialize
		$('.dataTables_length select').select2({
			minimumResultsForSearch: Infinity,
			dropdownAutoWidth: true,
			width: 'auto'
		});
	};


	//
	// Return objects assigned to module
	//

	return {
		init: function() {
			_componentDatatableBasic();
			_componentSelect2();
		}
	}
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
DatatableBasic.init();
});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

		});

	</script>

	<script>

var DateTimePickers = function() {


//
// Setup module components
//

// Daterange picker
var _componentDaterange = function() {
	if (!$().daterangepicker) {
		console.warn('Warning - daterangepicker.js is not loaded.');
		return;
	}

	// Basic initialization
	$('.daterange-basic').daterangepicker({
		applyClass: 'btn-primary',
		cancelClass: 'btn-light'
	});

	// Display week numbers
	$('.daterange-weeknumbers').daterangepicker({
		showWeekNumbers: true,
		applyClass: 'btn-primary',
		cancelClass: 'btn-light'
	});

	// Button class options
	$('.daterange-buttons').daterangepicker({
		applyClass: 'btn-success',
		cancelClass: 'btn-danger',
		locale: {
			format: 'YYYY/MM/DD'
		}
	});

	// Display time picker
	$('.daterange-time').daterangepicker({
		timePicker: true,
		applyClass: 'btn-primary',
		cancelClass: 'btn-light',
		locale: {
			format: 'MM/DD/YYYY h:mm a'
		}
	});

	// Show calendars on left
	$('.daterange-left').daterangepicker({
		opens: 'left',
		applyClass: 'btn-primary',
		cancelClass: 'btn-light'
	});

	// Single picker
	$('.daterange-single').daterangepicker({ 
		singleDatePicker: true
	});

	// Display date dropdowns
	$('.daterange-datemenu').daterangepicker({
		showDropdowns: true,
		opens: 'left',
		applyClass: 'btn-primary',
		cancelClass: 'btn-light'
	});

	// 10 minute increments
	$('.daterange-increments').daterangepicker({
		timePicker: true,
		opens: 'left',
		applyClass: 'btn-primary',
		cancelClass: 'btn-light',
		timePickerIncrement: 10,
		locale: {
			format: 'MM/DD/YYYY h:mm a'
		}
	});

	// Localization
	$('.daterange-locale').daterangepicker({
		applyClass: 'btn-primary',
		cancelClass: 'btn-light',
		opens: 'left',
		ranges: {
			'Сегодня': [moment(), moment()],
			'Вчера': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
			'Последние 7 дней': [moment().subtract(6, 'days'), moment()],
			'Последние 30 дней': [moment().subtract(29, 'days'), moment()],
			'Этот месяц': [moment().startOf('month'), moment().endOf('month')],
			'Прошедший месяц': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
		},
		locale: {
			applyLabel: 'Вперед',
			cancelLabel: 'Отмена',
			startLabel: 'Начальная дата',
			endLabel: 'Конечная дата',
			customRangeLabel: 'Выбрать дату',
			daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт','Сб'],
			monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
			firstDay: 1
		}
	});


	//
	// Pre-defined ranges and callback
	//

	// Initialize with options
	$('.daterange-predefined').daterangepicker(
		{
			startDate: moment().subtract(29, 'days'),
			endDate: moment(),
			minDate: '01/01/2014',
			maxDate: '12/31/2019',
			dateLimit: { days: 60 },
			ranges: {
				'Today': [moment(), moment()],
				'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Last 7 Days': [moment().subtract(6, 'days'), moment()],
				'Last 30 Days': [moment().subtract(29, 'days'), moment()],
				'This Month': [moment().startOf('month'), moment().endOf('month')],
				'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			opens: 'left',
			applyClass: 'btn-sm btn-primary',
			cancelClass: 'btn-sm btn-light'
		},
		function(start, end) {
			$('.daterange-predefined span').html(start.format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + end.format('MMMM D, YYYY'));
			$.jGrowl('Date range has been changed', { header: 'Update', theme: 'bg-primary', position: 'center', life: 1500 });
		}
	);

	// Display date format
	$('.daterange-predefined span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + moment().format('MMMM D, YYYY'));


	//
	// Inside button
	//

	// Initialize with options
	$('.daterange-ranges').daterangepicker(
		{
			startDate: moment().subtract(29, 'days'),
			endDate: moment(),
			minDate: '01/01/2012',
			maxDate: '12/31/2019',
			dateLimit: { days: 60 },
			ranges: {
				'Today': [moment(), moment()],
				'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Last 7 Days': [moment().subtract(6, 'days'), moment()],
				'Last 30 Days': [moment().subtract(29, 'days'), moment()],
				'This Month': [moment().startOf('month'), moment().endOf('month')],
				'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			opens: 'left',
			applyClass: 'btn-sm btn-primary',
			cancelClass: 'btn-sm btn-light'
		},
		function(start, end) {
			$('.daterange-ranges span').html(start.format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + end.format('MMMM D, YYYY'));
		}
	);

	// Display date format
	$('.daterange-ranges span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' &nbsp; - &nbsp; ' + moment().format('MMMM D, YYYY'));
};

// Pickadate picker
var _componentPickadate = function() {
	if (!$().pickadate) {
		console.warn('Warning - picker.js and/or picker.date.js is not loaded.');
		return;
	}

	// Basic options
	$('.pickadate').pickadate();

	// Change day names
	$('.pickadate-strings').pickadate({
		weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
		showMonthsShort: true
	});

	// Button options
	$('.pickadate-buttons').pickadate({
		today: '',
		close: '',
		clear: 'Clear selection'
	});

	// Accessibility labels
	$('.pickadate-accessibility').pickadate({
		labelMonthNext: 'Go to the next month',
		labelMonthPrev: 'Go to the previous month',
		labelMonthSelect: 'Pick a month from the dropdown',
		labelYearSelect: 'Pick a year from the dropdown',
		selectMonths: true,
		selectYears: true
	});

	// Localization
	$('.pickadate-translated').pickadate({
		monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
		today: 'aujourd\'hui',
		clear: 'effacer',
		formatSubmit: 'yyyy/mm/dd'
	});

	// Format options
	$('.pickadate-format').pickadate({

		// Escape any “rule” characters with an exclamation mark (!).
		format: 'You selecte!d: dddd, dd mmm, yyyy',
		formatSubmit: 'yyyy/mm/dd',
		hiddenPrefix: 'prefix__',
		hiddenSuffix: '__suffix'
	});

	// Editable input
	var $input_date = $('.pickadate-editable').pickadate({
		editable: true,
		onClose: function() {
			$('.datepicker').focus();
		}
	});
	var picker_date = $input_date.pickadate('picker');
	$input_date.on('click', function(event) {
		if (picker_date.get('open')) {
			picker_date.close();
		} else {
			picker_date.open();
		}                        
		event.stopPropagation();
	});

	// Dropdown selectors
	$('.pickadate-selectors').pickadate({
		selectYears: true,
		selectMonths: true
	});

	// Year selector
	$('.pickadate-year').pickadate({
		selectYears: 4
	});

	// Set first weekday
	$('.pickadate-weekday').pickadate({
		firstDay: 1
	});

	// Date limits
	$('.pickadate-limits').pickadate({
		min: [2014,3,20],
		max: [2014,7,14]
	});

	// Disable certain dates
	$('.pickadate-disable').pickadate({
		disable: [
			[2015,8,3],
			[2015,8,12],
			[2015,8,20]
		]
	});

	// Disable date range
	$('.pickadate-disable-range').pickadate({
		disable: [
			5,
			[2013, 10, 21, 'inverted'],
			{ from: [2014, 3, 15], to: [2014, 3, 25] },
			[2014, 3, 20, 'inverted'],
			{ from: [2014, 3, 17], to: [2014, 3, 18], inverted: true }
		]
	});

	// Events
	$('.pickadate-events').pickadate({
		onStart: function() {
			console.log('Hello there :)')
		},
		onRender: function() {
			console.log('Whoa.. rendered anew')
		},
		onOpen: function() {
			console.log('Opened up')
		},
		onClose: function() {
			console.log('Closed now')
		},
		onStop: function() {
			console.log('See ya.')
		},
		onSet: function(context) {
			console.log('Just set stuff:', context)
		}
	});
};


return {
	init: function() {
		_componentDaterange();
		_componentPickadate();
	}
}
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
DateTimePickers.init();
});

	</script>
@endsection