@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-graduation-cap text-3xl logo-icon hidden"></i>
                <i class="fas fa-graduation-cap text-3xl logo-text"></i>
            @endif
            <h2 class="text-xl font-bold mt-2 logo-text">Admin Panel</h2>
        </div>
    </div>
    
    <nav class="space-y-1">
        <a href="{{ route('admin.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('admin.dashboard') ? 'bg-white bg-opacity-20' : '' }}">
            <i class="fas fa-tachometer-alt w-5 sidebar-icon"></i>
            <span class="sidebar-text">Dashboard</span>
        </a>
        
        <!-- Master Data Dropdown -->
        <div x-data="{ open: {{ request()->routeIs('admin.jurusan*') || request()->routeIs('admin.kelas*') || request()->routeIs('admin.mapel*') || request()->routeIs('admin.siswa*') || request()->routeIs('admin.guru*') ? '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">Master Data</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('admin.jurusan.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-building w-5"></i>
                    <span class="sidebar-text">Jurusan</span>
                </a>
                <a href="{{ route('admin.kelas.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-users w-5"></i>
                    <span class="sidebar-text">Kelas</span>
                </a>
                <a href="{{ route('admin.mapel.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-book w-5"></i>
                    <span class="sidebar-text">Mata Pelajaran</span>
                </a>
                <a href="{{ route('admin.siswa.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-user-graduate w-5"></i>
                    <span class="sidebar-text">Siswa</span>
                </a>
                <a href="{{ route('admin.guru.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-chalkboard-user w-5"></i>
                    <span class="sidebar-text">Guru</span>
                </a>
            </div>
        </div>
        
        <a href="{{ route('admin.pengumuman.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('admin.pengumuman*') ? 'bg-white bg-opacity-20' : '' }}">
            <i class="fas fa-bullhorn w-5 sidebar-icon"></i>
            <span class="sidebar-text">Pengumuman</span>
        </a>
        
        <a href="{{ route('admin.pengaturan') }}" 
           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('admin.pengaturan*') ? 'bg-white bg-opacity-20' : '' }}">
            <i class="fas fa-cog w-5 sidebar-icon"></i>
            <span class="sidebar-text">Pengaturan</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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Active menu highlight
        const currentUrl = window.location.pathname;
        document.querySelectorAll('.menu-item').forEach(item => {
            if (item.getAttribute('href') === currentUrl) {
                item.classList.add('bg-white', 'bg-opacity-20');
            }
        });
    });
</script>
@endpush