<!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', 'MagangIn - Pembimbing Sekolah'); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .sidebar { 
            min-height: 100vh; 
            max-height: 100vh;
            background: linear-gradient(135deg, #17a2b8, #138496); 
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
            overflow-x: hidden;
            transition: transform 0.3s ease;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1040;
        }
        
        /* Mobile: Hide sidebar by default */
        @media (max-width: 767.98px) {
            .sidebar {
                transform: translateX(-100%);
                width: 280px !important;
            }
            
            .sidebar.show {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0 !important;
            }
            
            .mobile-toggle {
                display: block !important;
            }
            
            .sidebar-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                z-index: 1039;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
            }
            
            .sidebar-overlay.show {
                opacity: 1;
                visibility: visible;
            }
        }
        
        /* Desktop: Show sidebar normally */
        @media (min-width: 768px) {
            .sidebar {
                position: relative;
                transform: translateX(0);
            }
            
            .mobile-toggle {
                display: none !important;
            }
        }
        
        .sidebar::-webkit-scrollbar {
            width: 4px;
        }
        
        .sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
        }
        
        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 2px;
        }
        
        .sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.5);
        }
        
        .sidebar .nav-link { 
            color: white; 
            padding: 12px 20px; 
            border-radius: 8px; 
            margin: 3px 10px; 
            transition: all 0.3s; 
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
        .sidebar .nav-link:hover, .sidebar .nav-link.active { 
            background: rgba(255,255,255,0.2); 
            color: white; 
            transform: translateX(5px); 
        }
        
        /* Logout button styling */
        .logout-btn {
            background: none !important;
            border: none !important;
            color: white !important;
            padding: 12px 20px !important;
            border-radius: 8px !important;
            margin: 3px 10px !important;
            transition: all 0.3s !important;
            display: flex !important;
            align-items: center !important;
            text-decoration: none !important;
            width: calc(100% - 20px) !important;
            text-align: left !important;
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            box-shadow: none !important;
        }
        
        .logout-btn:hover {
            background: rgba(255,255,255,0.2) !important;
            color: white !important;
            transform: translateX(5px) !important;
        }
        
        .logout-btn:focus {
            box-shadow: none !important;
            outline: none !important;
        }
        
        .main-content { 
            background-color: #f8f9fa; 
            min-height: 100vh; 
            padding: 0 !important; 
        }
        
        .card { 
            border: none; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
            border-radius: 15px; 
        }
        
        .header-section { 
            background-color: white; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
            margin-bottom: 0; 
        }
        
        .footer-section { 
            background-color: white; 
            box-shadow: 0 -2px 4px rgba(0,0,0,0.1); 
            margin-top: auto; 
        }
        
        .content-wrapper { 
            flex: 1; 
            padding: 20px; 
        }
        
        .sidebar-divider { 
            border: 0; 
            height: 1px; 
            background: rgba(255,255,255,0.3); 
            margin: 10px 15px; 
        }
        
        .pembimbing-avatar { 
            width: 40px; 
            height: 40px; 
            background-color: white; 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        }
        
        /* Mobile Toggle Button */
        .mobile-toggle {
            background: none;
            border: none;
            color: #333;
            font-size: 20px;
            padding: 8px;
        }
        
        .mobile-toggle:hover {
            color: #17a2b8;
        }
        
        .btn { 
            border-radius: 8px; 
        }
        
        .stats-card { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            color: white; 
        }
        
        .stats-card.success { 
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%); 
        }
        
        .stats-card.warning { 
            background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%); 
        }
        
        .stats-card.danger { 
            background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%); 
        }
        
        .stats-card.info { 
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); 
        }
        
        /* Responsive content padding */
        @media (max-width: 767.98px) {
            .content-wrapper {
                padding: 15px;
            }
            
            .footer-section .d-flex {
                flex-direction: column;
                text-align: center;
                gap: 5px;
            }
            
            .footer-section small {
                font-size: 11px;
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar Overlay for Mobile -->
    <div class="sidebar-overlay d-md-none" onclick="closeSidebar()"></div>
    
    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-3 col-lg-2 d-md-block sidebar" id="sidebar">
                <div class="position-sticky pt-3">
                    <!-- Close button for mobile -->
                    <div class="d-md-none text-end pe-3 mb-2">
                        <button class="btn btn-link text-white p-1" onclick="closeSidebar()">
                            <i class="fas fa-times fs-4"></i>
                        </button>
                    </div>
                    
                    <!-- Header -->
                    <div class="text-center mb-3">
                        <h4 class="text-white fw-bold mb-0"><i class="fas fa-chalkboard-teacher"></i> MagangIn</h4>
                    </div>
                    <hr class="sidebar-divider">
                    
                    <!-- Pembimbing Profile -->
                    <div class="px-3 mb-3">
                        <div class="d-flex align-items-center">
                            <div class="pembimbing-avatar me-3">
                                <i class="fas fa-chalkboard-teacher text-info fs-5"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="text-white mb-0 fw-semibold"><?php echo e(Auth::user()->pembimbingSekolah->nama_pembimbing); ?></h6>
                                <small class="text-white-50">Pembimbing Sekolah</small>
                            </div>
                        </div>
                    </div>
                    <hr class="sidebar-divider">
                    
                    <!-- Navigation Menu -->
                    <ul class="nav flex-column">
                        <!-- Dashboard -->
                        <li class="nav-item">
                            <a class="nav-link <?php echo e(request()->routeIs('pembimbing-sekolah.dashboard') ? 'active' : ''); ?>" href="<?php echo e(route('pembimbing-sekolah.dashboard')); ?>">
                                <i class="fas fa-tachometer-alt me-2"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        
                        <!-- Siswa Bimbingan -->
                        <li class="nav-item">
                            <a class="nav-link <?php echo e(request()->routeIs('pembimbing-sekolah.siswa') ? 'active' : ''); ?>" href="<?php echo e(route('pembimbing-sekolah.siswa')); ?>">
                                <i class="fas fa-users me-2"></i>
                                <span>Siswa Bimbingan</span>
                            </a>
                        </li>
                        
                        <!-- Monitoring Jurnal -->
                        <li class="nav-item">
                            <a class="nav-link <?php echo e(request()->routeIs('pembimbing-sekolah.jurnal*') ? 'active' : ''); ?>" href="<?php echo e(route('pembimbing-sekolah.jurnal')); ?>">
                                <i class="fas fa-book me-2"></i>
                                <span>Monitoring Jurnal</span>
                            </a>
                        </li>
                        
                        <hr class="sidebar-divider">
                        
                        <!-- Logout -->
                        <li class="nav-item">
                            <form method="POST" action="<?php echo e(route('logout')); ?>" class="w-100 m-0">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="logout-btn">
                                    <i class="fas fa-sign-out-alt me-2"></i>
                                    <span>Logout</span>
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </nav>

            <main class="col-md-9 ms-sm-auto col-lg-10 main-content d-flex flex-column">
                <header class="header-section">
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <div class="d-flex align-items-center">
                            <!-- Mobile Toggle Button di header -->
                            <button class="mobile-toggle d-md-none me-3" onclick="toggleSidebar()">
                                <i class="fas fa-bars"></i>
                            </button>
                            <h1 class="h2 text-dark mb-0"><?php echo $__env->yieldContent('page-title', 'Dashboard'); ?></h1>
                        </div>
                        <div class="text-muted">
                            <i class="fas fa-calendar-day me-1"></i> <?php echo e(\Carbon\Carbon::now()->isoFormat('D MMMM Y')); ?>

                        </div>
                    </div>
                </header>

                <div class="content-wrapper">
                    <?php if(session('success')): ?>
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i><?php echo e(session('success')); ?>

                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    <?php endif; ?>

                    <?php if(session('error')): ?>
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i><?php echo e(session('error')); ?>

                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    <?php endif; ?>

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

                <footer class="footer-section">
                    <div class="d-flex justify-content-between align-items-center p-3 text-muted">
                        <div><small>&copy; <?php echo e(date('Y')); ?> MagangIn - Created by Salsabila Az Zahra</small></div>
                        <div><small><i class="fas fa-code me-1"></i>Version 1.0 | Powered by Laravel</small></div>
                    </div>
                </footer>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Mobile Sidebar Scripts -->
    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.querySelector('.sidebar-overlay');
            
            sidebar.classList.toggle('show');
            overlay.classList.toggle('show');
        }
        
        function closeSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.querySelector('.sidebar-overlay');
            
            sidebar.classList.remove('show');
            overlay.classList.remove('show');
        }
        
        // Auto close sidebar when clicking nav links on mobile
        document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.querySelectorAll('.sidebar .nav-link:not(.nav-parent)');
            navLinks.forEach(link => {
                link.addEventListener('click', function() {
                    if (window.innerWidth < 768) {
                        closeSidebar();
                    }
                });
            });
        });
    </script>
    
    <?php echo $__env->yieldContent('scripts'); ?>
    <?php echo $__env->make('sweetalert::alert', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
</body>
</html><?php /**PATH C:\laragon\www\presensi-magang\resources\views/layouts/pembimbing-sekolah.blade.php ENDPATH**/ ?>