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

<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
    <div class="prose">
        <span class="text-xl font-semibold text-black">
            Detail Nasabah
        </span>
    </div>
</div>

<div class="h-6"></div>

<div class="flex flex-col items-center justify-between gap-4 rounded bg-white p-6 md:flex-row">
    <div class="flex w-full flex-col items-center gap-4 md:flex-row">
        <figure>
            <img src="https://placehold.co/81x81"
                 alt="Profile Photo"
                 width="80"
                 height="80"
                 class="h-20 w-20 rounded bg-contain bg-center object-cover" />
        </figure>
        <div class="flex flex-col items-center md:items-start">
            <h2 class="font-semibold">Ikhdan Nizar Maulana</h2>
            <p>Nasabah</p>
        </div>
    </div>
    <div class="badge badge-soft badge-success">
        Status Aktif
    </div>
</div>

<div class="h-6"></div>

<div class="card bg-white">
    <div class="card-body">
        <div class="flex flex-row items-center justify-between">
            <h2 class="card-title">
                Informasi Biodata
            </h2>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Nama Nasabah</span>
                <span class="text-sm">Ikhdan Nizar Maulana</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">NIK</span>
                <span class="text-sm">7123981241</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Bank Sampah</span>
                <span class="text-sm">BSI Hijau Lestari</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Jenis Nasabah</span>
                <span class="text-sm">Perorangan</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Email</span>
                <span class="text-sm">banksampahjaktim@gmail.com</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">No. HP Penanggung Jawab</span>
                <span class="text-sm">0822472812142</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Nama Bank</span>
                <span class="text-sm">Mandiri</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">No. Rekening</span>
                <span class="text-sm">71494814124</span>
            </div>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Alamat</span>
                <span class="text-sm">Jalan Raya Pasar Minggu No. 45, Jakarta Timur, DKI Jakarta</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">RT</span>
                <span class="text-sm">02</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">RW</span>
                <span class="text-sm">02</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kode Pos</span>
                <span class="text-sm">61374</span>
            </div>
        </div>
        <div class="divider"></div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Provinsi</span>
                <span class="text-sm">DKI Jakarta</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kota</span>
                <span class="text-sm">Koda Adm, Jakarta Timur</span>
            </div>
        </div>
        <div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kecamatan</span>
                <span class="text-sm">Pasarejo</span>
            </div>
            <div class="flex flex-col">
                <span class="text-xs text-gray-500">Kelurahan</span>
                <span class="text-sm">Pasar Minggu</span>
            </div>
        </div>
    </div>
</div>