<?php
if (!$this->ion_auth->logged_in()) {
    redirect('auth/login');
} else {
}
$this->output->set_header('X-FRAME-OPTIONS: DENY');
$this->output->set_header('X-XSS-Protection: 1; mode=block');
$this->output->set_header('Strict-Transport-Security: max-age=63072000; includeSubDomains; preload');
$this->output->set_header('X-Content-Type-Options: nosniff');
$this->db->select('*');
$this->db->from('web_management');
$this->db->join('web_style_2', 'web_management.style_web = web_style_2.id_web_style');
$wb_style = $this->db->get();
foreach ($wb_style->result() as $data) {
    $web_name = $data->nama_web;
    $web_description = $data->deskripsi;
    $web_meta_color = $data->meta_color;
    $web_navbar_color = $data->navbar_color;
    $web_box_color = $data->box_color;
    $web_theme_color = $data->theme_color;
}
$user = $this->ion_auth->user()->row();
$nama_user = $user->first_name;
$email_user = $user->email;
$nik_user = $user->last_name;
$email_pengguna = encrypt_url($email_user);
$id_user = $user->id;
$foto_user = 'default.png';
// $data_user = $this->db->get_where('tb_biodata', array('nik' => $nik_user));
// foreach ($data_user->result() as $m) {
//     $foto_user = $m->foto;
// }
$hal = $this->uri->segment(1);
$title_hal = str_replace('_', '-', $hal);
$title_hal = strtoupper($title_hal);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?= $web_name ?></title>
    <meta name="description" content="<?= $web_description ?>">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="msapplication-TileImage" content="<?= site_url('/public/assets/img/logo/logo.png') ?>">
    <meta name="msapplication-TileColor" content="<?= $web_meta_color; ?>">
    <meta name="theme-color" content="<?= $web_meta_color; ?>">
    <meta name="msapplication-navbutton-color" content="<?= $web_meta_color; ?>">
    <meta name="apple-mobile-web-app-status-bar-style" content="<?= $web_meta_color; ?>">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="apple-touch-icon" sizes="144x144" href="<?= site_url('/public/assets/img/logo/logo.png') ?>">
    <link rel="apple-touch-icon" sizes="114x114" href="<?= site_url('/public/assets/img/logo/logo.png') ?>">
    <link rel="apple-touch-icon" sizes="72x72" href="<?= site_url('/public/assets/img/logo/logo.png') ?>">
    <link rel="apple-touch-icon" href="<?= site_url('/logo/public/assets/img/logo/logo.png') ?>">
    <link rel="shortcut icon" sizes="196x196" href="<?= site_url('/public/assets/img/logo/logo.png') ?>">
    <link rel="shortcut icon" href="<?= site_url('/public/assets/img/logo/logo.png') ?>">

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="<?= site_url('/public/assets/css/apple/app.min.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/css/apple/theme/' . $web_theme_color . '.min.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/ionicons/css/ionicons.min.css') ?>" rel="stylesheet" />
    <!-- ================== END BASE CSS STYLE ================== -->
    <link href="<?= base_url('public/assets/plugins/nvd3/build/nv.d3.css') ?>" rel="stylesheet" />

    <!-- ================== BEGIN FORM PLUGIN STYLE ================== -->
    <link href="<?= site_url('/public/assets/plugins/@danielfarrell/bootstrap-combobox/css/bootstrap-combobox.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/bootstrap-select/dist/css/bootstrap-select.min.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/select2/dist/css/select2.min.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css') ?>" rel="stylesheet" />
    <!-- ================== END FORM PLUGIN STYLE ================== -->

    <!-- ================== BEGIN DATATABLE STYLE ================== -->
    <link href="<?= site_url('/public/assets/plugins/datatables.net-bs4/css/dataTables.bootstrap4.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/datatables.net-responsive-bs4/css/responsive.bootstrap4.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/datatables.net-select-bs4/css/select.bootstrap4.min.css') ?>" rel="stylesheet" />
    <link href="<?= site_url('/public/assets/plugins/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css') ?>" rel="stylesheet" />
    <!-- ================== END DATATABLE STYLE ================== -->

    <!-- ================== BEGIN PAGE CSS ================== -->
    <link href="<?= site_url('/public/assets/plugins/bootstrap-social/bootstrap-social.css') ?>" rel="stylesheet" />
    <!-- ================== END PAGE CSS ================== -->

    <!-- ================== BEGIN BASE JS ================== -->
    <script src="<?= base_url('public/assets/js/app.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/js/theme/apple.min.js') ?>"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- ================== END BASE JS ================== -->

    <style>
        .gallery-image {
            object-fit: cover;
        }

        body ul.wysihtml5-toolbar {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: wrap;
            flex-wrap: nowrap;
        }

        ul.wysihtml5-toolbar {
            overflow: auto;
        }
    </style>
