<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="<?php
                $logo = new dirImage;
                echo $logo->dirImg('../../asset/dokumen/foto/', 'aks');
                ?>" rel='shortcut icon'>

    <title>AKS || <?php echo $clasSekolah->dataSekolah('sekolah'); ?></title>

    <link rel="stylesheet" href="../../asset/bootstrap/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/jqvmap/jqvmap.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/css/adminlte.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/summernote/summernote-bs4.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/bs-stepper/css/bs-stepper.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/dropzone/min/dropzone.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../../asset/bootstrap/plugins/datepicker/datepicker.css">
    <script src="../../asset/bootstrap/plugins/datepicker/DateTimePicker.css"></script>
    <script src="../../asset/bootstrap/plugins/jquery/jquery.min.js"></script>
    <script src="../../asset/bootstrap/asset/rupiah/rupiah.js"></script>
    <style>
        .loader {
            background-color: white;
            opacity: 0.7;
            margin: auto;
            z-index: 99999999;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed small">

    <div class="wrapper">
        <!--
        <div class="preloader flex-column justify-content-center align-items-center loader">
            <img src="../../asset/dokumen/foto/spinner2.gif" style="width:100px;height:100px;">
        </div>
    -->
        <?php
        $link = new linkpage;
        include('page.php');
        include('navbar.php');
        include('conten.php');
        ?>


        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-light small">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->

        <!-- Main Footer -->
        <footer class="main-footer">
            <strong>Copyright &copy; <a href="https://aplikasiaks.com">AKS-SIMAKOM : <?php echo $clasSekolah->dataSekolah('sekolah'); ?></a>.</strong>
            All rights reserved.<?php //echo $link; 
                                ?>
            <div class="float-right d-none d-sm-inline-block">
                <b>Versi</b> <?php $cekVersi = new update;
                                echo $cekVersi->versiAplikasi();
                                ?>
            </div>
        </footer>
    </div>
    <!-- ./wrapper -->


    <script src="../../asset/bootstrap/plugins/jquery/jquery.min.js"></script>
    <script src="../../asset/bootstrap/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../../asset/bootstrap/plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../asset/bootstrap/plugins/toastr/toastr.min.js"></script>
    <script src="../../asset/bootstrap/js/adminlte.min.js"></script>
    <script src="../../asset/bootstrap/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="../../asset/bootstrap/plugins/chart.js/Chart.min.js"></script>
    <script src="../../asset/bootstrap/plugins/sparklines/sparkline.js"></script>
    <script src="../../asset/bootstrap/plugins/jqvmap/jquery.vmap.min.js"></script>
    <script src="../../asset/bootstrap/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
    <script src="../../asset/bootstrap/plugins/jquery-knob/jquery.knob.min.js"></script>
    <script src="../../asset/bootstrap/plugins/moment/moment.min.js"></script>
    <script src="../../asset/bootstrap/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="../../asset/bootstrap/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
    <script src="../../asset/bootstrap/plugins/summernote/summernote-bs4.min.js"></script>
    <script src="../../asset/bootstrap/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
    <script src="../../asset/bootstrap/plugins/select2/js/select2.full.min.js"></script>
    <script src="../../asset/bootstrap/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
    <script src="../../asset/bootstrap/plugins/inputmask/jquery.inputmask.min.js"></script>
    <script src="../../asset/bootstrap/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <script src="../../asset/bootstrap/plugins/bs-stepper/js/bs-stepper.min.js"></script>
    <script src="../../asset/bootstrap/plugins/dropzone/min/dropzone.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../../asset/bootstrap/plugins/jszip/jszip.min.js"></script>
    <script src="../../asset/bootstrap/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../../asset/bootstrap/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <script src="../../asset/bootstrap/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
    <script src="../../asset/bootstrap/plugins/jquery-mapael/jquery.mapael.min.js"></script>
    <script src="../../asset/bootstrap/plugins/jquery-mapael/maps/usa_states.min.js"></script>
    <script src="../../asset/bootstrap/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="../../asset/bootstrap/plugins/datepicker/DateTimePicker.js"></script>
    <script src="../../asset/bootstrap/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
    <script src="../../asset/bootstrap/plugins/raphael/raphael.min.js"></script>


    <?php include "./grafik/grafik.php"; ?>
    <!--
        <script src="./grafik/grafik.js"></script>
        <script src="../bootstrap/js/pages/dashboard2.js"></script>
    <script src="../bootstrap/js/demo.js"></script>
      <script src="./grafik.js"></script>
  -->

    <script>
        $(function() {
            //Initialize Select2 Elements
            $('.select2').select2()

            //Initialize Select2 Elements
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })

            //Datemask dd/mm/yyyy
            $('#datemask').inputmask('dd/mm/yyyy', {
                'placeholder': 'dd/mm/yyyy'
            })
            //Datemask2 mm/dd/yyyy
            $('#datemask2').inputmask('mm/dd/yyyy', {
                'placeholder': 'mm/dd/yyyy'
            })
            //Money Euro
            $('[data-mask]').inputmask()

            //Date picker
            $('#reservationdate').datetimepicker({
                format: 'L'
            });

            //Date and time picker
            $('#reservationdatetime').datetimepicker({
                icons: {
                    time: 'far fa-clock'
                }
            });

            //Date range picker
            $('#reservation').daterangepicker()
            //Date range picker with time picker
            $('#reservationtime').daterangepicker({
                timePicker: true,
                timePickerIncrement: 30,
                locale: {
                    format: 'MM/DD/YYYY hh:mm A'
                }
            })
            //Date range as a button
            $('#daterange-btn').daterangepicker({
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    startDate: moment().subtract(29, 'days'),
                    endDate: moment()
                },
                function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
                }
            )

            //Timepicker
            $('#timepicker').datetimepicker({
                format: 'LT'
            })

            //Bootstrap Duallistbox
            $('.duallistbox').bootstrapDualListbox()

            //Colorpicker
            $('.my-colorpicker1').colorpicker()
            //color picker with addon
            $('.my-colorpicker2').colorpicker()

            $('.my-colorpicker2').on('colorpickerChange', function(event) {
                $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
            })

            $("input[data-bootstrap-switch]").each(function() {
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            })

        })
        // BS-Stepper Init
        document.addEventListener('DOMContentLoaded', function() {
            window.stepper = new Stepper(document.querySelector('.bs-stepper'))
        })

        // DropzoneJS Demo Code Start
        Dropzone.autoDiscover = false

        // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
        var previewNode = document.querySelector("#template")
        previewNode.id = ""
        var previewTemplate = previewNode.parentNode.innerHTML
        previewNode.parentNode.removeChild(previewNode)

        var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
            url: "/target-url", // Set the url
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 20,
            previewTemplate: previewTemplate,
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
        })

        myDropzone.on("addedfile", function(file) {
            // Hookup the start button
            file.previewElement.querySelector(".start").onclick = function() {
                myDropzone.enqueueFile(file)
            }
        })

        // Update the total progress bar
        myDropzone.on("totaluploadprogress", function(progress) {
            document.querySelector("#total-progress .progress-bar").style.width = progress + "%"
        })

        myDropzone.on("sending", function(file) {
            // Show the total progress bar when upload starts
            document.querySelector("#total-progress").style.opacity = "1"
            // And disable the start button
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
        })

        // Hide the total progress bar when nothing's uploading anymore
        myDropzone.on("queuecomplete", function(progress) {
            document.querySelector("#total-progress").style.opacity = "0"
        })

        // Setup the buttons for all transfers
        // The "add files" button doesn't need to be setup because the config
        // `clickable` has already been specified.
        document.querySelector("#actions .start").onclick = function() {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
        }
        document.querySelector("#actions .cancel").onclick = function() {
            myDropzone.removeAllFiles(true)
        }
        // DropzoneJS Demo Code End
    </script>
    <script>
        $(function() {
            $("#example1").DataTable({
                "responsive": true,
                "lengthChange": true,
                "lengthMenu": [
                    [10, 50, 100, 500, 1000, -1],
                    [10, 50, 100, 500, 1000, "All"]
                ],
                "autoWidth": true,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            $("#example2").DataTable({
                "responsive": true,
                "lengthChange": true,
                "lengthMenu": [
                    [10, 50, 100, 500, 1000, -1],
                    [10, 50, 100, 500, 1000, "All"]
                ],
                "autoWidth": true,
                "buttons": ["excel", "pdf", "print"]
            }).buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');
            $("#example3").DataTable({
                "responsive": true,
                "lengthChange": true,
                "lengthMenu": [
                    [10, 50, 100, 500, 1000, -1],
                    [10, 50, 100, 500, 1000, "All"]
                ],
                "autoWidth": true
            });
            $("#example14").DataTable({
                "responsive": true,
                "lengthChange": true,
                "autoWidth": true
            });
            $("#example15").DataTable({
                "responsive": true,
                "lengthChange": true,
                "lengthMenu": [
                    [15, 50, 100, 500, 1000, -1],
                    [15, 50, 100, 500, 1000, "All"]
                ],
                "autoWidth": true
            });
            $("#example50").DataTable({
                "responsive": true,
                "lengthChange": true,
                "lengthMenu": [
                    [50, 100, 500, 1000, -1],
                    [50, 100, 500, 1000, "All"]
                ],
                "autoWidth": true,
                "buttons": ["excel", "pdf", "print"]
            }).buttons().container().appendTo('#example50_wrapper .col-md-6:eq(0)');
            $("#example51").DataTable({
                "responsive": true,
                "lengthChange": true,
                "lengthMenu": [
                    [50, 100, 500, 1000, -1],
                    [50, 100, 500, 1000, "All"]
                ],
                "autoWidth": true
            });

        });
    </script>
    <script>
        $('#tanggal1').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        })
    </script>
    <script>
        $('#tanggal2').datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            todayHighlight: true
        })
    </script>



</body>

</html>