<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'تاجر بلس' }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Cairo', sans-serif; }
        [x-cloak] { display: none !important; }
    </style>
    @livewireStyles
</head>
<body class="bg-gray-50 min-h-screen">
    <nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center gap-8">
                    <a href="{{ route('catalog') }}" class="text-xl font-bold text-emerald-600">
                        تاجر بلس
                    </a>
                    <div class="hidden md:flex items-center gap-1">
                        <a href="{{ route('catalog') }}"
                           class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request()->routeIs('catalog') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600 hover:bg-gray-100' }}">
                            الكاتالوج
                        </a>
                        @auth
                        <a href="{{ route('merchant.products') }}"
                           class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request()->routeIs('merchant.products') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600 hover:bg-gray-100' }}">
                            المنتجات
                        </a>
                        <a href="{{ route('merchant.cart') }}"
                           class="px-4 py-2 rounded-lg text-sm font-medium transition flex items-center gap-2 {{ request()->routeIs('merchant.cart') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600 hover:bg-gray-100' }}">
                            السلة
                            @if(app(\App\Services\CartService::class)->count() > 0)
                                <span class="bg-emerald-500 text-white text-xs rounded-full px-2 py-0.5">
                                    {{ app(\App\Services\CartService::class)->count() }}
                                </span>
                            @endif
                        </a>
                        <a href="{{ route('merchant.orders') }}"
                           class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request()->routeIs('merchant.orders*') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600 hover:bg-gray-100' }}">
                            طلباتي
                        </a>
                        @endauth
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    @auth
                    <div class="flex items-center gap-3">
                        <div class="hidden sm:flex items-center gap-2 bg-amber-50 text-amber-700 px-3 py-1.5 rounded-lg text-sm">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                            <span class="font-semibold">{{ number_format(auth()->user()->points_balance) }}</span>
                            <span>نقطة</span>
                        </div>
                        @livewire('merchant.notifications-dropdown')
                        <a href="{{ route('merchant.profile') }}" class="flex items-center gap-2 hover:opacity-80 transition">
                            @if(auth()->user()->avatar)
                                <img src="{{ auth()->user()->avatar }}" alt="{{ auth()->user()->name }}" class="w-8 h-8 rounded-full">
                            @endif
                            <span class="text-sm text-gray-600 hidden sm:inline">{{ auth()->user()->name }}</span>
                        </a>
                        <form method="POST" action="{{ route('merchant.logout') }}">
                            @csrf
                            <button type="submit" class="text-sm text-red-500 hover:text-red-700 transition">خروج</button>
                        </form>
                    </div>
                    @else
                    <div class="flex items-center gap-3">
                        <a href="{{ route('login') }}" class="text-sm text-gray-600 hover:text-emerald-600 font-medium transition">دخول</a>
                        <a href="{{ route('register') }}" class="text-sm bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-xl transition font-medium">إنشاء حساب</a>
                    </div>
                    @endauth
                </div>
            </div>
        </div>
        {{-- Mobile nav --}}
        <div class="md:hidden border-t border-gray-200 bg-white px-4 py-2 flex gap-1">
            <a href="{{ route('catalog') }}"
               class="flex-1 text-center px-3 py-2 rounded-lg text-xs font-medium transition {{ request()->routeIs('catalog') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600' }}">
                الكاتالوج
            </a>
            @auth
            <a href="{{ route('merchant.products') }}"
               class="flex-1 text-center px-3 py-2 rounded-lg text-xs font-medium transition {{ request()->routeIs('merchant.products') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600' }}">
                المنتجات
            </a>
            <a href="{{ route('merchant.cart') }}"
               class="flex-1 text-center px-3 py-2 rounded-lg text-xs font-medium transition {{ request()->routeIs('merchant.cart') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600' }}">
                السلة
            </a>
            <a href="{{ route('merchant.orders') }}"
               class="flex-1 text-center px-3 py-2 rounded-lg text-xs font-medium transition {{ request()->routeIs('merchant.orders*') ? 'bg-emerald-50 text-emerald-700' : 'text-gray-600' }}">
                طلباتي
            </a>
            @else
            <a href="{{ route('login') }}"
               class="flex-1 text-center px-3 py-2 rounded-lg text-xs font-medium text-gray-600">
                دخول
            </a>
            <a href="{{ route('register') }}"
               class="flex-1 text-center px-3 py-2 rounded-lg text-xs font-medium text-emerald-600">
                تسجيل
            </a>
            @endauth
        </div>
    </nav>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        @if(session('success'))
            <div class="mb-6 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl p-4 text-sm">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="mb-6 bg-red-50 border border-red-200 text-red-700 rounded-xl p-4 text-sm">
                {{ session('error') }}
            </div>
        @endif
        {{ $slot }}
    </main>

    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 py-6 text-center text-sm text-gray-500">
            &copy; {{ date('Y') }} تاجر بلس. جميع الحقوق محفوظة.
        </div>
    </footer>

    @livewireScripts
</body>
</html>
