@extends('bbm._layout')

@push('stylesheet')	
	<link rel="stylesheet" href="{{ asset('/') }}global_assets/js/plugins/jquery-smartwizard/dist/css/smart_wizard_arrows.min.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="https://hris.pdam-sby.go.id/js/autocomplete/jquery.autocomplete.css" type="text/css" cache="false">
    <style type="text/css">
    	.btn-warning {
    		background-color: #a38f00;
    	}
    	.btn-warning:hover {
    		background-color: #7e6f04;
    	}
    </style>
@endpush

@section('header') 
	<div class="sticky-xs pt-2 pb-3 bg-white page-header ga-header _page-header-light _w-100 ga-bgcolor">
		<div class="pt-1 _pb-2 page-header-content header-elements-md-inline">
			<div class="pt-1 x_page-title d-flex align-items-center">
				<span class="d-none _btn btn-icon btn-sm bg-transparent">
					<img src="{{ asset('themes/gthemes/images/png-icon/memo_128.png') }}" width="42" height="42" class="mr-2" alt="">
				</span>
				<h4 class="mb-0 font-weight-semibold text-dark">
					<span>Laporan Rekap Per-Nopol {{$dtTitle??''}}</span>
					<span class="d-block text-muted font-size-sm align-middle">Informasi mengenai laporan rekap data pengeluaran BBM Per-Nopol Kendaraan.</span>
				</h4>
			</div>
			<div class="header-elements">
				<div class="mx-3 sides-divider d-none d-md-block"></div>	
				<ul class="mr-auto d-flex list-inline list-inline-condensed mb-0">			
					<li class="list-inline-item m-0 _mr-0 _mr-md-1">
						<a  href="#" 
							class="mr-2 filter-laporan btn btn-sm bg-primary text-white _btn-outline _btn-primary text-capitalize" 
							data-toolbar="true" data-caption="Filter Laporan" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Filter Laporan">
							<i class="mi-add mr-2"></i>
							Filter Laporan
						</a>	
					</li>					
					<li class="list-inline-item m-0 _mr-0 _mr-md-1">
						<a  href="#" 
							class="download-file-xls btn btn-sm bg-success text-white _btn-outline _btn-primary text-capitalize" 
							data-toolbar="true" data-caption="Download Xls" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Download Xls">
							<i class="icon-file-excel mr-2"></i>
							Download Xls
						</a>	
					</li>			
					<li class="list-inline-item m-0 _mr-0 _mr-md-1">
						<a  href="#" 
							class="download-file-csv _hover-grey ga-nav-link _p-2" 
							data-toolbar="true" data-caption="Download CSV" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Download CSV">
							<i class="icon-libreoffice icon-2x text-primary"></i>
						</a>	
					</li>	
				</ul>
			</div>
		</div>
	</div>
@endsection

@section('content') 
@if(empty($permit))
	<div class="flex-fill">
		<div class="text-center mb-3">
			<h1 class="error-title offline-title">Error Page</h1>
			<h5>Maaf, Halaman yang anda cari tidak ditemukan.. </h5>
		</div>
	</div>
