<!-- Navigation Links untuk Orang Tua - Versi Sederhana & Responsif -->

<!-- Desktop Navigation (sembunyi di HP) -->
<div class="hidden sm:flex sm:items-center sm:space-x-1 sm:-my-px sm:ml-6">
    <!-- Dashboard -->
    <a href="{{ route('dashboard') }}" 
       class="flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {{ request()->routeIs('dashboard') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50 hover:text-purple-600' }}">
        <i class="fas fa-home mr-2"></i>
        Dashboard
        @if(request()->routeIs('dashboard'))
            <span class="ml-2 w-1.5 h-1.5 bg-purple-600 rounded-full"></span>
        @endif
    </a>
    
    
    
    <!-- Koneksi Anak -->
    <a href="{{ route('orangtua.children') }}" 
       class="flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {{ request()->routeIs('orangtua.children*') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50 hover:text-purple-600' }}">
        <i class="fas fa-link mr-2"></i>
        Koneksi Anak
        @if(request()->routeIs('orangtua.children*'))
            <span class="ml-2 w-1.5 h-1.5 bg-purple-600 rounded-full"></span>
        @endif
    </a>
</div>

<!-- User Menu (Desktop) -->
<div class="hidden sm:flex items-center space-x-3 ml-auto">
    <!-- Nama User (hidden di mobile) -->
    <span class="text-sm text-gray-600 hidden lg:inline">{{ auth()->user()->name }}</span>
    
    <!-- Role Badge -->
    <span class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded-full font-medium">
        Orang Tua
    </span>
    
    <!-- Profile Icon -->
    <a href="{{ route('profile.edit') }}" 
       class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
       title="Edit Profil">
        <i class="fas fa-user-cog text-lg"></i>
    </a>
    
    <!-- Logout -->
    <form method="POST" action="{{ route('logout') }}" class="inline">
        @csrf
        <button type="submit" 
                class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                title="Logout">
            <i class="fas fa-sign-out-alt text-lg"></i>
        </button>
    </form>
</div>

<!-- Mobile Navigation - Hanya muncul di HP -->
<div class="sm:hidden" x-data="{ mobileMenuOpen: false }">
    <!-- Header Mobile -->
    <div class="flex items-center justify-between px-4 py-2 bg-white border-b border-gray-200">
       
        
        <!-- Right Section -->
        <div class="flex items-center space-x-2">
            <!-- Role Badge -->
            <span class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded-full">
                Orang Tua
            </span>
            
            <!-- Hamburger Button -->
            <button @click="mobileMenuOpen = !mobileMenuOpen" 
                    class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    <path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" style="display: none;"></path>
                </svg>
            </button>
        </div>
    </div>
    
    <!-- Mobile Menu Dropdown -->
    <div x-show="mobileMenuOpen" 
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-2"
         @click.away="mobileMenuOpen = false"
         class="absolute left-0 right-0 bg-white shadow-lg border-t border-gray-200 z-50">
        
        <div class="py-2 px-3 space-y-1">
            <!-- Dashboard -->
            <a href="{{ route('dashboard') }}" 
               @click="mobileMenuOpen = false"
               class="flex items-center px-4 py-3 rounded-xl text-base font-medium {{ request()->routeIs('dashboard') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50' }}">
                <i class="fas fa-home w-6 text-center {{ request()->routeIs('dashboard') ? 'text-purple-600' : 'text-gray-500' }}"></i>
                <span class="ml-3">Dashboard</span>
                @if(request()->routeIs('dashboard'))
                    <span class="ml-auto text-xs bg-purple-200 text-purple-700 px-2 py-1 rounded-full">Active</span>
                @endif
            </a>
            
            
            <!-- Koneksi Anak -->
            <a href="{{ route('orangtua.children') }}" 
               @click="mobileMenuOpen = false"
               class="flex items-center px-4 py-3 rounded-xl text-base font-medium {{ request()->routeIs('orangtua.children*') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50' }}">
                <i class="fas fa-link w-6 text-center {{ request()->routeIs('orangtua.children*') ? 'text-purple-600' : 'text-gray-500' }}"></i>
                <span class="ml-3">Koneksi Anak</span>
                @if(request()->routeIs('orangtua.children*'))
                    <span class="ml-auto text-xs bg-purple-200 text-purple-700 px-2 py-1 rounded-full">Active</span>
                @endif
            </a>
            
            <!-- Divider -->
            <div class="border-t border-gray-200 my-2"></div>
            
            <!-- Edit Profil -->
            <a href="{{ route('profile.edit') }}" 
               @click="mobileMenuOpen = false"
               class="flex items-center px-4 py-3 rounded-xl text-base font-medium text-gray-700 hover:bg-purple-50">
                <i class="fas fa-user-cog w-6 text-center text-gray-500"></i>
                <span class="ml-3">Edit Profil</span>
            </a>
            
            <!-- Logout -->
            <form method="POST" action="{{ route('logout') }}" class="block">
                @csrf
                <button type="submit" 
                        @click="mobileMenuOpen = false"
                        class="w-full flex items-center px-4 py-3 rounded-xl text-base font-medium text-red-600 hover:bg-red-50">
                    <i class="fas fa-sign-out-alt w-6 text-center"></i>
                    <span class="ml-3">Logout</span>
                    <span class="ml-auto text-xs text-gray-500 truncate max-w-[120px]">{{ auth()->user()->name }}</span>
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Alpine.js untuk mobile menu (pastikan sudah di-include di layout utama) -->
<script>
    // Fallback jika Alpine.js belum di-load
    document.addEventListener('alpine:init', () => {
        console.log('Alpine.js initialized for parent navigation');
    });
</script>

<style>
/* Smooth transitions untuk mobile menu */
[x-cloak] { display: none !important; }

/* Mobile menu animations */
[x-transition\:enter] {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
[x-transition\:leave] {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Better touch targets for mobile */
@media (max-width: 640px) {
    .sm\:hidden a, .sm\:hidden button {
        min-height: 44px;
    }
}
</style>