<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name', 'Bel Sekolah'))</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            background: linear-gradient(-45deg, #3b82f6, #9333ea, #ec4899, #f59e0b);
            background-size: 400% 400%;
            animation: gradientMove 15s ease infinite;
            color: white;
            min-height: 100vh;
            margin: 0;
        }

        @keyframes gradientMove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .blink {
            animation: blink-animation 1s steps(2, start) infinite;
        }

        @keyframes blink-animation {
            to {
                visibility: hidden;
            }
        }
    </style>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
        <div class="container">
            <a class="navbar-brand fw-bold" href="{{ url('/') }}">SDN RANCAWULUH 1</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    @auth
                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('dashboard') ? 'active' : '' }}"
                            href="{{ route('dashboard') }}">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('jadwal-bel*') ? 'active' : '' }}"
                            href="{{ route('jadwal-bel.index') }}">Jadwal Bel</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('bel-otomatis') ? 'active' : '' }}"
                            href="{{ route('bel.otomatis') }}">Bel Otomatis</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('jadwal-ujian*') ? 'active' : '' }}"
                            href="{{ route('jadwal-bel.index') }}">Jadwal
                            Ujian</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->is('bel-ujian') ? 'active' : '' }}"
                            href="{{ route('bel.otomatis') }}">Bel
                            Ujian</a>
                    </li>
                    @endauth
                </ul>

                <ul class="navbar-nav">
                    @auth
                    <li class="nav-item me-2">
                        <span class="navbar-text">Halo, {{ Auth::user()->name }}</span>
                    </li>
                    <li class="nav-item">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button class="btn btn-sm btn-outline-light" type="submit">Logout</button>
                        </form>
                    </li>
                    @else
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('login') }}">Login</a>
                    </li>
                    @endauth
                </ul>
                {{-- <button onclick="keluarAplikasi()" class="btn btn-danger btn-lg mt-4">
                    <i class="bi bi-x-circle-fill"></i> Keluar Aplikasi
                </button> --}}
            </div>
        </div>
    </nav>

    <!-- Konten -->
    <main class="container py-4">
        @yield('content')
        <p class="mt-5 small text-center">Dibuat oleh <strong>MasIQ</strong> (GITEK.ID)</p>
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function keluarAplikasi() {
      window.close();
    }
    </script>
    @yield('scripts')
</body>

</html>