<!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', 'Admin') - {{ config('app.name') }}</title>
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    @endif
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        /* Sidebar layout tweaks */
        .admin-sidebar { min-height: calc(100vh - 56px); }
        .admin-content { min-height: calc(100vh - 56px); }
        /* Admin role specific styling */
        .role-admin .navbar {
            background-color: #8e6ef2 !important; /* soft lilac header */
            color: #fff !important;
        }
        .role-admin .navbar .navbar-brand,
        .role-admin .navbar .nav-link,
        .role-admin .navbar .text-white {
            color: #fff !important;
        }
        .role-admin .admin-sidebar {
            background-color: #2a1a4a !important; /* deep purple sidebar */
            color: #f8f9fa !important;
        }
        .role-admin .admin-sidebar h5 {
            color: #fff !important;
        }
        .role-admin .admin-sidebar .nav-link,
        .role-admin .admin-sidebar .nav-link span,
        .role-admin .admin-sidebar .nav-link .bi {
            color: #f8f9fa !important;
        }
        .role-admin .admin-sidebar .nav-link.active {
            background-color: #3b2a6a !important; /* slightly lighter purple for active */
            color: #fff !important;
        }
        .role-admin .admin-sidebar .nav-link:hover {
            background-color: rgba(255,255,255,0.06) !important;
            color: #fff !important;
        }
    </style>
