<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Dashboard') — Mai Admin</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { box-sizing: border-box; }

        body {
            font-family: Poppins;
            background: #EEF2F7;
            margin: 0;
            min-height: 100vh;
            display: flex;
        }

        /* ── OVERLAY (mobile) ── */
        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 40;
        }

        .sidebar-overlay.open { display: block; }

        /* ── SIDEBAR ── */
        .sidebar {
            width: 240px;
            min-height: 100vh;
            background: #0D2B5E;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            position: sticky;
            top: 0;
            height: 100vh;
            z-index: 50;
            transition: transform 0.25s ease;
        }

        .sidebar-logo {
            padding: 20px 16px 16px;
            border-bottom: 0.5px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-logo-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #F5B800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .sidebar-logo-icon svg { width: 18px; height: 18px; color: #0D2B5E; }

        .sidebar-logo-text {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.01em;
            line-height: 1.1;
        }

        .sidebar-logo-sub {
            font-size: 9.5px;
            color: rgba(255,255,255,0.38);
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-top: 2px;
        }

        /* tombol close sidebar (mobile only) */
        .sidebar-close {
            display: none;
            margin-left: auto;
            background: none;
            border: none;
            cursor: pointer;
            color: rgba(255,255,255,0.5);
            padding: 4px;
            border-radius: 4px;
            transition: color 0.13s;
        }
        .sidebar-close:hover { color: #fff; }

        .sidebar-section { padding: 16px 10px 4px; }

        .sidebar-section-label {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.28);
            padding: 0 10px;
            margin-bottom: 4px;
        }

        .sidebar-nav a {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: 6px;
            color: rgba(255,255,255,0.55);
            text-decoration: none;
            font-size: 12.5px;
            font-weight: 500;
            transition: all 0.13s;
            margin-bottom: 1px;
        }

        .sidebar-nav a:hover {
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.88);
        }

        .sidebar-nav a.active {
            background: #F5B800;
            color: #0D2B5E;
            font-weight: 600;
        }

        .sidebar-nav a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.65; }
        .sidebar-nav a:hover svg { opacity: 1; }
        .sidebar-nav a.active svg { opacity: 1; }

        .sidebar-badge {
            margin-left: auto;
            font-size: 9.5px;
            font-weight: 700;
            background: #E84040;
            color: #fff;
            border-radius: 20px;
            padding: 1px 6px;
            line-height: 15px;
        }

        .sidebar-nav a.active .sidebar-badge { background: #0D2B5E; }

        .sidebar-footer {
            margin-top: auto;
            padding: 12px 10px;
            border-top: 0.5px solid rgba(255,255,255,0.08);
        }

        .user-card {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.13s;
        }

        .user-card:hover { background: rgba(255,255,255,0.06); }

        .user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #1E4A8C;
            border: 1.5px solid #F5B800;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #F5B800;
            flex-shrink: 0;
        }

        .user-name {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255,255,255,0.75);
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .logout-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: rgba(255,255,255,0.3);
            padding: 4px;
            border-radius: 4px;
            display: flex;
            transition: color 0.13s;
        }

        .logout-btn:hover { color: rgba(255,255,255,0.7); }

        /* ── MAIN ── */
        .main-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .topbar {
            height: 54px;
            background: #fff;
            border-bottom: 0.5px solid rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 10px;
            position: sticky;
            top: 0;
            z-index: 30;
        }

        /* tombol hamburger (mobile only) */
        .hamburger-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            color: #0D2B5E;
            padding: 4px;
            border-radius: 6px;
            transition: background 0.13s;
            flex-shrink: 0;
        }

        .hamburger-btn:hover { background: rgba(13,43,94,0.07); }

        .topbar-breadcrumb {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12.5px;
            color: rgba(0,0,0,0.38);
        }

        .topbar-breadcrumb .active-crumb {
            color: #0D2B5E;
            font-weight: 600;
        }

        /* sembunyikan "Mai Admin ›" di layar sangat kecil */
        .topbar-breadcrumb .crumb-root {
            display: inline;
        }

        .topbar-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .school-year-tag {
            height: 30px;
            padding: 0 12px;
            border-radius: 6px;
            background: rgba(13,43,94,0.07);
            font-size: 12px;
            font-weight: 600;
            color: #0D2B5E;
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        .topbar-btn {
            height: 30px;
            padding: 0 12px;
            border-radius: 6px;
            border: 0.5px solid rgba(0,0,0,0.12);
            background: #fff;
            font-size: 12px;
            font-weight: 500;
            color: rgba(0,0,0,0.55);
            cursor: pointer;
            font-family: inherit;
            transition: all 0.13s;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }

        .topbar-btn:hover { border-color: #0D2B5E; color: #0D2B5E; }

        .notif-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #E84040;
            flex-shrink: 0;
        }

        .page-content {
            padding: 28px 32px;
            flex: 1;
        }

        [x-cloak] { display: none; }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            body { display: block; }

            /* sidebar jadi drawer fixed dari kiri */
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                transform: translateX(-100%);
                box-shadow: 4px 0 24px rgba(0,0,0,0.18);
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .sidebar-close { display: flex; }

            /* main wrap full width */
            .main-wrap {
                min-height: 100vh;
            }

            /* hamburger muncul */
            .hamburger-btn { display: flex; }

            /* sembunyikan label "Mai Admin ›" supaya tidak terlalu penuh */
            .crumb-root { display: none; }

            /* sembunyikan tag tahun ajaran di HP kecil */
            .school-year-tag { display: none; }

            /* padding konten lebih kecil */
            .page-content { padding: 20px 16px; }

            /* topbar padding lebih kecil */
            .topbar { padding: 0 16px; }
        }

        @media (max-width: 400px) {
            /* notifikasi cukup tampilkan ikon saja */
            .topbar-btn .notif-label { display: none; }
        }
    </style>
