<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Guru'); ?> - SIPENA</title>
    <!-- Custom CSS for Guru Dashboard -->
    <link rel="stylesheet" href="<?php echo e(asset('css/guru.css')); ?>">
    <!-- Load FontAwesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body>

    <div class="app-container">
        <!-- SIDEBAR -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fa-solid fa-graduation-cap"></i>
                    <span class="logo-text">SIPENA</span>
                </div>
            </div>

            <ul class="sidebar-menu">
                <li class="<?php echo e(request()->routeIs('guru.dashboard') ? 'active' : ''); ?>">
                    <a href="<?php echo e(route('guru.dashboard')); ?>">
                        <i class="fa-solid fa-house"></i>
                        <span class="menu-text">Dashboard</span>
                    </a>
                </li>
                <li class="<?php echo e(request()->routeIs('guru.kelas*') ? 'active' : ''); ?>">
                    <a href="<?php echo e(route('guru.kelas.index')); ?>">
                        <i class="fa-solid fa-school"></i>
                        <span class="menu-text">Kelola Kelas</span>
                    </a>
                </li>
                <li class="<?php echo e(request()->routeIs('guru.soal*') ? 'active' : ''); ?>">
                    <a href="<?php echo e(route('guru.soal')); ?>">
                        <i class="fa-solid fa-file-signature"></i>
                        <span class="menu-text">Kelola Soal Ujian</span>
                    </a>
                </li>
                <li class="<?php echo e(request()->routeIs('guru.nilai*') ? 'active' : ''); ?>">
                    <a href="<?php echo e(route('guru.nilai.index')); ?>">
                        <i class="fa-solid fa-star"></i>
                        <span class="menu-text">Kelola Nilai</span>
                    </a>
                </li>
                <li class="<?php echo e(request()->routeIs('guru.game*') ? 'active' : ''); ?>">
                    <a href="<?php echo e(route('guru.game.index')); ?>">
                        <i class="fa-solid fa-gamepad"></i>
                        <span class="menu-text">Game Edukasi</span>
                    </a>
                </li>
                <li class="logout">
                    <form id="logout-form" action="<?php echo e(route('logout')); ?>" method="POST" style="display: none;">
                        <?php echo csrf_field(); ?>
                    </form>
                    <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="fa-solid fa-sign-out-alt"></i>
                        <span class="menu-text">Logout</span>
                    </a>
                </li>
            </ul>
        </aside>

        <!-- MAIN CONTENT -->
        <main class="main-content" id="main-content">
            <!-- TOPBAR -->
            <header class="topbar">
                <div class="topbar-left">
                    <button class="toggle-btn" id="toggle-sidebar">
                        <i class="fa-solid fa-bars"></i>
                    </button>
                    <h2 class="page-title"><?php echo $__env->yieldContent('page_title', 'Dashboard Guru'); ?></h2>
                </div>

                <div class="topbar-right">
                    <div class="profile-dropdown">
                        <div class="profile-info">
                            <span class="profile-name"><?php echo e(auth()->user()->name); ?></span>
                            <span class="profile-role">Guru Mata Pelajaran</span>
                        </div>
                        <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode(auth()->user()->name)); ?>&background=2563eb&color=fff" alt="Profile" class="profile-avatar">
                    </div>
                </div>
            </header>

            <!-- CONTENT BODY -->
            <div class="content-body">
                <?php if(session('success')): ?>
                    <div class="alert alert-success" style="display: flex; align-items: center; gap: 10px; background-color: #d1e7dd; color: #0f5132; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #badbcc;">
                        <i class="fa-solid fa-circle-check"></i> <?php echo e(session('success')); ?>

                    </div>
                <?php endif; ?>

                <?php if(isset($errors) && $errors->any()): ?>
                    <div class="alert alert-danger" style="background-color: #f8d7da; color: #842029; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #f5c2c7;">
                        <strong>Periksa kembali input:</strong>
                        <ul style="margin-left: 18px; margin-top: 8px; margin-bottom: 0;">
                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li><?php echo e($error); ?></li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                <?php endif; ?>

                <?php echo $__env->yieldContent('content'); ?>
            </div>
        </main>
    </div>

    <!-- Script for interactive Sidebar -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            const toggleBtn = document.getElementById('toggle-sidebar');

            if (toggleBtn) {
                toggleBtn.addEventListener('click', function() {
                    sidebar.classList.toggle('collapsed');
                    mainContent.classList.toggle('expanded');
                });
            }

            // Handle responsiveness on load
            if (window.innerWidth <= 768) {
                if (sidebar) sidebar.classList.add('collapsed');
                if (mainContent) mainContent.classList.add('expanded');
            }

            // Handle window resize
            window.addEventListener('resize', function() {
                if (window.innerWidth <= 768) {
                    if (sidebar) sidebar.classList.add('collapsed');
                    if (mainContent) mainContent.classList.add('expanded');
                } else {
                    if (sidebar) sidebar.classList.remove('collapsed');
                    if (mainContent) mainContent.classList.remove('expanded');
                }
            });
        });
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH C:\xampp\htdocs\elearningsd-allFitur-main\resources\views/layouts/guru.blade.php ENDPATH**/ ?>