<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin') - SIPENA Admin</title>
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    @stack('styles')
</head>
<body>
    <div class="container">
        <aside class="sidebar">
            <div class="logo">
                <i class="fa-solid fa-graduation-cap"></i> SIPENA
            </div>

            <ul class="menu">
                <li class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                    <a href="{{ route('admin.dashboard') }}">
                        <i class="fa-solid fa-house"></i> Dashboard
                    </a>
                </li>
                <li class="{{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
                    <a href="{{ route('admin.users.index') }}">
                        <i class="fa-solid fa-users-gear"></i> Kelola User
                    </a>
                </li>
                <li class="{{ request()->routeIs('admin.kelas.*') ? 'active' : '' }}">
                    <a href="{{ route('admin.kelas.index') }}">
                        <i class="fa-solid fa-school"></i> Data Kelas
                    </a>
                </li>
                <li class="{{ request()->routeIs('admin.mata-pelajaran.*') ? 'active' : '' }}">
                    <a href="{{ route('admin.mata-pelajaran.index') }}">
                        <i class="fa-solid fa-book"></i> Mata Pelajaran
                    </a>
                </li>
                <li class="{{ request()->routeIs('admin.jadwal.*') ? 'active' : '' }}">
                    <a href="{{ route('admin.jadwal.index') }}">
                        <i class="fa-solid fa-calendar-alt"></i> Jadwal Pelajaran
                    </a>
                </li>
                <li class="{{ request()->routeIs('admin.game.*') ? 'active' : '' }}">
                    <a href="{{ route('admin.game.index') }}">
                        <i class="fa-solid fa-gamepad"></i> Game Edukasi
                    </a>
                </li>
                <li style="margin-top: auto;">
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="sidebar-logout">
                            <span>
                                <i class="fa-solid fa-arrow-right-from-bracket"></i> Logout
                            </span>
                        </button>
                    </form>
                </li>
            </ul>
        </aside>

        <main class="main">
            <header class="topbar">
                <div class="topbar-left">
                    <h2 class="page-title">@yield('page_title', 'Dashboard Admin')</h2>
                </div>

                <div class="profile">
                    <div class="profile-info">
                        <p class="name">{{ auth()->user()->name }}</p>
                        <p class="role">Administrator</p>
                    </div>
                    <img class="avatar" src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name) }}&background=2563eb&color=fff" alt="Admin Avatar">
                </div>
            </header>

            @if (session('success'))
                <div class="alert alert-success">
                    <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
                </div>
            @endif

            @if (isset($errors) && $errors->any())
                <div class="alert alert-danger">
                    <strong>Periksa kembali input:</strong>
                    <ul style="margin-left: 18px; margin-top: 8px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')
        </main>
    </div>

    @stack('scripts')
</body>
</html>