</head>

<body>
    <!-- begin #page-loader -->
    <div id="page-loader" class="fade show"><span class="spinner"></span></div>
    <!-- end #page-loader -->

    <!-- begin #page-container -->
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
        <!-- begin #header -->
        <div id="header" class="header <?= $web_navbar_color ?>">
            <!-- begin navbar-header -->
            <div class="navbar-header">
                <a href="<?= base_url() ?>" class="navbar-brand" style="margin-right: 0px; font-size: 25px; padding: 0px 10px; color: <?= $web_meta_color ?>">
                    <?php
                    echo "<b>";
                    echo $web_name;
                    echo "</b>";
                    ?>
                </a>
                <br>
                <!-- <small><?= $web_description; ?></small> -->
                <button type="button" class="navbar-toggle" data-click="sidebar-toggled">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- end navbar-header -->

            <!-- begin header-nav -->
            <ul class="navbar-nav navbar-right">
                <?php
                include "menu_navbar.php";
                ?>
                <li class="dropdown navbar-user">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <?php
                        $pegawai = 'pegawai';
                        $anggota = 'members';
                        if ($this->ion_auth->in_group($pegawai) or $this->ion_auth->in_group($anggota)) {
                            if ($foto_user == '') { ?>
                                <img class="gallery-image" src="<?= base_url('public/assets/foto/default.png') ?>" alt="" style="object-fit: cover" />
                            <?php } else { ?>
                                <img class="gallery-image" src="<?= base_url('public/assets/foto/' . $foto_user) ?>" alt="" style="object-fit: cover" />
                            <?php } ?>
                        <?php } else { ?>
                            <img src="<?= site_url('/public/assets/img/logo/logo.png') ?>" alt="" />
                        <?php } ?>
                        <span class="d-none d-md-inline"><?= cetak($nama_user) ?></span> <b class="caret"></b>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="<?= base_url('auth/edit_user/' . encrypt_url($id_user)) ?>" class="dropdown-item">Edit Akun</a>
                        <?php
                        $root = 'superadmin';
                        $admin = 'admin';
                        if ($this->ion_auth->in_group($admin) or $this->ion_auth->in_group($root)) {
                        ?>
                            <a href="<?= base_url('auth') ?>" class="dropdown-item">Setting</a>
                        <?php } else {
                        } ?>
                        <div class="dropdown-divider"></div>
                        <a href="<?= base_url('auth/logout') ?>" class="dropdown-item tombol-logout">Log Out</a>
                    </div>
                </li>
            </ul>
            <!-- end header navigation right -->
        </div>
        <!-- end #header -->

        <!-- begin #sidebar -->
        <div id="sidebar" class="sidebar">
            <!-- begin sidebar scrollbar -->
            <div data-scrollbar="true" data-height="100%">
                <!-- begin sidebar user -->
                <ul class="nav">
                    <li class="nav-profile">
                        <a data-toggle="nav-profile">
                            <div class="cover with-shadow"></div>
                            <div class="image" style="background-color: aliceblue;">
                                <?php
                                $pegawai = 'pegawai';
                                $anggota = 'members';
                                if ($this->ion_auth->in_group($pegawai) or $this->ion_auth->in_group($anggota)) {
                                    if ($foto_user == '') { ?>
                                        <div style="width: 34px; height: 34px; background-color: aliceblue; overflow: hidden">
                                            <img class="gallery-image" src="<?= base_url('public/assets/foto/default.png') ?>" alt="" style="width: 100%;" />
                                        </div>
                                    <?php } else { ?>
                                        <div style="width: 34px; height: 34px; background-color: aliceblue; overflow: hidden">
                                            <img class="gallery-image" src="<?= base_url('public/assets/foto/' . $foto_user) ?>" alt="" style="width: 100%;" />
                                        </div>
                                    <?php } ?>

                                <?php } else { ?>
                                    <img src="<?= site_url('/public/assets/img/logo/logo.png') ?>" alt="" />
                                <?php } ?>
                            </div>
                            <div class="info">
                                <?= cetak($nama_user) ?>
                                <small><?= cetak($email_user) ?></small>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- end sidebar user -->
                <!-- begin sidebar nav -->
                <ul class="nav">
                    <?php
                    include "menu_sidebar.php";
                    ?>
                </ul>
                <!-- end sidebar nav -->
            </div>
            <!-- end sidebar scrollbar -->
        </div>
        <div class="sidebar-bg"></div>
        <!-- end #sidebar -->

        <!-- begin #content -->
        <div>
            <div class="flash-data" data-flashdata="<?= $this->session->flashdata('message'); ?>"></div>
            <?php if ($this->session->flashdata('message')) : ?>
            <?php endif; ?>
            <?php
            echo $contents;
            ?>
        </div>

        <!-- begin scroll to top btn -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-primary btn-scroll-to-top fade" data-click="scroll-top"><i class="fa fa-angle-up"></i></a>
        <!-- end scroll to top btn -->

    </div>

    <!-- ================== BEGIN ALERT JS ================== -->
    <script src="<?= base_url('public/assets/plugins/sweetalert/dist/sweetalert2.all.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/js/myscript.js') ?>"></script>
    <!-- ================== END ALERT JS ================== -->

    <!-- ================== BEGIN DATATABLE JS ================== -->
    <script src="<?= base_url('public/assets/plugins/datatables.net/js/jquery.dataTables.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/datatables.net-bs4/js/dataTables.bootstrap4.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') ?>"></script>

    <script src="<?= base_url('public/assets/plugins/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/datatables.net-fixedcolumns-bs4/js/fixedColumns.bootstrap4.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/datatables.net-select/js/dataTables.select.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/datatables.net-select-bs4/js/select.bootstrap4.js') ?>"></script>
    <!-- <script src="<?= base_url('public/assets/js/demo/table-manage-default.demo.js') ?>"></script> -->
    <script src="<?= base_url('public/assets/js/dataTables.rowsGroup.js') ?>"></script>
    <script src="<?= base_url('public/assets/js/dataTables.rowReorder.js') ?>"></script>
    <!-- ================== END DATATABLE JS ================== -->

    <!-- ================== BEGIN UL NAV JS ================== -->
    <script src="<?= base_url('public/assets/plugins/highlight.js/highlight.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/js/demo/render.highlight.js') ?>"></script>
    <!-- ================== END UL NAV JS ================== -->

    <!-- ================== BEGIN FORM JS ================== -->
    <script src="<?= base_url('public/assets/plugins/@danielfarrell/bootstrap-combobox/js/bootstrap-combobox.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/select2/dist/js/select2.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/ckeditor/ckeditor.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/ckeditor/config.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.js') ?>"></script>
    <!-- ================== END FORM JS ================== -->

    <script src="<?= base_url('public/assets/plugins/d3/d3.min.js') ?>"></script>
    <script src="<?= base_url('public/assets/plugins/nvd3/build/nv.d3.min.js') ?>"></script>


    <script>
        var handleSelect2 = function() {
            $(".default-select2").select2();
            $(".multiple-select2").select2({
                placeholder: "Pilih Pegawai"
            });
        };
        var FormPlugins = function() {
            "use strict";
            return {
                //main function
                init: function() {
                    handleSelect2();
                }
            };
        }();
        $(document).ready(function() {
            FormPlugins.init();
        });

        // Table Script
        $(function() {
            $("#example1").DataTable();
            $('#mytable0').DataTable({
                "pageLength": 5,
                "paging": true,
                "lengthChange": true,
                "lengthMenu": [
                    [5, -1],
                    ["Tampilkan 5 Data", "Tampilkan Semua Data"]
                ],
                "searching": true,
                "ordering": true,
                "order": [
                    [2, "desc"],
                    [3, "desc"],
                    [4, "asc"]
                ],
                "info": false,
                "autoWidth": true,
                "scrollX": true,
                "select": true,
            });
            $('#mytable').DataTable({
                "pageLength": 5,
                "paging": true,
                "lengthChange": true,
                "lengthMenu": [
                    [5, 10, 25, 50, 100, -1],
                    ["Tampilkan 5 Data", "Tampilkan 10 Data", "Tampilkan 25 Data", "Tampilkan 50 Data", "Tampilkan 100 Data", "Tampilkan Semua Data"]
                ],
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "scrollX": true,
                "select": true,
            });
            $('#mytable1').DataTable({
                "pageLength": 5,
                "paging": true,
                "lengthChange": true,
                "lengthMenu": [
                    [5, 10, 25, 50, 100, -1],
                    ["Tampilkan 5 Data", "Tampilkan 10 Data", "Tampilkan 25 Data", "Tampilkan 50 Data", "Tampilkan 100 Data", "Tampilkan Semua Data"]
                ],
                "searching": true,
                "ordering": true,
                "order": [
                    [0, "desc"]
                ],
                "info": true,
                "autoWidth": true,
                "scrollX": true,
                'rowsGroup': (["0"]),
                "select": true,
            });
            $('#mytable2').DataTable({
                "pageLength": 5,
                "paging": true,
                "lengthChange": true,
                "lengthMenu": [
                    [5, 10, 25, 50, 100, -1],
                    ["Tampilkan 5 Data", "Tampilkan 10 Data", "Tampilkan 25 Data", "Tampilkan 50 Data", "Tampilkan 100 Data", "Tampilkan Semua Data"]
                ],
                "searching": true,
                "ordering": true,
                "order": [
                    [3, "desc"]
                ],
                "info": true,
                "autoWidth": true,
                "scrollX": true,
                "select": true,
            });
            $('#mytable3').DataTable({
                "paging": false,
                "searching": true,
                "ordering": false,
                "order": [
                    [0, "desc"]
                ],
                "info": false,
                "autoWidth": true,
                "scrollX": true,
                scrollY: 300,
                scrollCollapse: true,
                // scroller: true,
                fixedColumns: true
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#select_all').on('click', function() {
                if (this.checked) {
                    $('.checkbox').each(function() {
                        this.checked = true;
                    });
                    document.getElementById("tombol_hapus_all").style.display = "inline";
                } else {
                    $('.checkbox').each(function() {
                        this.checked = false;
                    });
                    document.getElementById("tombol_hapus_all").style.display = "none";
                }
            });

            $('.checkbox').on('click', function() {
                if ($('.checkbox:checked').length == $('.checkbox').length) {
                    $('#select_all').prop('checked', true);
                    document.getElementById("tombol_hapus_all").style.display = "inline";
                } else {
                    $('#select_all').prop('checked', false);
                    document.getElementById("tombol_hapus_all").style.display = "none";
                }
            });
        });

        $(document).ready(function() {
            $('.checkbox').on('click', function() {
                if ($('.checkbox:checked').length >= 1) {
                    document.getElementById("tombol_hapus_all").style.display = "inline";
                } else {
                    document.getElementById("tombol_hapus_all").style.display = "none";
                }
            });
        });
    </script>

    <script>
        function previewImage2() {
            document.getElementById("image-preview").style.display = "block";
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("inputGroupFile01").files[0]);

            oFReader.onload = function(oFREvent) {
                document.getElementById("image-preview").src = oFREvent.target.result;
            };

            var files = $("#inputGroupFile01").get(0).files;

            for (var i = 0; i < files.length; i++) {

                var file = files[i];
                var name = file.name;
                var filter = name.slice(-20);
                var filter_b = '...' + name.slice(-20);
                var size_a = file.size / 1024 / 1024;
                var size_b = size_a.toFixed(2);
                var type = file.type;

                var isi_detail_file = '';
                isi_detail_file += '<dl class="m-b-0">';
                isi_detail_file += '<dt class="text-inverse">Nama File:</dt>';
                isi_detail_file += '<dd class="name">...' + filter + '</dd>';
                isi_detail_file += '<dt class="text-inverse">Type File:</dt>';
                isi_detail_file += '<dd class="name">' + type + '</dd>';
                isi_detail_file += '<dt class="text-inverse">Ukuran File:</dt>';
                isi_detail_file += '<dd class="name">' + size_b + ' MB </dd>';
                isi_detail_file += '<dl>';
                $('#detail-file-upload').html(isi_detail_file);
                $('#teks-gambar').html(filter_b);
            }
        };

        function previewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("inputGroupFile01").files[0]);

            var files = $("#inputGroupFile01").get(0).files;

            for (var i = 0; i < files.length; i++) {

                var file = files[i];
                var name = file.name;
                var filter = name.slice(-20);
                var filter_b = '...' + name.slice(-20);
                var size_a = file.size / 1024 / 1024;
                var size_b = size_a.toFixed(2);
                var type = file.type;
                $('#teks-gambar').html(filter_b);
            }
        };
    </script>
</body>

</html>