@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>Kendaraan Operasional {{$dtTitle??''}}</span>
					<span class="d-block text-muted font-size-sm align-middle">Informasi mengenai list data Kendaraan Operasional.</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 add-memo btn btn-sm bg-primary text-white _btn-outline _btn-primary text-capitalize" 
							data-toolbar="true" data-caption="Buat data baru" 
							data-placement="top" data-popup="tooltip" data-trigger="hover" 
							data-original-title="Tambah Data Memo">
							<i class="mi-add mr-2"></i>
							Buat data baru
						</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="_d-none 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

	<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="150px">Nomor</th>
					<!-- <th class="border-top-0 search">Bagian</th> -->
					<th class="border-top-0 search">Penerima</th>
					<th class="border-top-0 search" width="130px">Nopol</th>
					<th class="border-top-0 search" width="100px">Jumlah</th>
					<th class="border-top-0 search">SPBU</th>
					<th class="border-top-0 search">Dicetak</th>
					<th class="border-top-0 search" width="130px">Tanggal</th>
					<th class="border-top-0 text-right"></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">
						<input type="hidden" name="recid" id="recid">
	                    <!-- <div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label">Nomor</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="nomor" name="nomor" placeholder="Nomor Dokumen" value="" maxlength="191">
	                        </div>
	                    </div> -->
						<div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label" for="tanggal_pekerjaan">Tgl. Pekerjaan</label>
	                        <div class="col-sm-4">
	                            <input type="date" class="form-control" id="tanggal_pekerjaan" name="tanggal_pekerjaan" placeholder="Tanggal Permintaan" value="{{ date('Y-m-d') }}">
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label">SPBU</label>
	                        <div class="col-sm-9">
	                        	<select name="spbu_id" id="spbu_id" class="form-control form-control-select2" data-placeholder="Pilih SPBU">
	                        		<option value=""></option>
	                        		@foreach($spbu as $key => $value)
	                        			<option value="{{$value->id}}">{{$value->nama_spbu}}</option>
	                        		@endforeach
	                        	</select>
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label for="Nopol" class="col-sm-2 text-right col-form-label control-label">NOPOL</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="nopol" name="nopol" placeholder="Nopol Plat Kendaraan" value="" maxlength="12">
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label">BBM</label>
	                        <div class="col-sm-9 pt-2">
	                        	{{-- <select name="jenis_bbm_id" id="jenis_bbm_id" class="form-control form-control-select2" data-placeholder="Pilih Jenis BBM">
	                        		<option value=""></option>
	                        		@foreach($bbm as $key => $value)
	                        			<option value="{{$value->id}}">{{$value->nama_bbm}}</option>
	                        		@endforeach
	                        	</select> --}}
	                        	@foreach($bbm as $key => $value)
	                        	<div class="custom-control custom-radio custom-control-inline">
								  <input type="radio" id="jenis-bbm-{{$value->nama_bbm}}" name="jenis_bbm_id" class="custom-control-input" value="{{$value->id}}">
								  <label class="custom-control-label" for="jenis-bbm-{{$value->nama_bbm}}">{{$value->nama_bbm}}</label>
								</div>
								@endforeach
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label">Jumlah (Liter)</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="jumlah" name="jumlah" placeholder="Jumlah (Liter)" value="" maxlength="255">
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label">Tujuan</label>
	                        <div class="col-sm-9">
	                            <input type="text" class="form-control" id="tujuan" name="tujuan" placeholder="Tujuan" value="" maxlength="255">
	                        </div>
	                    </div>
	                    <div class="form-group row">
	                        <label class="col-sm-2 col-form-label text-right control-label">Penerima</label>
	                        <div class="col-sm-9">
	                        	<input type="text" class="form-control" id="penerima" name="penerima" placeholder="Cari Pegawai" value="" maxlength="255">
	                        	<input type="hidden" id="penerima_nip" name="penerima_nip">
	                        	<input type="hidden" id="penerima_nama" name="penerima_nama">
	                        	<input type="hidden" id="penerima_jabatan" name="penerima_jabatan">
	                        	<input type="hidden" id="penerima_jabatan_id" name="penerima_jabatan_id">
	                        	<input type="hidden" id="bagian_id" name="bagian_id">
	                        </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>
						Simpan
                    </button>
				</div>
				</form>
	        </div>
	    </div>
	</div>

@endif
@endsection

