<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Customer Portal') – MotoSolution Bangladesh</title>
    
    <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=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-900 text-slate-100 font-sans antialiased selection:bg-red-600 selection:text-white min-h-screen flex flex-col lg:flex-row">

    <!-- Customer Sidebar -->
    <aside class="w-full lg:w-72 bg-[#0B0F19] border-r border-white/10 shrink-0 flex flex-col justify-between" x-data="{ open: false }">
        <div>
            <!-- Header Brand -->
            <div class="h-20 px-6 flex items-center justify-between border-b border-white/10">
                <a href="{{ route('home') }}" class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-extrabold text-lg shadow-lg">
                        M
                    </div>
                    <div>
                        <span class="font-extrabold text-white tracking-tight font-heading text-lg">MOTO<span class="text-red-500">SOLUTION</span></span>
                        <span class="block text-[10px] text-slate-400 uppercase tracking-wider font-semibold">Customer Portal</span>
                    </div>
                </a>
                <button @click="open = !open" class="lg:hidden p-2 text-slate-400 hover:text-white">
                    <i class="fa-solid fa-bars text-lg"></i>
                </button>
            </div>

            <!-- Customer User Card -->
            <div class="p-5 border-b border-white/10 flex items-center gap-3">
                <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center font-bold text-white text-base shadow-md">
                    {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                </div>
                <div class="min-w-0 flex-1">
                    <p class="font-bold text-white text-sm truncate">{{ Auth::user()->name }}</p>
                    <p class="text-xs text-slate-400 truncate">{{ Auth::user()->phone ?? Auth::user()->email }}</p>
                    <span class="inline-block text-[10px] bg-emerald-500/20 text-emerald-400 font-semibold px-2 py-0.5 rounded-full mt-1">Verified Client</span>
                </div>
            </div>

            <!-- Navigation Links -->
            <nav class="p-4 space-y-1.5" :class="{'block': open, 'hidden': !open}" class="lg:block">
                <a href="{{ route('customer.dashboard') }}" class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition {{ request()->routeIs('customer.dashboard') ? 'bg-red-600 text-white shadow-lg shadow-red-900/30' : 'text-slate-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fa-solid fa-chart-pie w-5 text-center"></i>
                    <span>Dashboard Overview</span>
                </a>
                <a href="{{ route('customer.bids.index') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl font-medium text-sm transition {{ request()->routeIs('customer.bids.*') ? 'bg-red-600 text-white shadow-lg shadow-red-900/30' : 'text-slate-300 hover:bg-white/5 hover:text-white' }}">
                    <div class="flex items-center gap-3">
                        <i class="fa-solid fa-gavel w-5 text-center"></i>
                        <span>My Authorized Bids</span>
                    </div>
                    @php $pendingBidsCount = Auth::user()->bids()->where('status', 'pending')->count(); @endphp
                    @if($pendingBidsCount > 0)
                        <span class="text-[10px] bg-amber-500/30 text-amber-300 font-bold px-2 py-0.5 rounded-full">{{ $pendingBidsCount }}</span>
                    @endif
                </a>
                <a href="{{ route('customer.orders.index') }}" class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition {{ request()->routeIs('customer.orders.*') ? 'bg-red-600 text-white shadow-lg shadow-red-900/30' : 'text-slate-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fa-solid fa-ship w-5 text-center"></i>
                    <span>My Orders & Tracking</span>
                </a>
                <a href="{{ route('customer.watchlist') }}" class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition {{ request()->routeIs('customer.watchlist') ? 'bg-red-600 text-white shadow-lg shadow-red-900/30' : 'text-slate-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fa-solid fa-heart w-5 text-center"></i>
                    <span>Saved Watchlist</span>
                </a>
                <a href="{{ route('customer.notifications') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl font-medium text-sm transition {{ request()->routeIs('customer.notifications') ? 'bg-red-600 text-white shadow-lg shadow-red-900/30' : 'text-slate-300 hover:bg-white/5 hover:text-white' }}">
                    <div class="flex items-center gap-3">
                        <i class="fa-solid fa-bell w-5 text-center"></i>
                        <span>Notifications</span>
                    </div>
                    @php $unreadCount = Auth::user()->unreadNotifications()->count(); @endphp
                    @if($unreadCount > 0)
                        <span class="text-[10px] bg-red-600 text-white font-bold px-1.5 py-0.5 rounded-full">{{ $unreadCount }}</span>
                    @endif
                </a>
                <a href="{{ route('customer.profile') }}" class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl font-medium text-sm transition {{ request()->routeIs('customer.profile') ? 'bg-red-600 text-white shadow-lg shadow-red-900/30' : 'text-slate-300 hover:bg-white/5 hover:text-white' }}">
                    <i class="fa-solid fa-user-gear w-5 text-center"></i>
                    <span>Profile & Security</span>
                </a>

                <div class="pt-4 mt-4 border-t border-white/10 space-y-1">
                    <a href="{{ route('auction.index') }}" class="flex items-center gap-3 px-3.5 py-2 rounded-xl text-xs font-semibold text-emerald-400 hover:bg-white/5">
                        <i class="fa-solid fa-magnifying-glass w-5 text-center"></i> Browse Live Japan Auctions
                    </a>
                    <a href="{{ route('calculator') }}" class="flex items-center gap-3 px-3.5 py-2 rounded-xl text-xs font-semibold text-amber-400 hover:bg-white/5">
                        <i class="fa-solid fa-calculator w-5 text-center"></i> Landed Cost Calculator
                    </a>
                    <a href="{{ route('home') }}" class="flex items-center gap-3 px-3.5 py-2 rounded-xl text-xs font-semibold text-slate-400 hover:text-white hover:bg-white/5">
                        <i class="fa-solid fa-globe w-5 text-center"></i> Return to Website
                    </a>
                </div>
            </nav>
        </div>

        <!-- Logout Bottom Action -->
        <div class="p-4 border-t border-white/10">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-xl bg-white/5 hover:bg-rose-950/40 text-rose-400 text-xs font-bold transition border border-rose-500/20">
                    <i class="fa-solid fa-arrow-right-from-bracket"></i>
                    <span>Sign Out</span>
                </button>
            </form>
        </div>
    </aside>

    <!-- Main Customer Body Content -->
    <div class="flex-1 flex flex-col min-w-0 bg-slate-950">
        <!-- Top header bar -->
        <header class="h-20 bg-[#0B0F19] border-b border-white/10 px-6 lg:px-10 flex items-center justify-between">
            <div>
                <h1 class="text-xl font-bold text-white font-heading">@yield('page_title', 'Customer Portal')</h1>
                <p class="text-xs text-slate-400 hidden sm:block">Manage your authorized bids, Japanese auction pre-orders, and shipment progress.</p>
            </div>
            <div class="flex items-center space-x-4">
                <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20have%20an%20inquiry%20regarding%20my%20bid/order." target="_blank" class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold px-3.5 py-2 rounded-lg transition shadow">
                    <i class="fa-brands fa-whatsapp text-sm"></i>
                    <span class="hidden sm:inline">Concierge Support</span>
                </a>
            </div>
        </header>

        <!-- Flash alerts -->
        @if(session('success'))
            <div class="bg-emerald-600 text-white text-sm font-medium py-2.5 px-6 flex items-center gap-2">
                <i class="fa-solid fa-circle-check"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif
        @if(session('error'))
            <div class="bg-rose-600 text-white text-sm font-medium py-2.5 px-6 flex items-center gap-2">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <span>{{ session('error') }}</span>
            </div>
        @endif

        <div class="p-6 lg:p-10 flex-1 overflow-y-auto">
            @yield('content')
        </div>
    </div>

    @yield('scripts')
</body>
</html>
