<?php
session_start();

// Cek apakah pengguna sudah login dengan memeriksa keberadaan session email
if (!isset($_SESSION['email']) || empty($_SESSION['email'])) {
    // Jika belum login, alihkan kembali ke halaman login
    header("location: ../inc/login.php");
    exit;
}
?>

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

<head>
    <title>Ablepro v8.0 bootstrap admin template by Phoenixcoded</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="keywords" content="">
    <meta name="author" content="Phoenixcoded" />
    
    <link rel="icon" href="/dist/assets/css/style.css" type="image/x-icon">
    <link rel="stylesheet" href="/dist/assets/css/style.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

    <style>
      /* --- Custom Dropdown Menu Style --- */
      .custom-dropdown-menu {
        min-width: 220px !important;
        background-color: #ffffff !important;
        border-radius: 8px !important;
        padding: 8px 0 !important;
        border: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        margin-top: 10px !important;
        z-index: 9999 !important;
      }

      .custom-menu-item {
        display: flex !important;
        align-items: center !important;
        padding: 10px 20px !important;
        text-decoration: none !important;
        color: #4a5568 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
      }

      .custom-menu-item:hover {
        background-color: #f7fafc !important;
        color: #2d3748 !important;
      }

      .custom-menu-item .custom-icon {
        font-size: 20px !important;
        margin-right: 12px !important;
        color: #718096 !important;
      }

      .custom-menu-item span.menu-text {
        flex-grow: 1 !important;
      }

      .custom-badge-new {
        background-color: #8bc34a !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        line-height: 1 !important;
      }

      /* Tombol User Profile Bulat di Header */
      .user-avatar-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.25);
        color: #ffffff !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease;
        cursor: pointer;
      }

      .user-avatar-btn:hover {
        background-color: rgba(255, 255, 255, 0.4);
      }

      .user-avatar-btn i {
        font-size: 22px;
      }
    </style>
</head>

