<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Admin Dashboard') - SILAPOR Wonosalam</title>
    <link rel="icon" type="image/png" href="{{ asset('favicon.png') }}">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <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">

    <!-- Chart.js (Dipakai di Dashboard & Evaluasi) -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- CSS Premium Dark Glassmorphism -->
    <style>
        :root {
            --bg-base: #09090b;
            --bg-surface: #121214;
            --bg-surface-elevated: #1a1a1e;
            
            --color-primary: #6366f1;
            --color-primary-glow: rgba(99, 102, 241, 0.15);
            --color-secondary: #ec4899;
            --color-success: #10b981;
            --color-warning: #f59e0b;
            --color-info: #0ea5e9;
            --color-danger: #ef4444;
            
            --text-main: #f4f4f5;
            --text-muted: #a1a1aa;
            --text-inverse: #09090b;
            
            --border-glow: rgba(255, 255, 255, 0.06);
            --border-focus: rgba(99, 102, 241, 0.4);
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            
            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
            --font-display: 'Outfit', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            overflow-x: hidden;
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-main);
            font-family: var(--font-sans);
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Styling */
        .sidebar {
            width: 260px;
            min-width: 260px;
            background: var(--bg-surface);
            border-right: 1px solid var(--border-glow);
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 24px;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.1) transparent;
        }

        .sidebar::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
        }

        /* Hamburger Button (Mobile) */
        .hamburger-btn {
            display: none;
            position: fixed;
            top: 16px;
            left: 16px;
            z-index: 200;
            background: var(--bg-surface);
            border: 1px solid var(--border-glow);
            color: var(--text-main);
            width: 40px;
            height: 40px;
            border-radius: var(--radius-sm);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
        }
        .hamburger-btn:hover {
            background: var(--bg-surface-elevated);
        }

        /* Sidebar Overlay (Mobile) */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 90;
            backdrop-filter: blur(2px);
        }
        .sidebar-overlay.active {
            display: block;
        }

        .logo-group {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            margin-bottom: 36px;
        }

        .logo-icon {
            width: 36px;
            height: 36px;
            object-fit: contain;
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 18px;
            color: #fff;
        }

        .logo-sub {
            font-size: 10px;
            color: var(--text-muted);
            font-weight: 500;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .menu-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
        }

        .menu-item a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-muted);
            text-decoration: none;
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition-smooth);
        }

        .menu-item a:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.03);
        }

        .menu-item.active a {
            color: #fff;
            background: var(--color-primary-glow);
            border-left: 3px solid var(--color-primary);
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }

        .menu-item svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        /* Sidebar Footer / User Profile */
        .sidebar-footer {
            border-top: 1px solid var(--border-glow);
            padding-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            background: var(--bg-surface-elevated);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-primary);
            font-weight: 600;
            border: 1px solid var(--border-glow);
        }

        .user-info {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .user-name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-role {
            font-size: 11px;
            color: var(--text-muted);
        }

        .btn-logout {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.15);
            color: var(--color-danger);
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: var(--transition-smooth);
        }

        .btn-logout:hover {
            background: var(--color-danger);
            color: #fff;
        }

        /* Main Content Styling */
        .main-wrapper {
            margin-left: 260px;
            flex-grow: 1;
            padding: 40px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            min-width: 0;
            overflow-x: hidden;
        }

        /* Top Header Bar */
        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
        }

        .page-title-group {
            display: flex;
            flex-direction: column;
        }

        .page-title {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 26px;
            color: #fff;
            letter-spacing: -0.5px;
        }

        .page-subtitle {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* Ambient Glow effect background */
        .bg-glow {
            position: absolute;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, rgba(0,0,0,0) 70%);
            top: 20px;
            right: 20px;
            z-index: -1;
            filter: blur(40px);
            pointer-events: none;
        }

        /* Glass Cards */
        .glass-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-glow);
            border-radius: var(--radius-md);
            padding: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(4px);
            margin-bottom: 24px;
        }

        /* Alerts */
        .alert {
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .alert-success {
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.2);
            color: #a7f3d0;
        }

        .alert-error {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: #fecaca;
        }

        @media (max-width: 1024px) {
            .hamburger-btn {
                display: flex;
            }
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .sidebar.open {
                transform: translateX(0);
            }
            .main-wrapper {
                margin-left: 0;
                padding: 20px;
                padding-top: 72px;
            }
        }
    </style>
    @yield('styles')
