<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin Panel') — Desa Sumbersari</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-100 font-sans text-slate-800 antialiased selection:bg-emerald-500 selection:text-white flex overflow-hidden h-screen">

    {{-- Mobile Sidebar Overlay --}}
    <div id="sidebar-overlay" class="sidebar-overlay"></div>

    {{-- ===== SIDEBAR ===== --}}
    <aside id="admin-sidebar" class="admin-sidebar w-[280px] bg-[#0A0F1C] h-full flex flex-col z-20 relative border-r border-white/5 transition-all duration-300">
        {{-- Brand --}}
        <div class="h-20 flex items-center px-8 border-b border-white/5">
            <div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-xl flex items-center justify-center shadow-[0_0_20px_rgba(16,185,129,0.3)] mr-4">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            </div>
            <div>
                <span class="font-extrabold text-xl text-white block leading-tight tracking-tight">Sumbersari<span class="text-emerald-500">.</span></span>
                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Admin Workspace</span>
            </div>
        </div>

        {{-- Navigation --}}
        <nav class="flex-1 px-5 py-8 space-y-2 overflow-y-auto custom-scrollbar">
            <p class="px-3 text-[11px] font-black text-slate-500 uppercase tracking-[0.15em] mb-4">Menu Utama</p>

            <a href="{{ route('admin.dashboard') }}" class="flex items-center px-4 py-3.5 rounded-2xl transition-all duration-300 {{ request()->routeIs('admin.dashboard') ? 'bg-emerald-500/10 text-emerald-400 font-bold' : 'text-slate-400 hover:bg-white/5 hover:text-slate-200 font-medium' }}">
                <svg class="w-5 h-5 mr-3.5 flex-shrink-0 {{ request()->routeIs('admin.dashboard') ? 'text-emerald-400' : 'text-slate-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                <span class="text-sm">Dashboard</span>
            </a>

            <a href="{{ route('admin.potensi.index') }}" class="flex items-center px-4 py-3.5 rounded-2xl transition-all duration-300 {{ request()->routeIs('admin.potensi.*') ? 'bg-emerald-500/10 text-emerald-400 font-bold' : 'text-slate-400 hover:bg-white/5 hover:text-slate-200 font-medium' }}">
                <svg class="w-5 h-5 mr-3.5 flex-shrink-0 {{ request()->routeIs('admin.potensi.*') ? 'text-emerald-400' : 'text-slate-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                <span class="text-sm">Potensi Desa</span>
            </a>


            <p class="px-3 text-[11px] font-black text-slate-500 uppercase tracking-[0.15em] mt-8 mb-4">Sistem</p>

            <a href="/" target="_blank" class="flex items-center px-4 py-3.5 rounded-2xl text-slate-400 hover:bg-white/5 hover:text-slate-200 font-medium transition-all duration-300 group">
                <svg class="w-5 h-5 mr-3.5 flex-shrink-0 text-slate-500 group-hover:text-slate-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
                <span class="text-sm">Lihat Website</span>
                <svg class="w-4 h-4 ml-auto text-slate-600 group-hover:text-emerald-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
            </a>
        </nav>

        {{-- User & Logout --}}
        <div class="p-6 border-t border-white/5 bg-[#0A0F1C]">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-white font-bold text-sm mr-3">
                    {{ substr(auth()->user()->name, 0, 1) }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-bold text-slate-200 truncate">{{ auth()->user()->name }}</p>
                    <p class="text-[11px] text-slate-500 truncate">{{ auth()->user()->email }}</p>
                </div>
            </div>
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="w-full flex items-center justify-center px-4 py-3 rounded-xl text-slate-400 bg-white/5 hover:bg-red-500/10 hover:text-red-400 border border-white/5 hover:border-red-500/20 transition-all duration-300 text-sm group">
                    <svg class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                    <span class="font-bold">Keluar Sistem</span>
                </button>
            </form>
        </div>
    </aside>

    {{-- ===== MAIN CONTENT ===== --}}
    <main class="flex-1 flex flex-col h-screen overflow-hidden bg-[#F8FAFC] relative">
        {{-- Top Header --}}
        <header class="h-20 bg-white/90 backdrop-blur-xl border-b border-slate-200/80 flex items-center justify-between px-6 md:px-10 z-10 shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)]">
            {{-- Mobile Toggle --}}
            <button id="sidebar-toggle" class="md:hidden w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-slate-600 mr-4 border border-slate-200">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </button>

            <div class="flex-1">
                <h1 class="text-xl md:text-2xl font-black text-slate-800 tracking-tight">@yield('title', 'Dashboard')</h1>
            </div>

            <div class="hidden md:flex items-center gap-4">
                <div class="text-right">
                    <p class="text-sm font-extrabold text-slate-800">{{ auth()->user()->name }}</p>
                    <p class="text-[11px] font-semibold text-emerald-600 uppercase tracking-wider">Administrator</p>
                </div>
                <div class="w-11 h-11 rounded-2xl bg-slate-100 border border-slate-200 flex items-center justify-center text-slate-700 font-black shadow-sm">
                    {{ substr(auth()->user()->name, 0, 1) }}
                </div>
            </div>
        </header>

        {{-- Toast Notification --}}
        @if(session('success'))
            <div class="toast-notification toast-enter fixed top-24 right-4 md:right-8 z-50 bg-white border border-emerald-200 rounded-2xl shadow-xl p-4 flex items-center max-w-sm">
                <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                </div>
                <div>
                    <p class="text-sm font-bold text-slate-800">Berhasil!</p>
                    <p class="text-xs text-slate-500">{{ session('success') }}</p>
                </div>
            </div>
        @endif

        {{-- Content Area --}}
        <div class="flex-1 overflow-y-auto p-6 md:p-10 custom-scrollbar">
            @yield('content')
        </div>
    </main>

</body>
</html>
