<!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', 'Assignment Accountability') - Never Miss a Deadline</title>
    @if(file_exists(public_path('build/manifest.json')))
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    @else
        <script src="https://cdn.tailwindcss.com"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
    @endif
    @auth
    <script src="{{ asset('js/notifications.js') }}"></script>
    <script src="{{ asset('js/mobile-notifications.js') }}"></script>
    @endauth
</head>
<body class="bg-gray-50 min-h-screen">
    <div x-data="{ 
            sidebarOpen: false,
            isMobile: window.innerWidth < 768,
            init() {
                const checkMobile = () => {
                    this.isMobile = window.innerWidth < 768;
                    if (!this.isMobile) this.sidebarOpen = false;
                };
                window.addEventListener('resize', checkMobile);
                checkMobile();
                // Listen for close events
                window.addEventListener('close-sidebar', () => {
                    this.sidebarOpen = false;
                });
            }
        }" 
        class="flex h-screen overflow-hidden">
        
        <!-- Backdrop for mobile -->
        <div x-show="sidebarOpen && isMobile" 
             x-transition.opacity
             @click="sidebarOpen = false"
             class="fixed inset-0 bg-gray-600 bg-opacity-75 z-40"
             style="display: none;">
        </div>

        <!-- Sidebar Navigation -->
        <aside :class="(sidebarOpen || !isMobile) ? 'translate-x-0' : '-translate-x-full'" 
             class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transition-transform duration-300 ease-in-out md:relative md:translate-x-0 md:z-auto">
            @include('components.sidebar')
        </aside>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col overflow-hidden md:ml-64">
            <!-- Top Navigation -->
            @include('components.top-nav')

            <!-- Main Content Area -->
            <main class="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
                <!-- Flash Messages -->
                @if(session('success'))
                    <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('success') }}</span>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                        <span class="block sm:inline">{{ session('error') }}</span>
                    </div>
                @endif

                @if($errors->any())
                    <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                        <ul class="list-disc list-inside">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @yield('content')
            </main>
        </div>
    </div>
</body>
</html>
