{{-- resources/views/components/navigation.blade.php --}}
@props(['template' => 'horizontal'])

@if($template === 'horizontal')
    <!-- Horizontal Navigation for Desktop -->
    <div class="flex space-x-4">
        <a href="{{ route('dashboard') }}"
           class="{{ request()->routeIs('dashboard') ? 'text-white bg-green-800' : 'text-green-200 hover:text-white hover:bg-green-600' }} px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
            <i class="fas fa-tachometer-alt mr-1"></i> Dashboard
        </a>

        <a href="{{ route('santri.index') }}"
           class="{{ request()->routeIs('santri.*') ? 'text-white bg-green-800' : 'text-green-200 hover:text-white hover:bg-green-600' }} px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
            <i class="fas fa-users mr-1"></i> Data Santri
        </a>

        <a href="{{ route('ustadz.index') }}"
           class="{{ request()->routeIs('ustadz.*') ? 'text-white bg-green-800' : 'text-green-200 hover:text-white hover:bg-green-600' }} px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
            <i class="fas fa-chalkboard-teacher mr-1"></i> Data Ustadz
        </a>

        <!-- Dropdown for Management -->
        <div class="relative group">
            <button class="{{ request()->routeIs(['program.*', 'kelas.*']) ? 'text-white bg-green-800' : 'text-green-200 hover:text-white hover:bg-green-600' }} px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out flex items-center">
                <i class="fas fa-book mr-1"></i> Akademik
                <i class="fas fa-chevron-down ml-1 text-xs"></i>
            </button>

            <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                <div class="py-1">
                    <a href="{{ route('program.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-book-open mr-2"></i> Program
                    </a>
                    <a href="{{ route('kelas.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-door-open mr-2"></i> Kelas
                    </a>
                    <a href="{{ route('pendaftaran.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-user-plus mr-2"></i> Pendaftaran
                    </a>
                    <a href="{{ route('absensi.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-calendar-check mr-2"></i> Absensi
                    </a>
                </div>
            </div>
        </div>

        <!-- Dropdown for Financial -->
        <div class="relative group">
            <button class="{{ request()->routeIs(['donasi.*', 'pengeluaran.*', 'keuangan.*', 'donatur.*']) ? 'text-white bg-green-800' : 'text-green-200 hover:text-white hover:bg-green-600' }} px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out flex items-center">
                <i class="fas fa-hand-holding-heart mr-1"></i> Keuangan
                <i class="fas fa-chevron-down ml-1 text-xs"></i>
            </button>

            <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                <div class="py-1">
                    <a href="{{ route('donatur.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-users mr-2"></i> Data Donatur
                    </a>
                    <a href="{{ route('donasi.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-donate mr-2"></i> Donasi
                    </a>
                    <a href="{{ route('pengeluaran.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-money-bill-wave mr-2"></i> Pengeluaran
                    </a>
                    <a href="{{ route('keuangan.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                        <i class="fas fa-chart-line mr-2"></i> Laporan Keuangan
                    </a>
                </div>
            </div>
        </div>
    </div>

@elseif($template === 'sidebar')
    <!-- Mobile/Sidebar Navigation -->
    <a href="{{ route('dashboard') }}"
       class="{{ request()->routeIs('dashboard') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
        <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
    </a>

    <a href="{{ route('santri.index') }}"
       class="{{ request()->routeIs('santri.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
        <i class="fas fa-users mr-2"></i> Data Santri
    </a>

    <a href="{{ route('ustadz.index') }}"
       class="{{ request()->routeIs('ustadz.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
        <i class="fas fa-chalkboard-teacher mr-2"></i> Data Ustadz
    </a>

    <!-- Academic Section -->
    <div class="border-t border-green-700 mt-2 pt-2">
        <div class="text-green-300 text-xs font-semibold uppercase tracking-wide px-3 mb-2">Akademik</div>
        <a href="{{ route('program.index') }}"
           class="{{ request()->routeIs('program.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-book-open mr-2"></i> Program
        </a>
        <a href="{{ route('kelas.index') }}"
           class="{{ request()->routeIs('kelas.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-door-open mr-2"></i> Kelas
        </a>
        <a href="{{ route('pendaftaran.index') }}"
           class="{{ request()->routeIs('pendaftaran.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-user-plus mr-2"></i> Pendaftaran
        </a>
        <a href="{{ route('absensi.index') }}"
           class="{{ request()->routeIs('absensi.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-calendar-check mr-2"></i> Absensi
        </a>
    </div>

    <!-- Financial Section -->
    <div class="border-t border-green-700 mt-2 pt-2">
        <div class="text-green-300 text-xs font-semibold uppercase tracking-wide px-3 mb-2">Keuangan</div>
        <a href="{{ route('donatur.index') }}"
           class="{{ request()->routeIs('donatur.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-users mr-2"></i> Data Donatur
        </a>
        <a href="{{ route('donasi.index') }}"
           class="{{ request()->routeIs('donasi.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-donate mr-2"></i> Donasi
        </a>
        <a href="{{ route('pengeluaran.index') }}"
           class="{{ request()->routeIs('pengeluaran.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-money-bill-wave mr-2"></i> Pengeluaran
        </a>
        <a href="{{ route('keuangan.index') }}"
           class="{{ request()->routeIs('keuangan.*') ? 'text-white bg-green-900' : 'text-green-200 hover:text-white hover:bg-green-700' }} block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">
            <i class="fas fa-chart-line mr-2"></i> Laporan Keuangan
        </a>
    </div>
@endif