<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'PRADIPA - Aplikasi Spasial Pertanian')</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    </style>
    @yield('styles')
</head>
<body class="bg-slate-50 text-slate-600 min-h-screen flex relative overflow-x-hidden">

    <!-- BACKDROP SIDEBAR UNTUK LAYAR MOBILE -->
    <div id="sidebarBackdrop" class="fixed inset-0 bg-slate-950/40 z-40 hidden transition-opacity duration-300 md:hidden"></div>

    @php
        // Ambil User Sandbox Aktif secara global untuk menu Sidebar
        $currentSimulasiUserId = session('simulasi_user_id', 1); // Default ke Admin Provinsi (ID: 1)
        $activeUser = DB::table('users')->where('id', $currentSimulasiUserId)->first() ?? DB::table('users')->first();
        $activeRole = $activeUser->role;

        // Ambil jumlah notifikasi belum dibaca dinamis berdasarkan user sandbox yang sedang aktif
        $unreadNotificationCount = DB::table('notifikasi')
            ->where('user_id', $currentSimulasiUserId)
            ->where('is_read', false)
            ->count();
    @endphp

    <!-- SIDEBAR KIRI (Bisa Disembunyikan / Collapsible) -->
    <aside id="sidebar" class="w-72 bg-slate-900 text-white shrink-0 flex flex-col justify-between border-r border-slate-800 fixed md:sticky top-0 h-screen z-50 transition-all duration-300 transform -translate-x-full md:translate-x-0 md:flex">
        <div class="p-6 flex flex-col gap-6 overflow-y-auto h-full custom-scrollbar">
            <!-- Brand Logo -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="bg-emerald-600 p-2 rounded-xl text-white shadow-lg shadow-emerald-600/30">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    </div>
                    <div>
                        <h1 class="text-base font-black tracking-wider text-white">PRADIPA</h1>
                        <p class="text-[10px] text-emerald-400 font-bold uppercase tracking-widest mt-0.5">Provinsi Jateng</p>
                    </div>
                </div>
                <!-- Tombol Tutup Sidebar di Mobile -->
                <button onclick="toggleMenu()" class="p-1.5 rounded-lg bg-slate-800 text-slate-400 hover:text-white md:hidden transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>

            <!-- MENU UTAMA NAVIGATION -->
            <nav class="flex flex-col gap-1 mt-4">
                <span class="text-[10px] text-slate-500 uppercase tracking-widest font-bold px-3 mb-1">Menu Utama</span>
                
                <!-- Dashboard -->
                <a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('dashboard') ? 'bg-slate-800 text-white' : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
                    <span>Dashboard & Pagu</span>
                </a>

                <!-- Monitoring Usulan -->
                <a href="{{ route('shared.usulan.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.usulan.*') ? 'bg-slate-800 text-white' : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                    <span>Monitoring Usulan</span>
                </a>

                <!-- Peta GIS Jateng -->
                <a href="{{ route('shared.gis.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.gis.*') ? 'bg-slate-800 text-white' : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></svg>
                    <span>Peta GIS Jateng</span>
                </a>

                <!-- Impor Massal Excel (Hanya Kabupaten) -->
                @if($activeRole === 'kabupaten_user')
                    <a href="{{ route('kabupaten.usulan.import_form') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('kabupaten.usulan.import_form') ? 'bg-slate-800 text-white' : '' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
                        <span>Impor Massal Excel</span>
                    </a>
                @endif

                <!-- Cetak Rekap Laporan Excel (Hanya Dinas Provinsi) -->
                @if(in_array($activeRole, ['provinsi_admin', 'provinsi_pejabat']))
                    <a href="{{ route('shared.laporan.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.laporan.*') ? 'bg-slate-800 text-white' : '' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
                        <span>Cetak Rekap Laporan</span>
                    </a>
                @endif

                <!-- Berkas Juknis & Referensi Dinas (Semua Role) -->
                <a href="{{ route('shared.referensi.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.referensi.*') ? 'bg-slate-800 text-white' : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                    <span>Berkas Juknis & Regulasi</span>
                </a>

                <!-- Pusat Notifikasi -->
                <a href="{{ route('shared.notifikasi.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.notifikasi.*') ? 'bg-slate-800 text-white' : '' }}">
                    <div class="relative">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                        @if($unreadNotificationCount > 0)
                            <span class="absolute -top-1.5 -right-1.5 w-2 h-2 rounded-full bg-rose-500 ring-2 ring-slate-900"></span>
                        @endif
                    </div>
                    <span>Pusat Notifikasi</span>
                </a>

                <div class="border-t border-slate-800/60 my-3"></div>
                <span class="text-[10px] text-slate-500 uppercase tracking-widest font-bold px-3 mb-1">Manajemen Master</span>

                <!-- Database Poktan -->
                <a href="{{ route('shared.poktan.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.poktan.*') ? 'bg-slate-800 text-white' : '' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/></svg>
                    <span>Database Poktan</span>
                </a>

                <!-- Program Kegiatan & Parameter (Hanya Admin Provinsi) -->
                @if($activeRole === 'provinsi_admin')
                    <a href="{{ route('shared.kegiatan.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.kegiatan.*') ? 'bg-slate-800 text-white' : '' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                        <span>Program Kegiatan</span>
                    </a>
                @endif

                <!-- Manajemen Akses User (Hanya Admin Provinsi) -->
                @if($activeRole === 'provinsi_admin')
                    <a href="{{ route('shared.user.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-xs font-bold text-slate-300 hover:bg-slate-800 hover:text-white transition-all {{ request()->routeIs('shared.user.*') ? 'bg-slate-800 text-white' : '' }}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        <span>Manajemen Akses User</span>
                    </a>
                @endif

                <!-- ========================================================================= -->
                <!--                       🆕 SECURE LOGOUT ACTION SYSTEM                      -->
                <!-- ========================================================================= -->
                <div class="border-t border-slate-800/60 my-3"></div>
                <form action="{{ route('logout') }}" method="POST" class="m-0 px-1" onsubmit="return confirm('Apakah Anda yakin ingin keluar dari aplikasi PRADIPA?');">
                    @csrf
                    <button type="submit" class="w-full flex items-center gap-3 py-2.5 px-3 rounded-xl text-xs font-bold text-rose-400 hover:bg-rose-500/10 hover:text-rose-300 transition-all text-left">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                        <span>Keluar Aplikasi</span>
                    </button>
                </form>
            </nav>
        </div>

        <div class="p-6 border-t border-slate-800 text-[10px] text-slate-500 font-medium col">
            &copy; 2026 PRADIPA Core v2.5
        </div>
    </aside>

    <!-- CONTENT AREA KANAN -->
    <div class="flex-1 flex flex-col min-w-0 max-h-screen overflow-y-auto">
        <!-- HEADER UTAMA -->
        <header class="bg-white border-b border-slate-200 h-16 shrink-0 flex items-center justify-between px-6 sticky top-0 z-40 shadow-sm font-sans">
            <div class="flex items-center gap-4">
                <!-- Hamburger Toggle Sidebar Button -->
                <button id="toggleSidebar" onclick="toggleMenu()" class="p-2 rounded-xl hover:bg-slate-100 text-slate-600 transition-colors" title="Sembunyikan/Tampilkan Menu">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                </button>
                
                <div class="text-xs font-bold text-slate-400 hidden sm:block">
                    Waktu Server: <span class="text-slate-600 font-mono">2026-06-02 00:20 WIB</span>
                </div>
            </div>

            <!-- CENTRAL SANDBOX SIMULATION & USER INFO -->
            <div class="flex items-center gap-4">
                
                <!-- IKON LONCENG REAKTIF HEADER -->
                <a href="{{ route('shared.notifikasi.index') }}" class="relative p-2 text-slate-400 hover:text-slate-600 rounded-xl hover:bg-slate-50 transition-all" title="Pusat Notifikasi">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                    @if($unreadNotificationCount > 0)
                        <span class="absolute top-1.5 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-black text-white ring-2 ring-white">
                            {{ $unreadNotificationCount }}
                        </span>
                    @endif
                </a>

                <!-- ================= WIDGET DEVELOPER SANDBOX MODE ================= -->
                <div class="bg-amber-50/80 border border-amber-200 rounded-xl px-3 py-1 flex items-center gap-2 shadow-sm text-xs font-semibold">
                    <span class="text-amber-700 flex items-center gap-1.5 font-bold">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
                        <span class="hidden lg:inline">Sandbox:</span>
                    </span>
                    
                    <form action="{{ route('simulasi.switch') }}" method="POST" class="m-0">
                        @csrf
                        <select name="user_id" onchange="this.form.submit()" class="bg-transparent border-none text-[11px] font-bold text-slate-700 focus:outline-none cursor-pointer p-0 pr-6">
                            @php
                                $simulatedUsers = DB::table('users')->get();
                            @endphp
                            @foreach($simulatedUsers as $u)
                                <option value="{{ $u->id }}" {{ $currentSimulasiUserId == $u->id ? 'selected' : '' }}>
                                    @if($u->role === 'provinsi_admin')
                                        👑 {{ $u->name }} (Prov Admin)
                                    @elseif($u->role === 'provinsi_pejabat')
                                        ✒️ {{ $u->name }} (Prov Pejabat)
                                    @else
                                        🤖 {{ $u->name }} (Kab. {{ DB::table('regencies')->where('id', $u->regency_id)->value('nama_kabupaten') }})
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>

                <!-- USER ACCOUNT PROFILE SECTION -->
                <div class="flex items-center gap-3 border-l border-slate-200 pl-4 font-sans">
                    @php
                        $activeRoleName = 'Operator';
                        if ($activeUser->role === 'provinsi_admin') {
                            $activeRoleName = 'Super Administrator';
                        } elseif ($activeUser->role === 'provinsi_pejabat') {
                            $activeRoleName = 'Kepala Dinas (Pejabat)';
                        } else {
                            $activeRoleName = 'Operator Kab. ' . DB::table('regencies')->where('id', $activeUser->regency_id)->value('nama_kabupaten');
                        }
                    @endphp
                    <div class="text-right hidden md:block">
                        <span class="text-xs font-extrabold text-slate-800 block">{{ $activeUser->name }}</span>
                        <span class="text-[9px] text-emerald-600 font-bold uppercase tracking-wider block mt-0.5 font-sans">{{ $activeRoleName }}</span>
                    </div>
                    <div class="w-9 h-9 rounded-xl bg-slate-800 text-white flex items-center justify-center text-xs font-black shadow-md uppercase">
                        {{ substr($activeUser->name, 0, 3) }}
                    </div>
                </div>
            </div>
        </header>

        <!-- CONTAINER CONTENT -->
        <div class="p-8 flex-1">
            @yield('content')
        </div>
    </div>

    <script src="https://unpkg.com/lucide@latest"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
        });

        // --- INTERAKTIF TOGGLE SIDEBAR ---
        const sidebar = document.getElementById('sidebar');
        const backdrop = document.getElementById('sidebarBackdrop');

        function toggleMenu() {
            if (window.innerWidth >= 768) {
                sidebar.classList.toggle('md:hidden');
                sidebar.classList.toggle('md:flex');
            } else {
                sidebar.classList.toggle('-translate-x-full');
                sidebar.classList.toggle('translate-x-0');
                backdrop.classList.toggle('hidden');
            }
        }

        if (backdrop) {
            backdrop.addEventListener('click', toggleMenu);
        }
    </script>
    @yield('scripts')
</body>
</html>