<?php
add_shortcode('tafsir_mimpi','tafsir_mimpi');
function tafsir_mimpi($atts){
	ob_start();  
	$atts = shortcode_atts(array('mimpi' => '2d'),$atts);
	global $wpdb;
	$pid= $atts['mimpi'];
	if($pid=='2d'){
		$table_name='mimpi2d';
	}elseif($pid=='3d'){
		$table_name='mimpi3d';
	}else{
		$table_name='mimpi4d';
	}
	$items=$wpdb->get_results("SELECT * FROM $table_name ORDER BY no ASC");
	if(count($items)>0){?>
		<style>.nomor{width:20%}.table td,.table th{vertical-align: middle;}.dataTables_wrapper .dataTables_paginate .paginate_button {	min-width: 1.0em!important;  padding: 0.2em!important;}#datatablem2d_previous,#datatablem2d_next{display: none;}</style>
		<div class="mx-auto text-center">
			<ul class="list-inline mb-3 col-md-12 text-center mx-auto justify-content-center">
				<li class="list-inline-item"><label class="text-right">Ganti Menu</label></li>
				<li class="list-inline-item"><select id="inputhari" name="mimpi" class="form-control form-control-sm">
					<option data-goto="<?php echo get_site_url()?>/tafsir-mimpi-2d" <?php if($pid=='2d' )echo 'selected' ;?> value="2d">Tafsir Mimpi 2D</option>
					<option data-goto="<?php echo get_site_url()?>/tafsir-mimpi-3d" <?php if($pid=='3d' )echo 'selected' ;?> value="3d">Tafsir Mimpi 3D</option>
					<option data-goto="<?php echo get_site_url()?>/tafsir-mimpi-4d" <?php if($pid=='4d' )echo 'selected' ;?> value="4d">Tafsir Mimpi 4D</option>
				</select></li>
			</ul>
		</div>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" integrity="sha512-PT0RvABaDhDQugEbpNMwgYBCnGCiTZMh9yOzUsJHDgl/dMhD9yjHAwoumnUk3JydV3QTcIkNDuN40CJxik5+WQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.jqueryui.min.css" integrity="sha512-x2AeaPQ8YOMtmWeicVYULhggwMf73vuodGL7GwzRyrPDjOUSABKU7Rw9c3WNFRua9/BvX/ED1IK3VTSsISF6TQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

		<div id="loading" class="text-center mx-auto">
			<p class="text-center">Tunggu Sejenak Sedang Mengambil Data Besar</p>
		</div>
		<div id="tables" style="display:none">
			<table class="table table-bordered table-striped mb-3" id="datatablem2d">
				<thead>
					<tr class="bg-success text-light">
						<th class="text-center text-white align-middle nomor" id="top-bar">Urut</th>
						<th class="text-center text-white align-middle" id="top-bar">Mimpi</th>
						<th class="text-center text-white align-middle" id="top-bar">Angka Mimpi</th>
					</tr>
				</thead>
				<tbody>
					<?php $no=1;foreach($items as $field=>$value){echo sprintf('<tr><td class="text-center nomor">'.$no.'</td><td class="text-center">'.ucwords(strtolower($value->mimpi)).'</td><td class="text-center">'.$value->angka.'</td></tr>');$no++;}?>
				</tbody>
			</table>
		</div>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		<script type="text/javascript">jQuery(document).ready(function(){jQuery("#datatablem2d").dataTable({aaSorting:[[0,"asc"]]})});jQuery(function(b){b("#loading").css("display","none");b("#tables").css("display","block");b("#inputhari").change(function(){var a=b(this).find("option:selected").data("goto");if(a!=""){window.location.href=a}})});</script>
		<?php 
	}else{
		echo '<h2 align="center">Database Masih Kosong !</h2>';
	}
	return ob_get_clean();
}