<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'MAGANGIN')</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, #28a745, #20c997); 
            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); 
        }
        
        .sidebar .nav-section { 
            margin: 15px 20px 8px 20px; 
            color: rgba(255,255,255,0.8); 
            font-size: 11px; 
            font-weight: 600; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
        }
        
        /* Accordion Menu Styles */
        .nav-parent {
            cursor: pointer;
        }
        
        .nav-children {
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
            margin: 5px 10px;
            padding: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .nav-child {
            color: rgba(255,255,255,0.9);
            padding: 10px 25px;
            margin: 0;
            font-size: 13px;
            border-radius: 0;
            border-left: 3px solid transparent;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            text-decoration: none;
            width: 100%;
            text-align: left;
        }
        
        .nav-child:hover {
            background: rgba(255,255,255,0.15);
            color: white;
            border-left-color: white;
            transform: translateX(3px);
        }
        
        .nav-child.active {
            background: rgba(255,255,255,0.2);
            border-left-color: white;
            color: white;
        }
        
        .nav-toggle-icon {
            margin-left: auto;
            transition: transform 0.3s ease;
            font-size: 12px;
        }
        
        .nav-parent[aria-expanded="true"] .nav-toggle-icon {
            transform: rotate(90deg);
        }
        
        /* Styling khusus untuk button form agar sama dengan nav-child */
        .nav-child.btn-form {
            background: none !important;
            border: none !important;
            color: rgba(255,255,255,0.9) !important;
            padding: 10px 25px !important;
            margin: 0 !important;
            font-size: 13px !important;
            border-radius: 0 !important;
            border-left: 3px solid transparent !important;
            transition: all 0.2s !important;
            text-align: left !important;
            width: 100% !important;
            box-shadow: none !important;
            font-weight: normal !important;
            display: flex !important;
            align-items: center !important;
            cursor: pointer !important;
            font-family: inherit !important;
            text-decoration: none !important;
        }
        
        .nav-child.btn-form:hover {
            background: rgba(255,255,255,0.15) !important;
            color: white !important;
            border-left-color: white !important;
            transform: translateX(3px) !important;
        }
        
        .nav-child.btn-form:focus {
            box-shadow: none !important;
            outline: none !important;
        }
        
        .nav-child.btn-form:active {
            background: rgba(255,255,255,0.2) !important;
        }
        
        /* 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; 
        }
        
        .admin-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: #28a745;
        }
        
        /* 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-clock"></i> MAGANGIN</h4>
                    </div>
                    <hr class="sidebar-divider">
                    
                    <!-- Admin Profile -->
                    <div class="px-3 mb-3">
                        <div class="d-flex align-items-center">
                            <div class="admin-avatar me-3">
                                <i class="fas fa-user-shield text-success fs-5"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="text-white mb-0 fw-semibold">{{ Auth::user()->name ?? 'Admin' }}</h6>
                                <small class="text-white-50">Administrator</small>
                            </div>
                        </div>
                    </div>
                    <hr class="sidebar-divider">
                    
                    <!-- Navigation Menu -->
                    <ul class="nav flex-column">
                        <!-- Dashboard -->
                        <li class="nav-item">
                            <a class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">
                                <i class="fas fa-tachometer-alt me-2"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        
                        <!-- Master Data Expandable -->
                        <li class="nav-item">
    <a class="nav-link nav-parent" data-bs-toggle="collapse" href="#masterDataMenu" role="button" 
       aria-expanded="{{ request()->routeIs('admin.sekolah*', 'dudi*', 'pembimbing*', 'admin.siswa*', 'admin.users*') ? 'true' : 'false' }}">
        <i class="fas fa-database me-2"></i>
        <span>Master Data</span>
        <i class="fas fa-chevron-right nav-toggle-icon"></i>
    </a>
    <div class="collapse nav-children {{ request()->routeIs('admin.sekolah*', 'dudi*', 'pembimbing-magang*', 'pembimbing-sekolah*', 'admin.siswa*', 'admin.users*') ? 'show' : '' }}" id="masterDataMenu">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-child {{ request()->routeIs('admin.sekolah*') ? 'active' : '' }}" href="{{ route('admin.sekolah') }}">
                    <i class="fas fa-school me-2"></i>Data Sekolah
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-child {{ request()->routeIs('dudi*') ? 'active' : '' }}" href="{{ route('dudi') }}">
                    <i class="fas fa-building me-2"></i>Data DU/DI
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-child {{ request()->routeIs('pembimbing-magang*') ? 'active' : '' }}" href="{{ route('pembimbing-magang') }}">
                    <i class="fas fa-user-tie me-2"></i>Pembimbing Magang
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-child {{ request()->routeIs('pembimbing-sekolah*') ? 'active' : '' }}" href="{{ route('pembimbing-sekolah') }}">
                    <i class="fas fa-chalkboard-teacher me-2"></i>Pembimbing Sekolah
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-child {{ request()->routeIs('admin.siswa*') ? 'active' : '' }}" href="{{ route('admin.siswa') }}">
                    <i class="fas fa-user-graduate me-2"></i>Data Siswa Magang
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-child {{ request()->routeIs('admin.users*') ? 'active' : '' }}" href="{{ route('admin.users') }}">
                    <i class="fas fa-users-cog me-2"></i>Data User (Akun)
                </a>
            </li>
        </ul>
    </div>
</li>
                        
                        <!-- Presensi Expandable -->
                        <li class="nav-item">
                            <a class="nav-link nav-parent" data-bs-toggle="collapse" href="#presensiMenu" role="button" 
                               aria-expanded="{{ request()->routeIs('admin.rekap*', 'admin.holidays*') ? 'true' : 'false' }}">
                                <i class="fas fa-clipboard-check me-2"></i>
                                <span>Presensi</span>
                                <i class="fas fa-chevron-right nav-toggle-icon"></i>
                            </a>
                            <div class="collapse nav-children {{ request()->routeIs('admin.rekap*', 'admin.holidays*') ? 'show' : '' }}" id="presensiMenu">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-child {{ request()->routeIs('admin.rekap*') ? 'active' : '' }}" href="{{ route('admin.rekap') }}">
                                            <i class="fas fa-chart-line me-2"></i>Rekap Presensi
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-child {{ request()->routeIs('admin.holidays*') ? 'active' : '' }}" href="{{ route('admin.holidays') }}">
                                            <i class="fas fa-calendar-alt me-2"></i>Hari Libur
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <!-- RFID Menu - Separate from Presensi -->
                        <li class="nav-item">
                            <a class="nav-link nav-parent" data-bs-toggle="collapse" href="#rfidMenu" role="button" 
                               aria-expanded="{{ request()->routeIs('admin.rfid.*') ? 'true' : 'false' }}">
                                <i class="fas fa-id-card me-2"></i>
                                <span>RFID</span>
                                <i class="fas fa-chevron-right nav-toggle-icon"></i>
                            </a>
                            <div class="collapse nav-children {{ request()->routeIs('admin.rfid.*') ? 'show' : '' }}" id="rfidMenu">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-child {{ request()->routeIs('admin.rfid.masuk') ? 'active' : '' }}" href="{{ route('admin.rfid.masuk') }}">
                                            <i class="fas fa-sign-in-alt me-2"></i>Masuk
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-child {{ request()->routeIs('admin.rfid.pulang') ? 'active' : '' }}" href="{{ route('admin.rfid.pulang') }}">
                                            <i class="fas fa-sign-out-alt me-2"></i>Pulang
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        
                        <!-- Sistem Expandable -->
                        <li class="nav-item">
                            <a class="nav-link nav-parent" data-bs-toggle="collapse" href="#sistemMenu" role="button" aria-expanded="false">
                                <i class="fas fa-cogs me-2"></i>
                                <span>Sistem</span>
                                <i class="fas fa-chevron-right nav-toggle-icon"></i>
                            </a>
                            <div class="collapse nav-children" id="sistemMenu">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <form method="POST" action="{{ route('admin.auto-alfa') }}" class="w-100 m-0">
                                            @csrf
                                            <button type="submit" class="nav-child btn-form">
                                                <i class="fas fa-robot me-2"></i>Auto Alfa Harian
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        
                        <hr class="sidebar-divider">
                        
                        <!-- Logout -->
                        <li class="nav-item">
                            <form method="POST" action="{{ route('logout') }}" class="w-100 m-0">
                                @csrf
                                <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">@yield('page-title', 'Dashboard')</h1>
                        </div>
                        <div class="text-muted">
                            <i class="fas fa-calendar-day me-1"></i> {{ \Carbon\Carbon::now()->isoFormat('D MMMM Y') }}
                        </div>
                    </div>
                </header>

                <div class="content-wrapper">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @yield('content')
                </div>

                <footer class="footer-section">
                    <div class="d-flex justify-content-between align-items-center p-3 text-muted">
                        <div><small>&copy; {{ date('Y') }} MAGANGIN - Dibuat oleh Salsabila Az Zahra</small></div>
                        <div><small><i class="fas fa-code me-1"></i>Versi 1.0 | Didukung oleh 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>
    
    @yield('scripts')
    @include('sweetalert::alert')
</body>
</html>