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


<head>
    <meta charset="UTF-8">
    <title>LMS Siswa</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <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"
>

<!-- =====================
     MINIMAL 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="{{ asset('images/logo_smk8.png') }}"
            alt="Logo Sekolah"
            class="w-16 h-16 mx-auto object-contain"
            onerror="this.style.display='none'"
        >

        <div class="text-xl font-semibold text-gray-800">
            LMS SMK Negeri 8 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> --}}

<div
    x-data="loadingScreen"
    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="{{ asset('images/logo_smk8.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 8 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
===================== -->
<header class="bg-slate-900 text-white shadow-sm border-b border-slate-800">
    <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">

        <!-- LOGO -->
        <div class="flex items-center gap-3">
            <img src="{{ asset('images/logo_smk8.png') }}"
                 class="w-10 h-10 object-contain drop-shadow">
            <div>
                <p class="font-bold leading-tight">
                    SMK Negeri 8 Medan
                </p>
                <p class="text-xs text-slate-300">
                    Learning Management System
                </p>
            </div>
        </div>

        <!-- NAV -->
        <nav class="flex items-center gap-8 text-sm">

            <a href="{{ 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="{{ 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>

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


                </button>

                <!-- DROPDOWN -->
                <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="{{ 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="{{ 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="{{ route('logout') }}">
                        @csrf
                        <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>

        </nav>
    </div>
</header>


<!-- =====================
     CONTENT
===================== -->
<main class="flex-1 p-6">
    @yield('content')
</main>

<!-- =====================
     FOOTER
===================== -->
<footer class="bg-slate-900 text-slate-400 border-t border-slate-800">
    <div class="max-w-7xl mx-auto px-6 py-10">

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

            <!-- LOGO -->
            <div class="flex items-center gap-4">
                <img src="{{ asset('images/logo_smk8.png') }}"
                     class="w-10 h-10 object-contain drop-shadow"
                     alt="SMK Negeri 8 Medan">
                <div>
                    <p class="font-semibold text-white">
                        SMK Negeri 8 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">
                © {{ date('Y') }} SMK Negeri 8 Medan<br>
                <span class="text-xs text-slate-500">
                    All rights reserved
                </span>
            </div>

        </div>

    </div>
</footer>


<!-- =====================
     SCRIPT
===================== -->
{{-- <script>
function loadingScreen() {
    return {
        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)];
            setTimeout(() => this.loading = false, 600);

            document.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    this.loading = true;
                });
            });
        }
    }
}
</script> --}}

<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() {
            // random quote
            this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)];

            // hilangkan loading saat halaman selesai load
            window.addEventListener('load', () => {
                setTimeout(() => this.loading = false, 300);
            });

            // LINK (GET navigation)
            document.addEventListener('click', (e) => {
                const link = e.target.closest('a[href]');
                if (!link) return;

                // abaikan anchor & javascript link
                if (
                    link.getAttribute('href').startsWith('#') ||
                    link.getAttribute('href').startsWith('javascript')
                ) return;

                this.loading = true;
            });

            // FORM SUBMIT (POST)
            document.addEventListener('submit', () => {
                this.loading = true;
            });
        }
    }))
});
</script>

<script>
document.addEventListener('alpine:init', () => {
    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>
