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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $title; ?> - Admin Panel TKA</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">

    <style>
        :root {
            --sidebar-bg: #2c3e50;
            --sidebar-text: #ecf0f1;
            --sidebar-active: #3498db;
            --header-bg: #ffffff;
            --content-bg: #f8f9fa;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--content-bg);
        }

        #wrapper {
            display: flex;
        }

        #sidebar {
            min-width: 250px;
            max-width: 250px;
            background: var(--sidebar-bg);
            color: var(--sidebar-text);
            transition: all 0.3s;
            min-height: 100vh;
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        #sidebar ul.components {
            padding: 20px 0;
        }

        #sidebar ul li a {
            padding: 15px 20px;
            font-size: 1.1em;
            display: block;
            color: var(--sidebar-text);
            text-decoration: none;
            border-left: 4px solid transparent;
        }

        #sidebar ul li a:hover {
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid var(--sidebar-active);
        }

        #sidebar ul li.active>a {
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid var(--sidebar-active);
        }

        #sidebar ul li a i {
            margin-right: 10px;
        }

        #content {
            width: 100%;
            padding: 20px;
        }

        .navbar {
            background: var(--header-bg) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .card {
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            border: none;
            margin-bottom: 20px;
        }

        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
            font-weight: 600;
        }

        .btn-primary {
            background: linear-gradient(to right, #3498db, #2980b9);
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
        }

        .btn-success {
            background: linear-gradient(to right, #27ae60, #219653);
            border: none;
        }

        .btn-danger {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            border: none;
        }

        .stat-card {
            border-radius: 10px;
            color: white;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        .stat-card-1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .stat-card-2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .stat-card-3 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .table th {
            font-weight: 600;
            color: var(--sidebar-bg);
        }

        .badge {
            padding: 5px 10px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3><i class="bi bi-clipboard-data"></i> Admin TKA</h3>
                <p class="mb-0">Welcome, <?php echo $admin; ?></p>
            </div>

            <ul class="list-unstyled components">
                <li class="<?php echo ($title == 'Dashboard') ? 'active' : ''; ?>">
                    <a href="<?php echo site_url('admin/dashboard'); ?>">
                        <i class="bi bi-speedometer2"></i> Dashboard
                    </a>
                </li>
                <li class="<?php echo ($title == 'Data Hasil TKA') ? 'active' : ''; ?>">
                    <a href="<?php echo site_url('admin/hasil_tka'); ?>">
                        <i class="bi bi-file-earmark-text"></i> Data Hasil TKA
                    </a>
                </li>
                <li class="<?php echo ($title == 'Manajemen Token') ? 'active' : ''; ?>">
                    <a href="<?php echo site_url('admin/tokens'); ?>">
                        <i class="bi bi-key"></i> Manajemen Token
                    </a>
                </li>
                <li class="<?php echo ($title == 'Manajemen Admin') ? 'active' : ''; ?>">
                    <a href="<?php echo site_url('admin/admins'); ?>">
                        <i class="bi bi-people"></i> Manajemen Admin
                    </a>
                </li>
                <li>
                    <a href="<?php echo site_url('auth/logout'); ?>">
                        <i class="bi bi-box-arrow-right"></i> Logout
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Page Content -->
        <div id="content">
            <!-- Top Navbar -->
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="btn btn-primary">
                        <i class="bi bi-list"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="<?php echo site_url(); ?>" target="_blank">
                                    <i class="bi bi-globe"></i> View Frontend
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                    <i class="bi bi-person-circle"></i>
                                    <?php echo $this->session->userdata('nama_lengkap'); ?>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item"
                                            href="<?php echo site_url('admin/dashboard'); ?>">Dashboard</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item"
                                            href="<?php echo site_url('auth/logout'); ?>">Logout</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <!-- Page Content -->
            <div class="container-fluid">
                <!-- Flash Messages -->
                <?php if ($this->session->flashdata('success')): ?>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle me-2"></i>
                        <?php echo $this->session->flashdata('success'); ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>

                <?php if ($this->session->flashdata('error')): ?>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <?php echo $this->session->flashdata('error'); ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>