<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {{-- Judul halaman bisa diisi dari masing-masing halaman child --}}
    <title>@yield('title', 'Space Casual Store')</title>
    <link rel="icon" href="{{ asset('images/logo.png') }}?v=1" type="image/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=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    {{-- Bootstrap 5 CSS --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    {{-- Bootstrap Icons --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    {{-- Font Awesome --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    {{-- CSS Utama Proyek --}}
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">

    {{-- ================================================================
    CSS / STYLES
    ================================================================ --}}
    <style>
        /* Efek Warna Biru & Garis Bawah Pas Teks untuk Menu Aktif */
        .navbar-nav .nav-link.active {
            color: #3ba1eb !important;
            font-weight: 600;
            border: none !important;
            /* Menggunakan text-decoration agar garis mengikuti panjang huruf */
            text-decoration: underline !important;
            text-underline-offset: 6px;
            text-decoration-thickness: 2px;
            text-decoration-color: #3ba1eb !important;
        }

        /* Styling Cart Drawer */
        .cart-drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }

        .cart-drawer-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .cart-drawer-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 450px;
            max-width: 100vw;
            height: 100vh;
            background: #ffffff;
            z-index: 10002;
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .cart-drawer-panel.show {
            transform: translateX(0);
        }

        .cart-drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px;
            border-bottom: 1px solid #E5E7EB;
        }

        .cart-drawer-title {
            font-weight: 800;
            color: #0F1C2E;
            font-size: 20px;
            margin: 0;
        }

        .btn-close-drawer {
            background-color: #FF0000;
            color: white;
            border: none;
            border-radius: 6px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
        }

        .btn-close-drawer i {
            font-size: 24px;
            line-height: 0;
        }

        .cart-drawer-body {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        .cart-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            color: #0F1C2E;
            padding-bottom: 40px;
        }

        .cart-empty-icon {
            font-size: 80px;
            margin-bottom: 16px;
            color: #0F1C2E;
        }

        .cart-empty-title {
            font-weight: 800;
            font-size: 18px;
            margin-bottom: 8px;
            color: #000;
        }

        .cart-empty-desc {
            font-size: 13px;
            color: #6B7280;
            max-width: 80%;
        }

        .cart-drawer-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            border-bottom: 1px solid #F3F4F6;
            padding-bottom: 20px;
        }

        .cart-item-left {
            display: flex;
            align-items: center;
            gap: 16px;
            flex: 1;
        }

        .cart-item-img {
            width: 80px;
            height: 80px;
            background: #f3f4f6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
        }

        .cart-item-img img {
            height: 80px;
            border-radius: 8px;
            object-fit: contain;
            mix-blend-mode: multiply;
        }

        .cart-item-info {
            display: flex;
            flex-direction: column;
        }

        .cart-item-name {
            font-weight: 800;
            font-size: 15px;
            color: #0F1C2E;
            margin-bottom: 4px;
        }

        .cart-item-price {
            font-size: 13px;
            color: #4B5563;
        }

        .btn-delete-item {
            background-color: #FFD1D1;
            color: #FF0000;
            border: none;
            border-radius: 8px;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .btn-delete-item:hover {
            background-color: #FF0000;
            color: #FFF;
        }

        .cart-drawer-footer {
            padding: 24px;
            border-top: 1px solid #E5E7EB;
            background: #FFF;
        }

        .cart-subtotal-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
        }

        .subtotal-label {
            font-weight: 800;
            font-size: 16px;
            color: #000;
        }

        .subtotal-price {
            font-weight: 800;
            font-size: 18px;
            color: #000;
        }

        .subtotal-note {
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 20px;
        }

        .btn-checkout-wa {
            background-color: #2CA759;
            color: white;
            border: none;
            border-radius: 8px;
            width: 100%;
            padding: 14px;
            font-size: 16px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-checkout-wa:hover {
            background-color: #248C4A;
        }

        .search-form {
            width: 300px;
        }

        .search-form .input-group {
            width: 100%;
        }

        /* ================================================================
           TAMBAHAN: PERBAIKAN RESPONSIVE DI BAWAH 1300PX
           Tanpa mengubah struktur HTML asli sama sekali
        ================================================================ */
        @media (max-width: 1300px) {

            /* Rapatkan jarak antar item menu di navbar */
            #navMenu .navbar-nav.gap-3 {
                gap: 0.5rem !important;
            }

            #navMenu .nav-link {
                font-size: 14px;
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
            }

            /* PERBAIKAN: Ubah width .search-form agar tidak menyisakan ruang kosong */
            .search-form {
                width: 200px;
                /* Mengecilkan pembungkusnya secara keseluruhan */
            }

            .search-form .input-group {
                width: 100%;
                /* Memastikan input memenuhi ukuran 200px tersebut */
            }

            /* Rapatkan jarak ikon search, login, dan cart di sisi kanan */
            #navMenu .d-flex.align-items-center.gap-4 {
                gap: 1.25rem !important;
            }

            /* Sesuaikan ukuran teks login admin */
            .btn-login .login-text {
                font-size: 13px;
            }
        }
    </style>

    {{-- Tempat untuk CSS tambahan dari halaman child (opsional) --}}
    @stack('styles')
