<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LMS Siswa</title>

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <link rel="icon" type="image/png" href="<?php echo e(asset('images/logo_smkn2medan.png')); ?>">
    <link rel="shortcut icon" href="<?php echo e(asset('images/logo_smkn2medan.png')); ?>">
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script>
        if (
            localStorage.theme === 'dark' ||
            (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            document.documentElement.classList.add('dark');
        }
    </script>
</head>

<body x-data="loadingScreen()" x-init="init()"
    class="bg-gray-100 text-gray-800 flex flex-col min-h-screen">

    <!-- LOADING SCREEN -->
    <div x-show="loading" x-transition.opacity.duration.300ms
        class="fixed inset-0 z-[9999] flex items-center justify-center bg-white">
        <div class="text-center space-y-4">
            <img src="<?php echo e(asset('images/logo_smkn2medan.png')); ?>" alt="Logo Sekolah"
                class="w-16 h-16 mx-auto object-contain">
            <div class="text-xl font-semibold text-gray-800">
                LMS SMK Negeri 2 Medan
            </div>
            <p class="text-sm text-gray-500 max-w-xs mx-auto">
                <span x-text="quote"></span>
            </p>
            <div class="flex justify-center gap-2 pt-2">
                <span class="dot"></span>
                <span class="dot animation-delay-150"></span>
                <span class="dot animation-delay-300"></span>
            </div>
        </div>
    </div>

    <!-- NAVBAR -->
    <?php if(!isset($hideNavbar)): ?>
        <header
            class="bg-slate-900 text-white shadow-sm border-b border-slate-800 sticky top-0 z-50">
            <div class="w-full px-4 py-4 flex items-center justify-between">

            <!-- LOGO (MENTOK KIRI) -->
            <a href="<?php echo e(route('siswa.dashboard')); ?>"
               class="flex items-center gap-3 hover:opacity-90 transition">
    
                <img src="<?php echo e(asset('images/logo_smkn2medan.png')); ?>"
                     class="w-10 h-10 object-contain drop-shadow">
    
                <div class="leading-tight">
                    <p class="font-bold">
                        SMK Negeri 2 Medan
                    </p>
                    <p class="text-xs text-slate-300">
                        Learning Management System
                    </p>
                </div>
            </a>

                <!-- WRAPPER UNTUK NAV DESKTOP & MOBILE MENU -->
                <div class="flex items-center gap-2">
                    <!-- NAV DESKTOP - HILANG DI MOBILE (MD KE BAWAH) -->
                    <nav class="hidden md:flex items-center gap-8 text-sm">
                        <a href="<?php echo e(route('siswa.dashboard')); ?>"
                            class="relative group font-medium">
                            <span class="group-hover:text-yellow-400 transition">
                                Dashboard
                            </span>
                            <span
                                class="absolute left-0 -bottom-1 h-[2px] w-0 bg-yellow-400 transition-all duration-300 group-hover:w-full"></span>
                        </a>
                        <a href="<?php echo e(route('siswa.kursus')); ?>"
                            class="relative group font-medium">
                            <span class="group-hover:text-yellow-400 transition">
                                Kursusku
                            </span>
                            <span
                                class="absolute left-0 -bottom-1 h-[2px] w-0 bg-yellow-400 transition-all duration-300 group-hover:w-full"></span>
                        </a>
                    </nav>

                    <!-- AVATAR DESKTOP - HILANG DI MOBILE (MD KE BAWAH) -->
                    <div x-data="{ open: false }" class="relative hidden md:block">
                        <button @click="open = !open" class="focus:outline-none">
                            <?php
                                $displayName = isset($student)
                                    ? $student->name
                                    : (isset($user) ? $user->name : 'Siswa');
                            ?>
                            <img src="<?php echo e(isset($student) && $student->photo ? (str_starts_with($student->photo, 'http') ? $student->photo : asset('uploads/' . $student->photo)) : 'https://ui-avatars.com/api/?name=' . urlencode($displayName)); ?>"
                                class="w-9 h-9 rounded-full object-cover border-2 border-slate-700 hover:border-yellow-400 transition" />
                        </button>

                        <!-- DROPDOWN DESKTOP -->
                        <div x-show="open" @click.outside="open = false" x-transition
                            class="absolute right-0 mt-3 w-48 bg-white text-gray-800 rounded-xl shadow-lg border overflow-hidden z-50">
                            <a href="<?php echo e(route('siswa.profile.show')); ?>"
                                class="flex items-center gap-2 px-4 py-3 hover:bg-gray-100 transition">
                                <i data-lucide="user" class="w-4 h-4"></i>
                                Profil Saya
                            </a>
                            <a href="<?php echo e(route('siswa.password.edit')); ?>"
                                class="flex items-center gap-2 px-4 py-3 hover:bg-gray-100 transition">
                                <i data-lucide="key" class="w-4 h-4"></i>
                                Ubah Password
                            </a>
                            <form method="POST" action="<?php echo e(route('logout')); ?>">
                                <?php echo csrf_field(); ?>
                                <button type="submit"
                                    class="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-red-50 text-red-600 transition">
                                    <i data-lucide="log-out" class="w-4 h-4"></i>
                                    Logout
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- MOBILE MENU BUTTON (HAMBURGER) - MUNCUL DI MOBILE SAJA -->
                    <div x-data="{ mobileMenuOpen: false }" class="relative md:hidden">
                        <button @click="mobileMenuOpen = !mobileMenuOpen"
                            class="p-2 rounded-lg hover:bg-slate-800 focus:outline-none">
                            <svg x-show="!mobileMenuOpen" xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                            <svg x-show="mobileMenuOpen" xmlns="http://www.w3.org/2000/svg"
                                class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>

                        <!-- MOBILE DROPDOWN MENU -->
                        <div x-show="mobileMenuOpen" @click.outside="mobileMenuOpen = false"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 -translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 -translate-y-2"
                            class="absolute right-0 mt-3 w-64 bg-white text-gray-800 rounded-xl shadow-lg border overflow-hidden z-50">

                            <!-- User Info Mobile -->
                            <div class="px-4 py-3 bg-gray-50 border-b">
                                <div class="flex items-center gap-3">
                                    <img src="<?php echo e(isset($student) && $student->photo ? (str_starts_with($student->photo, 'http') ? $student->photo : asset('uploads/' . $student->photo)) : 'https://ui-avatars.com/api/?name=' . urlencode($displayName)); ?>"
                                        class="w-10 h-10 rounded-full object-cover border-2 border-slate-300" />
                                    <div>
                                        <p class="text-sm font-semibold"><?php echo e($displayName); ?></p>
                                        <p class="text-xs text-gray-500">Siswa</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Mobile Navigation Links -->
                            <a href="<?php echo e(route('siswa.dashboard')); ?>"
                                class="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition border-b">
                                <i data-lucide="layout-dashboard" class="w-4 h-4 text-slate-600"></i>
                                <span class="text-sm">Dashboard</span>
                            </a>
                            <a href="<?php echo e(route('siswa.kursus')); ?>"
                                class="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition border-b">
                                <i data-lucide="book-open" class="w-4 h-4 text-slate-600"></i>
                                <span class="text-sm">Kursusku</span>
                            </a>
                            <a href="<?php echo e(route('siswa.profile.show')); ?>"
                                class="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition border-b">
                                <i data-lucide="user" class="w-4 h-4 text-slate-600"></i>
                                <span class="text-sm">Profil Saya</span>
                            </a>
                            <a href="<?php echo e(route('siswa.password.edit')); ?>"
                                class="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition border-b">
                                <i data-lucide="key" class="w-4 h-4 text-slate-600"></i>
                                <span class="text-sm">Ubah Password</span>
                            </a>
                            <form method="POST" action="<?php echo e(route('logout')); ?>">
                                <?php echo csrf_field(); ?>
                                <button type="submit"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-red-50 text-red-600 transition">
                                    <i data-lucide="log-out" class="w-4 h-4"></i>
                                    <span class="text-sm">Logout</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    <?php endif; ?>

    <!-- CONTENT - RESPONSIVE PADDING -->
    <main class="flex-1 p-4 md:p-6">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

<!-- =====================
     FOOTER
===================== -->
<?php if(!isset($hideNavbar)): ?>
<footer class="bg-slate-900 text-slate-400 border-t border-slate-800">
    <div class="w-full px-4 py-10">

        <div class="grid md:grid-cols-3 gap-8 items-center">

            <!-- LOGO (SEJAJAR HEADER) -->
            <div class="flex items-center gap-4">
                <img src="<?php echo e(asset('images/logo_smkn2medan.png')); ?>"
                     class="w-10 h-10 object-contain drop-shadow"
                     alt="SMK Negeri 2 Medan">

                <div class="leading-tight">
                    <p class="font-semibold text-white">
                        SMK Negeri 2 Medan
                    </p>
                    <p class="text-xs text-slate-400">
                        Learning Management System
                    </p>
                </div>
            </div>

            <!-- MOTTO -->
            <div
                x-data="footerQuote()"
                x-init="init()"
                class="text-sm italic text-center"
            >
                “<span x-text="quote"></span>”
            </div>

            <!-- COPYRIGHT -->
            <div class="text-sm text-center md:text-right">
                © <?php echo e(date('Y')); ?> SMK Negeri 2 Medan<br>
                <span class="text-xs text-slate-500">
                    All rights reserved
                </span>
            </div>

        </div>

    </div>
</footer>
<?php endif; ?>

    <!-- SCRIPTS (SAMA SEPERTI ASLI) -->
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('loadingScreen', () => ({
                loading: true,
                quote: '',
                quotes: [
                    'Belajar hari ini untuk masa depan yang lebih baik.',
                    'Setiap langkah kecil membawa perubahan besar.',
                    'Ilmu adalah bekal terbaik dalam hidup.',
                    'Terus belajar, jangan menyerah.',
                    'Kesuksesan dimulai dari kemauan belajar.'
                ],

                init() {
                    this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)];
                    window.addEventListener('load', () => {
                        setTimeout(() => this.loading = false, 300);
                    });
                    document.addEventListener('click', (e) => {
                        const link = e.target.closest('a[href]');
                        if (!link) return;
                        if (
                            link.getAttribute('href').startsWith('#') ||
                            link.getAttribute('href').startsWith('javascript')
                        ) return;
                        this.loading = true;
                    });
                    document.addEventListener('submit', () => {
                        this.loading = true;
                    });
                }
            }));

            Alpine.data('footerQuote', () => ({
                quote: '',
                quotes: [
                    'Setiap langkah kecil membawa perubahan besar.',
                    'Belajar hari ini adalah investasi masa depan.',
                    'Tidak ada hasil tanpa proses.',
                    'Kesuksesan dimulai dari keberanian mencoba.',
                    'Ilmu adalah bekal terbaik sepanjang hidup.',
                    'Disiplin hari ini, sukses esok hari.',
                    'Gagal itu biasa, menyerah itu pilihan.',
                    'Belajar bukan soal pintar, tapi konsisten.',
                    'Kerja keras mengalahkan bakat yang malas.',
                    'Masa depan milik mereka yang terus belajar.'
                ],

                init() {
                    this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)];
                }
            }));
        });
    </script>

    <style>
        .dot {
            width: 8px;
            height: 8px;
            background: #1f2937;
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out both;
        }

        .animation-delay-150 {
            animation-delay: .15s;
        }

        .animation-delay-300 {
            animation-delay: .3s;
        }

        @keyframes bounce {

            0%,
            80%,
            100% {
                transform: scale(0);
                opacity: 0.3;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>

    <script>
        lucide.createIcons();
    </script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('darkMode', () => ({
                isDark: false,

                init() {
                    this.isDark = localStorage.getItem('theme') === 'dark'
                },

                toggle() {
                    this.isDark = !this.isDark
                    localStorage.setItem('theme', this.isDark ? 'dark' : 'light')
                }
            }))
        })
    </script>
</body>

</html><?php /**PATH /home/gacf7692/public_html/siswa.smkn8medan.sch.id/resources/views/siswa/layout.blade.php ENDPATH**/ ?>