<!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 Space - Space Casual Store')</title>
    <link rel="icon" href="{{ asset('images/logo.png') }}?v=1" type="image/png">

    <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=Poppins:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    <style>
        /* ============================================
           VARIABLES
           ============================================ */
        :root {
            --navy: #0F1C2E;
            --sky: #2D9CDB;
            --white: #ffffff;
            --bg: #F8F9FA;
            --border: #E5E7EB;
            --text-dark: #0F1C2E;
            --text-grey: #6B7280;
            --gap: 30px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg);
            margin: 0;
            padding: 0;
        }

        /* ============================================
           HEADER
           Hanya bagian ini yang berwarna putih & sticky.
           Navbar TIDAK ikut di sini.
           ============================================ */
        .admin-header {
            background-color: var(--white);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
            padding: 14px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        /* Brand */
        .brand-link {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            flex-shrink: 0;
        }

        .brand-logo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
        }

        /* 1. Ini adalah pembungkus logonya (ukurannya diatur di sini) */
        .brand-logo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            /* Mencegah logo mengecil sendiri saat bersandingan dengan teks */
        }

        /* 2. Ini adalah gambarnya (dibuat responsif 100% mengikuti pembungkus) */
        .brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Memastikan gambar tidak gepeng */
            display: block;
        }

        .brand-name {
            font-size: 20px;
            font-weight: 800;
            color: var(--text-dark);
            margin: 0;
            white-space: nowrap;
            letter-spacing: -0.3px;
        }

        /* Profile Button */
        .profile-dropdown .dropdown-toggle {
            background-color: var(--white);
            border: 1.5px solid var(--border);
            border-radius: 10px;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
            padding: 7px 13px 7px 9px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
        }

        .profile-dropdown .dropdown-toggle::after {
            display: none;
        }

        .profile-dropdown .dropdown-toggle:hover,
        .profile-dropdown .dropdown-toggle:focus,
        .profile-dropdown .dropdown-toggle.show {
            background-color: #F9FAFB;
            border-color: #CBD5E1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
        }

        .profile-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2563EB, var(--sky));
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .profile-avatar i {
            font-size: 17px;
            color: var(--white);
            line-height: 1;
        }

        .profile-chevron {
            font-size: 13px;
            color: var(--text-grey);
            transition: transform 0.2s;
        }

        .profile-dropdown .dropdown-toggle.show .profile-chevron {
            transform: rotate(180deg);
        }

        .profile-dropdown .dropdown-menu {
            min-width: 170px;
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
            padding: 6px;
            margin-top: 6px !important;
        }

        .profile-dropdown .dropdown-item {
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.15s;
        }

        .profile-dropdown .dropdown-item:hover {
            background-color: #FEF2F2;
            color: #DC2626;
        }

        .profile-dropdown .dropdown-item i {
            font-size: 16px;
        }

        /* ============================================
           NAVBAR SECTION
           Background TRANSPARAN — ikut warna abu-abu
           halaman. Tidak ada putih, tidak ada sticky.
           Sejajar dengan header karena pakai .container
           yang identik.
           ============================================ */
        .admin-navbar-section {
            padding: 24px 0 0;
        }

        /* Bar navbar gelap */
        .admin-navbar {
            background-color: var(--navy);
            border-radius: 14px;
            display: flex;
            align-items: stretch;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(18, 26, 37, 0.22);
        }

        /* Setiap item: tepat 1/3 lebar navbar */
        .admin-nav-item {
            flex: 1;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 16px;
            color: rgb(255, 255, 255);
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            background: transparent;
            transition: color 0.2s, background-color 0.2s;
        }

        .admin-nav-item i {
            font-size: 18px;
            line-height: 1;
        }

        /* Background biru aktif via ::before */
        .admin-nav-item.active::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: var(--sky);
            z-index: -1;
        }

        /* Dashboard (ke-1): gap 10px di KIRI */
        .admin-nav-item:first-child.active::before {
            left: var(--gap);
            right: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        /* Kelola Produk (ke-2): FULL FILL */
        .admin-nav-item:nth-child(2).active::before {
            left: 0;
            right: 0;
            border-radius: 0;
        }

        /* Analitik Produk (ke-3): gap 10px di KANAN */
        .admin-nav-item:last-child.active::before {
            left: 0;
            right: var(--gap);
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .admin-nav-item.active {
            color: var(--white);
        }

        /* Efek Hover untuk Background (::before) pada Nav Item yang sedang TIDAK AKTIF */
        .admin-nav-item:not(.active):hover::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: var(--sky);
            z-index: -1;
            transition: all 0.2s ease;
        }

        /* Penyesuaian Gap Kiri untuk Item Pertama (Dashboard) saat Hover */
        .admin-nav-item:first-child:not(.active):hover::before {
            left: var(--gap);
            right: 0;
        }

        /* Penyesuaian Full Fill untuk Item Tengah (Kelola Produk) saat Hover */
        .admin-nav-item:nth-child(2):not(.active):hover::before {
            left: 0;
            right: 0;
        }

        /* Penyesuaian Gap Kanan untuk Item Terakhir (Analitik) saat Hover */
        .admin-nav-item:last-child:not(.active):hover::before {
            left: 0;
            right: var(--gap);
        }

        /* Efek Hover untuk Warna Teks pada Nav Item yang sedang TIDAK AKTIF */
        .admin-nav-item:not(.active):hover {
            color: rgb(255, 255, 255) !important;
        }

        /* ============================================
           JUDUL HALAMAN
           Sejajar dengan tepi kiri navbar karena
           memakai .container yang sama.
           ============================================ */
        .page-title-section {
            padding: 10px 0 10px;
        }

        .page-title-text {
            font-size: 26px;
            font-weight: 800;
            color: var(--text-dark);
            margin: 0;
            line-height: 1.2;
            animation: titleIn 0.25s ease;
        }

        @keyframes titleIn {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================
           RESPONSIVE
           ============================================ */
        @media (max-width: 992px) {
            .admin-nav-item {
                font-size: 14px;
            }
        }

        @media (max-width: 768px) {
            .brand-name {
                font-size: 17px;
            }

            .admin-navbar-section {
                padding-top: 16px;
            }

            .admin-navbar {
                flex-direction: column;
                border-radius: 12px;
            }

            .admin-nav-item {
                padding: 13px 20px;
                justify-content: flex-start;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }

            .admin-nav-item:last-child {
                border-bottom: none;
            }

            /* Navbar vertikal: full fill semua */
            .admin-nav-item:first-child.active::before,
            .admin-nav-item:nth-child(2).active::before,
            .admin-nav-item:last-child.active::before {
                left: 0;
                right: 0;
                border-radius: 0;
            }

            .page-title-text {
                font-size: 22px;
            }

            .page-title-section {
                padding: 20px 0 16px;
            }
        }

        @media (max-width: 480px) {
            .brand-name {
                display: none;
            }

            .brand-logo {
                width: 36px;
                height: 36px;
            }

            .profile-dropdown .dropdown-toggle>span:not(.profile-avatar) {
                display: none;
            }

            .profile-dropdown .dropdown-toggle {
                padding: 7px 8px;
                gap: 0;
            }

            .page-title-text {
                font-size: 20px;
            }
        }

        @media (min-width: 1400px) {
            .brand-name {
                font-size: 22px;
            }

            .admin-nav-item {
                font-size: 16px;
                padding: 20px 24px;
            }

            .page-title-text {
                font-size: 28px;
            }
        }
    </style>

    @stack('styles')
</head>

<body>

    {{-- =====================================================
    ① HEADER — Putih & Sticky, berdiri sendiri
    .container Bootstrap memastikan konten rata
    dengan navbar di bawahnya.
    ===================================================== --}}
    <header class="admin-header">
        <div class="container">
            <div class="header-inner">

                <a href="{{ url('/dashboard') }}" class="brand-link">
                    <div class="brand-logo">
                        <img src="{{ asset('images/logo.png') }}" alt="Space Casual Store">
                    </div>
                    <h1 class="brand-name">Space Casual Store</h1>
                </a>

                <div class="dropdown profile-dropdown">
                    <button class="btn dropdown-toggle" type="button" id="profileDropdown" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        <span class="profile-avatar">
                            <i class="bi bi-person-fill"></i>
                        </span>
                        <span>Admin Space</span>
                        <i class="bi bi-chevron-down profile-chevron"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
                        <li>
                            <a class="dropdown-item" href="{{ url('/login') }}">
                                <i class="bi bi-box-arrow-right"></i>
                                Keluar
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </header>

    {{-- =====================================================
    ② NAVBAR — Di bawah header, background TRANSPARAN
    (warna abu-abu dari body ikut tampil).
    Pakai .container yang SAMA → sejajar lurus.
    ===================================================== --}}
    <section class="admin-navbar-section">
        <div class="container">
            <nav class="admin-navbar" role="navigation" aria-label="Admin Navigation">

                <a href="{{ url('/dashboard') }}"
                    class="admin-nav-item {{ request()->is('dashboard*') ? 'active' : '' }}">
                    <i class="bi bi-speedometer2"></i>
                    <span>Dashboard</span>
                </a>

                <a href="{{ url('/kelola-produk') }}"
                    class="admin-nav-item {{ request()->is('kelola-produk*') ? 'active' : '' }}">
                    <i class="bi bi-box-seam"></i>
                    <span>Kelola Produk</span>
                </a>

                <a href="{{ url('/analitik-produk') }}"
                    class="admin-nav-item {{ request()->is('analitik-produk') ? 'active' : '' }}">
                    <i class="bi bi-graph-up"></i>
                    <span>Analitik Produk</span>
                </a>

            </nav>
        </div>
    </section>

    {{-- =====================================================
    ③ JUDUL HALAMAN — Sejajar kiri dengan navbar
    karena pakai .container yang sama.
    ===================================================== --}}
    <div class="page-title-section">
        <div class="container">
            <h2 class="page-title-text">@yield('page_title')</h2>
        </div>
    </div>

    {{-- =====================================================
    ④ KONTEN HALAMAN
    ===================================================== --}}
    <main>
        <div class="container">
            @yield('content')
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const toggle = document.getElementById('profileDropdown');
            if (!toggle) return;
            toggle.addEventListener('show.bs.dropdown', () => toggle.classList.add('show'));
            toggle.addEventListener('hide.bs.dropdown', () => toggle.classList.remove('show'));
        });
    </script>

    @stack('scripts')
</body>

</html>