@push('scripts')
	<div class="modal fade" id="iservice" aria-hidden="true" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content card-gtheme border-0 p-0">
                <div class="modal-header pt-2">
                    <h4 class="modal-title">Pemeliharaan</h4>
                </div>
                <div class="modal-body">
                    <div id="carouselK3" class="carousel slide" data-ride="carousel" data-interval="3500">
                        <div class="carousel-inner">
                            Sedang melakukan proses migrasi data. <span id="demo"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<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">
		// // Mengatur waktu akhir perhitungan mundur
		// var countDownDate = new Date("Nov 20, 2023 10:10:00").getTime();

		// // Memperbarui hitungan mundur setiap 1 detik
		// var x = setInterval(function() {

		//   // Untuk mendapatkan tanggal dan waktu hari ini
		//   var now = new Date().getTime();
		    
		//   // Temukan jarak antara sekarang dan tanggal hitung mundur
		//   var distance = countDownDate - now;
		    
		//   // Perhitungan waktu untuk hari, jam, menit dan detik
		//   var days = Math.floor(distance / (1000 * 60 * 60 * 24));
		//   var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		//   var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		//   var seconds = Math.floor((distance % (1000 * 60)) / 1000);
		    
		//   // Keluarkan hasil dalam elemen dengan id = "demo"
		//   // document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
		//   document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";
		    
		//   // Jika hitungan mundur selesai, tulis beberapa teks 
		//   if (distance < 0) {
		//     clearInterval(x);
		//     document.getElementById("demo").innerHTML = "EXPIRED";
		//   }
		// }, 1000);
		// $(window).on('load', function() {
        //     $('#iservice').modal('show');
        // });
        ///
		var d = new Date();
		var strDate = d.getDate() + "-" + (d.getMonth()+1) + "-" + d.getFullYear();

		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 />' );
				}
			} );
			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,
				"lengthMenu": [ 10, 25, 50, 75, 100, 1000 ],
				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>>",
					// "<'justify-content-between align-items-center datatable-footer _length-right'l<'ml-auto'i>p>",
				// dom 		: 	
				// 	// "<'row'<'col-sm-12 col-md-6'f><'col-sm-12 col-md-3'><'col-sm-12 col-md-3 text-left'B>>" +
				// 	"<'row'<'col-sm-12'Btr>>" +
				// 	"<'row mr-3 mt-3 px-2'<'col-sm-12 col-md-6 d-flex align-items-center'l<'ml-auto'i>><'col-sm-12 col-md-6'p>>",
				// 	// "<'row'<'col-sm-12 col-md-6 d-flex align-items-center'li><'col-sm-12 col-md-6'p>>",
				processing  : true,
				serverSide  : true,
                ajax 		: "{{ route('kendaraan-operasional.index') }}",
				// ajax 		: {
				// 	"url" 	: "{{ route('kendaraan-operasional.index') }}",
				// 	"data" 	: {
                //         io    : "",
                //         kode  : "",
                //     },
				// 	"type" 	: "POST"
				// },
				"ordering"	: false,
				buttons: [
					{
						text		: 'Export XLS',
						className 	: 'download-xls d-none btn btn-primary btn-sm mr-2',
						extend 		: 'excelHtml5',
						"action"	: newexportaction,
						title		: 'kendaraan-operasional-'+strDate,
						exportOptions: {
		                    columns: [ 0, 1, 2, 3, 4, 5, 6 ]
		                },
						// autoFilter	: true
					},
					{
						text		: 'Export CSV',
						className 	: 'download-csv d-none btn btn-primary btn-sm',
						action 		: function (e, dt, buttons, config) {
							$.ajax({
								"url" 		: "{{ route('kendaraan-operasional.index') }}",
								"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', 'kendaraan-operasional-'+strDate+'.csv');
									//console.log(tempLink);
									tempLink.click();
								}
							});
						}
					}
				],
				columns 	: [						
					{ 	data: 'nomor', className:'_w-25 text-truncate text-left text-primary font-italic', name: 'nomor' }, 	
					// { 	data: 'bagian_nama', className:'_w-25 text-truncate text-left text-primary', name: 'bagian_nama' }, 	
					{ 	data: 'penerima_nip', className:'_w-25 text-truncate text-left font-weight-semibold', name: 'penerima_nip' }, 
					{ 	data: 'nopol', className:'_w-25 text-truncate text-left', name: 'nopol' }, 
					{	data: 'jumlah', className:'_w-20 text-truncate text-center', name: 'jumlah'}, 
					{	data: 'spbu_nama', className:'_w-20 text-truncate text-left', name: 'spbu_nama'}, 
					{	data: null, className:'_w-20 text-truncate text-left', name: 'status_cetak', 
						render: function (data, type, row) {
							//return data.status_cetak;
							if (data.status_cetak == 1) {
								return '<span class="text-muted">Ya</span>';
							}

							return '<span class="text-muted">Belum</span>';
						},
					}, 
					{ 	data: null, className:'w-100px text-center',  name: 'created_at', 
						"searchable": false, defaultContent: "", 
						render: function(data, type, row, meta) {
							var label = '';
							if (data.created_at !== '1970-01-01'){
								label += moment(data.created_at).format('DD/MM/YYYY');
							} else {
								label = '-';
							}
							return label;
						} 
					},
					{ 	data: 'action', 
						className:'text-center rowlink-skip', 
						orderable:false, 
						"searchable": false 
					},
				],
				columnDefs : [
					{
						// The `data` parameter refers to the data for the cell (defined by the
						// `data` option, which defaults to the column being worked with, in
						// this case `data: 0`.
						render: function (data, type, row) {
							if (data) {
								return data + ' (' + row.penerima_nama + ') <br> <span class="text-muted">'+row.bagian_nama+'</span>';
							}

							return '-';
						},
						targets: 1,
					},
					// { visible: false, targets: [3] },
				],
				"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 () {}
			});

			// $('#table_inbox tbody').on( 'click', 'tr td', function (e){
			// 	e.preventDefault();
			// 	show_pBar('Loading');
			// 	var _href 	= $(this).parent('tr').find('.memorandum_view').attr('href');
			// 	location.href = _href;
			// 	hide_pBar();
			// 	return false;
			// });

			//Add Kapal
			
			$('#ajaxModal').on('hidden.bs.modal', function (event) {
				// $('#modal-content').empty();
			});
			
			// $('body').on('click', '#addKapal', function(e){
			// 	$('#modal-content').load( "{{-- route('memo.kapal.add') --}}" ,
			// 		function(data, status, jqXGR) { 
			// 			$('#modelHeading').html("Tambah Data Kapal");
			// 			$('#ajaxModal').modal('show'); 
			// 	});
			// 	e.stopPropagation();
			// });

			// show_pBar();
        	// setTimeout(function(){ hide_pBar(); }, 1000);
			
			$('body').on('click', '.update-nomor', function(e){
                e.preventDefault();
                var url     = "{{-- route('memorandum.update_nomor') --}}";
                var $target = $(this),
                    block   = $target.closest('.content'),
                    register= $target.data('register');
                    Swal.fire({
                        icon 	: 'warning',
                        title 	: "Konfirmasi",
                        html 	: "Apakah Anda akan Alokasi Nomor PPK ?",
                        showConfirmButton 	: true,
                        showDenyButton 		: false,
                        showCancelButton 	: true,
						confirmButtonText 	: 'Simpan',
                        denyButtonText 		: 'Tolak',
						cancelButtonText 	: 'Batal',
                    })
                    .then((result) => {                  
                        if (result.isDenied) { 
						}		                 
                        else if (result.isConfirmed) {                  	
                            blockui(block);                                
                            $.post(url, { 
								register	: register 
							})
                            .done(function(response){
                                if (response.status == true) {	
									$('.badge-nomor').text( $('.badge-nomor').text()-1);				
                                    $.jGrowl('Data Berhasil disimpan..', {
                                        header 	: 'Informasi',
                                        theme 	: 'alert-bordered alert-primary',
                                    }); 
                                    unblockui(block);
									table.draw();
                                }
                                else{
                                    unblockui(block);
                                    Swal.fire('Peringatan', 'Data gagal disimpan!', 'warning');
                                }
                            })
                            .fail(function(xhr, status, error) {
                                unblockui(block);
                                Swal.fire(error, '', 'warning');
                            });
                        }
                    });
                return false;
            });
			
			$(".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
            $(".add-memo").on("click", function() {
            	$('#ItemForm').find('input[name=recid]').val('');
				$('#ItemForm').find('input[name=nomor]').val('');
				$('#ItemForm').find('select[name=spbu_id]').val('');
				$('#ItemForm').find('input[name=nopol]').val('');
				// $('#ItemForm').find('select[name=jenis_bbm_id]').val('');
				$('#ItemForm').find('input[name=jenis_bbm_id]').removeAttr('checked');
				$('#ItemForm').find('input[name=jumlah]').val('');
				$('#ItemForm').find('input[name=tujuan]').val('');
				$('#ItemForm').find('input[name=penerima]').val('');
				$('#ItemForm').find('input[name=penerima_nip]').val('');
				$('#ItemForm').find('input[name=penerima_nama]').val('');
				$('#ItemForm').find('input[name=penerima_jabatan]').val('');
				$('#ItemForm').find('input[name=penerima_jabatan_id]').val('');
				$('#ItemForm').find('input[name=bagian_id]').val('');
				$('#ItemForm').trigger("reset");
                $('#modelHeading').html("Form Pembuatan Data Kendaraan Operasional");
                $('#ajaxModal').modal('show');
            });

            //simpan 
            $('#saveBtn').click(function(e) {
                e.preventDefault();
                var formdata = $('#ItemForm').serializeArray();
                formdata.push({name:'spbu_nama', value:$('#ItemForm').find('select[name=spbu_id] option:selected').text()});
                $.ajax({
                    url 		: "{{ route('kendaraan-operasional.store') }}",
                    type 		: "POST",
                    data 		: $.param(formdata),
                    //data 		: $('#ItemForm').serialize(),
                    dataType 	: 'json',
                    success 	: function(data) {
                        $('#ItemForm').trigger("reset");
                        $('#ajaxModal').modal('hide');
                        // Swal.fire(
					    //   'Berhasil!',
					    //   'Data telah berhasil disimpan.',
					    //   'success'
					    // );
						Swal.fire({
							icon 	: 'success',
							title 	: data.title,
							text 	: data.content,
						});
                        table.draw();
                    },
                    error 		: function(xhr, status, error) {
						var err = JSON.parse(xhr.responseText);
						//console.log(err.Message);
                        $('#saveBtn').html('Save Changes');
                    }
                });
            });

            //pencarian data di kolom pegawai
            var autoList = $('input[name=penerima]').autocomplete({
		        serviceUrl: "{{route('pegawai.autocomplete')}}",
		        delimiter: /(,|;)\s*/,
		        maxHeight:400,
		        zIndex: 9999,
		        deferRequestBy: 0,
		        noCache: false,
		        onSelect: function(suggestion) {
					console.log(suggestion);
		            $(this).removeClass('autocomplete-loading');
		            $(this).val(suggestion.value);
		            $('#ItemForm').find('input[name=penerima_nip]').val(suggestion.nip);
		            $('#ItemForm').find('input[name=penerima_nama]').val(suggestion.nama);
		            $('#ItemForm').find('input[name=penerima_jabatan]').val(suggestion.jabatan);
		            $('#ItemForm').find('input[name=penerima_jabatan_id]').val(suggestion.jabatan_id);
		            $('#ItemForm').find('input[name=bagian_id]').val(suggestion.bagian_id);
		        }
		    });

            $('body').on('click', '.editItem', function(){
                //$('.switchery').prop('checked', false).trigger("click").change();			
                $('.opt_file_upload').show();		
                $('.add_file_upload').hide();			
                $('.view_file_upload').show();
                var recid = $(this).data('id');
                //console.log(recid);
                $.get("{{ route('kendaraan-operasional.index') }}" + '/' + recid + '/edit', function(data) {
                    //console.log(data);
                    $('#modelHeading').html("Edit Item");
                    $('#saveBtn').val("edit-user");
                    $('#ajaxModal').modal('show');

                    $('#recid').val(data.recid);
					$('#nomor').val(data.nomor);
					$('#tanggal_pekerjaan').val(data.tanggal_pekerjaan);
					$('#spbu_id').val(data.spbu_id);
					$('#nopol').val(data.nopol);
					$('#jumlah').val(data.jumlah);
					$('#tujuan').val(data.tujuan);

					// $('#jenis_bbm_id').val(data.jenis_bbm_id);

					$(`input[name=jenis_bbm_id][value=${data.jenis_bbm_id}]`).prop('checked', true);

					if (data.penerima_nip && data.penerima_nama) {
						$('#penerima').val(data.penerima_nip + ' - ' + data.penerima_nama);
					}

					$('#penerima_nip').val(data.penerima_nip);
					$('#penerima_nama').val(data.penerima_nama);
					$('#penerima_jabatan').val(data.penerima_jabatan);
					$('#penerima_jabatan_id').val(data.penerima_jabatan_id);
					$('#bagian_id').val(data.bagian_id);
                })
            });

            

            $('body').on('click', '.deleteItem', function() {
            	// alert('Maaf fitur ini masih dikembangkan.');
                var recid = $(this).data("id");

            	Swal.fire({
				  	title: 'Apakah anda yakin?',
				  	text: "Anda akan menghapus data berikut?.",
				  	icon: 'warning',
				  	showCancelButton: true,
				  	confirmButtonColor: '#3085d6',
				  	cancelButtonColor: '#d33',
				  	confirmButtonText: 'Ya, hapus!'
				}).then((result) => {
				  	if (result.isConfirmed) {
				    	$.ajax({
		                    type: "DELETE",
		                    url: "{{ route('kendaraan-operasional.store') }}" + '/' + recid,
		                    success: function(data) {
		                    	Swal.fire(
							      'Berhasil!',
							      'Data telah berhasil dihapus.',
							      'success'
							    );
		                        table.draw();
		                    },
		                    error: function(data) {
		                        console.log('Error:', data);
		                    }
		                });
				  	}
				})

                // confirm("Are You sure want to delete !");

                // $.ajax({
                //     type: "DELETE",
                //     url: "{{ route('kendaraan-operasional.store') }}" + '/' + recid,
                //     success: function(data) {
                //         table.draw();
                //     },
                //     error: function(data) {
                //         console.log('Error:', data);
                //     }
                // });
            });

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