</head>
<body>

    <!-- 🍔 HAMBURGER (Mobile Only) -->
    <button class="hamburger-btn" id="hamburgerBtn" aria-label="Buka menu">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="20" height="20">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
    </button>

    <!-- Overlay (Mobile) -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- 🧭 SIDEBAR -->
    <div class="sidebar">
        <a href="{{ route('admin.dashboard') }}" class="logo-group">
            <img src="{{ asset('logo.png') }}" class="logo-icon" alt="SILAPOR Logo">
            <div class="logo-text">
                <span class="logo-title">SILAPOR</span>
                <span class="logo-sub">Kec. Wonosalam, Demak</span>
            </div>
        </a>

        <ul class="menu-list">
            <li class="menu-item {{ Route::is('admin.dashboard') ? 'active' : '' }}">
                <a href="{{ route('admin.dashboard') }}">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="menu-item {{ Route::is('admin.aduan.index') || Route::is('admin.aduan.edit') && !str_contains(request()->url(), 'selesai') ? 'active' : '' }}">
                <a href="{{ route('admin.aduan.index') }}">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" /></svg>
                    <span>Aduan Aktif</span>
                </a>
            </li>
            <li class="menu-item {{ Route::is('admin.aduan.selesai') ? 'active' : '' }}">
                <a href="{{ route('admin.aduan.selesai') }}">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" /></svg>
                    <span>Aduan Selesai</span>
                </a>
            </li>
            <li class="menu-item {{ Route::is('admin.evaluasi') ? 'active' : '' }}">
                <a href="{{ route('admin.evaluasi') }}">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
                    <span>Evaluasi Model ML</span>
                </a>
            </li>
            <li class="menu-item">
                <a href="/" target="_blank">
                    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
                    <span>Lihat Halaman Depan</span>
                </a>
            </li>
        </ul>

        <div class="sidebar-footer">
            <div class="user-profile">
                <div class="user-avatar">
                    {{ substr(Auth::user()->name ?? 'A', 0, 1) }}
                </div>
                <div class="user-info">
                    <span class="user-name">{{ Auth::user()->name ?? 'Administrator' }}</span>
                    <span class="user-role">Petugas Kecamatan</span>
                </div>
            </div>
            <form action="{{ route('admin.logout') }}" method="POST">
                @csrf
                <button type="submit" class="btn-logout">
                    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
                    Keluar Panel
                </button>
            </form>
        </div>
    </div>

    <!-- 📄 MAIN WRAPPER -->
    <div class="main-wrapper">
        <div class="bg-glow"></div>

        <!-- TOP BAR -->
        <div class="topbar">
            <div class="page-title-group">
                <h1 class="page-title">@yield('page_title', 'Dashboard')</h1>
                <p class="page-subtitle">@yield('page_subtitle', 'Sistem Layanan Pengaduan Online Rakyat (SILAPOR) Wonosalam.')</p>
            </div>
        </div>

        <!-- FLASH NOTIFICATION -->
        @if(session('success'))
            <div class="alert alert-success">
                <svg fill="currentColor" viewBox="0 0 20 20" width="16" height="16"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-error">
                <svg fill="currentColor" viewBox="0 0 20 20" width="16" height="16"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" /></svg>
                <span>Email atau password yang Anda masukkan salah.</span>
            </div>
        @endif

        <!-- MAIN YIELD CONTENT -->
        @yield('content')
    </div>

    <!-- 🍔 Hamburger Toggle Script -->
    <script>
        (function() {
            const btn     = document.getElementById('hamburgerBtn');
            const sidebar = document.querySelector('.sidebar');
            const overlay = document.getElementById('sidebarOverlay');

            if (!btn || !sidebar || !overlay) return;

            function openSidebar() {
                sidebar.classList.add('open');
                overlay.classList.add('active');
                document.body.style.overflow = 'hidden';
            }

            function closeSidebar() {
                sidebar.classList.remove('open');
                overlay.classList.remove('active');
                document.body.style.overflow = '';
            }

            btn.addEventListener('click', openSidebar);
            overlay.addEventListener('click', closeSidebar);

            // Auto-close sidebar when a menu link is clicked (mobile navigation)
            sidebar.querySelectorAll('a').forEach(function(link) {
                link.addEventListener('click', function() {
                    if (window.innerWidth <= 1024) {
                        closeSidebar();
                    }
                });
            });
        })();
    </script>

    @yield('scripts')
</body>
</html>
