<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title><?php echo $__env->yieldContent('title'); ?> — Elvara Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>

<script>
tailwind.config = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
            colors: {
                primary: '#0f172a',
                secondary: '#475569',
                accent: '#3b82f6',
                accentDark: '#2563eb',
            }
        }
    }
}
</script>

<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

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

</head>

<!-- ✅ FIX DI SINI -->
<body class="bg-gray-50 text-gray-800 font-sans antialiased min-h-screen flex flex-col">

<!-- NAVBAR -->
<nav class="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">

            <!-- LOGO -->
            <a href="<?php echo e(route('customer.dashboard')); ?>" class="flex items-center gap-2">
                <div class="w-9 h-9 bg-accent text-white flex items-center justify-center rounded-xl shadow">
                    <i class="bi bi-bag-heart-fill"></i>
                </div>
                <span class="font-extrabold text-lg text-primary">Elvara<span class="text-accent">Shop</span></span>
            </a>

            <!-- SEARCH -->
            <form method="GET" class="hidden md:flex w-full max-w-md mx-6">
                <div class="relative w-full">
                    <input type="text" name="search" value="<?php echo e(request('search')); ?>"
                        placeholder="Cari produk..."
                        class="w-full bg-gray-100 border-transparent rounded-full py-2.5 pl-10 pr-4 text-sm focus:bg-white focus:ring-2 focus:ring-accent/20 focus:border-accent transition">
                    <i class="bi bi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
            </form>

            <!-- RIGHT -->
            <div class="flex items-center gap-4">

                <?php if(auth()->guard()->check()): ?>
                    <?php
                        $cartCount = \App\Models\KeranjangItem::where('id_users', auth()->id())->sum('jumlah');
                    ?>

                    <!-- CART -->
                    <a href="<?php echo e(route('keranjang.index')); ?>" class="relative text-gray-600 hover:text-accent transition">
                        <i class="bi bi-cart3 text-2xl"></i>
                        <?php if($cartCount > 0): ?>
                            <span class="absolute -top-1 -right-2 bg-red-500 text-white text-[10px] w-4 h-4 flex items-center justify-center rounded-full">
                                <?php echo e($cartCount); ?>

                            </span>
                        <?php endif; ?>
                    </a>

                    <!-- USER -->
                    <div class="relative" x-data="{open:false}">
                        <button @click="open=!open"
                            class="flex items-center gap-2 bg-gray-100 px-3 py-1.5 rounded-full hover:bg-gray-200 transition">
                            <div class="w-7 h-7 bg-primary text-white rounded-full flex items-center justify-center text-xs font-bold">
                                <?php echo e(strtoupper(substr(auth()->user()->name,0,1))); ?>

                            </div>
                            <i class="bi bi-chevron-down text-xs"></i>
                        </button>

                        <div x-show="open" @click.outside="open=false"
                             class="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-xl shadow-lg p-2">

                            <div class="px-3 py-2 border-b text-sm">
                                <div class="font-semibold"><?php echo e(auth()->user()->name); ?></div>
                                <div class="text-gray-500 text-xs"><?php echo e(auth()->user()->email); ?></div>
                            </div>

                            <a href="<?php echo e(route('profile.index')); ?>" class="block px-3 py-2 text-sm hover:bg-gray-50 rounded">
                                <i class="bi bi-person mr-2"></i> Profil
                            </a>

                            <a href="<?php echo e(route('pesanans.index')); ?>" class="block px-3 py-2 text-sm hover:bg-gray-50 rounded">
                                <i class="bi bi-bag-check mr-2"></i> Pesanan
                            </a>

                            <form method="POST" action="<?php echo e(route('logout')); ?>">
                                <?php echo csrf_field(); ?>
                                <button class="w-full text-left px-3 py-2 text-sm text-red-500 hover:bg-red-50 rounded">
                                    <i class="bi bi-box-arrow-right mr-2"></i> Logout
                                </button>
                            </form>
                        </div>
                    </div>

                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>" class="text-sm font-semibold text-gray-600 hover:text-primary">Masuk</a>
                    <a href="<?php echo e(route('register')); ?>" class="bg-primary text-white px-4 py-2 rounded-full text-sm font-bold hover:bg-gray-800">
                        Daftar
                    </a>
                <?php endif; ?>

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

<!-- ✅ CONTENT DIDORONG -->
<main class="flex-1 py-10">
    <?php echo $__env->yieldContent('content'); ?>
</main>

<!-- FOOTER -->
<footer class="bg-primary text-white mt-16">
    <div class="max-w-7xl mx-auto px-6 py-10 text-center text-sm text-gray-300">
        © <?php echo e(date('Y')); ?> ElvaraShop. All rights reserved.
    </div>
</footer>

<!-- Alpine -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

</body>
</html><?php /**PATH C:\laragon\www\Toko-miftah\resources\views/layouts/customer.blade.php ENDPATH**/ ?>