bank-sampah/Views/Main/ProfilNasabah/Edit.cshtml

249 lines
11 KiB
Plaintext

@{
ViewData["Title"] = "Edit Profil 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">
Profil 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 id="profile-photo">
<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">
<form asp-action="Edit" method="post">
<!-- Header -->
<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 md:space-x-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Nama Nasabah
<span class="text-red-500">*</span>
</legend>
<input type="text" class="input" name="namaNasabah" placeholder="Nama Nasabah" value="Ikhdan Nizar Maulana" />
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
NIK
<span class="text-red-500">*</span>
</legend>
<input type="text" class="input" name="nik" placeholder="NIK" value="7123981241" />
</fieldset>
</div>
</div>
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Email
<span class="text-red-500">*</span>
</legend>
<input type="email" class="input" name="email" placeholder="Email" value="banksampahjaktim@gmail.com" />
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
No. HP Penanggung Jawab
<span class="text-red-500">*</span>
</legend>
<input type="tel" class="input" name="noHp" placeholder="No. HP Penanggung Jawab" value="12171.71891.8242" />
</fieldset>
</div>
</div>
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Foto Profil
<span class="text-red-500">*</span>
</legend>
<input type="file" id="photoInput" class="file-input" />
<label class="label">Ukuran Maksimal 5MB</label>
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Jenis Nasabah
<span class="text-red-500">*</span>
</legend>
<select id="status" class="select w-full" required>
<option value="" disabled>Pilih Jenis</option>
<option value="Perorangan" selected>Perorangan</option>
<option value="Organisasi">Organisasi</option>
</select>
</fieldset>
</div>
</div>
<div class="divider"></div>
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Alamat
<span class="text-red-500">*</span>
</legend>
<textarea class="textarea h-24 w-full" name="alamat" placeholder="Alamat">Jalan Raya Pasar Minggu No. 45, Jakarta Timur, DKI Jakarta</textarea>
</fieldset>
</div>
</div>
<div class="grid grid-cols-1 space-y-2 md:grid-cols-6 md:space-x-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
RT
<span class="text-red-500">*</span>
</legend>
<input type="number" class="input" name="rt" placeholder="RT" value="02" />
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
RW
<span class="text-red-500">*</span>
</legend>
<input type="number" class="input" name="rw" placeholder="RW" value="02" />
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Kode Pos
<span class="text-red-500">*</span>
</legend>
<input type="number" class="input" name="kodePos" placeholder="Kode Pos" value="61374" />
</fieldset>
</div>
</div>
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Provinsi
<span class="text-red-500">*</span>
</legend>
<select name="provinsi" class="select">
<option disabled>Pilih Provinsi</option>
<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>
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Kota
<span class="text-red-500">*</span>
</legend>
<select name="kota" class="select">
<option disabled>Pilih Kota</option>
<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>
</fieldset>
</div>
</div>
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-2">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Kecamatan
<span class="text-red-500">*</span>
</legend>
<select name="kecamatan" class="select">
<option disabled>Pilih Kecamatan</option>
<option value="Pasarejo" selected>Pasarejo</option>
<option value="Cakung">Cakung</option>
<option value="Duren Sawit">Duren Sawit</option>
</select>
</fieldset>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Kelurahan
<span class="text-red-500">*</span>
</legend>
<select name="kelurahan" class="select">
<option disabled>Pilih Kelurahan</option>
<option value="Pasar Minggu" selected>Pasar Minggu</option>
<option value="Kampung Melayu">Kampung Melayu</option>
<option value="Jatinegara">Jatinegara</option>
</select>
</fieldset>
</div>
</div>
<div class="divider"></div>
<div class="card-actions">
<a asp-action="Index" class="btn w-30 rounded-full bg-white">
Batal
</a>
<button type="submit" class="btn bg-bank-sampah-primary-500 w-30 rounded-full text-white">
Simpan
</button>
</div>
</form>
</div>
</div>
@section Scripts {
<script>
$(document).ready(function() {
$('#photoInput').on('change', function(event) {
const [file] = event.target.files;
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#profile-photo img').attr('src', e.target.result);
}
reader.readAsDataURL(file);
}
});
});
</script>
}