@extends('layouts.layoutadmin')
@section('title', 'Kelola Admin')

@section('content')
    <style>
        body {
            background: #f4f4f4;
        }

        .admin-dashboard {
            display: flex;
            min-height: 100vh;
            background: #f4f4f4;
        }

        .sidebar {
            width: 260px;
            background: #23272b;
            color: #fff;
            display: flex;
            flex-direction: column;
            padding: 24px 0 0 0;
            border-right: 1px solid #e5e7eb;
        }

        .sidebar .sidebar-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 24px 24px 24px;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .sidebar .sidebar-header i {
            font-size: 1.6rem;
            color: #22c1b6;
        }

        .sidebar .sidebar-header span {
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
        }

        .sidebar-nav {
            flex: 1;
            padding: 0 0 0 0;
        }

        .sidebar-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-nav li {
            margin-bottom: 4px;
        }

        .sidebar-nav a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 28px;
            color: #bfc5c9;
            text-decoration: none;
            border-radius: 8px 0 0 8px;
            font-size: 1rem;
            transition: background 0.2s, color 0.2s;
        }

        .sidebar-nav a.active,
        .sidebar-nav a:hover {
            background: #22c1b6;
            color: #fff;
        }

        .sidebar-footer {
            padding: 18px 24px;
            border-top: 1px solid #333;
            background: #23272b;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.98rem;
        }

        .sidebar-footer .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #444;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .sidebar-footer .user-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .sidebar-footer .user-info span {
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
        }

        .sidebar-footer .user-info small {
            color: #bfc5c9;
            font-size: 0.95rem;
        }

        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #f4f4f4;
        }

        .main-header {
            background: #fff;
            padding: 24px 32px 16px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e5e7eb;
        }

        /* Keep admin header/navbar white regardless of site dark/light mode */
        body.dark-mode .admin-dashboard .main-header,
        .admin-dashboard .main-header {
            background: #ffffff !important;
            color: #222 !important;
            border-bottom: 1px solid #e5e7eb !important;
        }

        /* Ensure header child elements keep their intended colors in dark mode */
        body.dark-mode .admin-dashboard .main-header .title,
        body.dark-mode .admin-dashboard .main-header .subtitle,
        body.dark-mode .admin-dashboard .main-header .header-actions,
        body.dark-mode .admin-dashboard .main-header .header-actions * {
            color: inherit !important;
            background: transparent !important;
        }
        
        .main-header .title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #222;
        }

        .main-header .subtitle {
            color: #6b7280;
            font-size: 1.05rem;
            margin-top: 2px;
        }

        .main-header .header-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .main-header .header-actions button {
            background: #d72660;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 8px 18px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
        }

        .main-header .header-actions button:hover {
            background: #b61f50;
        }

        .main-header .header-actions i {
            font-size: 1.3rem;
            color: #535963;
            background: #f4f4f4;
            border-radius: 50%;
            padding: 6px;
            margin-right: 2px;
            cursor: pointer;
        }

        .main-content {
            padding: 32px;
        }

        .content-wrapper {
            display: flex;
            gap: 32px;
            align-items: flex-start;
        }

        .form-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
            padding: 32px;
            max-width: 600px;
            flex: 1;
        }

        .info-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
            padding: 32px;
            max-width: 400px;
            flex: 0 0 400px;
        }

        .info-container h3 {
            color: #374151;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 2px solid #22c1b6;
            padding-bottom: 8px;
        }

        .region-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }

        .region-table th {
            background: #f8f9fa;
            color: #374151;
            font-weight: 600;
            padding: 12px 8px;
            text-align: left;
            border-bottom: 2px solid #e5e7eb;
        }

        .region-table td {
            padding: 10px 8px;
            border-bottom: 1px solid #e5e7eb;
            color: #6b7280;
        }

        .region-table tr:hover {
            background: #f8f9fa;
        }

        .site-badge {
            background: #22c1b6;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        @media (max-width: 1200px) {
            .content-wrapper {
                flex-direction: column;
            }

            .info-container {
                max-width: none;
                flex: 1;
            }
        }

        .form-group {
            margin-bottom: 24px;
        }

        .form-group label {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #22c1b6;
        }

        .form-group input:disabled {
            background-color: #f9fafb;
            color: #6b7280;
        }

        .btn-primary {
            background: #22c1b6;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-primary:hover {
            background: #1da89c;
        }

        .btn-secondary {
            background: #6b7280;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
            margin-right: 12px;
        }

        .btn-secondary:hover {
            background: #4b5563;
        }

        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 24px;
            font-size: 1rem;
        }

        .alert-success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }

        .alert-error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

        /* Styles untuk tabel admin */
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 16px;
        }

        .admin-table th {
            background: #f8f9fa;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #374151;
            border-bottom: 2px solid #e5e7eb;
        }

        .admin-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
            color: #6b7280;
        }

        .admin-table tr:hover {
            background: #f8f9fa;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-edit,
        .btn-delete {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .btn-edit {
            background: #22c1b6;
            color: #fff;
        }

        .btn-delete {
            background: #ef4444;
            color: #fff;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background: #fff;
            margin: 10% auto;
            padding: 24px;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            position: relative;
        }

        .close {
            position: absolute;
            right: 24px;
            top: 24px;
            font-size: 24px;
            cursor: pointer;
        }

        h3 {
            color: #374151;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 2px solid #22c1b6;
            padding-bottom: 8px;
        }
    </style>

    <div class="admin-dashboard">
        @include('admin.components.sidebar', [
            'active' => 'kelolaAdmin',
            'open' => 'sidebar-dropdown.dropdown-toggle.pengaturan',
        ])
        <!-- <aside class="sidebar">
                <div class="sidebar-header">
                    <i class="fas fa-building"></i>
                    <span>ADMIN<br><small style="font-weight:400;color:#bfc5c9;">Kementrian PKP</small></span>
                </div>
                <nav class="sidebar-nav">
                    <ul>
                        <li><a href="/admin/dashboard"><i class="fas fa-home"></i> Beranda</a></li>
                        <li style="position:relative;">
                            <a href="#" id="kelola-admin-link"
                                style="display:flex;align-items:center;justify-content:space-between;">
                                <span><i class="fas fa-users"></i> Kelola Admin</span>
                                <i class="fas fa-caret-down"></i>
                            </a>
                            <ul id="kelola-admin-dropdown"
                                style="display:block;position:absolute;left:0;top:100%;background:#23272b;border-radius:0 0 8px 8px;box-shadow:0 2px 12px rgba(0,0,0,0.08);min-width:180px;z-index:10;padding:0;margin:0;">
                                <li><a href="{{ route('admin.kelolaAdmin') }}" class="active"
                                        style="padding:10px 28px;color:#fff;text-decoration:none;font-size:1rem;background:#22c1b6;">
                                        <i class="fas fa-user-plus"></i> Registrasi Admin
                                    </a></li>
                                <li><a href="{{ route('admin.manajemenAdmin') }}"
                                        style="padding:10px 28px;color:#bfc5c9;text-decoration:none;font-size:1rem;">
                                        <i class="fas fa-users-cog"></i> Manajemen Admin
                                    </a></li>
                            </ul>
                        </li>
                        <li><a href="#"><i class="fas fa-newspaper"></i> Berita</a></li>
                        <li><a href="#"><i class="fas fa-concierge-bell"></i> Layanan</a></li>
                        <li><a href="#"><i class="fas fa-project-diagram"></i> Proyek</a></li>
                        <li><a href="#"><i class="fas fa-images"></i> Galeri</a></li>
                        <li><a href="#"><i class="fas fa-user-shield"></i> Hak Akses</a></li>
                        <li style="margin-top:12px;"><a href="#"><i class="fas fa-chart-bar"></i> Statistik</a></li>
                        <li><a href="#"><i class="fas fa-file-export"></i> Ekspor Data</a></li>
                        <li style="margin-top:12px;"><a href="#"><i class="fas fa-cog"></i> Pengaturan Situs</a></li>
                        <li><a href="#"><i class="fas fa-database"></i> Backup & Restore</a></li>
                    </ul>
                </nav>
                <div class="sidebar-footer">
                    <div class="avatar">AD</div>
                    <div class="user-info">
                        <span>Admin User</span>
                        <small>admin@kementrianpkp.go.id</small>
                    </div>
                </div>
            </aside> -->

        <main class="main">
            <div class="main-header">
                <div>
                    <div class="title">Kelola Admin</div>
                    <div class="subtitle">Registrasi Admin Baru</div>
                </div>
                <div class="header-actions">
                    <a href="feedback"><i class="fas fa-bell"></i></a>
                    <a href="pengaturan-situs"><i class="fas fa-cog"></i></a>
                    <form method="POST" action="{{ route('logout') }}" style="display:inline;">
                        @csrf
                        <button type="submit">Keluar</button>
                    </form>
                </div>
            </div>

            <div class="main-content">
                <div class="content-wrapper">
                    <div class="form-container">
                        <div id="alert-container"></div>

                        <!-- Form Registrasi Admin -->
                        <form id="registerAdminForm">
                            <h3>Registrasi Admin Baru</h3>
                            <div class="form-group">
                                <label for="email">Email Admin</label>
                                <input type="email" id="email" name="email" required>
                            </div>

                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" id="password" name="password" required>
                            </div>

                            <div class="form-group">
                                <label for="role">Role</label>
                                <input type="text" id="role" name="role" value="admin" disabled>
                            </div>

                            <div class="form-group">
                                <label for="phone">Nomor Telepon</label>
                                <input type="tel" id="phone" name="phone" required>
                            </div>

                            <div class="form-group">
                                <label for="site_id">Site ID</label>
                                <input type="number" id="site_id" name="site_id" min="1" max="25" required>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="btn-primary">Registrasi Admin</button>
                                <button type="reset" class="btn-secondary">Reset</button>
                            </div>
                        </form>

                    </div>

                    <div class="info-container">
                        <h3>Informasi Wilayah & Site ID</h3>
                        <div style="max-height: 500px; overflow-y: auto;">
                            <table class="region-table">
                                <thead>
                                    <tr>
                                        <th>Site</th>
                                        <th>Provinsi</th>
                                        <th>Kab/Kota</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><span class="site-badge">1</span></td>
                                        <td>Klinik PKP Jawa III</td>
                                        <td>jawa-iii</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">2</span></td>
                                        <td>Provinsi DIY</td>
                                        <td>diy</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">3</span></td>
                                        <td>Provinsi Jawa Tengah</td>
                                        <td>jateng</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">4</span></td>
                                        <td>Kota Yogyakarta</td>
                                        <td>jogja</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">5</span></td>
                                        <td>Kab Sleman</td>
                                        <td>sleman</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">6</span></td>
                                        <td>Kab Bantul</td>
                                        <td>bantul</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">7</span></td>
                                        <td>Kab Gunungkidul</td>
                                        <td>gunungkidul</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">8</span></td>
                                        <td>Kab Kulon Progo</td>
                                        <td>kulon-progo</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">9</span></td>
                                        <td>Kabupaten Banjarnegara</td>
                                        <td>banjarnegara</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">10</span></td>
                                        <td>Kabupaten Banyumas</td>
                                        <td>banyumas</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">11</span></td>
                                        <td>Kabupaten Batang</td>
                                        <td>batang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">12</span></td>
                                        <td>Kabupaten Blora</td>
                                        <td>blora</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">13</span></td>
                                        <td>Kabupaten Boyolali</td>
                                        <td>boyolali</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">14</span></td>
                                        <td>Kabupaten Brebes</td>
                                        <td>brebes</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">15</span></td>
                                        <td>Kabupaten Cilacap</td>
                                        <td>cilacap</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">16</span></td>
                                        <td>Kabupaten Demak</td>
                                        <td>demak</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">17</span></td>
                                        <td>Kabupaten Grobogan</td>
                                        <td>grobogan</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">18</span></td>
                                        <td>Kabupaten Jepara</td>
                                        <td>jepara</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">19</span></td>
                                        <td>Kabupaten Karanganyar</td>
                                        <td>karanganyar</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">20</span></td>
                                        <td>Kabupaten Kebumen</td>
                                        <td>kebumen</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">21</span></td>
                                        <td>Kabupaten Kendal</td>
                                        <td>kendal</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">22</span></td>
                                        <td>Kabupaten Klaten</td>
                                        <td>klaten</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">23</span></td>
                                        <td>Kabupaten Kudus</td>
                                        <td>kudus</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">24</span></td>
                                        <td>Kabupaten Magelang</td>
                                        <td>magelang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">25</span></td>
                                        <td>Kabupaten Pati</td>
                                        <td>pati</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">26</span></td>
                                        <td>Kabupaten Pekalongan</td>
                                        <td>pekalongan</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">27</span></td>
                                        <td>Kabupaten Pemalang</td>
                                        <td>pemalang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">28</span></td>
                                        <td>Kabupaten Purbalingga</td>
                                        <td>purbalingga</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">29</span></td>
                                        <td>Kabupaten Purworejo</td>
                                        <td>purworejo</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">30</span></td>
                                        <td>Kabupaten Rembang</td>
                                        <td>rembang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">31</span></td>
                                        <td>Kabupaten Semarang</td>
                                        <td>semarang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">32</span></td>
                                        <td>Kabupaten Sragen</td>
                                        <td>sragen</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">33</span></td>
                                        <td>Kabupaten Sukoharjo</td>
                                        <td>sukoharjo</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">34</span></td>
                                        <td>Kabupaten Tegal</td>
                                        <td>tegal</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">35</span></td>
                                        <td>Kabupaten Temanggung</td>
                                        <td>temanggung</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">36</span></td>
                                        <td>Kabupaten Wonogiri</td>
                                        <td>wonogiri</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">37</span></td>
                                        <td>Kabupaten Wonosobo</td>
                                        <td>wonosobo</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">38</span></td>
                                        <td>Kota Magelang</td>
                                        <td>kota-magelang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">39</span></td>
                                        <td>Kota Pekalongan</td>
                                        <td>kota-pekalongan</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">40</span></td>
                                        <td>Kota Salatiga</td>
                                        <td>kota-salatiga</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">41</span></td>
                                        <td>Kota Semarang</td>
                                        <td>kota-semarang</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">42</span></td>
                                        <td>Kota Surakarta</td>
                                        <td>kota-surakarta</td>
                                    </tr>
                                    <tr>
                                        <td><span class="site-badge">43</span></td>
                                        <td>Kota Tegal</td>
                                        <td>kota-tegal</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
        </main>
    </div>

    <script>
        // Function to get auth token from multiple possible sources
        function getAuthToken() {
            // First try to get from Laravel session (server-side)
            const sessionToken = '{{ session('auth.token') ?? '' }}';
            if (sessionToken) {
                return sessionToken;
            }

            // Then try browser storage
            return localStorage.getItem('auth_token') ||
                localStorage.getItem('token') ||
                localStorage.getItem('access_token') ||
                sessionStorage.getItem('auth_token') ||
                sessionStorage.getItem('token') ||
                sessionStorage.getItem('access_token');
        }

        document.getElementById('registerAdminForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const data = {
                email: formData.get('email'),
                password: formData.get('password'),
                role: 'admin',
                phone: formData.get('phone'),
                site_id: parseInt(formData.get('site_id'))
            };

            const alertContainer = document.getElementById('alert-container');

            try {
                // Get authentication token
                const authToken = getAuthToken();

                if (!authToken) {
                    throw new Error('Token autentikasi tidak ditemukan. Silakan login ulang.');
                }

                const headers = {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    // 'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Authorization': `Bearer ${authToken}`
                };

                console.log('Sending request with headers:', headers);
                console.log('Request data:', data);

                // Use the configured API endpoint
                let response = await fetch('{{ env('AUTH_API_REGISTER_URL') }}', {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify(data)
                });

                console.log('Response status:', response.status);
                const result = await response.json();
                console.log('Response data:', result);

                if (response.ok) {
                    // Successful response (status 2xx)
                    alertContainer.innerHTML =
                        '<div class="alert alert-success">' + (result.message ||
                            'Admin berhasil didaftarkan!') + '</div>';
                    document.getElementById('registerAdminForm').reset();
                } else {
                    // Handle specific error cases
                    if (response.status === 401) {
                        throw new Error(result.message ||
                            'Token autentikasi tidak valid atau telah kadaluarsa. Silakan login ulang.');
                    } else if (response.status === 403) {
                        throw new Error(result.message ||
                            'Anda tidak memiliki izin untuk melakukan tindakan ini.');
                    } else if (response.status === 422) {
                        // Validation errors
                        let errorMsg = 'Validation error: ';
                        if (result.errors) {
                            errorMsg += Object.values(result.errors).flat().join(', ');
                        } else {
                            errorMsg += result.message || 'Data tidak valid';
                        }
                        throw new Error(errorMsg);
                    } else {
                        throw new Error(result.message ||
                            `Error ${response.status}: Terjadi kesalahan saat mendaftarkan admin`);
                    }
                }
            } catch (error) {
                console.error('Registration error:', error);
                if (error.name === 'TypeError' && error.message.includes('fetch')) {
                    alertContainer.innerHTML =
                        '<div class="alert alert-error">Error: Tidak dapat terhubung ke server. Pastikan koneksi internet Anda stabil.</div>';
                } else {
                    alertContainer.innerHTML = '<div class="alert alert-error">Error: ' + error.message +
                        '</div>';
                }
            }
        });

        // // Sidebar dropdown logic
        // document.getElementById('kelola-admin-link').addEventListener('click', function(e) {
        //     e.preventDefault();
        //     var dropdown = document.getElementById('kelola-admin-dropdown');
        //     dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        // });

        // No longer need loadAdminData function as admin list is moved to manajemenAdmin page

        // Show alert message
        function showAlert(message, type = 'success') {
            const alertContainer = document.getElementById('alert-container');
            alertContainer.innerHTML = `
                <div class="alert alert-${type}">
                    ${message}
                </div>
            `;
            setTimeout(() => {
                alertContainer.innerHTML = '';
            }, 5000);
        }

        // Edit and Delete functions moved to manajemenAdmin page

        // Debug: Check token status and load data on page load
        document.addEventListener('DOMContentLoaded', function() {
            const token = getAuthToken();
            console.log('Current auth token:', token ? 'Token found' : 'No token found');
            if (!token) {
                const alertContainer = document.getElementById('alert-container');
                alertContainer.innerHTML =
                    '<div class="alert alert-error">Peringatan: Token autentikasi tidak ditemukan. Pastikan Anda sudah login.</div>';
            }
        });

        // Close modal when clicking outside
        window.onclick = function(event) {
            /* Lines 860-864 omitted */ }
    </script>
@endsection
