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

<head>
    <script>
        window.onerror = function(msg, src, line, col, err) {
            var d = document.createElement("div");
            d.style.cssText = "position:fixed;top:0;left:0;width:100%;z-index:999999;background:red;color:white;padding:20px;font-family:monospace;";
            d.innerHTML = "JS ERROR: " + msg + " at " + line + ":" + col;
            if (document.body) document.body.appendChild(d);
            else window.addEventListener("DOMContentLoaded", () => document.body.appendChild(d));
        };
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Koperasi Digital Merah Putih - Portal Platform & Marketplace</title>

    <!-- SEO Meta Tags -->
    <meta name="description"
        content="Platform Koperasi Digital Merah Putih. Portal nasional koperasi di bawah pengawasan Dinas Koperasi. Marketplace & Pembayaran Terintegrasi.">

    <!-- Fonts & Icons -->
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
        rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">

    <!-- Tailwind CSS Play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E11D48',
                        secondary: '#DC2626',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                        brandDark: '#0B0F19',
                        brandSurface: '#151F32'
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        heading: ['Outfit', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <!-- Custom CSS styles for components & simulator -->
    <style>
        /* Custom scrollbar hides */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Smartphone notch */
        .smartphone-frame::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 22px;
            background: #000;
            border-radius: 15px;
            z-index: 100;
        }

        /* Stepper timeline tracking */
        .timeline-step::after {
            content: '';
            position: absolute;
            left: 8px;
            top: 18px;
            bottom: 0;
            width: 2px;
            background: #E2E8F0;
        }

        .timeline-step:last-child::after {
            display: none;
        }

        .timeline-step.active::after {
            background: #E11D48;
        }

        /* Pulse Animation */
        @keyframes pulseGlow {

            0%,
            100% {
                border-color: rgba(225, 29, 72, 0.25);
                box-shadow: 0 4px 20px rgba(225, 29, 72, 0.1);
            }

            50% {
                border-color: rgba(225, 29, 72, 0.6);
                box-shadow: 0 4px 20px rgba(225, 29, 72, 0.25);
            }
        }

        .pulse-card {
            animation: pulseGlow 3s infinite ease-in-out;
        }

        /* Sticky Drawer Header */
        .panel-header {
            position: sticky;
            top: 0;
            z-index: 30;
            background: transparent;
            margin-top: -2rem;
            /* -mt-8 to negate panel p-8 */
            margin-left: -2rem;
            /* -mx-8 to negate panel p-8 */
            margin-right: -2rem;
            margin-bottom: 2rem;
            padding-top: 2rem;
            padding-left: 2rem;
            padding-right: 2rem;
            padding-bottom: 1.25rem;
            border-bottom: 1px solid transparent;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Scrolled state: hanging drawer */
        .panel-header.is-scrolled {
            background: rgba(21, 31, 50, 0.85);
            /* brandSurface */
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom-left-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
            border-left: 1px solid rgba(225, 29, 72, 0.15);
            /* primary border hint */
            border-right: 1px solid rgba(225, 29, 72, 0.15);
            border-bottom: 2px solid rgba(225, 29, 72, 0.3);
            /* primary border bottom */
            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.7), 0 0 15px rgba(225, 29, 72, 0.05);
            padding-bottom: 1.25rem;
            margin-left: -1rem;
            /* inset drawer look */
            margin-right: -1rem;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        /* Drawer pull tab / handle indicator */
        .panel-header::after {
            content: '';
            display: block;
            width: 40px;
            height: 4px;
            background: rgba(226, 232, 240, 0.15);
            border-radius: 9999px;
            margin: 0.75rem auto 0 auto;
            transition: all 0.3s ease;
            opacity: 0;
            transform: scaleX(0.5);
        }

        .panel-header.is-scrolled::after {
            background: rgba(226, 232, 240, 0.3);
            opacity: 1;
            transform: scaleX(1);
        }
    </style>
</head>

<body
    class="bg-brandDark text-slate-100 font-sans min-h-screen flex overflow-hidden bg-[radial-gradient(at_5%_5%,rgba(225,29,72,0.15)_0px,transparent_50%),radial-gradient(at_95%_85%,rgba(220,38,38,0.12)_0px,transparent_50%)] bg-no-repeat bg-fixed">

    <!-- ============================================ -->
    <!-- WEB LOGIN MODAL (OVERLAY) -->
    <!-- ============================================ -->
    <div id="web-login-modal"
        class="fixed inset-0 z-50 hidden flex-col items-center justify-center bg-black/80 backdrop-blur-sm gap-6 p-4">
        <div
            class="w-full max-w-md bg-brandSurface border border-slate-800/80 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <div class="flex justify-between items-center mb-4">
                <div></div>
                <button onclick="closeWebLoginModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <div class="text-center mb-6">
                <div
                    class="bg-gradient-to-br from-primary to-secondary text-white w-12 h-12 rounded-2xl flex items-center justify-center font-extrabold font-heading text-xl mx-auto mb-3 shadow-lg shadow-primary/20">
                    KP</div>
                <h2 id="web-auth-modal-title" class="font-heading text-xl font-black text-white tracking-tight">
                    KopMerahPutih</h2>
                <p id="web-auth-modal-subtitle" class="text-slate-400 text-xs mt-1">Platform Koperasi Digital Merah
                    Putih</p>
                <span id="web-auth-modal-badge"
                    class="text-[9px] bg-rose-950/40 text-primary border border-rose-800/30 px-2.5 py-0.5 rounded-full font-bold uppercase tracking-wider mt-1.5 inline-block">Web
                    Authentication</span>
            </div>

            <!-- Login Form -->
            <form id="web-login-form" onsubmit="event.preventDefault(); handleWebLogin();" class="space-y-4">
                <!-- Error Alert -->
                <div id="web-login-error"
                    class="hidden p-3 bg-rose-950/40 border border-rose-800/30 rounded-xl text-xs text-rose-400 flex items-center gap-2 transition duration-200">
                    <span class="material-symbols-outlined text-sm">error</span>
                    <span id="web-login-error-msg">Email atau password salah.</span>
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Username / Email / Customer
                        Email</label>
                    <input type="text" id="web-login-email" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="superadmin / dinas / admin / budi@gmail.com">
                </div>
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-slate-400 text-xs font-semibold">Password</label>
                        <a href="javascript:void(0)" onclick="openForgotPasswordModal()" class="text-[10px] text-primary font-bold hover:underline transition duration-200">Lupa Password?</a>
                    </div>
                    <div class="relative">
                        <input type="password" id="web-login-pass" required
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 pr-10 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                            placeholder="••••••••">
                        <button type="button" onclick="toggleWebPasswordVisibility()"
                            class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-white transition duration-150">
                            <span class="material-symbols-outlined text-lg"
                                id="web-password-toggle-icon">visibility</span>
                        </button>
                    </div>
                </div>

                <button type="submit" id="web-login-btn"
                    class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200 w-full mt-2 flex justify-center items-center gap-2">
                    <span>MASUK SYSTEM</span>
                </button>

                <div class="text-center mt-4">
                    <p class="text-slate-400 text-xs">Belum punya akun? <a href="javascript:void(0)"
                            onclick="toggleWebAuthMode('register')"
                            class="text-primary font-bold hover:underline">Daftar Sekarang</a></p>
                </div>
            </form>

            <!-- Register Form (Hidden by default) -->
            <form id="web-register-form" onsubmit="event.preventDefault(); handleWebRegister();"
                class="hidden space-y-4 max-h-[60vh] overflow-y-auto pr-1 no-scrollbar">
                <!-- Error Alert -->
                <div id="web-register-error"
                    class="hidden p-3 bg-rose-950/40 border border-rose-800/30 rounded-xl text-xs text-rose-400 flex items-center gap-2 transition duration-200">
                    <span class="material-symbols-outlined text-sm">error</span>
                    <span id="web-register-error-msg">Registrasi gagal.</span>
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-1">Nama Lengkap</label>
                    <input type="text" id="web-register-name" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-2.5 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="Masukkan nama lengkap">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-1">Email</label>
                    <input type="email" id="web-register-email" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-2.5 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="nama@email.com">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-1">No. HP / Telepon</label>
                    <input type="text" id="web-register-phone" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-2.5 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="08xxxxxxxxxx">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-1">Password</label>
                    <input type="password" id="web-register-pass" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-2.5 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="Minimal 6 karakter">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-1">Daftar Sebagai</label>
                    <select id="web-register-role" onchange="handleRegisterRoleChange(this.value)"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-2.5 text-white text-sm focus:outline-none focus:border-primary">
                        <option value="4">Konsumen / Pembeli Umum</option>
                        <option value="3">Penjual / Koperasi (Seller)</option>
                    </select>
                </div>

                <div id="web-register-coop-container" class="hidden">
                    <label class="block text-slate-400 text-xs font-semibold mb-1">Pilih Koperasi Afiliasi</label>
                    <select id="web-register-coop"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-2.5 text-white text-sm focus:outline-none focus:border-primary">
                        <!-- Populated dynamically -->
                    </select>
                </div>

                <button type="submit" id="web-register-btn"
                    class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200 w-full mt-3 flex justify-center items-center gap-2">
                    <span>DAFTAR AKUN</span>
                </button>

                <div class="text-center mt-3">
                    <p class="text-slate-400 text-xs">Sudah punya akun? <a href="javascript:void(0)"
                            onclick="toggleWebAuthMode('login')"
                            class="text-primary font-bold hover:underline">Masuk</a></p>
                </div>
            </form>
        </div>
    </div>

    <!-- ============================================ -->
    <!-- DESKTOP MARKETPLACE PORTAL (GUEST & CUSTOMER) -->
    <!-- ============================================ -->
    <div id="marketplace-viewport"
        class="flex flex-col w-screen h-screen overflow-hidden bg-brandDark text-slate-100 bg-[radial-gradient(at_5%_5%,rgba(225,29,72,0.08)_0px,transparent_50%),radial-gradient(at_95%_85%,rgba(220,38,38,0.06)_0px,transparent_50%)]">
        <!-- Marketplace Top Header / Navbar -->
        <header
            class="h-16 border-b border-slate-800/60 bg-brandSurface/40 backdrop-blur-md flex items-center justify-between px-8 shrink-0 z-20">
            <!-- Brand Logo -->
            <div class="flex items-center gap-3 cursor-pointer" onclick="goToMarketView('home')">
                <div
                    class="bg-gradient-to-br from-primary to-secondary text-white w-9 h-9 rounded-xl flex items-center justify-center font-extrabold font-heading text-lg shadow-md shadow-primary/20">
                    KP</div>
                <div>
                    <h1 class="font-heading text-sm font-extrabold tracking-tight text-white leading-tight">
                        KopMerahPutih</h1>
                    <span class="text-[9px] text-rose-300 font-bold uppercase tracking-wider leading-none">Digital
                        Marketplace</span>
                </div>
            </div>

            <!-- Search Bar -->
            <div
                class="hidden md:flex items-center bg-slate-900/60 border border-slate-800 rounded-xl px-3 py-1.5 w-96 gap-2">
                <span class="material-symbols-outlined text-slate-500 text-lg">search</span>
                <input type="text" id="market-search-input" onkeyup="handleMarketSearch(event)"
                    placeholder="Cari produk unggulan..."
                    class="bg-transparent border-none text-xs text-white placeholder-slate-600 focus:outline-none w-full">
            </div>

            <!-- Right Controls: Cart, Profile / Login Button -->
            <div class="flex items-center gap-4">
                <!-- Chat/Message Icon (Customer) -->
                <div class="relative cursor-pointer hover:text-primary transition" onclick="goToMarketView('messages')">
                    <span class="material-symbols-outlined text-xl">chat</span>
                    <span id="market-msg-badge"
                        class="absolute -top-1.5 -right-1.5 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center hidden">0</span>
                </div>

                <!-- Cart Icon -->
                <div class="relative cursor-pointer hover:text-primary transition" onclick="goToMarketView('cart')">
                    <span class="material-symbols-outlined text-xl">shopping_cart</span>
                    <span id="market-cart-badge"
                        class="absolute -top-1.5 -right-1.5 bg-primary text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">0</span>
                </div>

                <div class="h-5 w-[1px] bg-slate-800"></div>

                <!-- Profile or Login Trigger -->
                <div id="market-user-profile" class="flex items-center gap-2">
                    <!-- Guest View -->
                    <button id="market-guest-login-btn" onclick="openWebLoginModal()"
                        class="flex items-center gap-1.5 bg-gradient-to-r from-primary to-secondary hover:from-primary/95 hover:to-secondary/95 text-white font-bold text-[10px] uppercase tracking-wider px-4 py-2 rounded-xl shadow-lg transition">
                        <span class="material-symbols-outlined text-sm">login</span>
                        <span>Masuk System</span>
                    </button>

                    <!-- Logged in Customer View (Hidden by default) -->
                    <div id="market-customer-profile" class="hidden flex items-center gap-3">
                        <button onclick="goToMarketView('orders')"
                            class="text-slate-300 hover:text-white text-xs font-semibold px-2 py-1 bg-slate-800 rounded-lg border border-slate-700 transition"
                            title="Riwayat Pesanan">
                            Pesanan Saya
                        </button>
                        <button onclick="goToMarketView('profile')"
                            class="text-slate-300 hover:text-white text-xs font-semibold px-2 py-1 bg-slate-800 rounded-lg border border-slate-700 transition"
                            title="Pengaturan Profil">
                            Profil Saya
                        </button>
                        <div class="text-right">
                            <h4 id="market-customer-name" class="text-xs font-bold text-white">Nama Pembeli</h4>
                            <p class="text-[9px] text-slate-400">Customer Member</p>
                        </div>
                        <div id="market-customer-avatar"
                            class="w-8 h-8 rounded-lg bg-gradient-to-tr from-emerald-500 to-teal-700 flex items-center justify-center font-bold text-white text-xs shadow-md shadow-emerald-500/20">
                            B
                        </div>
                        <button onclick="handleWebLogout()"
                            class="text-slate-400 hover:text-rose-400 p-1 rounded transition" title="Log Out">
                            <span class="material-symbols-outlined text-sm">logout</span>
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- Dynamic Content Area -->
        <div id="market-scroll-area" class="flex-1 overflow-y-auto flex flex-col">
            <div id="market-content-area" class="p-8 flex flex-col gap-8 flex-1">
                <!-- Rendered by JS -->
            </div>
            
            <!-- Global Marketplace Footer -->
            <footer class="bg-brandSurface/80 border-t border-slate-800/60 mt-auto pt-12 pb-8 px-8">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8 max-w-7xl mx-auto">
                    <div class="flex flex-col gap-4">
                        <div class="flex items-center gap-3">
                            <div class="bg-gradient-to-br from-primary to-secondary text-white w-8 h-8 rounded-lg flex items-center justify-center font-extrabold font-heading text-base shadow-md shadow-primary/20">KP</div>
                            <h2 class="font-heading text-sm font-extrabold text-white leading-tight">KopMerahPutih</h2>
                        </div>
                        <p class="text-xs text-slate-400 leading-relaxed">Platform E-Commerce kolaboratif Dinas Koperasi Provinsi Gorontalo. Belanja cerdas, dukung UMKM dan Koperasi lokal untuk pertumbuhan ekonomi daerah yang lebih baik.</p>
                    </div>
                    <div class="flex flex-col gap-3">
                        <h3 class="text-white font-bold text-sm mb-1">Layanan Pelanggan</h3>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Pusat Bantuan</a>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Cara Pemesanan</a>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Pengiriman & Retur</a>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Kebijakan Privasi</a>
                    </div>
                    <div class="flex flex-col gap-3">
                        <h3 class="text-white font-bold text-sm mb-1">Jelajahi</h3>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Semua Produk</a>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Daftar Koperasi</a>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Produk Terlaris</a>
                        <a href="javascript:void(0)" class="text-xs text-slate-400 hover:text-primary transition">Promo Menarik</a>
                    </div>
                    <div class="flex flex-col gap-3">
                        <h3 class="text-white font-bold text-sm mb-1">Hubungi Kami</h3>
                        <p class="text-xs text-slate-400 flex items-center gap-2"><span class="material-symbols-outlined text-[14px]">location_on</span> Jl. Koperasi No. 1, Gorontalo</p>
                        <p class="text-xs text-slate-400 flex items-center gap-2"><span class="material-symbols-outlined text-[14px]">call</span> +62 811 2345 6789</p>
                        <p class="text-xs text-slate-400 flex items-center gap-2"><span class="material-symbols-outlined text-[14px]">mail</span> cs@kopmerahputih.id</p>
                    </div>
                </div>
                <div class="max-w-7xl mx-auto border-t border-slate-800/60 pt-6 flex justify-between items-center">
                    <p class="text-[10px] text-slate-500">&copy; 2026 KopMerahPutih. Semua Hak Dilindungi.</p>
                    <div class="flex gap-3">
                        <!-- Social Media placeholders -->
                        <div class="w-6 h-6 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white transition cursor-pointer">
                            <span class="text-[10px] font-bold">FB</span>
                        </div>
                        <div class="w-6 h-6 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white transition cursor-pointer">
                            <span class="text-[10px] font-bold">IG</span>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <div id="main-app-layout" class="hidden flex w-screen h-screen overflow-hidden">

        <!-- ============================================ -->
        <!-- SIDEBAR NAVIGATION & SIMULATOR ROLE SELECTOR -->
        <!-- ============================================ -->
        <aside class="w-72 bg-brandSurface border-r border-slate-800/80 p-6 flex flex-col z-10 shrink-0">
            <div class="flex items-center gap-3 mb-6 pb-5 border-b border-slate-800/60">
                <div
                    class="bg-gradient-to-br from-primary to-secondary text-white w-10 h-10 rounded-xl flex items-center justify-center font-extrabold font-heading text-xl shadow-lg shadow-primary/20">
                    KP</div>
                <div>
                    <h1 class="font-heading text-base font-extrabold tracking-tight text-white">KopMerahPutih</h1>
                    <span class="text-[10px] text-rose-300 font-bold uppercase tracking-wider">Platform Digital
                        Koperasi</span>
                </div>
            </div>

            <!-- Role Selector for the Simulation (Hidden for production admin console) -->
            <div class="hidden mb-4">
                <label class="block text-[10px] text-rose-300 font-bold uppercase tracking-wider mb-2">SIMULATOR
                    WORKSPACE</label>
                <select id="role-switcher"
                    class="w-full bg-rose-950/20 border border-primary text-white font-bold text-xs rounded-lg p-2.5 outline-none focus:ring-2 focus:ring-primary/45">
                    <option value="superadmin" style="background: #151F32;">Super Admin Panel</option>
                    <option value="dinasadmin" style="background: #151F32;">Admin Dinas Koperasi</option>
                    <option value="coopadmin" style="background: #151F32;">Admin Koperasi Toko</option>
                </select>
            </div>

            <!-- User profile section moved to top right navbar -->

            <!-- 1. SUPER ADMIN SIDEBAR MENUS -->
            <nav id="menu-superadmin" class="sidebar-menu-group space-y-1 overflow-y-auto no-scrollbar flex-1">
                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-2 pb-2">Sistem & Ikhtisar
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-100 bg-white/5 border border-primary/25 rounded-lg text-xs font-semibold cursor-pointer menu-item active"
                    data-tab="super-dashboard">
                    <span class="material-symbols-outlined text-lg">dashboard</span>
                    <span>Dashboard</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Manajemen Koperasi
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-coops-daftar">
                    <span class="material-symbols-outlined text-lg">storefront</span>
                    <span>Daftar Koperasi</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-coops-verif">
                    <span class="material-symbols-outlined text-lg">rule</span>
                    <span>Verifikasi Koperasi</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-coops-wilayah">
                    <span class="material-symbols-outlined text-lg">map</span>
                    <span>Wilayah Koperasi</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Pengawasan Portal
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-products">
                    <span class="material-symbols-outlined text-lg">inventory_2</span>
                    <span>Monitoring Produk</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-orders">
                    <span class="material-symbols-outlined text-lg">receipt_long</span>
                    <span>Monitoring Transaksi</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Analisis & Audit
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-reports">
                    <span class="material-symbols-outlined text-lg">analytics</span>
                    <span>Laporan Penjualan</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-audit">
                    <span class="material-symbols-outlined text-lg">security_update_good</span>
                    <span>Audit Log</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Konfigurasi</div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-users">
                    <span class="material-symbols-outlined text-lg">manage_accounts</span>
                    <span>Manajemen User</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-users-verif">
                    <span class="material-symbols-outlined text-lg">verified_user</span>
                    <span>Verifikasi Anggota</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-permissions">
                    <span class="material-symbols-outlined text-lg">rule</span>
                    <span>Manajemen Hak Akses</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="super-settings">
                    <span class="material-symbols-outlined text-lg">settings</span>
                    <span>Pengaturan Sistem</span>
                </div>

                <div class="h-[1px] bg-slate-800/60 my-4"></div>

                <div class="flex items-center gap-3 px-3 py-2 text-rose-400 hover:text-rose-200 hover:bg-red-950/20 rounded-lg text-xs font-semibold cursor-pointer"
                    onclick="handleWebLogout()">
                    <span class="material-symbols-outlined text-lg">logout</span>
                    <span>Log Out</span>
                </div>
            </nav>

            <!-- 2. ADMIN DINAS SIDEBAR MENUS -->
            <nav id="menu-dinasadmin" class="sidebar-menu-group space-y-1 overflow-y-auto no-scrollbar flex-1"
                style="display: none;">
                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-2 pb-2">Sistem & Ikhtisar
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-100 bg-white/5 border border-primary/25 rounded-lg text-xs font-semibold cursor-pointer menu-item active"
                    data-tab="dinas-dashboard">
                    <span class="material-symbols-outlined text-lg">dashboard</span>
                    <span>Dashboard Dinas</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Verifikasi &
                    Pengajuan</div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="dinas-coops-daftar">
                    <span class="material-symbols-outlined text-lg">folder_shared</span>
                    <span>Daftar Pengajuan</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="dinas-coops-verif">
                    <span class="material-symbols-outlined text-lg">verified</span>
                    <span>Verifikasi & Aktif</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Pengawasan Koperasi
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="dinas-products">
                    <span class="material-symbols-outlined text-lg">inventory</span>
                    <span>Monitoring Produk</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="dinas-orders">
                    <span class="material-symbols-outlined text-lg">receipt</span>
                    <span>Monitoring Transaksi</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Laporan & Analisis
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="dinas-reports">
                    <span class="material-symbols-outlined text-lg">insights</span>
                    <span>Laporan Koperasi</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Konfigurasi</div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="dinas-settings">
                    <span class="material-symbols-outlined text-lg">settings</span>
                    <span>Pengaturan</span>
                </div>

                <div class="h-[1px] bg-slate-800/60 my-4"></div>

                <div class="flex items-center gap-3 px-3 py-2 text-rose-400 hover:text-rose-200 hover:bg-red-950/20 rounded-lg text-xs font-semibold cursor-pointer"
                    onclick="handleWebLogout()">
                    <span class="material-symbols-outlined text-lg">logout</span>
                    <span>Log Out</span>
                </div>
            </nav>

            <!-- 3. ADMIN KOPERASI SIDEBAR MENUS -->
            <nav id="menu-coopadmin" class="sidebar-menu-group space-y-1 overflow-y-auto no-scrollbar flex-1"
                style="display: none;">
                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-2 pb-2">Toko & Profil</div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-100 bg-white/5 border border-primary/25 rounded-lg text-xs font-semibold cursor-pointer menu-item active"
                    data-tab="coop-dashboard">
                    <span class="material-symbols-outlined text-lg">dashboard</span>
                    <span>Dashboard Toko</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-profile">
                    <span class="material-symbols-outlined text-lg">store</span>
                    <span>Profil Koperasi</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Katalog & Stok
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-categories">
                    <span class="material-symbols-outlined text-lg">category</span>
                    <span>Kategori Produk</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-products-daftar">
                    <span class="material-symbols-outlined text-lg">inventory_2</span>
                    <span>Data & Stok Produk</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-products-add">
                    <span class="material-symbols-outlined text-lg">add_box</span>
                    <span>Tambah Produk</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Penjualan &
                    Pengiriman</div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-orders">
                    <span class="material-symbols-outlined text-lg">pending_actions</span>
                    <span>Pesanan Masuk</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-messages">
                    <span class="material-symbols-outlined text-lg">forum</span>
                    <span class="flex-1">Pesan Masuk</span>
                    <span id="seller-unread-badge"
                        class="hidden bg-rose-500 text-white text-[9px] font-extrabold px-1.5 py-0.5 rounded-full min-w-[18px] text-center">0</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-shipping">
                    <span class="material-symbols-outlined text-lg">local_shipping</span>
                    <span>Pengiriman</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Pelanggan & Laporan
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-customers">
                    <span class="material-symbols-outlined text-lg">groups</span>
                    <span>Customer Terdaftar</span>
                </div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-reports">
                    <span class="material-symbols-outlined text-lg">finance</span>
                    <span>Laporan Penjualan</span>
                </div>

                <div class="text-[10px] text-slate-500 font-bold uppercase tracking-wider pt-4 pb-2">Konfigurasi</div>
                <div class="flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-slate-100 hover:bg-white/5 rounded-lg text-xs font-semibold cursor-pointer menu-item"
                    data-tab="coop-settings">
                    <span class="material-symbols-outlined text-lg">settings</span>
                    <span>Pengaturan</span>
                </div>

                <div class="h-[1px] bg-slate-800/60 my-4"></div>

                <div class="flex items-center gap-3 px-3 py-2 text-rose-400 hover:text-rose-200 hover:bg-red-950/20 rounded-lg text-xs font-semibold cursor-pointer"
                    onclick="handleWebLogout()">
                    <span class="material-symbols-outlined text-lg">logout</span>
                    <span>Log Out</span>
                </div>
            </nav>

        </aside>

        <!-- ============================================ -->
        <!-- MAIN INTERACTIVE WORKSPACE (LEFT/CENTER) -->
        <!-- ============================================ -->
        <main class="flex-1 flex flex-col overflow-hidden h-full relative">

            <!-- TOP NAVBAR -->
            <header
                class="h-16 border-b border-slate-800/60 bg-brandSurface/30 backdrop-blur-md flex items-center justify-between px-8 shrink-0 z-20">
                <!-- Left Side: Active Workspace Badge -->
                <div class="flex items-center gap-2">
                    <span class="text-slate-400 text-xs font-semibold">Workspace:</span>
                    <span
                        class="text-xs bg-rose-950/40 text-primary border border-rose-800/30 px-2.5 py-0.5 rounded-full font-bold uppercase tracking-wider"
                        id="active-workspace-badge">Super Admin</span>
                </div>

                <!-- Right Side: Notifications & User Profile Section -->
                <div class="flex items-center gap-4">
                    <!-- Notifications/Messages for Admin/Seller -->
                    <div class="relative cursor-pointer text-slate-400 hover:text-primary transition"
                        onclick="if(state.activeRole === 'coopadmin'){ document.querySelector('[data-tab=coop-messages]').click(); }">
                        <span class="material-symbols-outlined text-xl">forum</span>
                        <span id="admin-msg-badge"
                            class="absolute -top-1 -right-1 bg-rose-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center hidden">0</span>
                    </div>

                    <div class="h-5 w-[1px] bg-slate-800"></div>

                    <div id="user-profile-section"
                        class="flex items-center gap-3 cursor-pointer hover:bg-slate-800/40 p-1.5 px-3.5 rounded-xl border border-slate-800/40 transition duration-150">
                        <div class="text-right">
                            <h4 class="text-xs font-bold text-white leading-tight" id="user-profile-name">Admin Name
                            </h4>
                            <p class="text-[10px] text-slate-400 leading-none mt-0.5" id="user-profile-role">Super Admin
                            </p>
                            <p class="text-[9px] text-primary font-semibold mt-0.5 hidden" id="user-profile-coop"></p>
                        </div>
                        <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-secondary flex items-center justify-center font-bold text-white text-xs shadow-md shadow-primary/20"
                            id="user-profile-avatar">
                            A
                        </div>
                    </div>
            </header>

            <!-- PANELS WRAPPER -->
            <div class="flex-1 relative overflow-hidden flex flex-col">

                <!-- ---------------------------------------- -->
                <!-- 1. SUPER ADMIN WORKSPACE TABS -->
                <!-- ---------------------------------------- -->
                <div id="super-dashboard-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Dashboard
                                Koperasi Digital</h2>
                            <p class="text-slate-400 text-sm">Pemantauan real-time Koperasi Digital</p>
                        </div>
                        <span
                            class="bg-rose-950/30 text-primary border border-rose-800/30 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Super
                            Admin</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-rose-500 to-red-700 text-white shadow-lg shadow-rose-500/20">
                                <span class="material-symbols-outlined">storefront</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Total Koperasi</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white" id="s-stat-total-coops">4
                                </h4>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-emerald-500 to-green-700 text-white shadow-lg shadow-emerald-500/20">
                                <span class="material-symbols-outlined">payments</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Omset Penjualan</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white" id="s-stat-total-sales">
                                    Rp 0</h4>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-amber-500 to-orange-700 text-white shadow-lg shadow-amber-500/20">
                                <span class="material-symbols-outlined">group</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Total Pelanggan</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white"
                                    id="s-stat-total-customers">8</h4>
                            </div>
                        </div>
                    </div>

                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <h3 class="font-heading text-lg font-bold text-white mb-4">Distribusi Wilayah Koperasi</h3>
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kabupaten / Kota</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Provinsi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Jumlah Koperasi Terdaftar</th>
                                    </tr>
                                </thead>
                                <tbody id="s-regions-table" class="divide-y divide-slate-800/60 text-sm text-slate-200">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="super-coops-daftar-panel"
                    class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6" style="display: none;">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Daftar Koperasi
                                Terdaftar</h2>
                            <p class="text-slate-400 text-sm">Manajemen data seluruh koperasi di dalam portal nasional
                            </p>
                        </div>
                        <button onclick="openAddCoopModal()"
                            class="bg-gradient-to-r from-primary to-secondary hover:from-rose-500 hover:to-red-500 text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-sm font-bold">add</span>
                            <span>TAMBAH KOPERASI</span>
                        </button>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Logo</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kode</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kabupaten</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan</th>
                                    </tr>
                                </thead>
                                <tbody id="s-coops-list-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="super-coops-verif-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Verifikasi &
                                Pengajuan Koperasi</h2>
                            <p class="text-slate-400 text-sm">Approve pengajuan koperasi baru untuk beroperasi di portal
                            </p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kode</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Alamat</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan Verifikasi</th>
                                    </tr>
                                </thead>
                                <tbody id="s-coops-verif-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="super-coops-wilayah-panel"
                    class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6" style="display: none;">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Wilayah
                                Pengawasan Koperasi</h2>
                            <p class="text-slate-400 text-sm">Kelola daerah cakupan dan distribusi geografis koperasi
                                aktif</p>
                        </div>
                        <button onclick="openAddRegionModal()"
                            class="bg-gradient-to-r from-primary to-secondary hover:from-rose-500 hover:to-red-500 text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-sm font-bold">add_location</span>
                            <span>TAMBAH WILAYAH</span>
                        </button>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            ID</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Wilayah</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Provinsi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Deskripsi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Jumlah Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan</th>
                                    </tr>
                                </thead>
                                <tbody id="s-regions-list-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>



                <div id="super-products-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Monitoring Produk
                                Nasional</h2>
                            <p class="text-slate-400 text-sm">Pantau seluruh katalog produk koperasi yang tayang di
                                aplikasi customer</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Foto</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Produk</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Koperasi Penjual</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Harga</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Stok</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Rating</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                    </tr>
                                </thead>
                                <tbody id="s-products-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="super-orders-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Monitoring
                                Transaksi Nasional</h2>
                            <p class="text-slate-400 text-sm">Rekap pengiriman dan pembayaran belanja di platform
                                digital</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Invoice</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Koperasi Toko</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Pelanggan</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kurir</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Total Bayar</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                    </tr>
                                </thead>
                                <tbody id="s-orders-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="super-reports-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Laporan Penjualan
                            </h2>
                            <p class="text-slate-400 text-sm">Analisis intelijen bisnis (BI) dan performa ekonomi
                                koperasi digital terdaftar</p>
                        </div>
                    </div>

                    <!-- BI Summary Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-emerald-500 to-teal-700 text-white shadow-lg shadow-emerald-500/20">
                                <span class="material-symbols-outlined">payments</span>
                            </div>
                            <div>
                                <p class="text-slate-400 text-[10px] uppercase font-bold tracking-wider">Total
                                    Pendapatan</p>
                                <h3 class="text-xl font-bold text-white mt-1" id="bi-card-revenue">Rp0</h3>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-blue-500 to-indigo-700 text-white shadow-lg shadow-blue-500/20">
                                <span class="material-symbols-outlined">receipt_long</span>
                            </div>
                            <div>
                                <p class="text-slate-400 text-[10px] uppercase font-bold tracking-wider">Volume
                                    Transaksi</p>
                                <h3 class="text-xl font-bold text-white mt-1" id="bi-card-orders">0 Transaksi</h3>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-amber-500 to-orange-700 text-white shadow-lg shadow-amber-500/20">
                                <span class="material-symbols-outlined">analytics</span>
                            </div>
                            <div>
                                <p class="text-slate-400 text-[10px] uppercase font-bold tracking-wider">Rata-rata
                                    Transaksi</p>
                                <h3 class="text-xl font-bold text-white mt-1" id="bi-card-aov">Rp0</h3>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-rose-500 to-pink-700 text-white shadow-lg shadow-rose-500/20">
                                <span class="material-symbols-outlined">shopping_bag</span>
                            </div>
                            <div>
                                <p class="text-slate-400 text-[10px] uppercase font-bold tracking-wider">Produk Aktif
                                </p>
                                <h3 class="text-xl font-bold text-white mt-1" id="bi-card-products">0 Produk</h3>
                            </div>
                        </div>
                    </div>

                    <!-- BI Dynamic Charts Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl flex flex-col">
                            <h3 class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-sm">trending_up</span>
                                <span>Tren Penjualan Harian</span>
                            </h3>
                            <div class="flex-1 min-h-[250px] relative">
                                <canvas id="bi-revenue-chart" class="w-full h-full"></canvas>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl flex flex-col">
                            <h3 class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2">
                                <span class="material-symbols-outlined text-secondary text-sm">pie_chart</span>
                                <span>Kontribusi Omzet per Kategori</span>
                            </h3>
                            <div class="flex-1 min-h-[250px] relative">
                                <canvas id="bi-category-chart" class="w-full h-full"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- BI Tables Grid: Top Selling vs Low Stock -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Top Selling -->
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                            <h3 class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2">
                                <span
                                    class="material-symbols-outlined text-emerald-400 text-sm">local_fire_department</span>
                                <span>Barang Paling Laris (Top-Selling)</span>
                            </h3>
                            <div class="overflow-x-auto w-full">
                                <table class="w-full text-left border-collapse">
                                    <thead>
                                        <tr class="border-b border-slate-700/60">
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                                Produk</th>
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                                Koperasi</th>
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-right">
                                                Terjual</th>
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-right">
                                                Pendapatan</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bi-top-selling-table"
                                        class="divide-y divide-slate-800/60 text-xs text-slate-300">
                                        <!-- JS Injected -->
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Low Stock Warnings -->
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                            <h3 class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2">
                                <span class="material-symbols-outlined text-rose-500 text-sm">warning</span>
                                <span>Barang Stok Menipis (Critical Stock)</span>
                            </h3>
                            <div class="overflow-x-auto w-full">
                                <table class="w-full text-left border-collapse">
                                    <thead>
                                        <tr class="border-b border-slate-700/60">
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                                Produk</th>
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                                Koperasi</th>
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                                Sisa Stok</th>
                                            <th
                                                class="pb-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                                Status</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bi-low-stock-table"
                                        class="divide-y divide-slate-800/60 text-xs text-slate-300">
                                        <!-- JS Injected -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- BI Insights & Strategic Recommendations -->
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl flex flex-col gap-4">
                        <h3 class="font-heading text-base font-bold text-white flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary">psychology</span>
                            <span>Analisis Cerdas Pasar (BI Insights)</span>
                        </h3>
                        <div class="p-4 bg-slate-900/60 border border-slate-800/80 rounded-xl">
                            <p class="text-xs text-slate-300 leading-relaxed" id="bi-analysis-text">Mengalkulasi laporan
                                data...</p>
                        </div>
                        <div>
                            <h4
                                class="text-xs font-bold text-slate-200 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                                <span class="material-symbols-outlined text-amber-400 text-xs">emoji_objects</span>
                                <span>Rekomendasi Tindakan Strategis</span>
                            </h4>
                            <ul class="list-disc pl-5 space-y-2 text-xs text-slate-400" id="bi-recommendations-list">
                                <!-- JS Injected -->
                            </ul>
                        </div>
                    </div>
                </div>

                <div id="super-audit-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header flex justify-between items-start">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Audit System Log
                            </h2>
                            <p class="text-slate-400 text-sm">Rekaman audit aktivitas admin untuk keamanan dan
                                keterbukaan</p>
                        </div>
                        <button onclick="clearAuditLogs()" class="px-4 py-2 bg-rose-500/20 hover:bg-rose-500 border border-rose-500/50 hover:border-rose-400 text-rose-400 hover:text-white rounded-xl text-xs font-bold transition shadow-lg flex items-center gap-2">
                            <span class="material-symbols-outlined text-sm">delete_sweep</span>
                            Bersihkan Log
                        </button>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Waktu</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Pengguna</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Role</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Aksi Sistem</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Detail Deskripsi</th>
                                    </tr>
                                </thead>
                                <tbody id="s-audit-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Manajemen User & Kredensial -->
                <div id="super-users-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Manajemen User &
                                Kredensial</h2>
                            <p class="text-slate-400 text-sm">Kelola akun pengguna, hak akses, dan kredensial sistem</p>
                        </div>
                    </div>

                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <h3
                            class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-700/50 pb-2">
                            <span class="material-symbols-outlined text-primary text-lg">manage_accounts</span>
                            <span>Manajemen Kredensial Admin & User</span>
                        </h3>
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            ID</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Lengkap</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Username / Email</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Koperasi Afiliasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Hak Akses</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="s-users-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Verifikasi Anggota & Konsumen -->
                <div id="super-users-verif-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Verifikasi &
                                Keaslian Anggota</h2>
                            <p class="text-slate-400 text-sm">Verifikasi data NIK, KTP, dan selfie untuk memastikan
                                keaslian pemilik akun pembeli/konsumen</p>
                        </div>
                    </div>

                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <h3
                            class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-700/50 pb-2">
                            <span class="material-symbols-outlined text-primary text-lg">verified_user</span>
                            <span>Daftar Pengajuan Verifikasi Anggota</span>
                        </h3>
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Foto Profil</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Lengkap</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            NIK</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Alamat Utama</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Status Verifikasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Verifikasi KTP / Selfie</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Aksi Persetujuan</th>
                                    </tr>
                                </thead>
                                <tbody id="s-users-verif-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Manajemen Hak Akses & Menu -->
                <div id="super-permissions-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header flex justify-between items-center">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Manajemen Hak
                                Akses & Menu</h2>
                            <p class="text-slate-400 text-sm">Kelola konfigurasi menu aktif untuk masing-masing hak
                                akses / role pengguna</p>
                        </div>
                    </div>

                    <!-- Deskripsi Peran Pengguna (Screenshot Data) -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <!-- Super Admin Card -->
                        <div
                            class="bg-slate-800/20 backdrop-blur-md border border-slate-700/30 rounded-2xl p-5 flex flex-col gap-3 shadow-lg">
                            <div class="flex items-center gap-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span>
                                <h4 class="font-heading font-bold text-white text-sm">Super Admin</h4>
                            </div>
                            <p class="text-slate-300 text-xs leading-relaxed"><strong
                                    class="text-white">Pengguna:</strong> Bid TIK Polda Gorontalo & Tim IT Dinas
                                Koperasi Provinsi Gorontalo.</p>
                            <div class="mt-auto pt-2 border-t border-slate-800/40">
                                <span
                                    class="text-[10px] bg-rose-950/40 text-primary border border-rose-800/30 px-2 py-0.5 rounded-full font-bold">Akses:
                                    Full Akses</span>
                            </div>
                        </div>
                        <!-- Admin Dinas Card -->
                        <div
                            class="bg-slate-800/20 backdrop-blur-md border border-slate-700/30 rounded-2xl p-5 flex flex-col gap-3 shadow-lg">
                            <div class="flex items-center gap-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                                <h4 class="font-heading font-bold text-white text-sm">Admin Dinas</h4>
                            </div>
                            <p class="text-slate-300 text-xs leading-relaxed"><strong
                                    class="text-white">Pengguna:</strong> Dinas Koperasi Provinsi Gorontalo.</p>
                            <div class="mt-auto pt-2 border-t border-slate-800/40">
                                <span
                                    class="text-[10px] bg-blue-950/40 text-blue-400 border border-blue-800/30 px-2 py-0.5 rounded-full font-bold">Akses:
                                    Kelola Pendaftaran Koperasi</span>
                            </div>
                        </div>
                        <!-- User (Admin Koperasi) Card -->
                        <div
                            class="bg-slate-800/20 backdrop-blur-md border border-slate-700/30 rounded-2xl p-5 flex flex-col gap-3 shadow-lg">
                            <div class="flex items-center gap-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
                                <h4 class="font-heading font-bold text-white text-sm">User (Admin Koperasi)</h4>
                            </div>
                            <p class="text-slate-300 text-xs leading-relaxed"><strong
                                    class="text-white">Pengguna:</strong> Koperasi yang terdaftar pada sistem.</p>
                            <div class="mt-auto pt-2 border-t border-slate-800/40">
                                <span
                                    class="text-[10px] bg-amber-950/40 text-amber-400 border border-amber-800/30 px-2 py-0.5 rounded-full font-bold">Akses:
                                    Kelola Produk, Stok, Hasil Jual</span>
                            </div>
                        </div>
                        <!-- Customer Card -->
                        <div
                            class="bg-slate-800/20 backdrop-blur-md border border-slate-700/30 rounded-2xl p-5 flex flex-col gap-3 shadow-lg">
                            <div class="flex items-center gap-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                                <h4 class="font-heading font-bold text-white text-sm">Customer</h4>
                            </div>
                            <p class="text-slate-300 text-xs leading-relaxed"><strong
                                    class="text-white">Pengguna:</strong> Pembeli umum (anggota/non-anggota).</p>
                            <div class="mt-auto pt-2 border-t border-slate-800/40">
                                <span
                                    class="text-[10px] bg-emerald-950/40 text-emerald-400 border border-emerald-800/30 px-2 py-0.5 rounded-full font-bold">Akses:
                                    Beli, Checkout, Bayar, Kirim</span>
                            </div>
                        </div>
                    </div>

                    <!-- Tabel Matriks Menu -->
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl flex flex-col gap-4">
                        <div class="flex justify-between items-center border-b border-slate-700/50 pb-3">
                            <h3 class="font-heading text-base font-bold text-white flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-lg">admin_panel_settings</span>
                                <span>Matriks Visibilitas Menu & Fitur</span>
                            </h3>
                            <button onclick="resetPermissionsToDefault()"
                                class="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 rounded-lg text-xs font-semibold flex items-center gap-1.5 transition">
                                <span class="material-symbols-outlined text-xs">restart_alt</span>
                                <span>Reset ke Default</span>
                            </button>
                        </div>

                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Menu / Modul</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Super Admin</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Admin Dinas</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Admin Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Customer</th>
                                    </tr>
                                </thead>
                                <tbody id="permissions-matrix-body" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- Dynamic rows injected by JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Pengaturan Sistem -->
                <div id="super-settings-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Pengaturan Sistem
                            </h2>
                            <p class="text-slate-400 text-sm">Konfigurasi parameter global portal nasional</p>
                        </div>
                    </div>

                    <div
                        class="max-w-2xl bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl mb-6">
                        <h3
                            class="font-heading text-base font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-700/50 pb-2">
                            <span class="material-symbols-outlined text-primary text-lg">settings</span>
                            <span>Konfigurasi Global</span>
                        </h3>
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Aplikasi Portal</label>
                            <input type="text" id="setting-app-name"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                value="Koperasi Digital Merah Putih">
                        </div>
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Tahun Pembukuan Aktif</label>
                            <input type="number" id="setting-active-year"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                value="2026">
                        </div>
                    </div>

                    <!-- SMTP Configuration -->
                    <div
                        class="max-w-2xl bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="flex items-center gap-4 mb-6 border-b border-slate-700/50 pb-4">
                            <div class="w-12 h-12 rounded-xl bg-emerald-500/20 flex items-center justify-center text-emerald-400">
                                <span class="material-symbols-outlined">mail</span>
                            </div>
                            <div>
                                <h3 class="font-heading text-lg font-bold text-white">Konfigurasi Mail Server (SMTP)</h3>
                                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Pengaturan Pengiriman Email Notifikasi</p>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label class="block text-slate-400 text-xs font-semibold mb-2">SMTP HOST</label>
                                <input type="text" id="setting-smtp-host" placeholder="smtp.gmail.com"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            </div>
                            <div>
                                <label class="block text-slate-400 text-xs font-semibold mb-2">SMTP PORT</label>
                                <input type="number" id="setting-smtp-port" placeholder="465"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            </div>
                            <div>
                                <label class="block text-slate-400 text-xs font-semibold mb-2">SMTP CRYPTO</label>
                                <select id="setting-smtp-crypto"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary appearance-none">
                                    <option value="ssl">SSL</option>
                                    <option value="tls">TLS</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                            <div>
                                <label class="block text-slate-400 text-xs font-semibold mb-2">SMTP USER</label>
                                <input type="text" id="setting-smtp-user" placeholder="email@gmail.com"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            </div>
                            <div>
                                <label class="block text-slate-400 text-xs font-semibold mb-2">SMTP PASSWORD</label>
                                <input type="password" id="setting-smtp-pass" placeholder="********"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            </div>
                        </div>

                        <div class="mb-5">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">EMAIL PENGIRIM (FROM)</label>
                            <input type="email" id="setting-smtp-from" placeholder="noreply@kopdigi.go.id"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        </div>

                        <button
                            class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200 w-full"
                            onclick="saveSystemSettings()">Simpan Pengaturan</button>
                    </div>
                </div>

                <!-- ---------------------------------------- -->
                <!-- 2. ADMIN DINAS WORKSPACE TABS -->
                <!-- ---------------------------------------- -->
                <div id="dinas-dashboard-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Dashboard
                                Pengawasan Dinas</h2>
                            <p class="text-slate-400 text-sm">Pemantauan koperasi regional di bawah naungan Dinas
                                Koperasi</p>
                        </div>
                        <span
                            class="bg-rose-950/30 text-primary border border-rose-800/30 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">Dinas
                            Officer</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-emerald-500 to-green-700 text-white shadow-lg shadow-emerald-500/20">
                                <span class="material-symbols-outlined">verified</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Koperasi Aktif</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white" id="d-stat-active-coops">
                                    3</h4>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-amber-500 to-orange-700 text-white shadow-lg shadow-amber-500/20">
                                <span class="material-symbols-outlined">rule</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Pengajuan Baru</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white"
                                    id="d-stat-pending-coops">1</h4>
                            </div>
                        </div>
                    </div>
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl pulse-card">
                        <h3 class="font-heading text-lg font-bold text-white mb-4">Pengajuan Koperasi Menunggu
                            Verifikasi</h3>
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kode</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kabupaten</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan</th>
                                    </tr>
                                </thead>
                                <tbody id="d-coops-pending-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="dinas-coops-daftar-panel"
                    class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6" style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Daftar Pengajuan
                                Koperasi</h2>
                            <p class="text-slate-400 text-sm">Lihat status pengajuan masuk dari unit koperasi baru</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kode</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kabupaten</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tanggal Pengajuan</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                    </tr>
                                </thead>
                                <tbody id="d-coops-all-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="dinas-coops-verif-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Verifikasi &
                                Pengesahan Koperasi</h2>
                            <p class="text-slate-400 text-sm">Melakukan evaluasi perizinan dan menyetujui legalitas
                                koperasi</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kabupaten</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan Legal</th>
                                    </tr>
                                </thead>
                                <tbody id="d-coops-legal-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="dinas-products-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Monitoring Produk
                                Pengawasan</h2>
                            <p class="text-slate-400 text-sm">Katalog produk dari koperasi terdaftar yang diawasi Dinas
                            </p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Foto</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Produk</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Koperasi Afiliasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Harga</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Stok</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                    </tr>
                                </thead>
                                <tbody id="d-products-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="dinas-orders-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Monitoring
                                Transaksi Pengawasan</h2>
                            <p class="text-slate-400 text-sm">Daftar transaksi belanja produk dari koperasi yang diawasi
                                Dinas</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Invoice</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Koperasi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Total Belanja</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                    </tr>
                                </thead>
                                <tbody id="d-orders-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="dinas-reports-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Laporan
                                Perkembangan Koperasi</h2>
                            <p class="text-slate-400 text-sm">Statistik pertumbuhan modal dan produk koperasi regional
                            </p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <h3 class="font-heading text-lg font-bold text-white">Statistik Pengawasan Regional</h3>
                        <p class="mt-3 text-slate-400 text-sm leading-relaxed">
                            Dinas Koperasi Gorontalo membawahi 4 koperasi terdaftar, dengan 3 berstatus aktif dan 1
                            pending. Total perputaran uang di pasar digital mencapai Rp6.120.000 selama bulan Mei 2026.
                        </p>
                    </div>
                </div>

                <div id="dinas-settings-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Pengaturan Dinas
                                Regional</h2>
                            <p class="text-slate-400 text-sm">Konfigurasi parameter instansi Dinas Koperasi setempat</p>
                        </div>
                    </div>
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl max-w-xl">
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Dinas Daerah</label>
                            <input type="text"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                value="Dinas Koperasi & UMKM Provinsi Gorontalo">
                        </div>
                        <div class="mb-5">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Wilayah Hukum
                                Pengawasan</label>
                            <input type="text"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                value="Gorontalo">
                        </div>
                        <button
                            class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200"
                            onclick="logConsole('Pengaturan dinas berhasil disimpan!')">Simpan Pengaturan</button>
                    </div>
                </div>

                <!-- ---------------------------------------- -->
                <!-- 3. ADMIN KOPERASI WORKSPACE TABS -->
                <!-- ---------------------------------------- -->
                <div id="coop-dashboard-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight"
                                id="c-store-title-dashboard">Dashboard Koperasi</h2>
                            <p class="text-slate-400 text-sm">Pemantauan toko koperasi Anda secara real-time</p>
                        </div>
                        <span
                            class="bg-rose-950/30 text-primary border border-rose-800/30 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider"
                            id="c-store-badge-dashboard">Koperasi Aktif</span>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-rose-500 to-red-700 text-white shadow-lg shadow-rose-500/20">
                                <span class="material-symbols-outlined">payments</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Penjualan Koperasi</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white" id="c-stat-sales">Rp 0
                                </h4>
                            </div>
                        </div>
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-5 flex items-center gap-4 shadow-xl">
                            <div
                                class="w-12 h-12 rounded-xl flex items-center justify-center text-xl bg-gradient-to-br from-emerald-500 to-green-700 text-white shadow-lg shadow-emerald-500/20">
                                <span class="material-symbols-outlined">receipt_long</span>
                            </div>
                            <div>
                                <span class="text-slate-400 text-xs font-medium">Pesanan Sukses</span>
                                <h4 class="text-2xl font-black font-heading mt-0.5 text-white" id="c-stat-orders">0</h4>
                            </div>
                        </div>
                    </div>
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl pulse-card">
                        <h3 class="font-heading text-lg font-bold text-white mb-4">Daftar Pesanan Masuk (Butuh Diproses)
                        </h3>
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Invoice</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Pelanggan</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Total Belanja</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan</th>
                                    </tr>
                                </thead>
                                <tbody id="c-incoming-orders-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="coop-profile-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Profil Koperasi
                            </h2>
                            <p class="text-slate-400 text-sm">Perbarui informasi deskripsi toko, logo, dan alamat
                                koperasi</p>
                        </div>
                    </div>
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl max-w-xl">
                        <input type="hidden" id="c-profile-id">
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Koperasi</label>
                            <input type="text" id="c-profile-nama"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        </div>
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Kode Koperasi</label>
                            <input type="text" id="c-profile-kode"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-slate-500 text-sm outline-none"
                                disabled>
                        </div>
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Kabupaten / Kota</label>
                            <input type="text" id="c-profile-kab"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        </div>
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Provinsi</label>
                            <input type="text" id="c-profile-prov"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        </div>
                        <div class="mb-4">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Alamat Lengkap Kantor</label>
                            <textarea id="c-profile-alamat"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                rows="3"></textarea>
                        </div>
                        <div class="mb-5">
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Link Logo Koperasi</label>
                            <input type="text" id="c-profile-logo"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        </div>
                        <button
                            class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200"
                            onclick="saveCoopProfile()">Simpan Perubahan</button>
                    </div>
                </div>

                <div id="coop-categories-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Kategori Produk
                                Koperasi</h2>
                            <p class="text-slate-400 text-sm">Kategori barang yang tersedia untuk pembagian jenis
                                sembako, dll.</p>
                        </div>
                    </div>
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl max-w-md">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            ID</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Icon</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Kategori</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-800/60 text-sm">
                                    <tr>
                                        <td class="py-3 px-4">1</td>
                                        <td class="py-3 px-4"><span
                                                class="material-symbols-outlined text-lg">shopping_cart</span></td>
                                        <td class="py-3 px-4 font-semibold text-slate-200">Sembako</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 px-4">2</td>
                                        <td class="py-3 px-4"><span
                                                class="material-symbols-outlined text-lg">devices</span></td>
                                        <td class="py-3 px-4 font-semibold text-slate-200">Elektronik</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 px-4">3</td>
                                        <td class="py-3 px-4"><span
                                                class="material-symbols-outlined text-lg">storefront</span></td>
                                        <td class="py-3 px-4 font-semibold text-slate-200">UMKM</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 px-4">4</td>
                                        <td class="py-3 px-4"><span
                                                class="material-symbols-outlined text-lg">agriculture</span></td>
                                        <td class="py-3 px-4 font-semibold text-slate-200">Pertanian</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="coop-products-daftar-panel"
                    class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6" style="display: none;">
                    <div class="panel-header flex items-center justify-between">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Data & Stok
                                Produk Koperasi</h2>
                            <p class="text-slate-400 text-sm">Kelola, edit, dan hapus produk dagangan koperasi Anda</p>
                        </div>
                        <button onclick="switchTab('coop-products-add')"
                            class="flex items-center gap-2 bg-gradient-to-r from-primary to-secondary text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-lg hover:opacity-90 transition">
                            <span class="material-symbols-outlined text-base">add_box</span>
                            Tambah Produk
                        </button>
                    </div>

                    <!-- Search & Filter Bar -->
                    <div class="flex gap-3 items-center">
                        <div class="relative flex-1">
                            <span
                                class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-base">search</span>
                            <input type="text" id="prod-search-input" oninput="filterCoopProducts()"
                                placeholder="Cari nama produk..."
                                class="w-full bg-slate-800/60 border border-slate-700/60 rounded-xl pl-10 pr-4 py-2.5 text-white text-xs focus:outline-none focus:border-primary">
                        </div>
                        <select id="prod-filter-cat" onchange="filterCoopProducts()"
                            class="bg-slate-800/60 border border-slate-700/60 rounded-xl px-3 py-2.5 text-slate-300 text-xs focus:outline-none focus:border-primary">
                            <option value="">Semua Kategori</option>
                            <option value="1">Sembako / Bahan Pokok</option>
                            <option value="2">Elektronik</option>
                            <option value="3">UMKM</option>
                            <option value="4">Hasil Pertanian</option>
                            <option value="5">Obat-obatan</option>
                        </select>
                    </div>

                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl shadow-xl overflow-hidden">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60 bg-slate-900/40">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Foto</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Produk</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kategori</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Harga</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Stok</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Rating</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">
                                            Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="c-products-list-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- SELLER INBOX / PESAN MASUK PANEL -->
                <div id="coop-messages-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Pesan Masuk</h2>
                            <p class="text-slate-400 text-sm">Diskusi & pertanyaan pembeli terkait produk koperasi Anda
                            </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0">
                        <!-- Thread List -->
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl shadow-xl flex flex-col overflow-hidden">
                            <div class="px-5 py-4 border-b border-slate-700/50">
                                <div class="relative">
                                    <span
                                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-base">search</span>
                                    <input type="text" id="msg-search" oninput="filterMessageThreads()"
                                        placeholder="Cari percakapan..."
                                        class="w-full bg-slate-900/60 border border-slate-700/60 rounded-xl pl-9 pr-4 py-2 text-white text-xs focus:outline-none focus:border-primary">
                                </div>
                            </div>
                            <div id="msg-thread-list" class="flex-1 overflow-y-auto divide-y divide-slate-800/60">
                                <div class="text-center py-10 text-slate-500 text-xs">Memuat percakapan...</div>
                            </div>
                        </div>

                        <!-- Active Conversation -->
                        <div
                            class="lg:col-span-2 bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl shadow-xl flex flex-col overflow-hidden">
                            <!-- Conv Header -->
                            <div id="msg-conv-header"
                                class="px-5 py-4 border-b border-slate-700/50 flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-slate-700/60 flex items-center justify-center">
                                    <span class="material-symbols-outlined text-slate-400 text-xl">forum</span>
                                </div>
                                <div class="flex-1">
                                    <div id="msg-conv-product" class="text-sm font-bold text-white">Pilih percakapan
                                    </div>
                                    <div id="msg-conv-buyer" class="text-[10px] text-slate-400">Klik salah satu thread
                                        di kiri untuk memulai</div>
                                </div>
                                <span id="msg-conv-status"
                                    class="hidden text-[9px] font-bold uppercase px-2 py-1 rounded-full bg-emerald-500/20 text-emerald-400">Aktif</span>
                            </div>

                            <!-- Messages -->
                            <div id="seller-msg-container"
                                class="flex-1 overflow-y-auto p-5 space-y-4 text-xs min-h-[300px]">
                                <div class="text-center text-slate-600 py-10">Belum ada percakapan yang dipilih.</div>
                            </div>

                            <!-- Input -->
                            <div id="seller-msg-input-area"
                                class="px-5 py-4 border-t border-slate-700/50 flex gap-3 hidden">
                                <input type="text" id="seller-reply-input" onkeyup="handleSellerMsgKeyup(event)"
                                    placeholder="Balas pertanyaan pembeli..."
                                    class="flex-1 bg-slate-900/60 border border-slate-700/60 rounded-xl px-4 py-2.5 text-white text-xs focus:outline-none focus:border-primary placeholder-slate-500">
                                <button onclick="sendSellerReply()"
                                    class="bg-gradient-to-r from-primary to-secondary text-white text-xs font-bold px-4 py-2.5 rounded-xl flex items-center gap-1.5 shadow-lg hover:opacity-90 transition">
                                    <span class="material-symbols-outlined text-sm">send</span>
                                    Kirim
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="coop-products-add-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Tambah Produk
                                Baru</h2>
                            <p class="text-slate-400 text-sm">Tulis detail deskripsi produk secara manual atau buat
                                otomatis dengan AI</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2.5 gap-6">
                        <!-- Manual input -->
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                            <h3 class="font-heading text-lg font-bold text-white mb-4">Form Input Produk</h3>
                            <div class="mb-4">
                                <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Produk</label>
                                <input type="text" id="c-new-prod-name"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                    placeholder="Beras Premium 5kg...">
                            </div>
                            <div class="mb-4">
                                <label class="block text-slate-400 text-xs font-semibold mb-2">Kategori Produk</label>
                                <select id="c-new-prod-cat"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                                    <option value="1">Sembako</option>
                                    <option value="2">Elektronik</option>
                                    <option value="3">UMKM</option>
                                    <option value="4">Pertanian</option>
                                </select>
                            </div>
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-slate-400 text-xs font-semibold mb-2">Harga Jual & Satuan</label>
                                    <div class="flex gap-2">
                                        <input type="number" id="c-new-prod-price"
                                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                            placeholder="75000">
                                        <select id="c-new-prod-satuan" class="w-28 shrink-0 bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                                            <option value="kg">/ kg</option>
                                            <option value="liter">/ liter</option>
                                            <option value="buah">/ buah</option>
                                            <option value="set">/ set</option>
                                            <option value="biji">/ biji</option>
                                            <option value="karung">/ karung</option>
                                            <option value="unit">/ unit</option>
                                            <option value="pcs">/ pcs</option>
                                            <option value="pak">/ pak</option>
                                            <option value="gram">/ gram</option>
                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-slate-400 text-xs font-semibold mb-2">Stok Awal</label>
                                    <input type="number" id="c-new-prod-stock"
                                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                        placeholder="50">
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-slate-400 text-xs font-semibold mb-2">Foto Produk</label>
                                <div class="flex gap-2">
                                    <input type="text" id="c-new-prod-foto"
                                        class="flex-1 bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                        placeholder="URL gambar atau pilih file/kamera...">
                                    <button onclick="document.getElementById('c-new-prod-file').click()" class="bg-slate-700 hover:bg-slate-600 text-white rounded-xl px-4 flex items-center justify-center transition" title="Upload Foto dari File">
                                        <span class="material-symbols-outlined text-lg">upload_file</span>
                                    </button>
                                    <button onclick="document.getElementById('c-new-prod-camera').click()" class="bg-slate-700 hover:bg-slate-600 text-white rounded-xl px-4 flex items-center justify-center transition" title="Ambil Foto dengan Kamera">
                                        <span class="material-symbols-outlined text-lg">photo_camera</span>
                                    </button>
                                </div>
                                <input type="file" id="c-new-prod-file" accept="image/*" class="hidden" onchange="handleProductImageUpload(this)">
                                <input type="file" id="c-new-prod-camera" accept="image/*" capture="environment" class="hidden" onchange="handleProductImageUpload(this)">
                                <div id="c-new-prod-preview" class="mt-3 hidden">
                                    <img src="" id="c-new-prod-preview-img" class="h-24 w-24 object-cover rounded-xl border border-slate-700/60 shadow-lg">
                                    <span class="text-[10px] text-emerald-400 ml-3 font-semibold">✓ Gambar siap digunakan</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-slate-400 text-xs font-semibold mb-2">Tags Pencarian
                                    (koma-sebagai-pemisah)</label>
                                <input type="text" id="c-new-prod-tags"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                    placeholder="beras, sembako, pulen">
                            </div>
                            <div class="mb-5">
                                <label class="block text-slate-400 text-xs font-semibold mb-2">Deskripsi Lengkap
                                    Produk</label>
                                <textarea id="c-new-prod-desc"
                                    class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                    rows="4" placeholder="Beras ini berbau wangi..."></textarea>
                            </div>
                            <button
                                class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-5 py-3 rounded-xl shadow-lg transition duration-200 w-full"
                                onclick="submitNewProduct()">Publish Produk Baru</button>
                        </div>

                        <!-- AI Writer Box -->
                        <div
                            class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl self-start">
                            <div class="flex items-center gap-2 mb-3">
                                <span class="material-symbols-outlined text-primary text-xl">smart_toy</span>
                                <h3 class="font-heading text-base font-bold text-white">AI Seller Assistant</h3>
                            </div>
                            <p class="text-slate-400 text-xs leading-relaxed mb-4">
                                Tulis kata kunci produk (misal: "baju batik" atau "kopi arabika"). Kecerdasan buatan
                                akan menulis judul produk, tag SEO, dan deskripsi pemasaran secara otomatis.
                            </p>
                            <div class="flex gap-2 mb-4">
                                <input type="text" id="ai-product-keyword"
                                    class="flex-1 bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                    placeholder="Beras ketan wangi...">
                                <button
                                    class="bg-gradient-to-r from-primary to-secondary text-white font-bold text-xs px-4 py-3 rounded-xl shadow-lg transition duration-200"
                                    onclick="askSellerAi()">Tulis AI</button>
                            </div>
                            <div id="ai-product-output"
                                class="hidden bg-slate-900/60 border border-slate-700/60 p-4 rounded-xl text-slate-300 text-xs space-y-3">
                                <!-- Output inside -->
                            </div>
                        </div>
                    </div>
                </div>

                <div id="coop-orders-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Daftar Pesanan
                                Masuk</h2>
                            <p class="text-slate-400 text-sm">Kelola proses penyelesaian transaksi masuk dari customer
                            </p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Invoice</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Pelanggan</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Total Pembayaran</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Tindakan Operasi</th>
                                    </tr>
                                </thead>
                                <tbody id="c-orders-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="coop-shipping-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Manajemen
                                Pengiriman Kurir</h2>
                            <p class="text-slate-400 text-sm">Pantau resi kurir dan update status keberangkatan barang
                            </p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Invoice</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Kurir Ekspedisi</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Alamat Pengiriman</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status Terkini</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Update Pengiriman</th>
                                    </tr>
                                </thead>
                                <tbody id="c-shipping-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="coop-reports-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Laporan Penjualan
                                Koperasi</h2>
                            <p class="text-slate-400 text-sm">Rekap pemasukan bulanan toko koperasi Anda</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <h3 class="font-heading text-lg font-bold text-white mb-2">Volume Omset Bulanan</h3>
                        <p class="text-slate-400 text-sm leading-relaxed" id="c-reports-text">
                            Total omset toko koperasi saat ini adalah Rp0 dari rekap seluruh pesanan selesai.
                        </p>
                    </div>
                </div>

                <div id="coop-customers-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Customer
                                Terdaftar</h2>
                            <p class="text-slate-400 text-sm">Daftar pelanggan yang pernah berbelanja di toko koperasi
                                Anda</p>
                        </div>
                    </div>
                    <div class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl">
                        <div class="overflow-x-auto w-full">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="border-b border-slate-700/60">
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nama Pelanggan</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Email</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Nomor Telp</th>
                                        <th
                                            class="py-3 px-4 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                            Status Akun</th>
                                    </tr>
                                </thead>
                                <tbody id="c-customers-table" class="divide-y divide-slate-800/60 text-sm">
                                    <!-- JS Injected -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="coop-settings-panel" class="workspace-panel flex-1 p-8 overflow-y-auto flex flex-col gap-6"
                    style="display: none;">
                    <div class="panel-header">
                        <div>
                            <h2 class="font-heading text-2xl font-extrabold text-white tracking-tight">Pengaturan Toko
                                Koperasi</h2>
                            <p class="text-slate-400 text-sm">Konfigurasi operasional, jam kerja, dan pilihan pembayaran
                                koperasi</p>
                        </div>
                    </div>
                    <div
                        class="bg-slate-800/40 backdrop-blur-md border border-slate-700/50 rounded-2xl p-6 shadow-xl max-w-xl flex flex-col gap-5">
                        <div>
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Jam Buka Toko</label>
                            <input id="coop-settings-hours" type="text"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                value="08:00 - 17:00 WITA">
                        </div>
                        <div>
                            <label class="block text-slate-400 text-xs font-semibold mb-2">Biaya Packing Tambahan
                                (Rp)</label>
                            <input id="coop-settings-packing" type="number"
                                class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                value="2000">
                        </div>

                        <div class="border-t border-slate-850 pt-4 flex flex-col gap-3">
                            <label class="block text-slate-400 text-xs font-semibold uppercase tracking-wider">Metode
                                Pembayaran Toko</label>
                            <p class="text-slate-500 text-[10px]">Aktifkan opsi pembayaran yang didukung oleh koperasi
                                untuk transaksi pembeli.</p>
                            <div class="grid grid-cols-2 gap-3 mt-1" id="coop-payment-options">
                                <label
                                    class="flex items-center gap-2.5 p-3 bg-slate-900 border border-slate-800/60 rounded-xl cursor-pointer hover:border-primary/45 transition">
                                    <input type="checkbox" id="pay-qris" value="qris"
                                        class="w-4 h-4 rounded text-primary focus:ring-primary/40 bg-slate-950 border-slate-800">
                                    <span class="text-xs font-bold text-slate-200">QRIS Koperasi Digital</span>
                                </label>
                                <label
                                    class="flex items-center gap-2.5 p-3 bg-slate-900 border border-slate-800/60 rounded-xl cursor-pointer hover:border-primary/45 transition">
                                    <input type="checkbox" id="pay-transfer" value="transfer_bank"
                                        class="w-4 h-4 rounded text-primary focus:ring-primary/40 bg-slate-950 border-slate-800">
                                    <span class="text-xs font-bold text-slate-200">Transfer Bank Manual</span>
                                </label>
                                <label
                                    class="flex items-center gap-2.5 p-3 bg-slate-900 border border-slate-800/60 rounded-xl cursor-pointer hover:border-primary/45 transition">
                                    <input type="checkbox" id="pay-bri" value="bri"
                                        class="w-4 h-4 rounded text-primary focus:ring-primary/40 bg-slate-950 border-slate-800">
                                    <span class="text-xs font-bold text-slate-200">Bank BRI (BRIVA)</span>
                                </label>
                                <label
                                    class="flex items-center gap-2.5 p-3 bg-slate-900 border border-slate-800/60 rounded-xl cursor-pointer hover:border-primary/45 transition">
                                    <input type="checkbox" id="pay-bni" value="bni"
                                        class="w-4 h-4 rounded text-primary focus:ring-primary/40 bg-slate-950 border-slate-800">
                                    <span class="text-xs font-bold text-slate-200">Bank BNI VA</span>
                                </label>
                                <label
                                    class="flex items-center gap-2.5 p-3 bg-slate-900 border border-slate-800/60 rounded-xl cursor-pointer hover:border-primary/45 transition">
                                    <input type="checkbox" id="pay-mandiri" value="mandiri"
                                        class="w-4 h-4 rounded text-primary focus:ring-primary/40 bg-slate-950 border-slate-800">
                                    <span class="text-xs font-bold text-slate-200">Bank Mandiri VA</span>
                                </label>
                                <label
                                    class="flex items-center gap-2.5 p-3 bg-slate-900 border border-slate-800/60 rounded-xl cursor-pointer hover:border-primary/45 transition">
                                    <input type="checkbox" id="pay-bsi" value="bsi"
                                        class="w-4 h-4 rounded text-primary focus:ring-primary/40 bg-slate-950 border-slate-800">
                                    <span class="text-xs font-bold text-slate-200">Bank BSI VA</span>
                                </label>
                            </div>
                        </div>

                        <button
                            class="bg-gradient-to-r from-primary to-secondary hover:from-primary/95 hover:to-secondary/95 text-white font-bold text-xs px-5 py-3.5 rounded-xl shadow-lg transition duration-200 mt-2"
                            onclick="saveCoopSettings()">Simpan Pengaturan</button>
                    </div>
                </div>

            </div> <!-- End of panels wrapper -->

            <!-- Premium Footer Section -->
            <footer
                class="bg-brandSurface/90 backdrop-blur-md border-t border-slate-800/90 py-4 px-8 flex justify-between items-center text-sm text-slate-400 shrink-0 z-20">
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    <span class="text-xs uppercase font-bold tracking-wider text-slate-500">System Status: Online</span>
                </div>
                <div class="text-xs text-slate-400 font-medium">
                    Koperasi Digital Merah Putih <span class="text-primary font-bold">Versi 2.0</span> &nbsp;•&nbsp;
                    Copyright © 2026
                </div>
            </footer>
        </main>

        <!-- ============================================ -->
        <!-- SMARTPHONE SIMULATOR PANEL (RIGHT SIDE) -->
        <!-- ============================================ -->
        <section id="smartphone-simulator"
            class="hidden w-[400px] border-l border-slate-800/60 bg-[#090d16] flex flex-col items-center justify-center p-4 relative overflow-hidden shrink-0">

            <div
                class="w-[335px] h-[670px] bg-black rounded-[40px] border-[10px] border-slate-800 shadow-2xl relative overflow-hidden flex flex-col shadow-rose-950/20 smartphone-frame">
                <div class="flex-1 bg-slate-50 text-slate-800 overflow-hidden flex flex-col relative phone-screen">

                    <!-- Phone status bar -->
                    <div
                        class="h-9 bg-primary pt-3.5 px-5 flex justify-between items-center text-white text-[10px] font-bold z-[90] phone-status-bar">
                        <span>10:44</span>
                        <div class="flex gap-1 items-center">
                            <span class="material-symbols-outlined text-[10px]">wifi</span>
                            <span class="material-symbols-outlined text-[10px]">signal_cellular_4_bar</span>
                            <span class="material-symbols-outlined text-[10px]">battery_full</span>
                        </div>
                    </div>

                    <!-- Active Phone View Container (Injected dynamically) -->
                    <div id="phone-content-area" class="flex-1 flex flex-col overflow-hidden relative">
                        <!-- JS Dynamic content rendering -->
                    </div>

                    <!-- Phone bottom navigation tabs -->
                    <div class="absolute bottom-0 left-0 right-0 h-13 bg-white border-t border-slate-200 flex justify-around items-center z-[95] phone-bottom-nav"
                        id="phone-bottom-nav" style="display: none;">
                        <div class="flex flex-col items-center text-slate-400 cursor-pointer text-[9px] font-semibold flex-1 py-1 transition duration-150 nav-tab active"
                            data-tab="home">
                            <span class="material-symbols-outlined text-lg mb-0.5">home</span>
                            <span>Portal</span>
                        </div>
                        <div class="flex flex-col items-center text-slate-400 cursor-pointer text-[9px] font-semibold flex-1 py-1 transition duration-150 nav-tab"
                            data-tab="koperasi">
                            <span class="material-symbols-outlined text-lg mb-0.5">storefront</span>
                            <span>Koperasi</span>
                        </div>
                        <div class="flex flex-col items-center text-slate-400 cursor-pointer text-[9px] font-semibold flex-1 py-1 transition duration-150 nav-tab"
                            data-tab="history">
                            <span class="material-symbols-outlined text-lg mb-0.5">history</span>
                            <span>Belanja Saya</span>
                        </div>
                        <div class="flex flex-col items-center text-slate-400 cursor-pointer text-[9px] font-semibold flex-1 py-1 transition duration-150 nav-tab"
                            data-tab="ai-cs">
                            <span class="material-symbols-outlined text-lg mb-0.5">smart_toy</span>
                            <span>AI CS</span>
                        </div>
                    </div>

                </div>
            </div>

        </section>

    </div>

    <!-- EDIT USER MODAL -->
    <div id="edit-user-modal"
        class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/75 backdrop-blur-sm transition duration-300">
        <div
            class="w-full max-w-lg bg-brandSurface border border-slate-800/80 rounded-3xl p-6 shadow-2xl relative overflow-hidden transition-all transform scale-95 duration-300">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <div class="flex justify-between items-center mb-6">
                <h3 class="font-heading text-lg font-bold text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">manage_accounts</span>
                    <span>Ubah Kredensial Pengguna</span>
                </h3>
                <button onclick="closeEditUserModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <form id="edit-user-form" onsubmit="event.preventDefault(); saveEditedUser();" class="space-y-4">
                <input type="hidden" id="edit-user-id">

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Lengkap</label>
                    <input type="text" id="edit-user-nama" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Username / Email</label>
                    <input type="text" id="edit-user-email" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Hak Akses / Role</label>
                        <select id="edit-user-role"
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <option value="1">Super Admin</option>
                            <option value="2">Admin</option>
                            <option value="3">User (Koperasi)</option>
                            <option value="4">Customer</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Status Akun</label>
                        <select id="edit-user-status"
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <option value="active">ACTIVE</option>
                            <option value="suspended">SUSPENDED</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Afiliasi Koperasi</label>
                    <select id="edit-user-coop"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        <option value="">-</option>
                    </select>
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Password Baru (Kosongkan jika tidak
                        diubah)</label>
                    <input type="password" id="edit-user-pass"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                        placeholder="••••••••">
                </div>

                <div class="flex gap-3 justify-end pt-4 border-t border-slate-800/60">
                    <button type="button" onclick="closeEditUserModal()"
                        class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition">Batal</button>
                    <button type="submit"
                        class="px-5 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition">Simpan
                        Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- ADD COOP MODAL -->
    <div id="add-coop-modal"
        class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/75 backdrop-blur-sm transition duration-300">
        <div
            class="w-full max-w-lg bg-brandSurface border border-slate-800/80 rounded-3xl p-6 shadow-2xl relative overflow-hidden transition-all transform scale-95 duration-300">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <div class="flex justify-between items-center mb-6">
                <h3 class="font-heading text-lg font-bold text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">storefront</span>
                    <span>Tambah Koperasi Baru</span>
                </h3>
                <button onclick="closeAddCoopModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <form id="add-coop-form" onsubmit="event.preventDefault(); saveNewCoop();" class="space-y-4">
                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Kode Koperasi</label>
                    <input type="text" id="add-coop-kode" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="KOP-PEGAWAI-XYZ">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Koperasi</label>
                    <input type="text" id="add-coop-nama" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="Koperasi Pegawai ...">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Alamat Lengkap</label>
                    <input type="text" id="add-coop-alamat" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="Jl. ...">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Kabupaten / Kota</label>
                        <select id="add-coop-kabupaten" required
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <!-- Populated dynamically -->
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Provinsi</label>
                        <input type="text" id="add-coop-provinsi" required readonly
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                            value="Gorontalo">
                    </div>
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">URL Logo Koperasi (Opsional)</label>
                    <input type="url" id="add-coop-logo"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="https://images.unsplash.com/... (atau kosongkan)">
                </div>

                <div class="flex gap-3 justify-end pt-4 border-t border-slate-800/60">
                    <button type="button" onclick="closeAddCoopModal()"
                        class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition">Batal</button>
                    <button type="submit"
                        class="px-5 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition">Tambah
                        Koperasi</button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT COOP MODAL -->
    <div id="edit-coop-modal"
        class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/75 backdrop-blur-sm transition duration-300">
        <div
            class="w-full max-w-lg bg-brandSurface border border-slate-800/80 rounded-3xl p-6 shadow-2xl relative overflow-hidden transition-all transform scale-95 duration-300">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <div class="flex justify-between items-center mb-6">
                <h3 class="font-heading text-lg font-bold text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">edit_road</span>
                    <span>Edit Informasi Koperasi</span>
                </h3>
                <button onclick="closeEditCoopModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <form id="edit-coop-form" onsubmit="event.preventDefault(); saveEditCoop();" class="space-y-4">
                <input type="hidden" id="edit-coop-id">

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Kode Koperasi</label>
                    <input type="text" id="edit-coop-kode" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Koperasi</label>
                    <input type="text" id="edit-coop-nama" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Alamat Lengkap</label>
                    <input type="text" id="edit-coop-alamat" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Kabupaten / Kota</label>
                        <select id="edit-coop-kabupaten" required
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <!-- Populated dynamically -->
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Provinsi</label>
                        <input type="text" id="edit-coop-provinsi" required readonly
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                            value="Gorontalo">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">Status Operasional</label>
                        <select id="edit-coop-status" required
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <option value="aktif">Aktif</option>
                            <option value="nonaktif">Nonaktif</option>
                            <option value="pending">Pending</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-2">URL Logo</label>
                        <input type="text" id="edit-coop-logo"
                            class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700">
                    </div>
                </div>

                <div class="flex gap-3 justify-end pt-4 border-t border-slate-800/60">
                    <button type="button" onclick="closeEditCoopModal()"
                        class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition">Batal</button>
                    <button type="submit"
                        class="px-5 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition">Simpan
                        Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- ADD REGION MODAL -->
    <div id="add-region-modal"
        class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/75 backdrop-blur-sm transition duration-300">
        <div
            class="w-full max-w-lg bg-brandSurface border border-slate-800/80 rounded-3xl p-6 shadow-2xl relative overflow-hidden transition-all transform scale-95 duration-300">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <div class="flex justify-between items-center mb-6">
                <h3 class="font-heading text-lg font-bold text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">add_location_alt</span>
                    <span>Tambah Wilayah Pengawasan Baru</span>
                </h3>
                <button onclick="closeAddRegionModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <form id="add-region-form" onsubmit="event.preventDefault(); saveNewRegion();" class="space-y-4">
                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Kabupaten / Kota</label>
                    <input type="text" id="add-region-nama" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700"
                        placeholder="Kabupaten ...">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Provinsi</label>
                    <input type="text" id="add-region-provinsi" required readonly
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                        value="Gorontalo">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Deskripsi Wilayah</label>
                    <textarea id="add-region-deskripsi"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700 h-24"
                        placeholder="Keterangan singkat cakupan wilayah..."></textarea>
                </div>

                <div class="flex gap-3 justify-end pt-4 border-t border-slate-800/60">
                    <button type="button" onclick="closeAddRegionModal()"
                        class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition">Batal</button>
                    <button type="submit"
                        class="px-5 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition">Tambah
                        Wilayah</button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT REGION MODAL -->
    <div id="edit-region-modal"
        class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/75 backdrop-blur-sm transition duration-300">
        <div
            class="w-full max-w-lg bg-brandSurface border border-slate-800/80 rounded-3xl p-6 shadow-2xl relative overflow-hidden transition-all transform scale-95 duration-300">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <div class="flex justify-between items-center mb-6">
                <h3 class="font-heading text-lg font-bold text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">edit_location</span>
                    <span>Edit Informasi Wilayah</span>
                </h3>
                <button onclick="closeEditRegionModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <form id="edit-region-form" onsubmit="event.preventDefault(); saveEditRegion();" class="space-y-4">
                <input type="hidden" id="edit-region-id">

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Nama Kabupaten / Kota</label>
                    <input type="text" id="edit-region-nama" required
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Provinsi</label>
                    <input type="text" id="edit-region-provinsi" required readonly
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                        value="Gorontalo">
                </div>

                <div>
                    <label class="block text-slate-400 text-xs font-semibold mb-2">Deskripsi Wilayah</label>
                    <textarea id="edit-region-deskripsi"
                        class="w-full bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary placeholder-slate-700 h-24"></textarea>
                </div>

                <div class="flex gap-3 justify-end pt-4 border-t border-slate-800/60">
                    <button type="button" onclick="closeEditRegionModal()"
                        class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition">Batal</button>
                    <button type="submit"
                        class="px-5 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition">Simpan
                        Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- PRODUCT CHAT MODAL (OVERLAY) -->
    <div id="product-chat-modal"
        class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/75 backdrop-blur-sm transition duration-300">
        <div
            class="w-full max-w-lg bg-brandSurface border border-slate-800/80 rounded-3xl p-6 shadow-2xl relative overflow-hidden transition-all transform scale-95 duration-300 flex flex-col max-h-[85vh]">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>

            <!-- Header -->
            <div class="flex justify-between items-center pb-4 border-b border-slate-800/80 mb-4 shrink-0">
                <div class="flex items-center gap-3">
                    <img id="chat-seller-logo" src="https://images.unsplash.com/photo-1586201375761-83865001e31c?w=150"
                        class="w-10 h-10 rounded-xl object-cover border border-slate-700">
                    <div>
                        <div class="flex items-center gap-1.5">
                            <h3 id="chat-seller-name" class="font-heading text-sm font-bold text-white leading-tight">
                                Nama Koperasi</h3>
                            <span class="w-2 h-2 rounded-full bg-emerald-500 inline-block animate-pulse"
                                title="Seller Aktif"></span>
                        </div>
                        <p id="chat-product-name" class="text-slate-400 text-[10px] truncate max-w-[250px]">Tanya
                            tentang: Produk A</p>
                    </div>
                </div>
                <button onclick="closeProductChatModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>

            <!-- Messages Area -->
            <div id="chat-messages-container"
                class="flex-1 overflow-y-auto pr-1 space-y-4 my-2 text-xs flex flex-col min-h-[250px] max-h-[450px]">
                <!-- Messages will be injected by JavaScript -->
            </div>

            <!-- Input area -->
            <div class="pt-4 border-t border-slate-800/80 flex gap-2 shrink-0">
                <input type="text" id="chat-message-input" onkeyup="handleProductChatKeyup(event)"
                    class="flex-1 bg-slate-900 border border-slate-700/60 rounded-xl p-3 text-white text-xs focus:outline-none focus:border-primary placeholder-slate-500"
                    placeholder="Tulis pesan ke penjual...">
                <button onclick="sendProductChatMessage()"
                    class="px-4 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition flex items-center justify-center gap-1">
                    <span class="material-symbols-outlined text-sm">send</span>
                    <span>Kirim</span>
                </button>
            </div>
        </div>
    </div>

    <!-- EDIT PRODUCT MODAL -->
    <div id="edit-product-modal"
        class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 backdrop-blur-sm">
        <div
            class="w-full max-w-xl bg-slate-900 border border-slate-700/60 rounded-3xl shadow-2xl relative overflow-hidden flex flex-col max-h-[90vh]">
            <div class="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-primary to-secondary"></div>
            <!-- Header -->
            <div class="flex justify-between items-center px-6 py-5 border-b border-slate-800/60 shrink-0">
                <h3 class="font-heading text-lg font-bold text-white flex items-center gap-2">
                    <span class="material-symbols-outlined text-primary">edit</span>
                    Edit Produk
                </h3>
                <button onclick="closeEditProductModal()" class="text-slate-400 hover:text-white transition">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <!-- Form -->
            <form id="edit-product-form" onsubmit="event.preventDefault(); saveEditProduct();"
                class="overflow-y-auto flex-1 px-6 py-5 space-y-4">
                <input type="hidden" id="edit-prod-id">
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-1.5">Nama Produk</label>
                        <input type="text" id="edit-prod-name" required
                            class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                    </div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-slate-400 text-xs font-semibold mb-1.5">Harga & Satuan (Rp)</label>
                            <div class="flex gap-2">
                                <input type="number" id="edit-prod-price" required
                                    class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                                <select id="edit-prod-satuan" class="w-28 shrink-0 bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                                    <option value="kg">/ kg</option>
                                    <option value="liter">/ liter</option>
                                    <option value="buah">/ buah</option>
                                    <option value="set">/ set</option>
                                    <option value="biji">/ biji</option>
                                    <option value="karung">/ karung</option>
                                    <option value="unit">/ unit</option>
                                    <option value="pcs">/ pcs</option>
                                    <option value="pak">/ pak</option>
                                    <option value="gram">/ gram</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-slate-400 text-xs font-semibold mb-1.5">Stok</label>
                            <input type="number" id="edit-prod-stock" required
                                class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                        </div>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-1.5">Kategori</label>
                        <select id="edit-prod-cat"
                            class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <option value="1">Sembako / Bahan Pokok</option>
                            <option value="2">Elektronik</option>
                            <option value="3">UMKM</option>
                            <option value="4">Hasil Pertanian</option>
                            <option value="5">Obat-obatan</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-1.5">Foto Produk</label>
                        <div class="flex gap-2">
                            <input type="text" id="edit-prod-foto"
                                class="flex-1 bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                                placeholder="URL gambar atau pilih file/kamera...">
                            <button type="button" onclick="document.getElementById('edit-prod-file').click()" class="bg-slate-700 hover:bg-slate-600 text-white rounded-xl px-4 flex items-center justify-center transition" title="Upload Foto dari File">
                                <span class="material-symbols-outlined text-lg">upload_file</span>
                            </button>
                            <button type="button" onclick="document.getElementById('edit-prod-camera').click()" class="bg-slate-700 hover:bg-slate-600 text-white rounded-xl px-4 flex items-center justify-center transition" title="Ambil Foto dengan Kamera">
                                <span class="material-symbols-outlined text-lg">photo_camera</span>
                            </button>
                        </div>
                        <input type="file" id="edit-prod-file" accept="image/*" class="hidden" onchange="handleProductImageUpload(this, 'edit-prod-foto', 'edit-prod-preview', 'edit-prod-preview-img')">
                        <input type="file" id="edit-prod-camera" accept="image/*" capture="environment" class="hidden" onchange="handleProductImageUpload(this, 'edit-prod-foto', 'edit-prod-preview', 'edit-prod-preview-img')">
                        <div id="edit-prod-preview" class="mt-3 hidden">
                            <img src="" id="edit-prod-preview-img" class="h-24 w-24 object-cover rounded-xl border border-slate-700/60 shadow-lg">
                            <span class="text-[10px] text-emerald-400 ml-3 font-semibold">✓ Gambar siap digunakan</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-1.5">Tags</label>
                        <input type="text" id="edit-prod-tags"
                            class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"
                            placeholder="beras, sembako">
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-1.5">Status</label>
                        <select id="edit-prod-status"
                            class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary">
                            <option value="aktif">Aktif</option>
                            <option value="nonaktif">Non-aktif</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-slate-400 text-xs font-semibold mb-1.5">Deskripsi</label>
                        <textarea id="edit-prod-desc" rows="3"
                            class="w-full bg-slate-800 border border-slate-700/60 rounded-xl p-3 text-white text-sm focus:outline-none focus:border-primary"></textarea>
                    </div>
                </div>
                <div class="flex gap-3 pt-3 border-t border-slate-800/60">
                    <button type="button" onclick="closeEditProductModal()"
                        class="flex-1 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition">Batal</button>
                    <button type="submit"
                        class="flex-1 py-2.5 bg-gradient-to-r from-primary to-secondary text-white rounded-xl text-xs font-bold shadow-lg transition">Simpan
                        Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MAIN SCRIPT -->
    <script src="<?= str_replace('index.php', '', $_SERVER['SCRIPT_NAME']) ?>js/app.v2.js?v=<?= time() ?>"></script>

    <!-- Forgot Password Modal -->
    <div id="forgot-password-modal" class="fixed inset-0 z-[100] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm" onclick="closeForgotPasswordModal()"></div>
        <div class="relative w-full max-w-sm bg-slate-900 border border-slate-700/60 rounded-3xl p-8 shadow-2xl flex flex-col gap-5">
            <button onclick="closeForgotPasswordModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white transition">
                <span class="material-symbols-outlined text-xl">close</span>
            </button>
            <div class="text-center">
                <div class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center text-primary mx-auto mb-3">
                    <span class="material-symbols-outlined text-3xl">lock_reset</span>
                </div>
                <h3 class="font-heading text-xl font-bold text-white tracking-tight">Lupa Password</h3>
                <p class="text-[10px] text-slate-400 mt-1.5 leading-relaxed">Masukkan email yang terdaftar untuk menerima tautan reset password.</p>
            </div>
            <div id="forgot-password-alert" class="hidden text-[10px] px-3 py-2 rounded-lg border"></div>
            <div>
                <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Email Akun</label>
                <div class="relative">
                    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-lg">mail</span>
                    <input type="email" id="forgot-password-email" class="w-full bg-slate-800 border border-slate-700 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:outline-none focus:border-primary transition" placeholder="email@contoh.com">
                </div>
            </div>
            <button id="btn-submit-forgot" onclick="submitForgotPassword()" class="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-bold text-xs py-3.5 rounded-xl shadow-lg shadow-primary/20 transition uppercase tracking-wider mt-2">
                Kirim Tautan Reset
            </button>
        </div>
    </div>

    <!-- Reset Password Modal (Shown via URL Token) -->
    <div id="reset-password-modal" class="fixed inset-0 z-[110] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-slate-950/90 backdrop-blur-md"></div>
        <div class="relative w-full max-w-sm bg-slate-900 border border-slate-700/60 rounded-3xl p-8 shadow-2xl flex flex-col gap-5">
            <div class="text-center">
                <div class="w-16 h-16 rounded-full bg-emerald-950 flex items-center justify-center text-emerald-400 mx-auto mb-3">
                    <span class="material-symbols-outlined text-3xl">key</span>
                </div>
                <h3 class="font-heading text-xl font-bold text-white tracking-tight">Buat Password Baru</h3>
                <p class="text-[10px] text-slate-400 mt-1.5 leading-relaxed">Silakan masukkan password baru Anda.</p>
            </div>
            <div id="reset-password-alert" class="hidden text-[10px] px-3 py-2 rounded-lg border"></div>
            
            <input type="hidden" id="reset-token-val">
            
            <div>
                <label class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Password Baru</label>
                <div class="relative">
                    <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-lg">lock</span>
                    <input type="password" id="new-password" class="w-full bg-slate-800 border border-slate-700 rounded-xl py-3 pl-10 pr-4 text-sm text-white focus:outline-none focus:border-primary transition" placeholder="Minimal 6 karakter">
                </div>
            </div>
            <button id="btn-submit-reset" onclick="submitResetPassword()" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs py-3.5 rounded-xl shadow-lg transition uppercase tracking-wider mt-2">
                Simpan Password Baru
            </button>
        </div>
    </div>

</body>
</html>