</head>

<body>

    {{-- ================================================================
    NAVBAR
    ================================================================ --}}
    <nav class="navbar navbar-expand-lg">
        <div class="container">

            {{-- Logo / Brand --}}
            <a class="navbar-brand d-flex align-items-center" href="{{ url('/') }}">
                <div class="brand-logo">
                    <img src="{{ asset('images/logo.png') }}" alt="Space Casual Logo">
                </div>
                <div class="brand-text">
                    Space Casual
                    <span>Store</span>
                </div>
            </a>

            {{-- Hamburger (Mobile) --}}
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
                <span class="navbar-toggler-icon"></span>
            </button>

            {{-- Nav Menu --}}
            <div class="collapse navbar-collapse" id="navMenu">
                <ul class="navbar-nav mx-auto gap-3">
                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('/') ? 'active' : '' }}" href="{{ url('/') }}">Beranda</a>
                    </li>

                    {{-- Dropdown Apparel --}}
                    <li class="nav-item dropdown">
                        {{-- Logika active diperbaiki untuk mencakup URL beranda/apparel- --}}
                        <a class="nav-link dropdown-toggle {{ request()->is('beranda/apparel-*') ? 'active' : '' }}"
                            href="#" data-bs-toggle="dropdown">
                            Apparel
                        </a>
                        <ul class="dropdown-menu border-0 shadow-sm">
                            <li><a class="dropdown-item" href="{{ url('/beranda/apparel-new') }}">Apparel New</a></li>
                            <li><a class="dropdown-item" href="{{ url('/beranda/apparel-second') }}">Apparel Second</a>
                            </li>
                        </ul>
                    </li>

                    {{-- Dropdown Footwear --}}
                    <li class="nav-item dropdown">
                        {{-- Logika active diperbaiki untuk mencakup URL beranda/footwear- --}}
                        <a class="nav-link dropdown-toggle {{ request()->is('beranda/footwear-*') ? 'active' : '' }}"
                            href="#" data-bs-toggle="dropdown">
                            Footwear
                        </a>
                        <ul class="dropdown-menu border-0 shadow-sm">
                            <li><a class="dropdown-item" href="{{ url('/beranda/footwear-new') }}">Footwear New</a></li>
                            <li><a class="dropdown-item" href="{{ url('/beranda/footwear-second') }}">Footwear
                                    Second</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('tentang') ? 'active' : '' }}"
                            href="{{ url('/tentang') }}">Tentang</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#hubungi-kami">Kontak</a>
                    </li>
                </ul>

                {{-- Search + Login + Cart --}}
                <div class="d-flex align-items-center gap-4">

                    {{-- Search --}}
                    <form class="search-form m-0 d-flex align-items-center" action="{{ url()->current() }}"
                        method="GET">
                        <div class="input-group">
                            <input type="text" name="q" class="form-control" placeholder="Cari Produk..."
                                value="{{ request('q') }}">
                            <button class="btn btn-primary btn-search" type="submit">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </form>

                    {{-- Login Admin --}}
                    <a href="{{ url('/login') }}" class="btn-login d-flex align-items-center gap-2">
                        <i class="bi bi-person-circle"></i>
                        <span class="login-text">
                            Login<br>Admin
                        </span>
                    </a>

                    {{-- Cart --}}
                    <a href="#" id="openCartBtn" class="cart-icon">
                        <i class="bi bi-cart3"></i>
                        <span class="cart-badge" id="globalCartBadge" style="display: none;">0</span>
                    </a>

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

    {{-- ================================================================
    KONTEN UTAMA
    ================================================================ --}}
    @yield('content')

    {{-- ================================================================
    FOOTER
    ================================================================ --}}
    <footer class="footer">
        <div class="container">
            <div class="row g-4 justify-content-between">
                <div class="col-12 col-md-5">
                    <div class="footer-logo">
                        <div class="brand-logo-footer">
                            <img src="{{ asset('images/logo.png') }}" alt="Space Casual Logo">
                        </div>
                        <p>Style casual untuk keseharian dengan kenyamanan maksimal.</p>
                        <div class="footer-social">
                            <a href="https://instagram.com/spacecasual_" target="_blank">
                                <i class="bi bi-instagram"></i>
                            </a>

                            <a href="https://wa.me/6281315595087" target="_blank">
                                <i class="bi bi-whatsapp"></i>
                            </a>

                            <a href="https://www.facebook.com/irwansyah.maulana.336" target="_blank">
                                <i class="bi bi-facebook"></i>
                            </a>

                            <a href="https://www.tiktok.com/@spacecasualstore" target="_blank">
                                <i class="bi bi-tiktok"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-6 col-md-auto">
                    <h6>Kategori</h6>
                    <ul class="footer-links">
                        <li><a href="{{ url('/beranda/apparel-new') }}">Apparel New</a></li>
                        <li><a href="{{ url('/beranda/apparel-second') }}">Apparel Second</a></li>
                        <li><a href="{{ url('/beranda/footwear-new') }}">Footwear New</a></li>
                        <li><a href="{{ url('/beranda/footwear-second') }}">Footwear Second</a></li>
                    </ul>
                </div>

                <div class="col-6 col-md-auto">
                    <div id="hubungi-kami">
                        <h6>Hubungi Kami</h6>
                        <ul class="footer-links footer-contact list-unstyled">
                            <li>
                                <i class="bi bi-geo-alt-fill"></i>
                                <a href="https://maps.app.goo.gl/sAYmge6gXP7EdHCL8" target="_blank">
                                    Grobogan, Mojowarno, Jombang
                                </a>
                            </li>
                            <li>
                                <i class="bi bi-telephone-fill"></i>
                                <a href="https://wa.me/6281315595087" target="_blank">
                                    +62 813 1559 5087
                                </a>
                            </li>
                            <li>
                                <i class="bi bi-envelope-fill"></i>
                                <a href="mailto:spacecasual@gmail.com">
                                    spacecasual@gmail.com
                                </a>
                            </li>
                            <li>
                                <i class="bi bi-instagram"></i>
                                <a href="https://instagram.com/spacecasual_" target="_blank">
                                    spacecasual_
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="footer-divider"></div>
                <p class="footer-copy">© 2026 Space Casual Store. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    {{-- ========================================================
    CART DRAWER (SIDEBAR KERANJANG GLOBAL)
    ======================================================== --}}
    <div id="cartDrawerOverlay" class="cart-drawer-overlay"></div>
    <div id="cartDrawerPanel" class="cart-drawer-panel">
        <div class="cart-drawer-header">
            <h4 class="cart-drawer-title">Keranjang Belanja</h4>
            <button id="closeCartDrawer" class="btn-close-drawer">
                <i class="bi bi-x"></i>
            </button>
        </div>
        <div class="cart-drawer-body" id="cartDrawerBody"></div>
        <div class="cart-drawer-footer">
            <div class="cart-subtotal-row">
                <span class="subtotal-label">Sub Total</span>
                <span id="cartDrawerSubtotal" class="subtotal-price">Rp. 0</span>
            </div>
            <div class="subtotal-note">*Belum Termasuk Biaya Ongkir</div>
            <button id="btnCheckoutWA" class="btn-checkout-wa">
                <i class="bi bi-whatsapp"></i> Checkout via WhatsApp
            </button>
        </div>
    </div>

    {{-- ================================================================
    SCRIPTS
    ================================================================ --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const openCartBtn = document.getElementById('openCartBtn');
            const closeCartDrawer = document.getElementById('closeCartDrawer');
            const cartDrawerOverlay = document.getElementById('cartDrawerOverlay');
            const cartDrawerPanel = document.getElementById('cartDrawerPanel');
            const cartDrawerBody = document.getElementById('cartDrawerBody');
            const cartDrawerSubtotal = document.getElementById('cartDrawerSubtotal');
            const globalCartBadge = document.getElementById('globalCartBadge');
            const btnCheckoutWA = document.getElementById('btnCheckoutWA');

            let cart = JSON.parse(localStorage.getItem('spaceCasualCart')) || [];

            if (openCartBtn) {
                openCartBtn.addEventListener('click', (e) => {
                    e.preventDefault();
                    renderCart();
                    cartDrawerOverlay.classList.add('show');
                    cartDrawerPanel.classList.add('show');
                });
            }

            function closeDrawer() {
                cartDrawerOverlay.classList.remove('show');
                cartDrawerPanel.classList.remove('show');
            }
            if (closeCartDrawer) closeCartDrawer.addEventListener('click', closeDrawer);
            if (cartDrawerOverlay) cartDrawerOverlay.addEventListener('click', closeDrawer);

            window.renderCart = function () {
                cart = JSON.parse(localStorage.getItem('spaceCasualCart')) || [];
                let totalItems = cart.reduce((sum, item) => sum + item.qty, 0);

                if (globalCartBadge) {
                    globalCartBadge.innerText = totalItems;
                    globalCartBadge.style.display = totalItems > 0 ? 'inline-block' : 'none';
                }

                let subtotal = 0;
                cartDrawerBody.innerHTML = '';

                if (cart.length === 0) {
                    cartDrawerBody.innerHTML = `
                        <div class="cart-empty-state">
                            <i class="bi bi-cart-x cart-empty-icon"></i>
                            <div class="cart-empty-title">Keranjang Kamu Masih Kosong</div>
                            <div class="cart-empty-desc">Yuk, Temukan Produk Favoritmu Dan Mulai Belanja Sekarang</div>
                        </div>
                    `;
                    cartDrawerSubtotal.innerText = 'Rp. 0';
                    return;
                }

                cart.forEach((item, index) => {
                    subtotal += (item.cleanPrice * item.qty);
                    const formattedPrice = new Intl.NumberFormat('id-ID').format(item.cleanPrice);
                    const itemHTML = `
                        <div class="cart-drawer-item">
                            <div class="cart-item-left">
                                <div class="cart-item-img"><img src="${item.imgSrc}" alt="${item.name}"></div>
                                <div class="cart-item-info">
                                    <div class="cart-item-name">${item.name} - ${item.size}</div>
                                    <div class="cart-item-price">${item.qty} x Rp. ${formattedPrice}</div>
                                </div>
                            </div>
                            <button class="btn-delete-item" onclick="removeCartItem(${index})"><i class="bi bi-trash-fill"></i></button>
                        </div>
                    `;
                    cartDrawerBody.insertAdjacentHTML('beforeend', itemHTML);
                });
                cartDrawerSubtotal.innerText = 'Rp. ' + new Intl.NumberFormat('id-ID').format(subtotal);
            }

            window.removeCartItem = function (index) {
                cart.splice(index, 1);
                localStorage.setItem('spaceCasualCart', JSON.stringify(cart));
                renderCart();
            }

            if (btnCheckoutWA) {
                btnCheckoutWA.addEventListener('click', () => {
                    if (cart.length === 0) { alert("Keranjang kosong!"); return; }
                    let waText = "Halo Admin Space Casual Store, saya ingin memesan produk berikut:\n\n";
                    let total = 0;
                    cart.forEach((item, idx) => {
                        const price = new Intl.NumberFormat('id-ID').format(item.cleanPrice * item.qty);
                        waText += `${idx + 1}. ${item.name}\n   Ukuran: ${item.size}\n   Jumlah: ${item.qty}\n   Total Harga: Rp. ${price}\n\n`;
                        total += (item.cleanPrice * item.qty);
                    });
                    waText += `*Sub Total: Rp. ${new Intl.NumberFormat('id-ID').format(total)}*\n_(Belum termasuk ongkir)_`;
                    const waNumber = "6281315595087";
                    window.open(`https://api.whatsapp.com/send?phone=${waNumber}&text=${encodeURIComponent(waText)}`, '_blank');
                });
            }

            renderCart();
        });
    </script>

    @stack('scripts')
</body>

</html>