<!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', 'Guru') - {{ 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>
        .admin-sidebar { min-height: calc(100vh - 56px); }
        .admin-content { min-height: calc(100vh - 56px); }
        .btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
        .btn-icon i { font-size: 16px; }
        /* Make active sidebar link visible: white text on primary background */
        .admin-sidebar .nav-link.active,
        .admin-sidebar .nav-link.active .bi,
        .admin-sidebar .nav-link.active span,
        .admin-sidebar .nav-link.active * {
            color: #fff !important;
        }
        .admin-sidebar .nav-link.active {
            background-color: #0d6efd;
            border-radius: .25rem;
        }
        /* Ensure non-active sidebar links remain visible on white background */
        .admin-sidebar .nav-link {
            color: #212529 !important;
        }
        .admin-sidebar .nav-link .bi {
            color: inherit !important;
        }
        /* Neutralize any explicit 'text-primary' used inside the sidebar */
        .admin-sidebar .text-primary {
            color: inherit !important;
        }
        /* Guru role specific styling */
        .role-guru .admin-sidebar {
            background-color: #07325a !important;
            color: #f8f9fa !important;
        }
        .role-guru .admin-sidebar h5 {
            color: #f8f9fa !important;
        }
        .role-guru .admin-sidebar .nav-link,
        .role-guru .admin-sidebar .nav-link span,
        .role-guru .admin-sidebar .nav-link .bi {
            color: #f8f9fa !important;
        }
        /* Make menu backgrounds span full width of sidebar without overflow */
        .role-guru .admin-sidebar .nav-link {
            display: block !important;
            width: 100%;
            box-sizing: border-box;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            border-radius: 0 !important;
            background: transparent !important;
        }
        .role-guru .admin-sidebar .nav-link.active {
            background-color: #0b4a7a !important;
            color: #fff !important;
        }
        .role-guru .admin-sidebar .nav-link:hover {
            background-color: rgba(255,255,255,0.06) !important;
            color: #fff !important;
        }
        /* Keep small submenu links indented via padding so they don't overflow */
        .role-guru .admin-sidebar .nav .nav-link.small {
            margin-left: 0;
            width: 100%;
            box-sizing: border-box;
            padding-left: 2rem !important;
            color: rgba(248,249,250,0.9) !important;
            border-radius: 0 !important;
        }
        .role-guru .admin-sidebar .nav .nav-link.small:hover {
            background-color: rgba(255,255,255,0.04) !important;
        }
    </style>
