<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Fashion Mitra')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900">
    <div class="min-h-screen flex flex-col">
        <header class="bg-white shadow-sm sticky top-0 z-30">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Top Bar -->
                <div class="flex items-center justify-between py-3 gap-4 border-b border-slate-100">
                    <a href="{{ route('home') }}" class="flex items-center gap-2">
                        <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 text-white font-bold text-lg">F</span>
                        <div>
                            <p class="font-semibold text-slate-900">Fashion Mitra</p>
                            <p class="text-xs text-slate-500">Online Shopping</p>
                        </div>
                    </a>

                    <!-- Search Bar -->
                    <div class="flex-1 max-w-md mx-4">
                        <form action="{{ route('search') }}" method="GET" class="flex">
                            <input type="text" name="q" placeholder="Search products..." class="flex-1 rounded-l-3xl border border-slate-200 px-4 py-2 focus:border-slate-900 focus:outline-none" value="{{ request('q', '') }}">
                            <button type="submit" class="rounded-r-3xl bg-slate-900 px-4 py-2 text-white hover:bg-slate-800">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </button>
                        </form>
                    </div>

                    <!-- Icons -->
                    <div class="flex items-center gap-4">
                        <a href="{{ route('compare.index') }}" class="relative text-slate-600 hover:text-slate-900 font-medium" title="Compare">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                        </a>
                        <a href="{{ route('wishlist.index') }}" class="relative text-slate-600 hover:text-slate-900 font-medium" title="Wishlist">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                        </a>
                        <a href="{{ route('cart.index') }}" class="relative text-slate-600 hover:text-slate-900 font-medium" title="Shopping Cart">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            @php $cart = session()->get('cart', []); @endphp
                            @if(count($cart) > 0)
                                <span class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">{{ count($cart) }}</span>
                            @endif
                        </a>

                        <!-- User Menu -->
                        @auth
                            <div class="relative group">
                                <button class="flex items-center gap-2 px-3 py-1 text-slate-700 hover:text-slate-900">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    <span class="text-sm hidden sm:inline">{{ auth()->user()->name }}</span>
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                                </button>

                                <div class="absolute right-0 mt-0 w-48 bg-white rounded-3xl shadow-lg hidden group-hover:block z-50">
                                    <a href="{{ route('user.profile') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-3xl">My Profile</a>
                                    <a href="{{ route('user.addresses') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">My Addresses</a>
                                    <a href="{{ route('orders.index') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">My Orders</a>
                                    @if(auth()->user()->isAdmin())
                                        <hr class="my-2">
                                        <a href="{{ route('admin.dashboard') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 font-semibold">Admin Dashboard</a>
                                    @endif
                                    <form method="POST" action="{{ route('logout') }}" class="block">
                                        @csrf
                                        <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-slate-100 rounded-b-3xl">Logout</button>
                                    </form>
                                </div>
                            </div>
                        @else
                            <a href="{{ route('login') }}" class="px-4 py-2 rounded-full bg-slate-900 text-white text-sm hover:bg-slate-800">Login</a>
                        @endauth
                    </div>
                </div>

                <!-- Navigation -->
                <nav class="hidden lg:flex items-center justify-center gap-8 py-3 font-medium text-slate-700">
                    <a href="{{ route('home') }}" class="hover:text-slate-900">Home</a>
                    <a href="{{ route('category.show', 'women-clothing') }}" class="hover:text-slate-900">Women</a>
                    <a href="{{ route('category.show', 'men-clothing') }}" class="hover:text-slate-900">Men</a>
                    <a href="{{ route('track') }}" class="hover:text-slate-900">Track Order</a>
                    <a href="{{ route('pages.faq') }}" class="hover:text-slate-900">Help</a>
                </nav>
            </div>
        </header>

        <main class="flex-1">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                @if(session('success'))
                    <div class="mb-6 rounded-xl bg-emerald-50 border border-emerald-200 p-4 text-emerald-700">
                        {{ session('success') }}
                    </div>
                @endif
                @if($errors->any())
                    <div class="mb-6 rounded-xl bg-rose-50 border border-rose-200 p-4 text-rose-700">
                        <ul class="list-disc pl-5">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @yield('content')
            </div>
        </main>

        <footer class="bg-slate-950 text-slate-300 mt-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 grid gap-10 md:grid-cols-3">
                <div>
                    <h3 class="text-white text-lg font-semibold">Fashion Mitra</h3>
                    <p class="mt-4 text-sm leading-7 text-slate-400">A sample e-commerce implementation with categories, products, cart, wishlist and order tracking for Laravel 11.</p>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-3">Useful Links</h4>
                    <ul class="space-y-2 text-sm text-slate-400">
                        <li><a href="{{ route('pages.faq') }}" class="hover:text-white">FAQ</a></li>
                        <li><a href="{{ route('pages.about') }}" class="hover:text-white">About Us</a></li>
                        <li><a href="{{ route('pages.privacy') }}" class="hover:text-white">Privacy Policy</a></li>
                        <li><a href="{{ route('pages.terms') }}" class="hover:text-white">Terms & Service</a></li>
                        <li><a href="{{ route('pages.return') }}" class="hover:text-white">Return Policy</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-3">Contact</h4>
                    <p class="text-sm text-slate-400">G-05, H-73, Sector-63, Near Noida Electronic City Metro Station, Noida, Gautam Buddh Nagar, Uttar Pradesh – 201301</p>
                    <p class="mt-4 text-sm">Phone: <a href="tel:9220747031" class="hover:text-white">9220747031</a></p>
                    <p class="mt-1 text-sm">Email: <a href="mailto:care@pehunt.com" class="hover:text-white">care@pehunt.com</a></p>
                    <p class="mt-1 text-sm">Mon–Sat: 9:00 AM – 9:00 PM</p>
                </div>
            </div>
            <div class="border-t border-slate-800 py-6 text-center text-slate-500 text-sm">Fashion Mitra Powered by PeHunt solution OPC Pvt Ltd © All rights reserved.</div>
        </footer>
    </div>
</body>
</html>
