<?php
/**
 * File			: index.php
 * Description  : Template utama
 * Created By	: Hendi
 * Created Date : 14 Mar 2021
 * Last Update  : 06 Apr 2021
**/

# agar jika ada perubahan css/js tidak perlu lg diclear data browser
# karena browser sudah dipaksa ambil css/js yang baru
$rand = rand();

/**
<!--
=========================================================
Material Dashboard - v2.1.2
=========================================================

Product Page: https://www.creative-tim.com/product/material-dashboard
Copyright 2020 Creative Tim (https://www.creative-tim.com)
Coded by Creative Tim

=========================================================
The above copyright notice and this permission notice 
shall be included in all copies or substantial portions 
of the Software. 
-->
**/
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="<?=base_url('public/favicon.ico')?>">
	<link rel="icon" type="image/png" href="<?=base_url('public/favicon.ico')?>">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<?php # untuk csrf token saat ajax?>
	<?= csrf_meta() ?>
	<title>
		Admin Panel - <?= $title ?>
	</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	<!-- Fonts and icons -->
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
	<link rel="stylesheet" href="<?=base_url('public/assets/plugins/datatables/datatables.css')?>">
	<!-- CSS Files -->
	<link href="<?=base_url('public/assets/css/material-dashboard.css?v=2.1.2')?>" rel="stylesheet" />
	<!-- Bootstrap Selectpicker -->
	<link href="<?=base_url('public/assets/css/bootstrap-selectpicker.css')?>" rel="stylesheet" />
	<!-- My CSS -->
	<link href="<?=base_url('public/assets/css/mystyle.css?v='.$rand)?>" rel="stylesheet" />
	<script> 
		// definisi variable global
		var _HOST = "<?= base_url('/') ?>"; 
	</script>
    
