<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<title>{{ env("APP_NAME") }}</title>

	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/icons/icomoon/styles.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/icons/fontawesome/styles.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/bootstrap.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/core.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/components.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/colors.min.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("dist/sweetalert2/sweetalert2.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("selectize/css/selectize.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("selectize/css/selectize.bootstrap3.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("treegrid/css/jquery.treegrid.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("css/custom.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("dist/jquery.loading/jquery.loading.css")}}" rel="stylesheet" type="text/css">
	<link href="{{ asset("dist/datepicker/css/bootstrap-datepicker.css")}}" rel="stylesheet" type="text/css">
	
	<script src="{{ asset("js/core/libraries/jquery.min.js")}}"></script>
	<script src="{{ asset("js/plugins/tables/datatables/datatables.min.js")}}"></script>
	{{-- <script src="{{ asset("js/plugins/tables/datatables/extensions/responsive.min.js")}}"></script> --}}
	<script src="{{ asset("js/plugins/loaders/pace.min.js")}}"></script>
	<script src="{{ asset("js/core/libraries/bootstrap.min.js")}}"></script>
	<script src="{{ asset("js/plugins/loaders/blockui.min.js")}}"></script>
	<script src="{{ asset("dist/sweetalert2/sweetalert2.js")}}"></script>
	<script src="{{ asset("/js/core/libraries/jquery_ui/interactions.min.js")}}"></script>
	<script src="{{ asset("js/plugins/forms/selects/select2.min.js")}}"></script>
	<script src="{{ asset("js/plugins/forms/styling/uniform.min.js")}}"></script>
	<script src="{{ asset("js/plugins/forms/inputs/formatter.min.js")}}"></script>
	<script src="{{ asset("js/plugins/notifications/pnotify.min.js")}}"></script>
	<script src="{{ asset("selectize/js/standalone/selectize.min.js")}}"></script>
	<script type="text/javascript" src="{{ asset("treegrid/js/jquery.treegrid.js")}}"></script>
	<script src="{{ asset("dist/jquery.loading/jquery.loading.js")}}"></script>

	@section('token')
		
	@endsection

</head>
<body class="navbar-top sidebar-xs">

	<!-- Main navbar -->
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-header">
			<a class="navbar-brand" href="{{ asset('') }}">{{ env("APP_NAME")}}</a>

			<ul class="nav navbar-nav visible-xs-block">
				<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
				<li><a class="sidebar-mobile-main-toggle"><i class="icon-paragraph-justify3"></i></a></li>
			</ul>
		</div>

		<div class="navbar-collapse collapse" id="navbar-mobile">
			<ul class="nav navbar-nav">
				<li><a class="sidebar-control sidebar-main-toggle hidden-xs"><i class="icon-paragraph-justify3"></i></a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown dropdown-user">
					<a class="dropdown-toggle" data-toggle="dropdown">
						<img src="{{ asset("/images/placeholders/placeholder.jpg") }}" alt="">
						<span>Albert Bagio</span>
						<i class="caret"></i>
					</a>

					<ul class="dropdown-menu dropdown-menu-right">
						<li><a href="#"><i class="icon-user-plus"></i>Profil</a></li>
						<li><a href="#"><i class="icon-switch2"></i> Logout</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				<div class="sidebar-content">
					<!-- Main navigation -->
					<div class="sidebar-category sidebar-category-visible">
						<div class="category-content no-padding">
							<ul class="navigation navigation-main navigation-accordion">
								<li><a href="{{ asset('') }}"><i class="icon-home4"></i> <span>Dashboard</span></a></li>
								<li>
									<a href="#"><i class="icon-server"></i> <span>Master</span></a>
									<ul>
                                        <li><a href="{{ url('/admin/users')}}">Users</a></li>
                                        <li><a href="{{ url('/admin/dashboard')}}">Menu 2</a></li>
									</ul>									
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<script type="text/javascript">
				$.extend( $.fn.dataTable.defaults, {
			        autoWidth: false,
			        columnDefs: [{ 
			            orderable: false,
			            width: '100px',
			        }],
			        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
			        language: {
			            search: '<span>Filter:</span> _INPUT_',
			            searchPlaceholder: 'Type to filter...',
			            lengthMenu: '<span>Show:</span> _MENU_',
			            paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
			        },
			        drawCallback: function () {
			            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
			        },
			        preDrawCallback: function() {
			            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
			        }
			    });
			</script>
			<!-- Main content -->
			<div class="content-wrapper">
				
			@yield("content")

			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->
	<!-- Core JS files -->
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="{{ asset("/js/plugins/visualization/d3/d3.min.js")}}"></script>
	<script src="{{ asset("/js/plugins/visualization/d3/d3_tooltip.js")}}"></script>
	<script src="{{ asset("/js/plugins/forms/styling/switchery.min.js")}}"></script>
	<script src="{{ asset("/js/plugins/forms/selects/bootstrap_multiselect.js")}}"></script>
	<script src="{{ asset("/js/plugins/ui/moment/moment.min.js")}}"></script>
	<script src="{{ asset("/js/plugins/pickers/datepicker.js")}}"></script>
	<script src="{{ asset("/js/plugins/ui/nicescroll.min.js")}}"></script>
	{{-- <script src="{{ asset("dist/datepicker/js/bootstrap-datepicker.js")}}"></script> --}}
	

	<script src="{{ asset("/js/app.js")}}"></script>
	<script src="{{ asset("/js/demo_pages/layout_fixed_custom.js")}}"></script>
	<script src="{{ asset("/js/custom.js")}}"></script>
	
	
	
	<!-- /theme JS files -->
<style type="text/css">
	.right{
		text-align: right;
	}	

	.content {
	    padding: 0 20px 20px 20px;
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		// CheckBox
		$(".styled").uniform();
		
		$('.selectize').selectize({
		    create: true,
		    sortField: 'text'
	});
		
		$('.datatable-basic').DataTable();

		var date = new Date();
		var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

		$('.datepicker').datepicker({
			format : 'dd-mm-yyyy',
			setDate: new Date(),
			autoclose: true,
			clearBtn: true,
		});

		$('.date_awal').datepicker({
			format : 'dd-mm-yyyy',
			setDate: new Date(),
			autoclose: true,
			clearBtn: true,
		});

		$('.date_akhir').datepicker({
			format : 'dd-mm-yyyy',
			setDate: new Date(),
			autoclose: true,
			clearBtn: true,
		});

		$(".date_awal").on("changeDate", function (e) {
	      $(".date_akhir").datepicker("setStartDate", e.date);
	    });

	    $(".date_akhir").on("dp.change", function (e) {
	      $(".date_awal").datepicker("setEndDate", e.date);
	    });

	    $('.formated_date').formatter({
	        pattern: '{{99}}/{{99}}/{{9999}}'
	    });
		
	})

	function showModal(selector) {
		$(selector).modal({
			keyboard : false,
			backdrop : false,
		});
	}

	function hideModal(selector) {
		$(selector).modal("hide");
	}
</script>

</body>
</html>