<body class="">
    <div class="loader-bg">
        <div class="loader-track">
            <div class="loader-fill"></div>
        </div>
    </div>

    <nav class="pcoded-navbar menu-light ">
        <div class="navbar-wrapper">
            <div class="navbar-content scroll-div">
                <ul class="nav pcoded-inner-navbar">
                    <li class="nav-item pcoded-menu-caption">
                        <label>TEMPLATE MASTER</label>
                    </li>
                    
                    <li class="nav-item">
                        <a href="?pages=dashboard" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-radio-circle-marked"></i></span>
                            <span class="pcoded-mtext">Dashboard</span>
                        </a>
                    </li>
                    
                    <li class="nav-item">
                        <a href="?pages=tabel" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-radio-circle-marked"></i></span>
                            <span class="pcoded-mtext">Table</span>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="?pages=admin" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-user-check"></i></span>
                            <span class="pcoded-mtext">Data Admin</span>
                        </a>
                    </li>

                    <li class="nav-item pcoded-menu-caption">
                        <label>TRANSAKSI</label>
                    </li>
                    
                    <li class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-radio-circle-marked"></i></span>
                            <span class="pcoded-mtext">Tabungan Nasabah</span>
                        </a>
                        <ul class="pcoded-submenu">
                            <li><a href="#!">Submenu 1</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-shopping-bag"></i></span>
                            <span class="pcoded-mtext">Transaksi Bank Mini</span>
                        </a>
                        <ul class="pcoded-submenu">
                            <li><a href="#!">Submenu 1</a></li>
                        </ul>
                    </li>

                    <li class="nav-item pcoded-menu-caption">
                        <label>NASABAH</label>
                    </li>
                    <li class="nav-item">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-group"></i></span>
                            <span class="pcoded-mtext">Data Nasabah</span>
                            <span class="custom-badge-new ml-auto">New</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-help-circle"></i></span>
                            <span class="pcoded-mtext">Tidak Menabung</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-credit-card"></i></span>
                            <span class="pcoded-mtext">Lihat Saldo Nasabah</span>
                        </a>
                    </li>

                    <li class="nav-item pcoded-menu-caption">
                        <label>REKAP TRANSAKSI</label>
                    </li>
                    <li class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-server"></i></span>
                            <span class="pcoded-mtext">Rekap Tabungan</span>
                        </a>
                        <ul class="pcoded-submenu">
                            <li><a href="#!">Submenu 1</a></li>
                        </ul>
                    </li>
                    <li class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-server"></i></span>
                            <span class="pcoded-mtext">Rekap Pembayaran</span>
                        </a>
                        <ul class="pcoded-submenu">
                            <li><a href="#!">Submenu 1</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-user-voice"></i></span>
                            <span class="pcoded-mtext">Laporan Peringkat</span>
                            <span class="custom-badge-new ml-auto">New</span>
                        </a>
                    </li>

                    <li class="nav-item pcoded-menu-caption">
                        <label>PENGATURAN</label>
                    </li>
                    <li class="nav-item">
                        <a href="?pages=admin&aksi=tambah" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-cog"></i></span>
                            <span class="pcoded-mtext">Tambah User</span>
                            <span class="custom-badge-new ml-auto">New</span>
                        </a>
                    </li>
                    <li class="nav-item pcoded-hasmenu">
                        <a href="#!" class="nav-link">
                            <span class="pcoded-micon"><i class="bx bx-shield"></i></span>
                            <span class="pcoded-mtext">Pengaturan Nasabah</span>
                        </a>
                        <ul class="pcoded-submenu">
                            <li><a href="#!">Submenu 1</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <header class="navbar pcoded-header navbar-expand-lg navbar-light header-blue">
        <div class="m-header">
            <a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
            <a href="#!" class="b-brand">
                <img src="/dist/assets/images/logo.png" alt="" class="logo">
                <img src="/dist/assets/images/logo-icon.png" alt="" class="logo-thumb">
            </a>
            <a href="#!" class="mob-toggler">
                <i class="feather icon-more-vertical"></i>
            </a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="#!" class="pop-search"><i class="feather icon-search"></i></a>
                    <div class="search-bar">
                        <input type="text" class="form-control border-0 shadow-none" placeholder="Search hear">
                        <button type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </li>
            </ul>
            
            <ul class="navbar-nav ml-auto align-items-center">
                <li>
                    <div class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
                        <div class="dropdown-menu dropdown-menu-right notification">
                            <div class="noti-head">
                                <h6 class="d-inline-block m-b-0">Notifications</h6>
                                <div class="float-right">
                                    <a href="#!" class="m-r-10">mark as read</a>
                                    <a href="#!">clear all</a>
                                </div>
                            </div>
                            <ul class="noti-body">
                                <li class="n-title">
                                    <p class="m-b-0">NEW</p>
                                </li>
                                <li class="notification">
                                    <div class="media">
                                        <img class="img-radius" src="/dist/assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                        <div class="media-body">
                                            <p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
                                            <p>New ticket Added</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="noti-footer">
                                <a href="#!">show all</a>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="nav-item">
                    <div class="dropdown drp-user">
                        <a href="javascript:void(0)" class="dropdown-toggle user-avatar-btn" id="userDropdownBtn">
                            <i class='bx bx-user'></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right custom-dropdown-menu" id="userDropdownMenu">
                            <a href="#!" class="custom-menu-item">
                                <i class='bx bx-user custom-icon'></i>
                                <span class="menu-text">Profil</span>
                            </a>
                            <a href="#!" class="custom-menu-item">
                                <i class='bx bx-cog custom-icon'></i>
                                <span class="menu-text">Pengaturan</span>
                                <span class="custom-badge-new">New</span>
                            </a>
                            <a href="#!" class="custom-menu-item">
                                <i class='bx bx-group custom-icon'></i>
                                <span class="menu-text">Pengguna</span>
                            </a>
                            <div class="dropdown-divider my-1"></div>
                            <a href="../inc/logout.php" class="custom-menu-item">
                                <i class='bx bx-lock-alt custom-icon'></i>
                                <span class="menu-text">Keluar</span>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <div class="pcoded-main-container">
        <div class="pcoded-content">
            <?php 
                $path_menu = __DIR__ . '/../inc/menu.php';

                if (file_exists($path_menu)) {
                    include $path_menu;
                } else {
                    // Fallback Routing jika file inc/menu.php tidak ditemukan
                    $pages = $_GET['pages'] ?? '';
                    $aksi  = $_GET['aksi'] ?? '';

                    if ($pages == 'admin') {
                        if ($aksi == 'tambah') {
                            include 'user_admin/tambah.php';
                        } elseif ($aksi == 'edit') {
                            include 'user_admin/edit.php';
                        } elseif ($aksi == 'delete') {
                            include 'user_admin/hapus.php';
                        } else {
                            include 'user_admin/tampil.php';
                        }
                    }
                }
            ?>
        </div>
    </div>

    <script src="/dist/assets/js/vendor-all.min.js"></script>
    <script src="/dist/assets/js/plugins/bootstrap.min.js"></script>
    <script src="/dist/assets/js/ripple.js"></script>
    <script src="/dist/assets/js/pcoded.min.js"></script>
    <script src="/dist/assets/js/plugins/apexcharts.min.js"></script>
    <script src="/dist/assets/js/pages/dashboard-main.js"></script>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('userDropdownBtn');
        var menu = document.getElementById('userDropdownMenu');

        if (btn && menu) {
          btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            menu.classList.toggle('show');
          });

          document.addEventListener('click', function(e) {
            if (!btn.contains(e.target) && !menu.contains(e.target)) {
              menu.classList.remove('show');
            }
          });
        }
      });
    </script>
</body>

</html>