@{
    ViewData["Title"] = "Profil Nasabah";
    Layout = "~/Views/Shared/_LayoutApp.cshtml";
}

<div class="flex flex-col gap-5">
    <!-- Page Title -->
    <div class="flex justify-start items-center gap-2">
        <h1 class="text-xl font-semibold text-gray-900 font-jakarta-plus">Profil Nasabah</h1>
    </div>

    <!-- Profile Card -->
    <div class="px-5 py-6 bg-white rounded-lg flex flex-col sm:flex-row justify-start items-start sm:items-center gap-4">
        <div class="w-20 h-20 relative bg-gray-50 rounded overflow-hidden flex-shrink-0">
            <img class="w-20 h-20 object-cover" src="https://placehold.co/81x81" alt="Profile Photo" />
        </div>
        <div class="flex-1 flex flex-col justify-start items-start gap-1">
            <div class="text-slate-600 text-xl font-semibold font-jakarta-plus">Ikhdan Nizar Maulana</div>
            <div class="text-slate-600 text-base font-normal font-jakarta-plus">Nasabah</div>
        </div>
        <div class="px-2 bg-green-100 rounded-full flex justify-center items-center">
            <div class="text-center text-green-600 text-xs font-semibold font-jakarta-plus py-1">Status Aktif</div>
        </div>
    </div>

    <!-- Information Card -->
    <div class="px-5 py-6 bg-white rounded-lg flex flex-col justify-start items-start gap-6">
        <!-- Header with Edit Button -->
        <div class="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <h2 class="text-base font-bold text-slate-600 font-jakarta-plus">Informasi Biodata</h2>
            <a asp-action="Edit" class="px-3.5 py-2 bg-white rounded-full border border-gray-300 flex justify-center items-center gap-2 hover:bg-gray-50 transition-colors">
                <i class="ph ph-pencil text-lg text-zinc-800"></i>
                <span class="text-sm font-semibold text-slate-800 font-jakarta-plus">Edit Biodata</span>
            </a>
        </div>

        <hr class="w-full border-gray-200" />

        <!-- Personal Information -->
        <div class="w-full flex flex-col gap-8">
            <!-- Row 1 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Nama Nasabah</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">Ikhdan Nizar Maulana</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">NIK</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">7123981241</span>
                </div>
            </div>

            <!-- Row 2 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Email</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">banksampahjaktim@gmail.com</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">No. HP Penanggung Jawab</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">0822472812142</span>
                </div>
            </div>

            <!-- Row 3 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Nama Bank</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">Mandiri</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">No. Rekening</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">71494814124</span>
                </div>
            </div>

            <hr class="w-full border-gray-200" />

            <!-- Address Information -->
            <div class="w-full flex flex-col gap-6">
                <!-- Address Row -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="flex flex-col gap-1 sm:col-span-2 lg:col-span-1">
                        <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Alamat</span>
                        <span class="text-base font-normal text-slate-600 font-jakarta-plus">Jalan Raya Pasar Minggu No. 45, Jakarta Timur, DKI Jakarta</span>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs font-normal text-gray-500 font-jakarta-plus">RT</span>
                        <span class="text-base font-normal text-slate-600 font-jakarta-plus">02</span>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs font-normal text-gray-500 font-jakarta-plus">RW</span>
                        <span class="text-base font-normal text-slate-600 font-jakarta-plus">02</span>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kode Pos</span>
                        <span class="text-base font-normal text-slate-600 font-jakarta-plus">61374</span>
                    </div>
                </div>
            </div>

            <!-- Area Information -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kelurahan</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">Pasar Minggu</span>
                </div>
                <div class="flex flex-col gap-1">
                    <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kecamatan</span>
                    <span class="text-base font-normal text-slate-600 font-jakarta-plus">Pasarejo</span>
                </div>
            </div>

            <!-- City and Province -->
            <div class="w-full flex flex-col gap-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
                    <div class="flex flex-col gap-1">
                        <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Kota</span>
                        <span class="text-base font-normal text-slate-600 font-jakarta-plus">Koda Adm, Jakarta Timur</span>
                    </div>
                    <div class="flex flex-col gap-1">
                        <span class="text-xs font-normal text-gray-500 font-jakarta-plus">Provinsi</span>
                        <span class="text-base font-normal text-slate-600 font-jakarta-plus">DKI Jakarta</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>