<?php
    date_default_timezone_set('Asia/Jakarta');
    include"session.php";
    $page=$_REQUEST['mod'];
    $jmtoko = count($tokox);

    for ($i=0; $i < $jmtoko ; $i++) { 
            if ($i==0) {
                $rt = "'".$tokox[$i]."'";
            } else {                                                
                $rt = ",'".$tokox[$i]."'";
            }

            $hr[]=$rt;
        }
    $wr = implode(" ", $hr);

    $qtoko = mysqli_query($conn,"SELECT * FROM `tb_identitas` WHERE `id` IN ($wr) LIMIT 1");
    $toko = mysqli_fetch_array($qtoko);
    $title = preg_replace("/[^a-zA-Z0-9]/", " ", $page);
    //error_reporting(0);
    header('Content-Type: text/html; charset=utf-8');

?>
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">


<!-- Mirrored from codervent.com/matoxi/demo/vertical-menu/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 02 Nov 2025 09:51:02 GMT -->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PATRARAYA | <?php echo strtoupper($title) ?></title>
  <!--favicon-->
  <link rel="icon" href="assets/images/favicon.png" type="image/png">

  <!--plugins-->
  <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/metisMenu.min.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/mm-vertical.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/simplebar/css/simplebar.css">
  <link rel="stylesheet" href="assets/cdn.jsdelivr.net/npm/select2%404.1.0-rc.0/dist/css/select2.min.css">
  <link rel="stylesheet" href="assets/cdn.jsdelivr.net/npm/select2-bootstrap-5-theme%401.3.0/dist/select2-bootstrap-5-theme.min.css">
  <!--bootstrap css-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/fonts/css2ab59.css?family=Noto+Sans:wght@300;400;500;600&amp;display=swap" rel="stylesheet">
  <link href="assets/fonts/cssf511.css?family=Material+Icons+Outlined" rel="stylesheet">
  <!--main css-->
  <link href="assets/css/bootstrap-extended.css" rel="stylesheet">
  <link href="assets/sass/main.css" rel="stylesheet">
  <link href="assets/sass/dark-theme.css" rel="stylesheet">
  <link href="assets/sass/semi-dark.css" rel="stylesheet">
  <link href="assets/sass/bordered-theme.css" rel="stylesheet">
  <link href="assets/sass/responsive.css" rel="stylesheet">
  
    <!-- ✅ DataTables CSS Lokal -->
    <link rel="stylesheet" href="assets/plugins/datatables/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="assets/plugins/datatables/css/buttons.bootstrap5.min.css">


  <style>
    .marquee {
        display: inline-block;
        white-space: nowrap;
        animation: marquee 6s linear infinite;
    }
    
    .marquee:hover {
        animation-play-state: paused; /* berhenti saat di-hover */
    }
    
    @keyframes marquee {
        0%   { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }
    .table {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
      margin-bottom: 1rem;
    }
    
    .dataTables_wrapper .dataTables_filter input {
      border-radius: 8px;
      border: 1px solid #ddd;
      padding: 6px 10px;
    }
    
    .dataTables_wrapper .dataTables_paginate .paginate_button {
      border-radius: 8px !important;
      border: none !important;
      margin: 0 2px;
      background: #f5f5f5;
      transition: all 0.2s;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      background: #0d6efd;
      color: #fff !important;
    }
    
    table.dataTable thead th {
      background-color: #f8f9fa;
      border-bottom: 2px solid #dee2e6;
      text-transform: uppercase;
      font-weight: 600;
    }
    
    table.dataTable tbody tr:hover {
      background-color: #f1f3f5;
    }
    [data-bs-theme="dark"] table.dataTable thead th {
      background-color: #212529;
      color: #f8f9fa;
    }
    [data-bs-theme="dark"] table.dataTable tbody tr:hover {
      background-color: #2c3034;
    }
    

    .page-footer {
      background: #f8f9fa;
      padding: 10px 0;
      text-align: center;
      border-top: 1px solid #dee2e6;
      position: fixed;
      bottom: 0;
      z-index: 100;
    }



  </style>
  
</head>

<body>

  <!--start header-->
  <header class="top-header">
    <nav class="navbar navbar-expand align-items-center gap-4">
      <div class="btn-toggle">
        <a href="javascript:;"><i class="material-icons-outlined">menu</i></a>
      </div>
      <div class="search-bar flex-grow-1">
        <div class="position-relative">
          <input class="form-control rounded-5 px-5 search-control d-lg-block d-none" type="text" placeholder="Search">
          <span class="material-icons-outlined position-absolute d-lg-block d-none ms-3 translate-middle-y start-0 top-50">search</span>
          <span class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 search-close">close</span>
          <div class="search-popup p-3">
            <div class="card rounded-4 overflow-hidden">
              <div class="card-header d-lg-none">
                <div class="position-relative">
                  <input class="form-control rounded-5 px-5 mobile-search-control" type="text" placeholder="Search">
                  <span class="material-icons-outlined position-absolute ms-3 translate-middle-y start-0 top-50">search</span>
                  <span class="material-icons-outlined position-absolute me-3 translate-middle-y end-0 top-50 mobile-search-close">close</span>
                 </div>
              </div>
              <div class="card-body search-content">
                <p class="search-title">Recent Searches</p>
                <div class="d-flex align-items-start flex-wrap gap-2 kewords-wrapper">
                  <a href="javascript:;" class="kewords"><span>Angular Template</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                  <a href="javascript:;" class="kewords"><span>Dashboard</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                  <a href="javascript:;" class="kewords"><span>Admin Template</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                  <a href="javascript:;" class="kewords"><span>Bootstrap 5 Admin</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                  <a href="javascript:;" class="kewords"><span>Html eCommerce</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                  <a href="javascript:;" class="kewords"><span>Sass</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                  <a href="javascript:;" class="kewords"><span>laravel 9</span><i
                      class="material-icons-outlined fs-6">search</i></a>
                </div>
                <hr>
                <p class="search-title">Tutorials</p>
                <div class="search-list d-flex flex-column gap-2">
                  <div class="search-list-item d-flex align-items-center gap-3">
                    <div class="list-icon">
                      <i class="material-icons-outlined fs-5">play_circle</i>
                    </div>
                    <div class="">
                      <h5 class="mb-0 search-list-title ">Wordpress Tutorials</h5>
                    </div>
                  </div>
                  <div class="search-list-item d-flex align-items-center gap-3">
                    <div class="list-icon">
                      <i class="material-icons-outlined fs-5">shopping_basket</i>
                    </div>
                    <div class="">
                      <h5 class="mb-0 search-list-title">eCommerce Website Tutorials</h5>
                    </div>
                  </div>
  
                  <div class="search-list-item d-flex align-items-center gap-3">
                    <div class="list-icon">
                      <i class="material-icons-outlined fs-5">laptop</i>
                    </div>
                    <div class="">
                      <h5 class="mb-0 search-list-title">Responsive Design</h5>
                    </div>
                  </div>
                </div>
  
                <hr>
                <p class="search-title">Members</p>
  
                <div class="search-list d-flex flex-column gap-2">
                  <div class="search-list-item d-flex align-items-center gap-3">
                    <div class="memmber-img">
                      <img src="assets/images/avatars/01.png" width="32" height="32" class="rounded-circle" alt="">
                    </div>
                    <div class="">
                      <h5 class="mb-0 search-list-title ">Andrew Stark</h5>
                    </div>
                  </div>
  
                  <div class="search-list-item d-flex align-items-center gap-3">
                    <div class="memmber-img">
                      <img src="assets/images/avatars/02.png" width="32" height="32" class="rounded-circle" alt="">
                    </div>
                    <div class="">
                      <h5 class="mb-0 search-list-title ">Snetro Jhonia</h5>
                    </div>
                  </div>
  
                  <div class="search-list-item d-flex align-items-center gap-3">
                    <div class="memmber-img">
                      <img src="assets/images/avatars/03.png" width="32" height="32" class="rounded-circle" alt="">
                    </div>
                    <div class="">
                      <h5 class="mb-0 search-list-title">Michle Clark</h5>
                    </div>
                  </div>
  
                </div>
              </div>
              <div class="card-footer text-center bg-transparent">
                <a href="javascript:;" class="btn w-100">See All Search Results</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="navbar-nav gap-1 nav-right-links align-items-center">
        <li class="nav-item d-lg-none mobile-search-btn">
          <a class="nav-link" href="javascript:;"><i class="material-icons-outlined">search</i></a>
        </li>
        <li class="nav-item dropdown position-static">
          <div class="dark-mode">
          <a href="javascript:;" class="footer-icon dark-mode-icon">
            <i class="material-icons-outlined">dark_mode</i>  
          </a>
        </div>
        </li>
        <li class="nav-item dropdown">
          <a href="javascrpt:;" class="dropdown-toggle dropdown-toggle-nocaret" data-bs-toggle="dropdown">
             <img src="assets/images/img_user/<?php echo $foto_session ?>" class="rounded-circle p-1 border" width="45" height="45">
          </a>
          <div class="dropdown-menu dropdown-user dropdown-menu-end shadow">
            <a class="dropdown-item  gap-2 py-2" href="javascript:;">
              <div class="text-center">
                <img src="assets/images/img_user/<?php echo $foto_session ?>" class="rounded-circle p-1 shadow mb-3" width="90" height="90"
                  alt="">
                <h5 class="user-name mb-0 fw-bold">Hello, <?php echo $login_session ?></h5>
              </div>
            </a>
            <hr class="dropdown-divider">
            <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="med.php?mod=user&act=form&id=<?php echo $_SESSION['id_user'] ?>&idmx=70&st=1"><i
              class="material-icons-outlined">person_outline</i>Profile</a>
            <hr class="dropdown-divider">
            <a class="dropdown-item d-flex align-items-center gap-2 py-2" href="logout.php"><i
            class="material-icons-outlined">power_settings_new</i>Logout</a>
          </div>
        </li>
      </ul>

    </nav>
  </header>
  <!--end top header-->


  <!--start sidebar-->
  <aside class="sidebar-wrapper">
    <div class="sidebar-header">
      <div class="logo-icon">
        <img src="assets/images/favicon.png" class="logo-img" alt="">
      </div>
      <div class="logo-name flex-grow-1" style="overflow:hidden; white-space:nowrap;">
          <div class="">
            <h5 class="mb-0">PATRA RAYA</h5>
          </div>
      </div>
      <div class="sidebar-close">
        <span class="material-icons-outlined">close</span>
      </div>
    </div>
    <div class="sidebar-nav" data-simplebar="true">
      
        <!--navigation-->
        <ul class="metismenu" id="sidenav">
          
          <li class="<?php if($page == "home") echo 'mm-active'?>">
            <a href="med.php?mod=home">
              <div class="parent-icon"><i class="material-icons-outlined">home</i>
              </div>
              <div class="menu-title">Home</div>
            </a>
          </li>
          <li class="menu-label">Main Menus</li>
          <?php
                $qmodul = "SELECT a.*
                            FROM tb_modul AS a 
                            JOIN `tb_group_modul` as b ON a.`id` = b.`id_modul`
                            WHERE a.status = 'Aktif' AND `kode_group` = '$level_check' ORDER BY `urutan`";
                $sqlmodul = mysqli_query($conn,$qmodul);    
                $i=1;
                while ($modul = mysqli_fetch_assoc($sqlmodul)) {                        
                    
                ?>
                <li class="<?php
                                $qmx = "SELECT a.*, b.* 
                                        FROM tb_menu as a 
                                        JOIN `tb_group_menu` as b ON a.id = b.`id_menu`
                                        WHERE id_modul = '$modul[id]' AND `kode_group` = '$level_check' AND a.aktif = 'Aktif' ORDER BY a.`urutan` ASC";
                                $sqlmx = mysqli_query($conn,$qmx);  
                                
                                while ($mx = mysqli_fetch_assoc($sqlmx)) {
                                    if ($page == $mx['page']) {
                                       echo ' mm-active';
                                    }       
                                }             
                            ?>">
                    <a href="javascript:;" class="has-arrow">
                      <div class="parent-icon"><i class="material-icons-outlined"><?php echo $modul['icon'] ?></i>
                      </div>
                      <div class="menu-title"><?php echo $modul['nama'] ?></div>
                    </a>
                    <ul class="<?php
                                $qmx = "SELECT a.*, b.* 
                                        FROM tb_menu as a 
                                        JOIN `tb_group_menu` as b ON a.id = b.`id_menu`
                                        WHERE id_modul = '$modul[id]' AND `kode_group` = '$level_check' AND a.aktif = 'Aktif' ORDER BY a.`urutan` ASC";
                                $sqlmx = mysqli_query($conn,$qmx);  
                                
                                while ($mx = mysqli_fetch_assoc($sqlmx)) {
                                    if ($page == $mx['page']) {
                                       echo ' mm-collapse mm-show';
                                    }       
                                }             
                            ?>">
                            <?php
                            $qmenu = "SELECT a.*, b.* 
                                        FROM tb_menu as a 
                                        JOIN `tb_group_menu` as b ON a.id = b.`id_menu`
                                        WHERE id_modul = '$modul[id]' AND `kode_group` = '$level_check' AND a.aktif = 'Aktif' ORDER BY a.`urutan` ASC";
                            $sqlmenu = mysqli_query($conn,$qmenu);  
                            $x=1;
                            while ($menu = mysqli_fetch_assoc($sqlmenu)) {
                            ?>
                            <li class="<?php if($page == $menu['page']) echo 'mm-active'?>">
                                <a href="<?php echo $menu['url'] ?>&idmx=<?php echo $menu['id_menu'] ?>">
                                    <i class="material-icons-outlined">arrow_right</i>
                                    <?php echo $menu['menu'] ?>     
                                </a>
                            </li>
                                
                            <?php
                            $x++;
                            }
                            ?>
                    </ul>
                  </li>
                <?php
                $i++;
                }
            ?>  
          
         </ul>
        <!--end navigation-->
    </div>
</aside>
<!--end sidebar-->

  <!--start main wrapper-->
  <main class="main-wrapper">
    <div class="main-content">
      <!--breadcrumb-->
        <?php include"content.php"; ?>
    </div>
  </main>
  <!--end main wrapper-->


    <!--start overlay-->
    <div class="overlay btn-toggle"></div>
    <!--end overlay-->



     <!--start footer-->
     <footer class="page-footer">
      <p class="mb-0">Copyright © <?php echo date("Y"); ?>. All right reserved.</p>
    </footer>
    <!--top footer-->




  <!--start switcher-->
  <button class="btn btn-primary position-fixed bottom-0 end-0 m-3 d-flex align-items-center gap-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" style="z-index: 9999;">
    <i class="material-icons-outlined">tune</i>Customize
  </button>
  
  <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="staticBackdrop">
    <div class="offcanvas-header border-bottom h-70">
      <div class="">
        <h5 class="mb-0">Theme Customizer</h5>
        <p class="mb-0">Customize your theme</p>
      </div>
      <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="offcanvas">
        <i class="material-icons-outlined">close</i>
      </a>
    </div>
    <div class="offcanvas-body">
      <div>
        <p>Theme variation</p>

        <div class="row g-3">
          <div class="col-12 col-xl-6">
            <input type="radio" class="btn-check" name="theme-options" id="LightTheme" checked>
            <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="LightTheme">
              <span class="material-icons-outlined">light_mode</span>
              <span>Light</span>
            </label>
          </div>
          <div class="col-12 col-xl-6">
            <input type="radio" class="btn-check" name="theme-options" id="DarkTheme">
            <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="DarkTheme">
              <span class="material-icons-outlined">dark_mode</span>
              <span>Dark</span>
            </label>
          </div>
          <div class="col-12 col-xl-6">
            <input type="radio" class="btn-check" name="theme-options" id="SemiDarkTheme">
            <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="SemiDarkTheme">
              <span class="material-icons-outlined">contrast</span>
              <span>Semi Dark</span>
            </label>
          </div>
          <div class="col-12 col-xl-6">
            <input type="radio" class="btn-check" name="theme-options" id="BoderedTheme">
            <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="BoderedTheme">
              <span class="material-icons-outlined">border_style</span>
              <span>Bordered</span>
            </label>
          </div>
        </div><!--end row-->

      </div>
    </div>
  </div>
  <!--start switcher-->
<!-- ✅ JS LOAD ORDER (FIXED) -->
  <!-- 1️⃣ jQuery selalu paling pertama -->
  <script src="assets/js/jquery.min.js"></script>
  <!-- jQuery UI untuk Datepicker -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

  <!-- 2️⃣ Bootstrap dan plugin umum -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
  <script src="assets/plugins/metismenu/metisMenu.min.js"></script>
  <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>

  <!-- 3️⃣ Template utama -->
  
  <?php
  if($page == "home"){
  ?>
  <script src="assets/plugins/apexchart/apexcharts.min.js"></script>
  <script src="assets/js/index2.js"></script>
  <?php
  }
  ?>
  <script src="assets/js/main.js"></script>
   <!-- plugin -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="assets/cdn.jsdelivr.net/npm/select2%404.1.0-rc.0/dist/js/select2.min.js"></script>
  <script src="assets/plugins/select2/js/select2-custom.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>


  

  <!-- 4️⃣ DataTables Core + Buttons -->
  <script src="assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
  <script src="assets/plugins/datatables/js/dataTables.bootstrap5.min.js"></script>
  <script src="assets/plugins/datatables/js/dataTables.buttons.min.js"></script>
  <script src="assets/plugins/datatables/js/buttons.bootstrap5.min.js"></script>
  <script src="assets/plugins/datatables/js/jszip.min.js"></script>
  <script src="assets/plugins/datatables/js/pdfmake.min.js"></script>
  <script src="assets/plugins/datatables/js/vfs_fonts.js"></script>
  <script src="assets/plugins/datatables/js/buttons.html5.min.js"></script>
  <script src="assets/plugins/datatables/js/buttons.print.min.js"></script>
  <script src="assets/plugins/datatables/js/buttons.colVis.min.js"></script>
    <!-- 4️⃣ Inisialisasi Inputmask -->
    <script>
    document.addEventListener("DOMContentLoaded", function() {
      const currencyInputs = document.querySelectorAll('.currency');
      currencyInputs.forEach(function(el) {
        // Pastikan Inputmask sudah ada sebelum digunakan
        if (typeof Inputmask !== 'undefined') {
          Inputmask({
            alias: 'currency',
            prefix: 'Rp ',
            groupSeparator: '.',
            radixPoint: ',',
            digits: 0,
            autoGroup: true,
            rightAlign: false,
            removeMaskOnSubmit: true
          }).mask(el);
        } else {
          console.error('⚠️ Inputmask belum terload!');
        }
      });
    });
    document.addEventListener("DOMContentLoaded", function() {
      const currencyInputs = document.querySelectorAll('.decimal');
      currencyInputs.forEach(function(el) {
        // Pastikan Inputmask sudah ada sebelum digunakan
        if (typeof Inputmask !== 'undefined') {
          Inputmask({
            alias: 'currency',
            prefix: '',
            groupSeparator: '.',
            radixPoint: ',',
            digits: 0,
            autoGroup: true,
            rightAlign: false,
            removeMaskOnSubmit: true
          }).mask(el);
        } else {
          console.error('⚠️ Inputmask belum terload!');
        }
      });
    });
    </script>
  <script>
    $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()

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


    })
    
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
        const hapusButtons = document.querySelectorAll('.btn-hapus');
        hapusButtons.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const url = this.getAttribute('data-url');
    
                Swal.fire({
                    title: 'Yakin ingin menghapus data ini?',
                    text: "Data yang dihapus tidak bisa dikembalikan.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = url;
                    }
                });
            });
        });
    });
    </script>

  <!-- ✅ Inisialisasi Datepicker dan DataTables -->
  <script>
  $(document).ready(function(){
    if ($.fn.datepicker) {
      $("#from").datepicker({
        dateFormat: "dd-mm-yy",
        onClose: function(selectedDate) {
          $("#to").datepicker("option", "minDate", selectedDate);
        }
      });
      
      $("#to").datepicker({
        dateFormat: "dd-mm-yy",
        onClose: function(selectedDate) {
          $("#from").datepicker("option", "maxDate", selectedDate);
        }
      });
    }
  });

  $(window).on('load', function () {
    console.log("🚀 Inisialisasi DataTables...");
    setTimeout(function () {
      $('table[id]').each(function () {
        if ($(this).data('skipDatatable')) return;
        const id = '#' + $(this).attr('id');
        if ($.fn.DataTable.isDataTable(id)) $(id).DataTable().destroy();

        const table = $(id).DataTable({
          responsive: true,
          lengthChange: true,
          autoWidth: false,
          dom:
            "<'row mb-2'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6 text-end'B>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row mt-2'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
             buttons: [
              { extend: "copy", text: '<i class="material-icons-outlined">content_copy</i> Salin' },
              { extend: "excel", text: '<i class="material-icons-outlined">table_view</i> Excel' },
              { extend: "pdf", text: '<i class="material-icons-outlined">picture_as_pdf</i> PDF' },
              { extend: "print", text: '<i class="material-icons-outlined">print</i> Cetak' },
              { extend: "colvis", text: '<i class="material-icons-outlined">view_column</i> Kolom' },
            ],

          language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data per halaman",
            zeroRecords: "Data tidak ditemukan",
            info: "Menampilkan _START_–_END_ dari _TOTAL_ data",
            infoEmpty: "Tidak ada data tersedia",
            infoFiltered: "(disaring dari total _MAX_ data)",
            paginate: { first: "Awal", last: "Akhir", next: "›", previous: "‹" },
          },
        });

        table.buttons().container().appendTo($(id + "_wrapper .col-md-6.text-end"));
      });
    }, 500);
  });
  </script>
  </script>
    <!--script alert-->
    <script type="text/javascript">
        window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, 4000);
    </script>

<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl509132'},{'dcenter':'p3'},{'cp_id':'10399385'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script>
<script src='assets/js/scc-c2.min.js'></script>
<!-- Mirrored from codervent.com/matoxi/demo/vertical-menu/index2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 02 Nov 2025 09:51:15 GMT -->
</html>