<script type="text/javascript">
	
	function aptikaLoadingFadeIn() {
		loadingBlock();
	}

	function aptikaLoadingFadeOut() {
		$.unblockUI();
	}
	
	$(document).keyup(function(e) {
		if (e.keyCode == 27) { // escape key maps to keycode `27`
			aptikaLoadingFadeOut()
		}
	});

	function loadingBlock() { 
		$.blockUI({
			css: { 
				border: 'none', 
				padding: '10px', 
				width: '150px', 
				top:"40%",left:"45%",
				textAlign:"center",
				backgroundColor: '#000', 
				'-webkit-border-radius': '10px', 
				'-moz-border-radius': '10px', 
				opacity: .5, 
				color: '#fff' 
			},
			message: '<h4>Loading... <i class="fa fa-refresh fa-spin"></i></h4>',
			onOverlayClick: $.unblockUI
		}); 
	}

	function myModal(option) {
		aptikaLoadingFadeIn();
		$.loadmodal({
			url: option.url,
			id: option.id,
			dlgClass: option.dlgClass,
			bgClass: option.bgClass,
			title: option.title,
			size: option.size,
			width: option.width,
			modal: {
				keyboard: true, // any other options from the regular $().modal call (see Bootstrap docs)
			},
			ajax: {
				dataType: option.ajax.dataType,
				method: option.ajax.method,
				success: function(data, status, xhr){
					custSetValue(option.cust);
					aptikaLoadingFadeOut();
				},
			},
		});
		return true;
	}

	function custSetValue(cust) {
		var element = '#' + cust.name.replace('-', '_');
		var elementVal = $(element).val();
		if (elementVal == '') {
			if (cust.val != '' && cust.val != elementVal) {
				$(element).val(cust.val);
			}
		}
		return true;
	}

	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
		}
	});

	$(document).ajaxError(function (event, jqxhr, settings, exception) {
		if (jqxhr.status == 500) {
			$(".alertbottom").fadeToggle(350);
		}
	});

	$(function () {
		"use strict";
		//Alerts
		$(".myadmin-alert .closed").click(function (event) {
			$(this).parents(".myadmin-alert").fadeToggle(350);
			return false;
		});
	}); // End of use strict

	$.fn.hasAttr = function(name) {
		return (typeof $(this).attr(name) !== 'undefined' && $(this).attr(name) !== false &&  $(this).attr(name) !== null);
	};

	$.fn.custAttr = function(route) {
		var attrName = route + '-id';
		if (route == 'menu') {
			attrName = 'parent-id';
		} else if (route == 'kota') {
			attrName = 'provinsi-id';
		} else if (route == 'kecamatan') {
			attrName = 'kota-id';
		} else if (route == 'kelurahan') {
			attrName = 'kecamatan-id';
		}
		var attrVal = ($(this).hasAttr(attrName)) ? $(this).attr(attrName) : '';
		var data = {
			name: attrName,
			val: attrVal,
		};
		return data;
	};

	$.fn.checkClass = function(data) {
		if ($.inArray('tambah', data.class) > -1) {
			data.bgClass = 'primary';
			data.title = 'Tambah';
			data.url += '/create';
			if (data.route == 'menu' && data.cust.val != 'NULL') {
				data.url += '/' + data.cust.val;
			}
		} else if ($.inArray('ubah', data.class) > -1) {
			data.bgClass = 'warning';
			data.title = 'Ubah';
			data.url += '/' + data.ref.val + '/edit';
		} else if ($.inArray('hapus', data.class) > -1) {
			data.bgClass = 'danger';
			data.title = 'Hapus';
			data.url += '/hapus/' + data.ref.val;
		} else if ($.inArray('ubahpassword', data.class) > -1) {
			data.ref.val = ($(this).hasAttr('user-id')) ? $(this).attr('user-id') : '';
			data.bgClass = 'warning';
			data.title = 'Ubah Password';
			data.url = '/user/ubahpassword/' + data.ref.val;
		} else if ($.inArray('atur', data.class) > -1) {
			data.ref.val = ($(this).hasAttr('user-id')) ? $(this).attr('user-id') : '';
			data.bgClass = 'danger';
			data.title = 'Atur Login';
			data.url = '/user/atur/' + data.ref.val;
		}
		return data;
	};

	$(document).ready(function(){
		const _selector = '.tambah, .ubah, .hapus, .atur, .ubahpassword';
		var dtvars = [];
		var dt_cols = [];
		var dt_btn_cols = [];
		var dt_ajax = '';
		var dt_btn_show = 1;

		@hasSection('datatables_index')
			@yield('datatables_index')
		@endif

		/* set value */
		dtvars.ajax = dt_ajax;
		dtvars.cols = dt_cols;
		dtvars.domTable = '' +
		"<'row'" +
			"<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f>" + 
			"<'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'lB>" + 
		">" +
		"<'row'" + 
			"<'col-sm-12'tr>" +
		">" +
		"<'row'" +
			"<'col-sm-12 col-md-5'i>" +
			"<'col-sm-12 col-md-7'p>" +
		">";
		
		if (dt_btn_show) {
			dtvars.btn = [
				{
					extend: 'pdfHtml5',
					text: 'PDF',
					titleAttr: 'Generate PDF',
					className: 'btn-danger btn-sm mr-1',
					exportOptions: 	{
						columns: dt_btn_cols
					}
				},
				{
					extend: 'excelHtml5',
					text: 'Excel',
					titleAttr: 'Generate Excel',
					className: 'btn-success btn-sm mr-1',
					exportOptions: 	{
						columns: dt_btn_cols
					}
				},
				{
					extend: 'print',
					text: 'Print',
					titleAttr: 'Print Table',
					className: 'btn-primary btn-sm',
					exportOptions: 	{
						columns: dt_btn_cols
					}
				}
			];
		} else {
			dtvars.btn = [];
		}
		dtvars.language = {
			sProcessing: "<div class='d-flex align-items-center justify-content-center fs-lg'><div class='spinner-border spinner-border-sm text-primary mr-2' role='status'><span class='sr-only'> Loading...</span></div> Sedang Memproses...</div>",
			sLengthMenu: "Tampilkan _MENU_ entri",
			sZeroRecords: "Tidak ditemukan data yang sesuai",
			sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
			sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
			sInfoFiltered: "(disaring dari _MAX_ entri keseluruhan)",
			sInfoPostFix: "",
			sSearch: "<div class='input-group-text d-inline-flex align-items-center justify-content-center'><i class='fa fa-search'></i></div>",
			sUrl: "",
			oPaginate: {
				sFirst: "Pertama",
				sPrevious: "<i class='fa fa-chevron-left'></i>",
				sNext: "<i class='fa fa-chevron-right'></i>",
				sLast: "Terakhir"
			}
		};

		if (dtvars.ajax != '') {
			var table = $('#datatable').DataTable({
				responsive: true,
				lengthChange: false,
				language: dtvars.language,
				dom: dtvars.domTable,
				buttons: dtvars.btn,
				processing: true,
				serverSide: true,
				ajax: dtvars.ajax,
				columns: dtvars.cols,
			});

			$('#datatable tbody').on('click', 'td.details-control', function () {
				var tr = $(this).closest('tr');
				var row = table.row( tr );
				if ( row.child.isShown() ) {
					row.child.hide();
					tr.removeClass('shown color-hover');
				} else {
					row.child( $(this).dtFormat(row.data()) ).show();
					tr.addClass('shown color-hover');
				}
			});
			
		}	

		$(document).on('click', _selector, function() {
			var _vars = [];
			_vars.class = $(this).attr('class').replace(/\s{2,}/g, ' ').split(' ');
			_vars.bgClass = '';
			_vars.title = '';
			_vars.route = "{{ $halaman->kode ?? NULL }}";
			_vars.url = '/' + _vars.route;
			_vars.ref = [];
			_vars.ref.name = _vars.route + '-id';
			_vars.ref.val = ($(this).hasAttr(_vars.ref.name)) ? $(this).attr(_vars.ref.name) : '';
			_vars.cust = $(this).custAttr(_vars.route);
			_vars = $(this).checkClass(_vars);

			var _modal = {
				url: "{{ url($url_admin) }}" + _vars.url,
				id: 'responsive',
				dlgClass: 'fade',
				bgClass: _vars.bgClass,
				title: _vars.title,
				size: 'modal-xl', // 'modal-lg'
				width: 'whatever',
				ajax: {
					dataType: 'html',
					method: 'GET',
				},
				cust: _vars.cust,
			};
			myModal(_modal);
		});

	});

	$.fn.dtFormat = function(obj) {
		var html = '';
		html += '<table class="table table-bordered table-hover w-100">';
		html += '<tr><th class="w-50">Old</th><th class="w-50">New</th></tr>';
		html += '<tr><td><table class="table table-bordered table-hover"><tr class="color-grey"><th>Column</th><th>Value</th></tr>';
		$.each(obj.old_values, function( index, value ) {
			html += '<tr><td>'+index+'</th><td>'+value+'</td></tr>';
		});
		html += '</table></td>';
		html += '<td><table class="table table-bordered table-hover"><tr class="color-grey"><th>Column</th><th>Value</th></tr>';
		$.each(obj.new_values, function( index, value ) {
			html += '<tr><td>'+index+'</th><td>'+value+'</td></tr>';
		});
		html += '</table></td></tr>';
		html += '</table>';
		return html;
	};
	
</script>