<!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>{{ config('app.name', 'Laravel') }}</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        .bg-maroon {
            background-color: #8B0000;
        }
        .text-maroon {
            color: #8B0000;
        }
        .hover\:bg-maroon:hover {
            background-color: #a00000;
        }
        #mainContent {
            transition: margin-left 0.3s ease-in-out;
        }
        .sidebar-open {
            margin-left: 16rem;
        }
        .sidebar-closed {
            margin-left: 0;
        }
        @media (max-width: 640px) {
            .sidebar-open {
                margin-left: 0;
            }
        }
    </style>

    @stack('styles')
</head>
<body class="font-sans antialiased">
    <div class="min-h-screen bg-[#f8f0f0]">
        <!-- Navbar -->
        <nav class="bg-maroon fixed w-full z-50">
            <div class="px-3 py-3 lg:px-5 lg:pl-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center justify-start rtl:justify-end">
                        <button id="toggleSidebar" type="button" class="inline-flex items-center p-2 text-sm text-white rounded-lg hover:bg-maroon focus:outline-none focus:ring-2 focus:ring-gray-200">
                            <span class="sr-only">Toggle sidebar</span>
                            <i class="fas fa-bars w-6 h-6"></i>
                        </button>
                    </div>
                    <div class="flex-1 text-center">
                        <h1 class="text-xl font-bold text-white">Hi {{ Auth::user()->name }}</h1>
                        <p class="text-sm text-white">Welcome to Legacy Eatery & Space</p>
                    </div>
                    <div class="flex items-center">
                        @if(Auth::check())
                            <div class="relative" x-data="{ open: false }">
                                <button @click="open = !open" class="flex items-center bg-white hover:bg-gray-100 p-1 rounded-full transition duration-300">
                                    @if(Auth::user()->profile_picture)
                                        <img class="h-10 w-10 rounded-full object-cover" 
                                             src="{{ Storage::url(Auth::user()->profile_picture) }}" 
                                             alt="{{ Auth::user()->name }}">
                                    @else
                                        <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                            <i class="fas fa-user text-gray-400"></i>
                                        </div>
                                    @endif
                                </button>

                                <!-- Dropdown menu -->
                                <div x-show="open" 
                                     @click.away="open = false"
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="transform opacity-0 scale-95"
                                     x-transition:enter-end="transform opacity-100 scale-100"
                                     x-transition:leave="transition ease-in duration-75"
                                     x-transition:leave-start="transform opacity-100 scale-100"
                                     x-transition:leave-end="transform opacity-0 scale-95"
                                     class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
                                    <div class="py-1">
                                        <a href="{{ route('user.profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                            <i class="fas fa-user-circle mr-2"></i>Edit Profil
                                        </a>
                                        <form method="POST" action="{{ route('logout') }}">
                                            @csrf
                                            <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                <i class="fas fa-sign-out-alt mr-2"></i>Logout
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @else
                            <a href="{{ route('login') }}" class="bg-white hover:bg-gray-100 px-4 py-2 rounded-lg flex items-center transition duration-300">
                                <i class="fas fa-sign-in-alt mr-2 text-maroon"></i>
                                <span class="text-maroon">Login</span>
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </nav>

        <!-- Sidebar -->
        <aside id="sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200" aria-label="Sidebar">
            <div class="h-full px-3 pb-4 overflow-y-auto bg-white">
                <ul class="space-y-2 font-medium">
                    <li>
                        <a href="/dashboard" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-home w-5 h-5"></i>
                            <span class="ms-3">Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="/menu" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-utensils w-5 h-5"></i>
                            <span class="ms-3">Daftar Menu</span>
                        </a>
                    </li>
                    <li>
                        <a href="/meja" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-chair w-5 h-5"></i>
                            <span class="ms-3">Daftar Meja</span>
                        </a>
                    </li>
                    <li>
                        <a href="/reservasi" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-calendar-check w-5 h-5"></i>
                            <span class="ms-3">Reservasi</span>
                        </a>
                    </li>
                    <li>
                        <a href="/transaksi" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-cash-register w-5 h-5"></i>
                            <span class="ms-3">Transaksi</span>
                        </a>
                    </li>
                    <li>
                        <a href="/riwayat" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-history w-5 h-5"></i>
                            <span class="ms-3">Riwayat Pesanan</span>
                        </a>
                    </li>
                    <li>
                        <a href="/kritiksaran" class="flex items-center p-3 text-maroon rounded-lg hover:bg-[#ffebeb] group">
                            <i class="fas fa-comments w-5 h-5"></i>
                            <span class="ms-3">Kritik Saran</span>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>

        <!-- Main Content -->
        <main id="mainContent" class="pt-20">
            @yield('content')
        </main>
    </div>

    @stack('scripts')

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            const toggleButton = document.getElementById('toggleSidebar');
            let isSidebarOpen = window.innerWidth >= 640;

            function updateSidebarState() {
                if (isSidebarOpen) {
                    sidebar.classList.remove('-translate-x-full');
                    mainContent.classList.add('sidebar-open');
                    mainContent.classList.remove('sidebar-closed');
                } else {
                    sidebar.classList.add('-translate-x-full');
                    mainContent.classList.remove('sidebar-open');
                    mainContent.classList.add('sidebar-closed');
                }
            }

            // Initial state
            updateSidebarState();

            // Toggle button click
            toggleButton.addEventListener('click', function() {
                isSidebarOpen = !isSidebarOpen;
                updateSidebarState();
            });

            // Handle window resize
            window.addEventListener('resize', function() {
                if (window.innerWidth < 640) {
                    isSidebarOpen = false;
                }
                updateSidebarState();
            });
        });
    </script>
</body>
</html> 