@extends('layouts.app')

@section('sidebar')
<div class="p-4">
    <!-- Logo Area -->
    <div class="flex items-center justify-center mb-8">
        @php
            $pengaturan = App\Models\Pengaturan::first();
        @endphp
        <div class="text-center">
            @if($pengaturan && $pengaturan->logo)
                <img src="{{ Storage::url('uploads/logo/' . $pengaturan->logo) }}" alt="Logo" class="h-12 mx-auto logo-icon hidden">
                <img src="{{ Storage::url('uploads/logo/' . $pengaturan->logo) }}" alt="Logo" class="h-12 mx-auto logo-text">
            @else
                <i class="fas fa-chalkboard-teacher text-3xl logo-icon hidden"></i>
                <i class="fas fa-chalkboard-teacher text-3xl logo-text"></i>
            @endif
            <h2 class="text-xl font-bold mt-2 logo-text">Guru Panel</h2>
        </div>
    </div>
    
    <nav class="space-y-1">
        <a href="{{ route('guru.dashboard') }}" 
           class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition {{ request()->routeIs('guru.dashboard') ? 'bg-white bg-opacity-20' : '' }}">
            <i class="fas fa-tachometer-alt w-5 sidebar-icon"></i>
            <span class="sidebar-text">Dashboard</span>
        </a>
        
        <!-- Bank Soal Dropdown -->
        <div x-data="{ open: {{ request()->routeIs('guru.bank-soal*') ? 'true' : 'false' }} }" class="relative">
            <button @click="open = !open" 
                    class="menu-item w-full flex items-center justify-between px-4 py-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-database w-5 sidebar-icon"></i>
                    <span class="sidebar-text">Bank Soal</span>
                </div>
                <i class="fas fa-chevron-down text-sm transition-transform dropdown-indicator" :class="{'rotate-180': open}"></i>
            </button>
            <div x-show="open" x-cloak class="ml-6 mt-1 space-y-1">
                <a href="{{ route('guru.bank-soal.index') }}" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                    <i class="fas fa-list w-5"></i>
                    <span class="sidebar-text">Daftar Soal</span>
                </a>
                <a href="{{ route('guru.bank-soal.create') }}" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                    <i class="fas fa-plus w-5"></i>
                    <span class="sidebar-text">Tambah Soal</span>
                </a>
                <a href="{{ route('guru.bank-soal.import.form') }}" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                    <i class="fas fa-upload w-5"></i>
                    <span class="sidebar-text">Import Soal</span>
                </a>
            </div>
        </div>
        
        <!-- Paket Ujian Dropdown -->
        <div x-data="{ open: {{ request()->routeIs('guru.paket-ujian*') ? 'true' : 'false' }} }" class="relative">
            <button @click="open = !open" 
                    class="menu-item w-full flex items-center justify-between px-4 py-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-box w-5 sidebar-icon"></i>
                    <span class="sidebar-text">Paket Ujian</span>
                </div>
                <i class="fas fa-chevron-down text-sm transition-transform dropdown-indicator" :class="{'rotate-180': open}"></i>
            </button>
            <div x-show="open" x-cloak class="ml-6 mt-1 space-y-1">
                <a href="{{ route('guru.paket-ujian.index') }}" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                    <i class="fas fa-list w-5"></i>
                    <span class="sidebar-text">Daftar Paket</span>
                </a>
                <a href="{{ route('guru.paket-ujian.create') }}" class="flex items-center space-x-3 px-4 py-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition">
                    <i class="fas fa-plus w-5"></i>
                    <span class="sidebar-text">Buat Paket</span>
                </a>
            </div>
        </div>
        
        <a href="{{ route('guru.simulasi.index') }}" 
           class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition {{ request()->routeIs('guru.simulasi*') ? 'bg-white bg-opacity-20' : '' }}">
            <i class="fas fa-play w-5 sidebar-icon"></i>
            <span class="sidebar-text">Simulasi</span>
        </a>
        
        <a href="{{ route('guru.monitoring.index') }}" 
           class="menu-item flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition {{ request()->routeIs('guru.monitoring*') ? 'bg-white bg-opacity-20' : '' }}">
            <i class="fas fa-chart-line w-5 sidebar-icon"></i>
            <span class="sidebar-text">Monitoring</span>
        </a>
    </nav>
    
    <!-- Sidebar Footer -->
    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-white border-opacity-20 mt-4">
        <div class="text-xs text-center text-white text-opacity-70 sidebar-text">
            <i class="fas fa-code mr-1"></i>
        </div>
    </div>
</div>
@endsection