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

<div class="max-w-sm mx-auto bg-white min-h-screen">
    <!-- Header with Orange Background -->
    <div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
        <div class="flex items-center justify-between">
            <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
                <i class="w-5 h-5" data-lucide="chevron-left"></i>
            </a>
            <h1 class="text-lg font-bold">Profil</h1>
            <div class="w-8"></div>
        </div>
    </div>

    <!-- Profile Picture Section - Overlapping -->
    <div class="flex justify-center -mt-12 mb-6 relative z-10">
        <div class="relative">
            <!-- Profile Picture -->
            <div class="w-20 h-20 rounded-full border-2 border-white shadow-xl overflow-hidden bg-gray-200">
                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face" 
                     alt="Profile Picture" 
                     class="w-full h-full object-cover">
            </div>
            
            <!-- Edit Icon -->
            <button class="absolute bottom-1 right-1 w-7 h-7 bg-white rounded-full shadow-lg flex items-center justify-center border border-gray-100 hover:bg-gray-50 transition-colors">
                <i class="w-4 h-4 text-gray-600" data-lucide="edit-2"></i>
            </button>
        </div>
    </div>

    <!-- Profile Content -->
    <div class="p-4 space-y-4 bg-white border border-gray-200 mx-4 rounded-2xl">
        <!-- Info Akun Header -->
        <div class="flex justify-between items-center">
            <h2 class="text-lg font-bold text-gray-800">Info Akun</h2>
            <button class="text-orange-500 font-medium hover:text-orange-600 transition-colors text-sm">
                Ubah
            </button>
        </div>

        <!-- Profile Information -->
        <div class="space-y-4">
            <!-- Nama -->
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <i class="w-4 h-4 text-gray-600" data-lucide="user"></i>
                </div>
                <div class="flex-1">
                    <p class="text-xs text-gray-500 mb-0.5">Nama</p>
                    <p class="text-base font-semibold text-gray-800">Bonny Agung Putra</p>
                </div>
            </div>

            <!-- Email -->
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <i class="w-4 h-4 text-gray-600" data-lucide="mail"></i>
                </div>
                <div class="flex-1">
                    <p class="text-xs text-gray-500 mb-0.5">E-mail</p>
                    <p class="text-base font-semibold text-gray-800">bonny@gmail.com</p>
                </div>
            </div>

            <!-- Phone -->
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <i class="w-4 h-4 text-gray-600" data-lucide="phone"></i>
                </div>
                <div class="flex-1">
                    <p class="text-xs text-gray-500 mb-0.5">No. HP</p>
                    <p class="text-base font-semibold text-gray-800">+6285777777777</p>
                </div>
            </div>

            <!-- Address -->
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <i class="w-4 h-4 text-gray-600" data-lucide="map-pin"></i>
                </div>
                <div class="flex-1">
                    <p class="text-xs text-gray-500 mb-0.5">Alamat</p>
                    <p class="text-base font-semibold text-gray-800 leading-relaxed">
                        Kp. Pertanian II Rt 004 Rw 001 Kel. Klender Kec, Duren Swakit, Kota Adm. Jakarta Timur 13470
                    </p>
                </div>
            </div>
        </div>

  
    </div>
          <!-- Logout Button -->
        <div class="mx-4 pt-4 pb-4">
            <button class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-xl font-bold text-base shadow-lg transition-all duration-200 hover:scale-105">
                Keluar
            </button>
        </div>


        <!-- Bottom Navigation -->
        <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />

</div>