<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'LearnMood')</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.0.0/css/all.min.css">
    
    <!-- Tailwind CSS via Vite -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- Fallback Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        /* Memastikan konten tidak tertutup navbar */
        body {
            padding-top: 0;
            margin: 0;
        }
        
        .navbar-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .content-wrapper {
            padding-top: 70px; /* Sesuai tinggi navbar */
            min-height: 100vh;
        }
        
        /* Mobile optimizations */
        @media (max-width: 640px) {
            .content-wrapper {
                padding-top: 60px; /* Sedikit lebih kecil di mobile */
            }
            
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }
    </style>
</head>
<body class="font-sans antialiased bg-gray-100">
    <div class="min-h-screen">
        @auth
        <!-- Navbar Fixed -->
        <nav class="navbar-fixed bg-white border-b border-gray-100">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <!-- Logo -->
                    <div class="flex items-center">
                        <a href="{{ route('dashboard') }}" class="text-xl font-bold text-blue-600">
                            Learn<span class="text-gray-800">Mood</span>
                        </a>
                    </div>
                    
                    <!-- Navigation - Desktop -->
                    @if(auth()->user()->role == 'siswa')
                        @include('layouts.navigation-siswa')
                    @elseif(auth()->user()->role == 'orang_tua')
                        @include('layouts.navigation-ortu')
                    @endif
                </div>
            </div>
            
            <!-- Mobile Menu Container -->
            <div id="mobileMenuContainer">
                <!-- Akan diisi oleh navigation-siswa atau navigation-ortu -->
            </div>
        </nav>
        @endauth
        
        <!-- Content Wrapper dengan padding-top -->
        <div class="content-wrapper">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Alerts -->
                @if(session('success'))
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg 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-lg mb-4">
                        {{ session('error') }}
                    </div>
                @endif

                @if(session('info'))
                    <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded-lg mb-4">
                        {{ session('info') }}
                    </div>
                @endif
                
                @yield('content')
            </div>
        </div>
    </div>
    
    <!-- Alpine.js untuk dropdown -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    @stack('scripts')
</body>
</html>