@else
	<h6 class="text-muted text-center font-weight-bold">Periode: <span class="periode"></span></h6>
	<div class="_card card-gtheme p-0">
		<div class="table-responsive">
		<table class="table table-gtheme table-hover-gtheme _table-bordered _table-striped table-xs datatable-responsive" 
            id="table_inbox" width="100%">
			<thead>
				<tr>
					<th class="border-top-0 search" width="5%">No.</th>
					<th class="border-top-0 search" width="15%">Nopol</th>
					<th class="border-top-0 search" width="15%">Pengeluaran (Liter)</th>
					<th class="border-top-0 search" width="15%">Jenis BBM</th>
				</tr>
			</thead>
			<tbody data-link="row" class="rowlinks"></tbody>
		</table>
		</div>
	</div>
	
	<div class="modal fade" id="ajaxModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-lg">
	        <div class="modal-content card-gtheme border-0 p-0">
                <div class="RZBuIb c8DD0" aria-hidden="true">
                    <div id="modalprogressbar" role="modalprogressbar" class="sZwd7c B6Vhqe qdulke jK7moc">
                        <div class="xcNBHc um3FLe"></div>
                        <div jsname="cQwEuf" class="w2zcLc Iq5ZMc"></div>
                        <div class="MyvhI TKVRUb" jsname="P1ekSe"><span class="l3q5xe SQxu9c"></span></div>
                        <div class="MyvhI sUoeld"><span class="l3q5xe SQxu9c"></span></div>
                    </div>
                </div>
	            <div class="modal-header bg-white">
	                <h4 class="modal-title" id="modelHeading"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          				<span aria-hidden="true">&times;</span>
        			</button>
	            </div>
	            <div class="modal-body">
					<div id="modal-content">                            
	                <form id="ItemForm" name="ItemForm" class="form-horizontal">
						<div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label" for="filterDate">Bulan</label>
	                        <div class="col-sm-4">
	                            <input type="month" class="form-control" id="filterDate" name="filterDate" placeholder="Filter Tanggal" value="{{ $filterDate }}">
	                        </div>
	                    </div>
                    </div>
				</div>
	            <div class="_d-none py-2 bg-white modal-footer _d-flex justify-content-between align-items-center">
                    <button type="submit" class="btn btn-primary rounded-round" id="saveBtn" value="create">
						<i class="icon-pencil mr-1"></i>
						Submit
                    </button>
				</div>
				</form>
	        </div>
	    </div>
	</div>

@endif
@endsection

