@{
    Layout = "~/Views/Admin/Transport/SpjAdmin/Shared/_Layout.cshtml";
    ViewData["Title"] = "Admin Dashboard";
}

<div class="container max-w-sm mx-auto bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-hidden">
    
    <div class="relative z-10">
        <div class="bg-gradient-to-br from-orange-500 via-orange-600 to-red-500 rounded-b-[2rem] shadow-2xl p-6 mb-6">
            
            
            <div class="relative z-10 pt-8 pb-4">
                
                <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-lg">
                    <div class="flex items-center justify-between">
                        
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-white to-orange-100 p-1 shadow-lg">
                                    <div class="w-full h-full rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-inner">
                                        <i class="w-8 h-8 text-white" data-lucide="user"></i>
                                    </div>
                                </div>
                                <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-400 rounded-full border-2 border-white shadow-sm">
                                    <div class="w-full h-full bg-green-500 rounded-full animate-pulse"></div>
                                </div>
                            </div>

                            
                            <div class="flex flex-col">
                                <h1 class="text-xl font-bold text-white leading-tight">Yusuf</h1>
                                <div class="flex items-center space-x-2">
                                    <span class="bg-orange-700/30 text-orange-100 px-3 py-1 rounded-full text-sm font-base backdrop-blur-sm border border-orange-400/20">
                                        Administrator
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="relative">
                            <button id="profileMenuButton" class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center hover:bg-white/30 transition-all duration-300 group shadow-lg hover:shadow-xl hover:scale-105">
                                <i class="w-5 h-5 text-white group-hover:rotate-180 transition-transform duration-300" data-lucide="settings"></i>
                            </button>
                            
                            <div id="profileMenuDropdown" class="absolute top-14 right-0 w-48 bg-white rounded-xl shadow-2xl py-2 z-50 hidden border border-gray-100 overflow-hidden">
                                <div class="px-4 py-3 border-b border-gray-100">
                                    <p class="text-sm font-semibold text-gray-900">Yusuf</p>
                                    <p class="text-xs text-gray-500">Administrator</p>
                                </div>
                                
                                <div class="py-1">
                                    <div class="border-t border-gray-100 mt-1"></div>
                                    <form method="post" asp-controller="Auth" asp-action="Logout">
                                        <button type="submit" class="flex items-center gap-3 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition-colors">
                                            <i class="w-4 h-4 text-red-500" data-lucide="log-out"></i>
                                            <span>Logout</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4 text-center">
                    <h2 class="text-white/90 text-lg font-semibold">Selamat Datang!</h2>
                    <p class="text-orange-100/70 text-sm">Siap kelola sistem eSPJ dengan efisien</p>
                </div>
            </div>
        </div>
        
        <div class="px-6 mb-6">
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-xs font-medium">Total Driver</p>
                            <p class="text-2xl font-bold text-gray-900">10</p>
                        </div>
                        <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
                            <i class="w-5 h-5 text-green-600" data-lucide="users"></i>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-xs font-medium">Total SPJ</p>
                            <p class="text-2xl font-bold text-gray-900">15</p>
                        </div>
                        <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                            <i class="w-5 h-5 text-blue-600" data-lucide="map"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <partial name="~/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml" />
    
</div>


<register-block dynamic-section="scripts" key="jsHomeAdmin">

<style>
    @@keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(2deg); }
    }
    
    .float-animation {
        animation: float 3s ease-in-out infinite;
    }
    
    .float-animation-delayed {
        animation: float 4s ease-in-out infinite;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const btn = document.getElementById("profileMenuButton");
        const dropdown = document.getElementById("profileMenuDropdown");

        if (btn && dropdown) {
            btn.addEventListener("click", function (e) {
                e.stopPropagation();
                e.preventDefault();
                
                if (dropdown.classList.contains("hidden")) {
                    dropdown.classList.remove("hidden");
                    dropdown.style.opacity = "0";
                    dropdown.style.transform = "translateY(-10px) scale(0.95)";
                    
                    setTimeout(() => {
                        dropdown.style.transition = "all 0.2s ease-out";
                        dropdown.style.opacity = "1";
                        dropdown.style.transform = "translateY(0) scale(1)";
                    }, 10);
                } else {
                    dropdown.style.transition = "all 0.15s ease-in";
                    dropdown.style.opacity = "0";
                    dropdown.style.transform = "translateY(-10px) scale(0.95)";
                    
                    setTimeout(() => {
                        dropdown.classList.add("hidden");
                    }, 150);
                }
            });

            document.addEventListener("click", function (e) {
                if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.style.transition = "all 0.15s ease-in";
                    dropdown.style.opacity = "0";
                    dropdown.style.transform = "translateY(-10px) scale(0.95)";
                    
                    setTimeout(() => {
                        dropdown.classList.add("hidden");
                    }, 150);
                }
            });

            dropdown.addEventListener("click", function (e) {
                e.stopPropagation();
            });
        }

        const statCards = document.querySelectorAll('.grid > div');
        statCards.forEach((card, index) => {
            card.style.opacity = "0";
            card.style.transform = "translateY(20px)";
            
            setTimeout(() => {
                card.style.transition = "all 0.3s ease-out";
                card.style.opacity = "1";
                card.style.transform = "translateY(0)";
            }, 300 + (index * 100));
        });
    });
</script>
</register-block>