@{
    ViewData["Title"] = "Edit 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>

    <!-- Edit Form Card -->
    <div class="px-5 py-6 bg-white rounded-lg flex flex-col justify-start items-start gap-6">
        <form asp-action="Edit" method="post" class="w-full">
            <!-- Header -->
            <div class="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
                <h2 class="text-base font-bold text-slate-600 font-jakarta-plus">Informasi Biodata</h2>
            </div>

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

            <!-- Personal Information Section -->
            <div class="flex flex-col gap-6 mb-6">
                <!-- Row 1: Nama and NIK -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Nama Nasabah</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="text"
                               name="namaNasabah"
                               value="Ikhdan Nizar Maulana"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">NIK</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="text"
                               name="nik"
                               value="7123981241"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                </div>

                <!-- Row 2: Email and Phone -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Email</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="email"
                               name="email"
                               value="banksampahjaktim@gmail.com"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">No. HP Penanggung Jawab</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="tel"
                               name="noHp"
                               value="12171.71891.8242"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                </div>
            </div>

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

            <!-- Address Section -->
            <div class="flex flex-col gap-6 mb-6">
                <!-- Full Address -->
                <div class="grid grid-cols-1 gap-8">
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Alamat</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="text"
                               name="alamat"
                               value="Jalan Raya Pasar Minggu No. 45, Jakarta Timur, DKI Jakarta"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                </div>

                <!-- RT, RW, and Kode Pos -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">RT</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="text"
                               name="rt"
                               value="02"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">RW</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="text"
                               name="rw"
                               value="02"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Kode Pos</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <input type="text"
                               name="kodePos"
                               value="61374"
                               class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               required />
                    </div>
                </div>

                <!-- Province and City -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Provinsi</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <div class="relative">
                            <select name="provinsi"
                                    class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent appearance-none pr-10"
                                    required>
                                <option value="DKI Jakarta" selected>DKI Jakarta</option>
                                <option value="Jawa Barat">Jawa Barat</option>
                                <option value="Jawa Tengah">Jawa Tengah</option>
                                <option value="Jawa Timur">Jawa Timur</option>
                            </select>
                            <i class="ph ph-caret-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 pointer-events-none"></i>
                        </div>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Kota</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <div class="relative">
                            <select name="kota"
                                    class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent appearance-none pr-10"
                                    required>
                                <option value="Koda Adm, Jakarta Timur" selected>Koda Adm, Jakarta Timur</option>
                                <option value="Jakarta Pusat">Jakarta Pusat</option>
                                <option value="Jakarta Barat">Jakarta Barat</option>
                                <option value="Jakarta Selatan">Jakarta Selatan</option>
                            </select>
                            <i class="ph ph-caret-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 pointer-events-none"></i>
                        </div>
                    </div>
                </div>

                <!-- Kecamatan and Kelurahan -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Kecamatan</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <div class="relative">
                            <select name="kecamatan"
                                    class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent appearance-none pr-10"
                                    required>
                                <option value="Pasarejo" selected>Pasarejo</option>
                                <option value="Cakung">Cakung</option>
                                <option value="Duren Sawit">Duren Sawit</option>
                            </select>
                            <i class="ph ph-caret-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 pointer-events-none"></i>
                        </div>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="flex items-start gap-0.5">
                            <span class="text-base font-normal text-slate-800 font-jakarta-plus">Kelurahan</span>
                            <span class="text-sm font-semibold text-red-500 font-jakarta-plus">*</span>
                        </label>
                        <div class="relative">
                            <select name="kelurahan"
                                    class="w-full px-3.5 py-3 bg-white rounded-lg border border-gray-300 text-base font-normal text-slate-600 font-jakarta-plus focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent appearance-none pr-10"
                                    required>
                                <option value="Pasar Minggu" selected>Pasar Minggu</option>
                                <option value="Kampung Melayu">Kampung Melayu</option>
                                <option value="Jatinegara">Jatinegara</option>
                            </select>
                            <i class="ph ph-caret-down absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 pointer-events-none"></i>
                        </div>
                    </div>
                </div>
            </div>

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

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row justify-start items-stretch sm:items-center gap-3">
                <a asp-action="Index" class="px-8 py-2.5 bg-white rounded-full border border-gray-300 flex justify-center items-center text-sm font-semibold text-slate-800 font-jakarta-plus hover:bg-gray-50 transition-colors">
                    Batal
                </a>
                <button type="submit" class="px-8 py-2.5 bg-green-800 rounded-full flex justify-center items-center text-sm font-semibold text-white font-jakarta-plus hover:bg-green-900 transition-colors">
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>