<!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.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <link rel="icon" type="image/png" href="{{ asset('assets/img/logos/LOGO.png') }}" />
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen flex bg-gray-100">
            @hasSection('sidebar')
                @yield('sidebar')
            @else
                @include('layouts.navigation')
            @endif

            <div class="flex flex-col flex-1 w-full ml-64">
                <!-- Top Nav -->
                <nav class="bg-white shadow-md p-4 flex justify-between items-center">
                    <div>
                        <h1 class="text-xl font-bold text-gray-800">
                            @if(isset($header))
                                {{ $header }}
                            @else
                                Dashboard
                            @endif
                        </h1>
                    </div>
                    <div class="relative">
                        <button onclick="toggleDropdown('profileDropdown')" class="flex items-center space-x-2">
                            <span class="font-semibold">{{ Auth::user()->name }}</span>
                            <i class="fas fa-chevron-down text-sm"></i>
                        </button>
                        <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20">
                            <a href="@if(Auth::user()->isGuru()){{ route('guru.profile') }}@else#@endif" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    Log Out
                                </button>
                            </form>
                        </div>
                    </div>
                </nav>

                <!-- Page Content -->
                <main class="flex-1 p-6">
                    @hasSection('content')
                        @yield('content')
                    @else
                        {{ $slot ?? '' }}
                    @endif
                </main>
            </div>
            <script>
                function toggleDropdown(id) {
                    const dropdown = document.getElementById(id);
                    if (dropdown) {
                        dropdown.classList.toggle('hidden');
                    }
                    const icon = document.getElementById(id + 'Icon');
                    if (icon) {
                        icon.classList.toggle('rotate-180');
                    }
                }
                document.addEventListener('click', function(event) {
                    const profileDropdown = document.getElementById('profileDropdown');
                    const profileButton = profileDropdown ? profileDropdown.previousElementSibling : null;
                    if (profileButton && !profileButton.contains(event.target) && !profileDropdown.contains(event.target)) {
                        profileDropdown.classList.add('hidden');
                    }
                });
            </script>
        </div>
    </body>
</html>