</head>
<body class="bg-light @if(auth()->check() && ((auth()->user()->role ?? '') === 'admin' || (auth()->user()->is_admin ?? false))) role-admin @endif">
    {{-- Top header/navbar --}}
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Aplikasi Web Pengolahan Nilai Sekolah Dasar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbar" aria-controls="topbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="topbar">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item me-3">
                        <span class="text-white small">@auth{{ auth()->user()->name }}@else Admin @endauth</span>
                    </li>
                    <li class="nav-item">
                        <form method="POST" action="{{ route('logout', [], false) }}">
                            @csrf
                            <button class="btn btn-sm btn-outline-light" type="submit">Logout</button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            {{-- Sidebar --}}
            <aside class="col-12 col-md-3 col-lg-2 bg-white admin-sidebar border-end p-3">
                <div class="d-flex align-items-center mb-3">
                    <h5 class="mb-0">{{ optional(\App\Models\Sekolah::first())->nama ?? 'Nama Sekolah' }}</h5>
                </div>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('admin')) active @endif" href="{{ url('admin') }}">
                            <i class="bi bi-speedometer2 me-2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    @if(auth()->check() && ((auth()->user()->is_admin ?? false) || (auth()->user()->role ?? '') === 'admin'))
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('admin/users*')) active @endif" href="{{ url('admin/users') }}">
                            <i class="bi bi-people me-2"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('admin/data-umum*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#dataUmumMenu" aria-expanded="false">
                            <i class="bi bi-folder-fill me-2"></i>
                            <span>Data Umum</span>
                        </a>
                        <div class="collapse mt-2" id="dataUmumMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/periode*')) active @endif" href="{{ url('admin/data-umum/periode') }}"><i class="bi bi-calendar-check me-2"></i><span>Periode aktif</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/sekolah*')) active @endif" href="{{ url('admin/data-umum/sekolah') }}"><i class="bi bi-building me-2"></i><span>Sekolah</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/kelas*')) active @endif" href="{{ url('admin/data-umum/kelas') }}"><i class="bi bi-list-check me-2"></i><span>Kelas</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/guru*')) active @endif" href="{{ url('admin/data-umum/guru') }}"><i class="bi bi-person-badge me-2"></i><span>Guru</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/peserta-didik*')) active @endif" href="{{ url('admin/data-umum/peserta-didik') }}"><i class="bi bi-people me-2"></i><span>Peserta Didik</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/mata-pelajaran*')) active @endif" href="{{ url('admin/data-umum/mata-pelajaran') }}"><i class="bi bi-book me-2"></i><span>Mata Pelajaran</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/demensi-kokurikuler*')) active @endif" href="{{ url('admin/data-umum/demensi-kokurikuler') }}"><i class="bi bi-award me-2"></i><span>Demensi Kokurikuler</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/data-umum/ekstrakulikuler*')) active @endif" href="{{ url('admin/data-umum/ekstrakulikuler') }}"><i class="bi bi-star me-2"></i><span>Ektrakulikuler</span></a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('admin/penilaian*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#penilaianMenu" aria-expanded="false">
                            <i class="bi bi-journal-check me-2"></i>
                            <span>Penilaian</span>
                        </a>
                        <div class="collapse mt-2" id="penilaianMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/penilaian/kokurikuler*')) active @endif" href="{{ url('admin/penilaian/kokurikuler') }}"><i class="bi bi-award me-2"></i><span>Kokurikuler</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/penilaian/intrakulikuler*')) active @endif" href="{{ url('admin/penilaian/intrakulikuler') }}"><i class="bi bi-journal-text me-2"></i><span>Intrakulikuler</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/penilaian/ekstrakulikuler*')) active @endif" href="{{ url('admin/penilaian/ekstrakulikuler') }}"><i class="bi bi-star me-2"></i><span>Ektrakulikuler</span></a></li>
                            </ul>
                        </div>
                    </li>
                    @php /* Dokumen moved under Pendukung (below) for admin/guru roles */ @endphp
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('admin/pendukung*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#pendukungMenu" aria-expanded="false">
                            <i class="bi bi-gear me-2"></i>
                            <span>Pendukung</span>
                        </a>
                        <div class="collapse mt-2" id="pendukungMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/pendukung/walimurid*')) active @endif" href="{{ url('admin/pendukung/walimurid') }}"><i class="bi bi-house-door me-2"></i><span>Wali Murid</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/pendukung/kehadiran*')) active @endif" href="{{ url('admin/pendukung/kehadiran') }}"><i class="bi bi-card-checklist me-2"></i><span>Kehadiran</span></a></li>
                                <!-- Dokumen moved to top-level below Pendukung -->
                            </ul>
                        </div>
                    </li>
                    @endif

                    @if(auth()->check() && ((auth()->user()->role ?? '') === 'admin' || (auth()->user()->is_admin ?? false) || (auth()->user()->role ?? '') === 'guru' || (auth()->user()->is_guru ?? false)))
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('admin/dokumen*') || request()->is('guru/dokumen*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#dokumenMenu" aria-expanded="false">
                            <i class="bi bi-folder2-open me-2"></i>
                            <span>Dokumen</span>
                        </a>
                        <div class="collapse mt-2" id="dokumenMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/dokumen/rapot*')) active @endif" href="{{ url('admin/dokumen/rapot') }}"><i class="bi bi-file-earmark-text me-2"></i><span>Rapot</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('admin/dokumen/buku-induk*')) active @endif" href="{{ url('admin/dokumen/buku-induk') }}"><i class="bi bi-journal-bookmark me-2"></i><span>Buku Induk</span></a></li>
                            </ul>
                        </div>
                    </li>
                    @endif
                    
                    @if(auth()->check() && ((auth()->user()->role ?? '') === 'guru' || (auth()->user()->is_guru ?? false)))
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('guru/pendukung*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#pendukungGuruMenu" aria-expanded="false">
                            <i class="bi bi-gear me-2"></i>
                            <span>Pendukung</span>
                        </a>
                        <div class="collapse mt-2" id="pendukungGuruMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('guru/pendukung/walimurid*')) active @endif" href="{{ url('guru/pendukung/walimurid') }}"><i class="bi bi-house-door me-2"></i><span>Wali Murid</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('guru/pendukung/kehadiran*')) active @endif" href="{{ url('guru/pendukung/kehadiran') }}"><i class="bi bi-card-checklist me-2"></i><span>Kehadiran</span></a></li>
                                <!-- removed nested Dokumen (handled at top level below Pendukung) -->
                            </ul>
                        </div>
                    </li>
                    @endif
                </ul>
            </aside>

            {{-- Main content --}}
            <main class="col-12 col-md-9 col-lg-10 admin-content p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="h5 mb-0">@yield('title', 'Dashboard')</h2>
                    <div>
                        {{-- place for buttons / actions --}}
                        @yield('actions')
                    </div>
                </div>

                {{-- Flash notifications (save/delete/errors) --}}
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Terjadi kesalahan:</strong>
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

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

    <footer class="text-center text-muted py-3">
        &copy; {{ date('Y') }} {{ config('app.name') }}
    </footer>
    @stack('modals')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Ensure clicking a sidebar collapse toggle will both show and hide the submenu
            document.querySelectorAll('.admin-sidebar a[data-bs-toggle="collapse"]').forEach(function (el) {
                el.addEventListener('click', function (e) {
                    // prevent default anchor navigation (avoid adding '#')
                    e.preventDefault();
                    var selector = this.getAttribute('data-bs-target') || this.getAttribute('href');
                    if (!selector) return;
                    var target = document.querySelector(selector);
                    if (!target) return;
                    var instance = bootstrap.Collapse.getInstance(target);
                    if (!instance) instance = new bootstrap.Collapse(target, { toggle: false });
                    // Explicitly show or hide to ensure consistent behavior
                    if (target.classList.contains('show')) {
                        instance.hide();
                        this.setAttribute('aria-expanded', 'false');
                    } else {
                        instance.show();
                        this.setAttribute('aria-expanded', 'true');
                    }
                });
            });
        });
    </script>
    @stack('scripts')
</body>
</html>
