<!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', 'Admin Dashboard') - {{ config('app.name') }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        function previewImage(event, prefix) {
            const file = event.target.files[0];
            if (!file) return;
            const preview = document.getElementById(prefix + '_image_preview');
            const placeholder = document.getElementById(prefix + '_image_placeholder');
            const removeBtn = document.getElementById(prefix + '_image_remove');
            preview.src = URL.createObjectURL(file);
            preview.classList.remove('hidden');
            placeholder.classList.add('hidden');
            removeBtn.classList.remove('hidden');
        }
        function removeImage(prefix) {
            const input = document.getElementById(prefix + '_image');
            const preview = document.getElementById(prefix + '_image_preview');
            const placeholder = document.getElementById(prefix + '_image_placeholder');
            const removeBtn = document.getElementById(prefix + '_image_remove');
            input.value = '';
            preview.src = '';
            preview.classList.add('hidden');
            placeholder.classList.remove('hidden');
            removeBtn.classList.add('hidden');
        }
    </script>
</head>
<body class="bg-gray-100">
    <div class="min-h-screen flex">
        @auth
        <aside class="w-64 bg-gray-900 text-white min-h-screen flex-shrink-0">
            <div class="p-4 border-b border-gray-700">
                <h1 class="text-xl font-bold">{{ config('app.name') }}</h1>
                <p class="text-sm text-gray-400">Admin Panel</p>
            </div>
            <nav class="p-4 space-y-1">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.dashboard') ? 'bg-gray-700' : '' }}">
                    <span>Dashboard</span>
                </a>
                <a href="{{ route('admin.users.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.users.*') ? 'bg-gray-700' : '' }}">
                    <span>Users</span>
                </a>
                <a href="{{ route('admin.products.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.products.*') ? 'bg-gray-700' : '' }}">
                    <span>Products</span>
                </a>
                <a href="{{ route('admin.categories.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.categories.*') ? 'bg-gray-700' : '' }}">
                    <span>Categories</span>
                </a>
                <a href="{{ route('admin.orders.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.orders.*') ? 'bg-gray-700' : '' }}">
                    <span>Orders</span>
                </a>
                <a href="{{ route('admin.cart-items.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.cart-items.*') ? 'bg-gray-700' : '' }}">
                    <span>Cart Items</span>
                </a>
                <a href="{{ route('admin.basket-items.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.basket-items.*') ? 'bg-gray-700' : '' }}">
                    <span>Basket Items</span>
                </a>
                <a href="{{ route('admin.payment-methods.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.payment-methods.*') ? 'bg-gray-700' : '' }}">
                    <span>Payment Methods</span>
                </a>
                <a href="{{ route('admin.save-the-food-products.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.save-the-food-products.*') ? 'bg-gray-700' : '' }}">
                    <span>Save The Food</span>
                </a>
                <a href="{{ route('admin.weekly-specials.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.weekly-specials.*') ? 'bg-gray-700' : '' }}">
                    <span>Weekly Specials</span>
                </a>
                <a href="{{ route('admin.sections.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.sections.*') ? 'bg-gray-700' : '' }}">
                    <span>Sections</span>
                </a>
                <hr class="border-gray-700 my-4">
                <a href="{{ route('admin.media.index') }}" class="flex items-center gap-2 px-3 py-2 rounded hover:bg-gray-700 {{ request()->routeIs('admin.media.*') ? 'bg-gray-700' : '' }}">
                    <span>Media Library</span>
                </a>
                <hr class="border-gray-700 my-4">
                <form method="POST" action="{{ route('admin.logout') }}">
                    @csrf
                    <button type="submit" class="w-full text-left px-3 py-2 rounded hover:bg-gray-700 text-gray-400 hover:text-white">
                        Logout
                    </button>
                </form>
            </nav>
        </aside>
        @endauth

        <main class="flex-1 p-6">
            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                    {{ session('error') }}
                </div>
            @endif
            @yield('content')
        </main>
    </div>
</body>
</html>
