<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'WedBooker - Wedding Guest Management')</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <style>
        * {
            font-family: 'Space Grotesk', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(139, 92, 246, 0.3);
        }
        
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        /* Sidebar Styles */
        .sidebar-link {
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 12px;
            color: #9ca3af;
        }
        
        .sidebar-link:hover {
            background: rgba(139, 92, 246, 0.2);
            color: white;
            transform: translateX(5px);
        }
        
        .sidebar-link.active {
            background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(236,72,153,0.3));
            color: white;
            border-left: 3px solid #8B5CF6;
        }
        
        /* Desktop Layout - Sidebar Fixed, Content Scrolls */
        @media (min-width: 769px) {
            .main-wrapper {
                display: flex;
                min-height: 100vh;
            }
            
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                width: 288px;
                height: 100vh;
                background: rgba(0, 0, 0, 0.4);
                backdrop-filter: blur(20px);
                border-right: 1px solid rgba(255, 255, 255, 0.1);
                overflow-y: auto;
                z-index: 40;
            }
            
            .main-content {
                margin-left: 288px;
                flex: 1;
                min-height: 100vh;
                overflow-x: hidden;
            }
            
            /* Custom scrollbar for sidebar */
            .sidebar::-webkit-scrollbar {
                width: 4px;
            }
            
            .sidebar::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.05);
            }
            
            .sidebar::-webkit-scrollbar-thumb {
                background: linear-gradient(135deg, #8B5CF6, #EC4899);
                border-radius: 4px;
            }
        }
        
        /* Mobile Layout */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                width: 280px;
                height: 100vh;
                background: rgba(0, 0, 0, 0.95);
                backdrop-filter: blur(20px);
                border-right: 1px solid rgba(255, 255, 255, 0.1);
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                z-index: 1000;
            }
            
            .sidebar.open {
                transform: translateX(0);
            }
            
            .main-content {
                width: 100%;
                margin-left: 0;
            }
        }
        
        /* Table Styles */
        .data-table {
            border-collapse: separate;
            border-spacing: 0 8px;
        }
        
        .data-table tbody tr {
            transition: all 0.3s ease;
        }
        
        .data-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: scale(1.01);
        }
        
        /* Status Badges */
        .badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
        }
        
        .badge-success {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .badge-warning {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        
        .badge-danger {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        .badge-info {
            background: rgba(59, 130, 246, 0.2);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        
        /* Loading Animation */
        .loader {
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 3px solid #8B5CF6;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #8B5CF6;
            box-shadow: 0 0 0 2px rgba(139,92,246,0.2);
        }
        
        /* Custom Scrollbar for Main Content */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #1a1a1a;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #8B5CF6, #EC4899);
            border-radius: 4px;
        }
        
        /* Sticky Top Navigation */
        .sticky-nav {
            position: sticky;
            top: 0;
            z-index: 30;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(12px);
        }
        
        /* Sidebar content padding */
        .sidebar-content {
            padding: 1.5rem;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
    </style>
    
    @stack('styles')
</head>
<body>
    <!-- Mobile Menu Toggle -->
    <button id="mobileMenuToggle" class="fixed top-4 left-4 z-50 md:hidden bg-purple-600 text-white p-3 rounded-lg shadow-lg">
        <i class="fas fa-bars text-xl"></i>
    </button>
    
    <div class="main-wrapper">
        <!-- Sidebar - Fixed on Desktop -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-content">
                <div class="flex items-center gap-3 mb-8 pb-4 border-b border-white/10">
                    <div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl flex items-center justify-center animate-float">
                        <i class="fa-solid fa-heart text-white text-sm"></i>
                    </div>
                    <div>
                        <span class="text-xl font-bold text-white">Wed<span class="gradient-text">Booker</span></span>
                        <p class="text-xs text-gray-400 mt-1">Couple Dashboard</p>
                    </div>
                </div>
                
                <nav class="space-y-1 flex-1">
                    @php
                        $currentRoute = Route::currentRouteName();
                    @endphp
                    
                    <a href="{{ route('dashboard') }}" 
                       class="sidebar-link {{ $currentRoute == 'dashboard' ? 'active' : '' }}">
                        <i class="fas fa-chart-line w-5"></i>
                        <span>Dashboard</span>
                    </a>
                    
                    <a href="{{ route('wedding.page') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'wedding.') ? 'active' : '' }}">
                        <i class="fas fa-ring w-5"></i>
                        <span>Wedding Page</span>
                    </a>
                    
                    <a href="{{ route('guests.index') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'guests.') ? 'active' : '' }}">
                        <i class="fas fa-users w-5"></i>
                        <span>Guest List</span>
                    </a>
                    
                    <a href="{{ route('invitations.index') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'invitations.') ? 'active' : '' }}">
                        <i class="fas fa-envelope w-5"></i>
                        <span>Invitations</span>
                    </a>
                    
                    <a href="{{ route('bookings.index') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'bookings.') ? 'active' : '' }}">
                        <i class="fas fa-calendar-check w-5"></i>
                        <span>Bookings</span>
                    </a>
                    
                    <a href="{{ route('services.index') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'services.') ? 'active' : '' }}">
                        <i class="fas fa-concierge-bell w-5"></i>
                        <span>Services</span>
                    </a>
                    
                    <a href="{{ route('subscription.index') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'subscription.') ? 'active' : '' }}">
                        <i class="fas fa-credit-card w-5"></i>
                        <span>Subscription</span>
                    </a>
                    
                    <a href="{{ route('settings.index') }}" 
                       class="sidebar-link {{ str_contains($currentRoute, 'settings.') ? 'active' : '' }}">
                        <i class="fas fa-cog w-5"></i>
                        <span>Settings</span>
                    </a>
                </nav>
                
                <div class="pt-6 border-t border-white/10 mt-auto">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="sidebar-link w-full justify-start text-red-400 hover:text-red-300 hover:bg-red-500/10">
                            <i class="fas fa-sign-out-alt w-5"></i>
                            <span>Logout</span>
                        </button>
                    </form>
                </div>
            </div>
        </aside>
        
        <!-- Main Content - Scrollable -->
        <main class="main-content">
            <nav class="sticky-nav border-b border-white/10">
                <div class="px-6 py-4 flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-white">@yield('page-title', 'Dashboard')</h1>
                        <p class="text-sm text-gray-400 mt-1">@yield('page-description', 'Welcome back!')</p>
                    </div>
                    
                    <div class="flex items-center gap-4">
                        <!-- Notifications -->
                        <div class="relative">
                            <button class="text-gray-300 hover:text-white transition">
                                <i class="fas fa-bell text-xl"></i>
                                <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-xs flex items-center justify-center text-white">3</span>
                            </button>
                        </div>
                        
                        <!-- User Menu -->
                        <div class="flex items-center gap-3">
                            <img src="https://ui-avatars.com/api/?background=8B5CF6&color=fff&name={{ urlencode(Auth::user()->name ?? 'User') }}" 
                                 class="w-10 h-10 rounded-full border-2 border-purple-500">
                            <div class="hidden md:block">
                                <p class="text-white text-sm font-semibold">{{ Auth::user()->name ?? 'John Doe' }}</p>
                                <p class="text-gray-400 text-xs">{{ Auth::user()->email ?? 'john@example.com' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            
            <!-- Page Content -->
            <div class="p-6">
                @yield('content')
            </div>
        </main>
    </div>
    
    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            once: false,
            mirror: true
        });
        
        // Mobile Menu Toggle
        const menuToggle = document.getElementById('mobileMenuToggle');
        const sidebar = document.getElementById('sidebar');
        
        if(menuToggle) {
            menuToggle.addEventListener('click', () => {
                sidebar.classList.toggle('open');
            });
        }
        
        // Close sidebar when clicking outside on mobile
        document.addEventListener('click', (e) => {
            if(window.innerWidth < 768) {
                if(sidebar && !sidebar.contains(e.target) && menuToggle && !menuToggle.contains(e.target)) {
                    sidebar.classList.remove('open');
                }
            }
        });
        
        // Auto-hide sidebar on resize
        window.addEventListener('resize', () => {
            if(window.innerWidth >= 768) {
                if(sidebar) sidebar.classList.remove('open');
            }
        });
        
        // Add active class to current menu item
        const currentUrl = window.location.pathname;
        document.querySelectorAll('.sidebar-link').forEach(link => {
            const href = link.getAttribute('href');
            if(href && href !== '#' && currentUrl.includes(href)) {
                link.classList.add('active');
            }
        });
        
        // Add hover effects to cards
        document.querySelectorAll('.glass-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-4px)';
            });
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0)';
            });
        });
    </script>
    
    @stack('scripts')
</body>
</html>