@push('scripts')
	<script src="{{ asset('global_assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
	
	<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>

	<script src="{{ asset('global_assets/js/plugins/extensions/rowlink.js') }}"></script>	
	<script src="{{ asset('global_assets/js/plugins/forms/selects/select2.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/notifications/jgrowl.min.js') }}"></script>  
    <script src="https://hris.pdam-sby.go.id/js/autocomplete/jquery.autocomplete.js" cache="false"></script>
	<!-- <script src="{{ asset('global_assets/assets/js/app.js') }}"></script> -->
	<script src="{{asset('global_assets/js/plugins/sweetalert/sweetalert2.all.min.js')}}"></script>
	<script type="text/javascript">
		function JSON2CSV(objArray) {
			var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
			var str = '';
			var line = '';
			// header
			var head = array[0];
			for (var index in array[0]) {
				var value = index + "";
				line += '"' + value.replace(/"/g, '""') + '",';
			}
			line = line.slice(0, -1);
			str += line + '\r\n';

			// data
			for (var i = 0; i < array.length; i++) {
				var line = '';
				for (var index in array[i]) {
					var value = array[i][index] + "";
					line += '"' + value.replace(/"/g, '""') + '",';
				}
				line = line.slice(0, -1);
				str += line + '\r\n';
			}
			return str;
		}
		function newexportaction(e, dt, button, config) {
			var self = this;
			var oldStart = dt.settings()[0]._iDisplayStart;
			dt.one('preXhr', function (e, s, data) {
				// Just this once, load all data from the server...
				data.start = 0;
				data.length = 2147483647;
				dt.one('preDraw', function (e, settings) {
					// Call the original action function
					if (button[0].className.indexOf('buttons-copy') >= 0) {
						$.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-excel') >= 0) {
						$.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
							$.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
							$.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-csv') >= 0) {
						$.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
							$.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
							$.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-pdf') >= 0) {
						$.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
							$.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
							$.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-print') >= 0) {
						$.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
					}
					dt.one('preXhr', function (e, s, data) {
						// DataTables thinks the first item displayed is index 0, but we're not drawing that.
						// Set the property to what it was before exporting.
						settings._iDisplayStart = oldStart;
						data.start = oldStart;
					});
					// Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
					setTimeout(dt.ajax.reload, 0);
					// Prevent rendering of the full data to the DOM
					return false;
				});
			});
			// Requery the server with the new one-time export settings
			dt.ajax.reload();
		};
		$(document).ready(function() {
			$('#table_inbox thead tr').clone(true).appendTo( '#table_inbox thead' );
			$('#table_inbox thead tr:eq(0)').addClass('_radius-0 bg-primary _d-none');
			$('#table_inbox thead tr:eq(1) th').each( function (i) {
				if( $(this).hasClass( "search" ) ){
					var title = $(this).text();
					$(this).html( '<input type="text" class="form-control" placeholder="Search" />' );
					$( 'input', this ).on( 'keypress', function () {
						if (event.which == 13) {
							if ( table.column(i).search() !== this.value ) {
								table
									.column(i)
									.search( this.value )
									.draw();
							}
						}
					} );
				}
				else {
					$(this).html( '<input type="text" class="form-control" placeholder="" disabled />' );
				}
			} );
			let filterDate = '{{ $filterDate }}';
			var table = 
			$('#table_inbox')    
			.on( 'processing.dt', function ( e, settings, processing ) {
				var $target = $(this),
					block = $target.closest('.card');	
				if(processing){ blockui(block); } 
				else { unblockui(block); }
			})
			.DataTable({       
				autoWidth 	: false,
				"pageLength": 10,
				dom 		: 	
					"<'_datatable-scroll'tr>"+
					"<'row mr-3 mt-3 px-2'<'col-sm-12 col-md-6 d-flex align-items-center'l<'ml-auto'iB>><'col-sm-12 col-md-6'p>>",
				processing  : true,
				serverSide  : true,
                ajax 		: {
					url  : "{{ route('laporan-rekap-nopol') }}",
					type : 'GET',
					data : function (d) {
						d.filterDate = filterDate; 
						return d;
					},
				},
				"ordering"	: false,
				buttons: [
					{
						text		: 'Export XLS',
						className 	: 'download-xls d-none btn btn-primary btn-sm mr-2',
						extend 		: 'excelHtml5',
						"action"	: newexportaction,
						// autoFilter	: true
					},
					{
						text		: 'Export CSV',
						className 	: 'download-csv d-none btn btn-primary btn-sm',
						action 		: function (e, dt, buttons, config) {
							$.ajax({
								"url" 		: "{{ route('laporan-rekap-nopol') }}",
								"data"		: dt.ajax.params(),
								"success"	: function(res, status, xhr) {
									var csv = JSON2CSV(JSON.stringify( res.data ));
									var csvData = new Blob( [ csv ] , { type: 'text/csv;charset=utf-8;'} );
									var csvURL = window.URL.createObjectURL(csvData);
									var tempLink = document.createElement('a');
									tempLink.href = csvURL;
									tempLink.setAttribute('download', 'export.csv');
									//console.log(tempLink);
									tempLink.click();
								}
							});
						}
					}
				],
				columns 	: [				
					{ 	data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },		
					{ 	data: 'nopol', className:'_w-20 text-truncate text-left', name: 'nopol' }, 
					{	data: 'jumlah', className:'_w-20 text-truncate', name: 'jumlah'}, 
					{	data: 'jenis_bbm_nama', className:'_w-20 text-truncate', name: 'jenis_bbm_nama'}, 
				],
				columnDefs : [
					//
				],
				"drawCallback": function( settings ) {             
					var api = this.api();	            
					api.$('td').not( ".NoClick" ).css('cursor','pointer');
					api.$('td a').ripple(); 

					$('.dataTables_length select').select2({
						minimumResultsForSearch: Infinity,
						dropdownAutoWidth: true,
						width: 'auto',
						dropdownParent: $('#table_inbox')
					});
				},
				initComplete: function () {}
			});

			$('#ajaxModal').on('hidden.bs.modal', function (event) {
				// $('#modal-content').empty();
			});
			
			$(".download-file-xls").on("click", function() {
				table.button( '.download-xls' ).trigger();
			});
			$(".download-file-csv").on("click", function() {
				table.button( '.download-csv' ).trigger();
			});

			// reset form ketika klik tombol tambah
            $(".filter-laporan").on("click", function() {
				$('#ItemForm').trigger("reset");
            	$('#ItemForm').find('input[name=filterDate]').val(filterDate);
                $('#modelHeading').html("Filter Laporan");
                $('#ajaxModal').modal('show');
            });

            //simpan 
            $('#saveBtn').click(function(e) {
                e.preventDefault();
                var formdata = $('#ItemForm').serializeArray();

				filterDate = formdata[0].value;
				$('.periode').html(new Date(filterDate+'-01').toLocaleString('id-ID',{month:'long', year:'numeric'}));

				$('#ItemForm').trigger("reset");
				$('#ajaxModal').modal('hide');
                table.ajax.reload(null, false);
            });

			$('.periode').html(new Date(filterDate+'-01').toLocaleString('id-ID',{month:'long', year:'numeric'}));

            //$(".add-memo").click();
		});
	</script>
@endpush