<!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>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    @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 bg-gradient-to-br from-green-50 to-blue-50 min-h-screen">
    <div class="flex">
        <!-- Sidebar Guru -->
        <aside class="w-64 bg-gradient-to-b from-green-600 to-green-700 text-white shadow-2xl min-h-screen fixed">
            <div class="p-6 border-b border-green-500/30">
                <div class="flex items-center gap-4">
                    <img src="{{ asset('assets/img/logos/LOGO.png') }}" alt="Logo" class="w-12 h-12 rounded-full shadow-lg" />
                    <div>
                        <h2 class="font-bold text-xl">Menu Guru</h2>
                        <p class="text-green-200 text-sm">Dashboard</p>
                    </div>
                </div>
            </div>
            <nav class="p-4 space-y-2">
                <a href="{{ route('guru.dashboard') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('guru.dashboard') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-tachometer-alt fa-fw text-lg"></i>
                    <span class="font-medium">Dashboard</span>
                </a>
                <a href="{{ route('guru.absensis.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('guru.absensis.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-calendar-check fa-fw text-lg"></i>
                    <span class="font-medium">Absensi</span>
                </a>
                <a href="{{ route('guru.nilai_santris.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('nilai_santris.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-clipboard-list fa-fw text-lg"></i>
                    <span class="font-medium">Nilai Santri</span>
                </a>
                <a href="{{ route('guru.prestasis.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('prestasis.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-trophy fa-fw text-lg"></i>
                    <span class="font-medium">Prestasi</span>
                </a>
                <a href="{{ route('guru.pelanggarans.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('pelanggarans.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-exclamation-triangle fa-fw text-lg"></i>
                    <span class="font-medium">Pelanggaran</span>
                </a>
                <a href="{{ route('guru.catatan_kesehatans.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('catatan_kesehatans.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-notes-medical fa-fw text-lg"></i>
                    <span class="font-medium">Catatan Kesehatan</span>
                </a>
                <a href="{{ route('guru.santris.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('santris.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-users fa-fw text-lg"></i>
                    <span class="font-medium">Data Santri</span>
                </a>
                <a href="{{ route('guru.jadwals.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('jadwals.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-calendar-alt fa-fw text-lg"></i>
                    <span class="font-medium">Jadwal</span>
                </a>
                <a href="{{ route('guru.profile') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('guru.profile') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
                    <i class="fas fa-user fa-fw text-lg"></i>
                    <span class="font-medium">Profile Guru</span>
                </a>
            </nav>
        </aside>
        
        <!-- Main Content -->
        <div class="flex-1 ml-64">
            <!-- Top Navigation -->
            <nav class="bg-white/80 backdrop-blur-md shadow-lg border-b border-gray-200/50 p-4">
                <div class="flex justify-between items-center">
                    <div>
                        @isset($header)
                            {{ $header }}
                        @else
                            <h1 class="text-2xl font-bold text-gray-800">Dashboard Guru</h1>
                            <p class="text-gray-600 text-sm">Selamat datang, {{ Auth::user()->name }}</p>
                        @endisset
                    </div>
                    <div class="relative">
                        <button onclick="toggleDropdown('profileDropdown')" class="flex items-center space-x-3 bg-white/50 hover:bg-white/80 px-4 py-2 rounded-xl shadow-md transition-all duration-300">
                            <img src="{{ asset('storage/foto_guru/' . (Auth::user()->guru->foto ?? 'default.jpg')) }}" alt="Profile" class="w-8 h-8 rounded-full object-cover" onerror="this.src='{{ asset('assets/img/bruce-mars.jpg') }}'">
                            <span class="font-semibold text-gray-800">{{ Auth::user()->name }}</span>
                            <i class="fas fa-chevron-down text-sm text-gray-600"></i>
                        </button>
                        <div id="profileDropdown" class="hidden absolute right-0 mt-3 w-56 bg-white rounded-xl shadow-xl py-2 z-50 border border-gray-200/50">
                            <a href="{{ route('guru.profile') }}" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 transition-colors">
                                <i class="fas fa-user fa-fw"></i>
                                <span>Profile</span>
                            </a>
                            <hr class="my-2">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="w-full text-left flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 transition-colors">
                                    <i class="fas fa-sign-out-alt fa-fw"></i>
                                    <span>Log Out</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </nav>
            
            <!-- Page Content -->
            <main class="p-6">
                {{ $slot }}
            </main>
        </div>
    </div>
    
    <script>
        function toggleDropdown(id) {
            const dropdown = document.getElementById(id);
            if (dropdown) {
                dropdown.classList.toggle('hidden');
            }
        }
        
        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>
</body>
</html> 