</head>
<body class="bg-light @if(auth()->check() && ((auth()->user()->role ?? '') === 'guru' || (auth()->user()->is_guru ?? false))) role-guru @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 Guru @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('guru')) active @endif" href="{{ url('guru/dashboard') }}">
                            <i class="bi bi-speedometer2 me-2"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    @if(auth()->check() && ((auth()->user()->role ?? '') === 'guru' || (auth()->user()->is_guru ?? false)))
                    <li class="nav-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <a class="nav-link d-flex align-items-center @if(request()->is('guru/data-umum*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#dataUtamaMenu" aria-expanded="@if(request()->is('guru/data-umum'))true @else false @endif">
                                <i class="bi bi-folder-fill me-2"></i>
                                <span>Data Utama</span>
                            </a>
                        </div>
                        <div class="collapse mt-2 @if(request()->is('guru/data-umum')) show @endif" id="dataUtamaMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('guru/data-umum/mata-pelajaran*')) active @endif" href="{{ url('guru/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('guru/data-umum/peserta-didik*')) active @endif" href="{{ url('guru/data-umum/peserta-didik') }}"><i class="bi bi-people me-2"></i><span>Peserta Didik</span></a></li>
                            </ul>
                        </div>
                    </li>
                    @endif

                    @if(auth()->check() && ((auth()->user()->role ?? '') === 'guru' || (auth()->user()->is_guru ?? false)))
                    <li class="nav-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <a class="nav-link d-flex align-items-center @if(request()->is('guru/penilaian*')) active @endif" href="#" data-bs-toggle="collapse" data-bs-target="#penilaianMenu" aria-expanded="@if(request()->is('guru/penilaian*'))true @else false @endif">
                                <i class="bi bi-pencil-square me-2"></i>
                                <span>Penilaian</span>
                            </a>
                        </div>
                        <div class="collapse mt-2 @if(request()->is('guru/penilaian')) show @endif" id="penilaianMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item"><a class="nav-link small @if(request()->is('guru/penilaian/kokurikuler*')) active @endif" href="{{ url('guru/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('guru/penilaian/intrakulikuler*')) active @endif" href="{{ url('guru/penilaian/intrakulikuler') }}"><i class="bi bi-list-check me-2"></i><span>Intrakulikuler</span></a></li>
                                <li class="nav-item"><a class="nav-link small @if(request()->is('guru/penilaian/ekstrakulikuler*')) active @endif" href="{{ url('guru/penilaian/ekstrakulikuler') }}"><i class="bi bi-star me-2"></i><span>Ekstrakulikuler</span></a></li>
                            </ul>
                        </div>
                    </li>
                    @endif

                    @php /* Dokumen moved under Pendukung (below) for admin/guru roles */ @endphp
                    @if(auth()->check() && ((auth()->user()->role ?? '') === 'guru' || (auth()->user()->is_guru ?? false)))
                    <li class="nav-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <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>
                        <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>
                                <!-- 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 mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <a class="nav-link d-flex align-items-center @if(request()->is('guru/dokumen*') || request()->is('admin/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>
                        <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('guru/dokumen/rapot*')) active @endif" href="{{ url('guru/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('guru/dokumen/buku-induk*')) active @endif" href="{{ url('guru/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()->is_admin ?? false) || (auth()->user()->role ?? '') === 'admin'))
                    <li class="nav-item">
                        <a class="nav-link d-flex align-items-center @if(request()->is('guru/users*')) active @endif" href="{{ url('guru/users') }}">
                            <i class="bi bi-people me-2"></i>
                            <span>Users</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <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>
                        <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>
                    @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>
                        @yield('actions')
                    </div>
                </div>

                @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 () {
            // Use event delegation on the sidebar so all current and future toggles behave consistently.
            var sidebar = document.querySelector('.admin-sidebar');
            if (sidebar) {
                sidebar.addEventListener('click', function (e) {
                    var toggler = e.target.closest('[data-bs-toggle="collapse"]');
                    if (!toggler || !sidebar.contains(toggler)) return;
                    e.preventDefault();
                    // Prevent Bootstrap's document-level handler from also toggling
                    e.stopPropagation();
                    if (typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation();
                    var selector = toggler.getAttribute('data-bs-target') || toggler.getAttribute('href');
                    if (!selector) return;
                    var target = document.querySelector(selector);
                    if (!target) return;
                    var instance = null;
                    if (bootstrap.Collapse && typeof bootstrap.Collapse.getOrCreateInstance === 'function') {
                        instance = bootstrap.Collapse.getOrCreateInstance(target, { toggle: false });
                    } else {
                        instance = bootstrap.Collapse.getInstance(target) || new bootstrap.Collapse(target, { toggle: false });
                    }
                    if (target.classList.contains('show') || target.getAttribute('aria-expanded') === 'true') {
                        instance.hide();
                        toggler.setAttribute('aria-expanded', 'false');
                    } else {
                        instance.show();
                        toggler.setAttribute('aria-expanded', 'true');
                    }
                });
            }

            // Sync aria-expanded when collapse finishes showing/hiding
            document.querySelectorAll('.admin-sidebar .collapse').forEach(function (collapseEl) {
                collapseEl.addEventListener('shown.bs.collapse', function () {
                    var id = '#' + this.id;
                    document.querySelectorAll('.admin-sidebar [data-bs-target="' + id + '"]').forEach(function (toggle) {
                        toggle.setAttribute('aria-expanded', 'true');
                    });
                    document.querySelectorAll('.admin-sidebar a[href="' + id + '"]').forEach(function (toggle) {
                        toggle.setAttribute('aria-expanded', 'true');
                    });
                });
                collapseEl.addEventListener('hidden.bs.collapse', function () {
                    var id = '#' + this.id;
                    document.querySelectorAll('.admin-sidebar [data-bs-target="' + id + '"]').forEach(function (toggle) {
                        toggle.setAttribute('aria-expanded', 'false');
                    });
                    document.querySelectorAll('.admin-sidebar a[href="' + id + '"]').forEach(function (toggle) {
                        toggle.setAttribute('aria-expanded', 'false');
                    });
                });
            });

            // Accordion behavior: when opening a collapse, close other open collapses
            document.querySelectorAll('.admin-sidebar .collapse').forEach(function (collapseEl) {
                collapseEl.addEventListener('show.bs.collapse', function () {
                    document.querySelectorAll('.admin-sidebar .collapse.show').forEach(function (openEl) {
                        if (openEl === collapseEl) return;
                        var inst = bootstrap.Collapse.getInstance(openEl) || new bootstrap.Collapse(openEl, { toggle: false });
                        inst.hide();
                    });
                });
            });

            // When a submenu link is clicked, hide its parent collapse (so parent closes on navigation)
            document.querySelectorAll('.admin-sidebar .nav .nav-link.small').forEach(function (sub) {
                sub.addEventListener('click', function (e) {
                    var parentCollapse = this.closest('.collapse');
                    if (!parentCollapse) return;
                    var inst = bootstrap.Collapse.getInstance(parentCollapse) || new bootstrap.Collapse(parentCollapse, { toggle: false });
                    inst.hide();
                });
            });
        });
    </script>
    @stack('scripts')
</body>
</html>