</head>
<body>

    {{-- OVERLAY (mobile) --}}
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>

    {{-- SIDEBAR --}}
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-logo">
            <div class="sidebar-logo-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
                    <path d="M12 3L2 9l10 6 10-6-10-6z"/>
                    <path d="M2 17l10 6 10-6"/>
                    <path d="M2 13l10 6 10-6"/>
                </svg>
            </div>
            <div>
                <div class="sidebar-logo-text">Mai Admin</div>
                <div class="sidebar-logo-sub">Manajemen Sekolah</div>
            </div>
            <button class="sidebar-close" onclick="closeSidebar()" aria-label="Tutup menu">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </button>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-section-label">Utama</div>
            <nav class="sidebar-nav">
                <a href="{{ route('dashboard') }}" class="{{ request()->routeIs('dashboard') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                    Dashboard
                </a>
            </nav>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-section-label">Perizinan</div>
            <nav class="sidebar-nav">
                <a href="/perizinan" class="{{ request()->is('perizinan*') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                    Izin Siswa
                    @if(isset($tizin_pending) && $tizin_pending['count'] > 0)
                        <span class="sidebar-badge">{{ $tizin_pending['count'] }}</span>
                    @endif
                </a>
                <a href="/permohonan" class="{{ request()->is('permohonan*') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
                    Permohonan Data
                    @if(isset($sisreqdata_status0) && $sisreqdata_status0['count'] > 0)
                        <span class="sidebar-badge">{{ $sisreqdata_status0['count'] }}</span>
                    @endif
                </a>
            </nav>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-section-label">Ekstrakurikuler</div>
            <nav class="sidebar-nav">
                <a href="/daftarexcul" class="{{ request()->is('daftarexcul*') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    Daftar Excul
                    @if(isset($daftarexcul_status0) && $daftarexcul_status0['count'] > 0)
                        <span class="sidebar-badge">{{ $daftarexcul_status0['count'] }}</span>
                    @endif
                </a>
                <a href="/stopexcul" class="{{ request()->is('stopexcul*') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
                    Stop Excul
                    @if(isset($stopexcul_status0) && $stopexcul_status0['count'] > 0)
                        <span class="sidebar-badge">{{ $stopexcul_status0['count'] }}</span>
                    @endif
                </a>
            </nav>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-section-label">Sistem</div>
            <nav class="sidebar-nav">
                <a href="/pengguna" class="{{ request()->is('pengguna*') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    Pengguna
                </a>
                <a href="/pengaturan" class="{{ request()->is('pengaturan*') ? 'active' : '' }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
                    Pengaturan
                </a>
            </nav>
        </div>

        <div class="sidebar-footer">
            <div class="user-card">
                <div class="user-avatar">
                    {{ strtoupper(substr(Auth::user()->name ?? 'A', 0, 2)) }}
                </div>
                <div class="user-name">{{ Auth::user()->name ?? 'Admin' }}</div>
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="logout-btn" title="Logout">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path 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"/></svg>
                    </button>
                </form>
            </div>
        </div>
    </aside>

    {{-- MAIN --}}
    <div class="main-wrap">
        <header class="topbar">
            {{-- Hamburger (mobile) --}}
            <button class="hamburger-btn" onclick="openSidebar()" aria-label="Buka menu">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>

            <div class="topbar-breadcrumb">
                <span class="crumb-root">Mai Admin</span>
                <span class="crumb-root">›</span>
                <span class="active-crumb">@yield('title', 'Dashboard')</span>
            </div>

            <div class="topbar-actions">
                <div class="school-year-tag">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
                    T.A. 2024/2025
                </div>
                <button class="topbar-btn">
                    <svg style="width:13px;height:13px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                    <span class="notif-label">Notifikasi</span>
                    <div class="notif-dot"></div>
                </button>
            </div>
        </header>

        <main class="page-content">
            @yield('content')
        </main>
    </div>

    <script>
        function openSidebar() {
            document.getElementById('sidebar').classList.add('open');
            document.getElementById('sidebarOverlay').classList.add('open');
            document.body.style.overflow = 'hidden';
        }

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

        // tutup sidebar saat link diklik (mobile UX)
        document.querySelectorAll('.sidebar-nav a').forEach(function(link) {
            link.addEventListener('click', function() {
                if (window.innerWidth <= 768) closeSidebar();
            });
        });
    </script>

</body>
</html>