</head>
<body class="sidebar-mini">
	<div id="loadingna" class="loadingna card" style="display: none;"><img src="<?= base_url('public/assets/img/ajax-loader.gif') ?>"></div>
	<div class="wrapper">
		<div class="sidebar" data-color="azure" data-background-color="white" data-image="<?=base_url('public/assets/img/sidebar-1.jpg')?>">
			<!--
			Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"

			Tip 2: you can also add an image using data-image tag
			-->
			<div class="logo">
				<a href="<?=base_url()?>" class="simple-text logo-mini">DB</a>
				<a href="<?=base_url()?>" class="simple-text logo-normal">Dashboard</a>
			</div>
			<div class="sidebar-wrapper">
				<?= $sidebar ?>
			</div>
		</div>
		<div class="main-panel">
			<!-- Navbar -->
			<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
				<div class="container-fluid">
					<div class="navbar-wrapper">
						<button class="navbar-toggler desktop" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
							<span class="sr-only">Toggle navigation</span>
							<span class="navbar-toggler-icon icon-bar"></span>
							<span class="navbar-toggler-icon icon-bar"></span>
							<span class="navbar-toggler-icon icon-bar"></span>
						</button>
						<a class="navbar-brand" href="javascript:;"><?=$title?></a>
					</div>
                    <div class="collapse navbar-collapse justify-content-end">
						<div class="navbar-form">
							<span class="bmd-form-group">
								<div class="input-group no-border">
									<?php if (!session()->get('is_loggedin')) { ?>
									<a href="<?= base_url('/login') ?>" class="btn btn-white btn-round btn-just-icon" title="Login" >
										<i class="material-icons">login</i>
										<div class="ripple-container"></div>
										<div class="ripple-container"></div>
									</a>
									<?php } else { ?>
                                    <!--
									<a href="<?= base_url('/do-logout') ?>" class="btn btn-white btn-round btn-just-icon" title="Logout" >
										<i class="material-icons">logout</i>
										<div class="ripple-container"></div>
										<div class="ripple-container"></div>
									</a>
                                    -->
									<?php } ?>
								</div>
							</span>
						</div>
					</div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
						<span class="sr-only">Toggle navigation</span>
						<span class="navbar-toggler-icon icon-bar"></span>
						<span class="navbar-toggler-icon icon-bar"></span>
						<span class="navbar-toggler-icon icon-bar"></span>
					</button>
					<?php if(session()->get('is_loggedin') == true) { ?>
					<div class="collapse navbar-collapse justify-content-end">
						<ul class="navbar-nav">
							<li class="nav-item dropdown">
								<a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Akun Saya">
									<i class="material-icons">person</i>
									<p class="d-lg-none d-md-block">
										Akun
									</p>
								</a>
								<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
									<a class="dropdown-item" href="#"><strong><?= session()->get('full_name')?></strong>&nbsp;<small>[<?= session()->get('level_name')?>]</small></a>
                                    <div class="dropdown-divider"></div>
									<a class="dropdown-item" href="<?= base_url('change-password') ?>">Ubah Password</a>
									<a class="dropdown-item" href="<?= base_url('do-logout') ?>">Log out</a>
								</div>
							</li>
						</ul>
					</div>
					<?php } ?>
				</div>
			</nav>
			<!-- End Navbar -->
			<div class="content">
				<?= $content ?>
			</div>
			<footer class="footer">
				<div class="container-fluid">
                    <div class="copyright float-left">
                        <!-- content --> 
                    </div>
					<div class="copyright float-right">
						&copy;
						<script>
							document.write(new Date().getFullYear())
						</script><!--<a href="https://titasictech.com">titasictech.com</a>-->. template <!-- with <i class="material-icons">favorite</i> -->by
						<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
					</div>
				</div>
			</footer>
		</div>
	</div>
	<!-- fixed-plugin sementara dihidden dl -->
	<div class="fixed-plugin" style="display: none;">
		<div class="dropdown show-dropdown">
			<a href="#" data-toggle="dropdown">
				<i class="fa fa-cog fa-2x"> </i>
			</a>
			<ul class="dropdown-menu">
				<li class="header-title"> Sidebar Filters</li>
				<li class="adjustments-line">
					<a href="javascript:void(0)" class="switch-trigger active-color">
						<div class="badge-colors ml-auto mr-auto">
							<span class="badge filter badge-purple" data-color="purple"></span>
							<span class="badge filter badge-azure" data-color="azure"></span>
							<span class="badge filter badge-green" data-color="green"></span>
							<span class="badge filter badge-warning" data-color="orange"></span>
							<span class="badge filter badge-danger" data-color="danger"></span>
							<span class="badge filter badge-rose active" data-color="rose"></span>
						</div>
						<div class="clearfix"></div>
					</a>
				</li>
				<li class="header-title">Images</li>
				<li class="active">
					<a class="img-holder switch-trigger" href="javascript:void(0)">
						<img src="<?=base_url('public/assets/img/sidebar-1.jpg')?>" alt="">
					</a>
				</li>
				<li>
					<a class="img-holder switch-trigger" href="javascript:void(0)">
						<img src="<?=base_url('public/assets/img/sidebar-2.jpg')?>" alt="">
					</a>
				</li>
				<li>
					<a class="img-holder switch-trigger" href="javascript:void(0)">
						<img src="<?=base_url('public/assets/img/sidebar-3.jpg')?>" alt="">
					</a>
				</li>
				<li>
					<a class="img-holder switch-trigger" href="javascript:void(0)">
						<img src="<?=base_url('public/assets/img/sidebar-4.jpg')?>" alt="">
					</a>
				</li>
				<li class="button-container">
					<a href="https://www.creative-tim.com/product/material-dashboard" target="_blank" class="btn btn-primary btn-block">Free Download</a>
				</li>
				<!-- 
				<li class="header-title">Want more components?</li>
				<li class="button-container">
					<a href="https://www.creative-tim.com/product/material-dashboard-pro" target="_blank" class="btn btn-warning btn-block">
						Get the pro version
					</a>
				</li> 
				-->
				<li class="button-container">
					<a href="https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html" target="_blank" class="btn btn-default btn-block">
						View Documentation
					</a>
				</li>
				<li class="button-container github-star">
					<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
				</li>
				<li class="header-title">Thank you for 95 shares!</li>
				<li class="button-container text-center">
					<button id="twitter" class="btn btn-round btn-twitter"><i class="fa fa-twitter"></i> &middot; 45</button>
					<button id="facebook" class="btn btn-round btn-facebook"><i class="fa fa-facebook-f"></i> &middot; 50</button>
					<br>
					<br>
				</li>
			</ul>
		</div>
	</div>
	<!-- Core JS Files -->
	<script src="<?=base_url('public/assets/js/core/jquery.min.js')?>"></script>
	<script src="<?=base_url('public/assets/js/core/popper.min.js')?>"></script>
	<script src="<?=base_url('public/assets/js/core/bootstrap-material-design.min.js')?>"></script>
	<script src="<?=base_url('public/assets/js/plugins/perfect-scrollbar.jquery.min.js')?>"></script>
	<!-- Plugin for the momentJs  -->
	<!--<script src="<?=base_url('public/assets/js/plugins/moment.min.js')?>"></script>-->
	<!-- Plugin for Sweet Alert -->
	<script src="<?=base_url('public/assets/js/plugins/sweetalert2.js')?>"></script>
	<!-- Forms Validations Plugin -->
	<script src="<?=base_url('public/assets/js/plugins/jquery.validate.min.js')?>"></script>
	<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
	<!--<script src="<?=base_url('public/assets/js/plugins/jquery.bootstrap-wizard.js')?>"></script>-->
	<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
	<script src="<?=base_url('public/assets/js/plugins/bootstrap-selectpicker.js')?>"></script>
	<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
	<!--<script src="<?=base_url('public/assets/js/plugins/bootstrap-datetimepicker.min.js')?>"></script>-->
	<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
	<!--<script src="<?=base_url('public/assets/js/plugins/jquery.dataTables.min.js')?>"></script>-->
	<script src="<?=base_url('public/assets/plugins/datatables/datatables.js')?>"></script>
	<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
	<script src="<?=base_url('public/assets/js/plugins/bootstrap-tagsinput.js')?>"></script>
	<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
	<script src="<?=base_url('public/assets/js/plugins/jasny-bootstrap.min.js')?>"></script>
	<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar    -->
	<!--<script src="<?=base_url('public/assets/js/plugins/fullcalendar.min.js')?>"></script>-->
	<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
	<script src="<?=base_url('public/assets/js/plugins/jquery-jvectormap.js')?>"></script>
	<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
	<script src="<?=base_url('public/assets/js/plugins/nouislider.min.js')?>"></script>
	<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
	<!-- Library for adding dinamically elements -->
	<!--<script src="<?=base_url('public/assets/js/plugins/arrive.min.js')?>"></script>-->
	<!-- Google Maps Plugin -->
	<!--<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>-->
	<!-- Chartist JS -->
	<!--<script src="<?=base_url('public/assets/js/plugins/chartist.min.js')?>"></script>-->
	<!-- Notifications Plugin -->
	<script src="<?=base_url('public/assets/js/plugins/bootstrap-notify.js')?>"></script>
	<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
	<script src="<?=base_url('public/assets/js/material-dashboard.js?v=2.1.2')?>" type="text/javascript"></script>
	<!-- Image to blob -->
	<!--<script src="<?=base_url('public/assets/js/plugins/jquery-image-blob.min.js')?>"></script>-->
	<!-- tinyMCE editor -->
	<script src="<?=base_url('public/assets/plugins/tinymce/tinymce.min.js')?>"></script>
	<!-- Material Dashboard DEMO methods, don't include it in your project! -->
	<!--<script src="<?=base_url('public/assets/demo/demo.js')?>"></script>-->
	<script>
		$(document).ready(function() {
			$().ready(function() {
				$sidebar = $('.sidebar');

				$sidebar_img_container = $sidebar.find('.sidebar-background');

				$full_page = $('.full-page');

				$sidebar_responsive = $('body > .navbar-collapse');

				window_width = $(window).width();

				fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();

				if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
					if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
						$('.fixed-plugin .dropdown').addClass('open');
					}
				}

				$('.fixed-plugin a').click(function(event) {
					// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the  section active
					if ($(this).hasClass('switch-trigger')) {
						if (event.stopPropagation) {
							event.stopPropagation();
						} else if (window.event) {
							window.event.cancelBubble = true;
						}
					}
				});

				$('.fixed-plugin .active-color span').click(function() {
					$full_page_background = $('.full-page-background');

					$(this).siblings().removeClass('active');
					$(this).addClass('active');

					var new_color = $(this).data('color');

					if ($sidebar.length != 0) {
						$sidebar.attr('data-color', new_color);
					}

					if ($full_page.length != 0) {
						$full_page.attr('filter-color', new_color);
					}

					if ($sidebar_responsive.length != 0) {
						$sidebar_responsive.attr('data-color', new_color);
					}
				});

				$('.fixed-plugin .background-color .badge').click(function() {
					$(this).siblings().removeClass('active');
					$(this).addClass('active');

					var new_color = $(this).data('background-color');

					if ($sidebar.length != 0) {
						$sidebar.attr('data-background-color', new_color);
					}
				});

				$('.fixed-plugin .img-holder').click(function() {
					$full_page_background = $('.full-page-background');

					$(this).parent('li').siblings().removeClass('active');
					$(this).parent('li').addClass('active');

					var new_image = $(this).find("img").attr('src');

					if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
						$sidebar_img_container.fadeOut('fast', function() {
							$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
							$sidebar_img_container.fadeIn('fast');
						});
					}

					if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
						var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');

						$full_page_background.fadeOut('fast', function() {
							$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
							$full_page_background.fadeIn('fast');
						});
					}

					if ($('.switch-sidebar-image input:checked').length == 0) {
						var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
						var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');

						$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
						$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
					}

					if ($sidebar_responsive.length != 0) {
						$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
					}
				});

				$('.switch-sidebar-image input').change(function() {
					$full_page_background = $('.full-page-background');

					$input = $(this);

					if ($input.is(':checked')) {
						if ($sidebar_img_container.length != 0) {
							$sidebar_img_container.fadeIn('fast');
							$sidebar.attr('data-image', '#');
						}

						if ($full_page_background.length != 0) {
							$full_page_background.fadeIn('fast');
							$full_page.attr('data-image', '#');
						}

						background_image = true;
					} else {
						if ($sidebar_img_container.length != 0) {
							$sidebar.removeAttr('data-image');
							$sidebar_img_container.fadeOut('fast');
						}

						if ($full_page_background.length != 0) {
							$full_page.removeAttr('data-image', '#');
							$full_page_background.fadeOut('fast');
						}

						background_image = false;
					}
				});

				$('.switch-sidebar-mini input').change(function() {
					$body = $('body');

					$input = $(this);

					if (md.misc.sidebar_mini_active == true) {
						$('body').removeClass('sidebar-mini');
						md.misc.sidebar_mini_active = false;

						$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

					} else {

						$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');

						setTimeout(function() {
							$('body').addClass('sidebar-mini');

							md.misc.sidebar_mini_active = true;
						}, 300);
					}

					// we simulate the window Resize so the charts will get updated in realtime.
					var simulateWindowResize = setInterval(function() {
						window.dispatchEvent(new Event('resize'));
					}, 180);

					// we stop the simulation of Window Resize after the animations are completed
					setTimeout(function() {
						clearInterval(simulateWindowResize);
					}, 1000);

				});
			});
		});
	</script>
	<script>
		$(document).ready(function() {
			// Javascript method's body can be found in assets/js/demos.js
			//md.initDashboardPageCharts();
		});
	</script>
	<!-- My JS -->
	<script src="<?= base_url('public/assets/js/myscript.js?v='.$rand) ?>"></script>
</body>
</html>