409 lines
18 KiB
Plaintext
409 lines
18 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Profil Bank Sampah";
|
|
}
|
|
|
|
@section Styles {
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="~/css/leaflet-map-picker.css" />
|
|
}
|
|
|
|
<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 Bank Sampah
|
|
</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://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
|
|
alt="Shoes"
|
|
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">Jakarta Timur</h2>
|
|
<p>Bank Sampah Induk</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>
|
|
<form action="#" method="post">
|
|
<div class="divider"></div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Nama Bank Sampah
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="text" class="input" placeholder="Nama Bank Sampah" value="Jakarta Timur" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Kategori Bank Sampah
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select class="select">
|
|
<option disabled>Pilih Kategori Bank Sampah</option>
|
|
<option value="Warga" selected>Warga</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<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" placeholder="Email" value="banksampahjaktim@gmail.com" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
SK Penetapan
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="text" class="input" placeholder="SK Penetapan" value="127.12.1222.1111" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Penangung Jawab
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="text" class="input" placeholder="Penangung Jawab" value="Ikhdan Maulana" />
|
|
</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="text" class="input" placeholder="No. HP Penanggung Jawab" value="089556728383" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Jumlah Pengurus
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="number" class="input" placeholder="Jumlah Pengurus" value="67" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Badan Hukum
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select class="select">
|
|
<option disabled>Pilih Badan Hukum</option>
|
|
<option value="PT" selected>PT</option>
|
|
<option value="CV">CV</option>
|
|
<option value="UD">UD</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
<span>Luas Lahan m<sup>2</sup></span>
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="number" min="1" class="input" placeholder="Luas Lahan m2" value="6128" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Status Lahan
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select class="select">
|
|
<option disabled>Pilih Status Lahan</option>
|
|
<option value="Pribadi" selected>Pribadi</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Tahun Berdiri
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="number" class="input" placeholder="Tahun Berdiri" value="2021" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
SK Penetapan PT
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="text" class="input" placeholder="Tahun Berdiri" value="12.340-327832.38.12" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Jenis Bank Sampah
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select id="jenis_bank_sampah" class="select w-full" required>
|
|
<option value="" disabled selected>Pilih Jenis Bank Sampah</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Memiliki SOP ?
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select id="sop" class="select w-full" required>
|
|
<option value="" disabled selected>Pilih Kepemilikan</option>
|
|
<option>Ya</option>
|
|
<option>Tidak</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Provinsi
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select class="select">
|
|
<option disabled>Pilih Provinsi</option>
|
|
<option value="DKI Jakarta" selected>DKI Jakarta</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 class="select">
|
|
<option disabled>Pilih Kota</option>
|
|
<option value="Kota Adm. Jakarta Timur" selected>Kota Adm. Jakarta Timur</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Kecamatan
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select class="select">
|
|
<option disabled>Pilih Kecamatan</option>
|
|
<option value="Pasarejo" selected>Pasarejo</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Keluaran
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<select class="select">
|
|
<option disabled>Pilih Keluaran</option>
|
|
<option value="Pasarejo" selected>Pasar Minggu</option>
|
|
</select>
|
|
</fieldset>
|
|
</div>
|
|
</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" 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-6">
|
|
<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" 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" 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" placeholder="Kode Pos" value="61374" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Latitude
|
|
</legend>
|
|
<input type="number" step="any" class="input" id="latitude-input" name="latitude" placeholder="Latitude" value="-6.2088" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Longitude
|
|
</legend>
|
|
<input type="number" step="any" class="input" id="longitude-input" name="longitude" placeholder="Longitude" value="106.8456" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Picker -->
|
|
<div class="mt-6">
|
|
@{
|
|
ViewData["MapId"] = "map-picker";
|
|
ViewData["LatInputId"] = "latitude-input";
|
|
ViewData["LngInputId"] = "longitude-input";
|
|
ViewData["SearchInputId"] = "search-location";
|
|
ViewData["SearchResultsId"] = "search-results";
|
|
ViewData["ClearSearchBtnId"] = "clear-search";
|
|
ViewData["Label"] = "Pilih Lokasi di Peta";
|
|
}
|
|
@await Html.PartialAsync("_LeafletMapPicker")
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4 md:space-x-6">
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
File SK
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="file" class="file-input" />
|
|
<label class="label">Ukuran Maksimal 5MB</label>
|
|
</fieldset>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend">
|
|
Logo Bank Sampah
|
|
<span class="text-red-500">*</span>
|
|
</legend>
|
|
<input type="file" class="file-input" />
|
|
<label class="label">Ukuran Maksimal 5MB</label>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="card-actions">
|
|
<a href="@Url.Action("Index","Profil")" class="btn w-30 rounded-full bg-white">
|
|
Batal
|
|
</a>
|
|
<a href="#" class="btn bg-bank-sampah-primary-500 w-30 rounded-full text-white">
|
|
Simpan
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="~/js/leaflet-map-picker.js"></script>
|
|
<script>
|
|
// Initialize the reusable Leaflet Map Picker component
|
|
window.leafletMapPickerInstance = new LeafletMapPicker({
|
|
mapElementId: 'map-picker',
|
|
latInputId: 'latitude-input',
|
|
lngInputId: 'longitude-input',
|
|
searchInputId: 'search-location',
|
|
searchResultsId: 'search-results',
|
|
clearSearchBtnId: 'clear-search',
|
|
alamatInputSelector: 'textarea[name="alamat_lengkap"]',
|
|
initialLat: -6.2088,
|
|
initialLng: 106.8456,
|
|
initialZoom: 12
|
|
});
|
|
|
|
$.ajax({
|
|
url: '/Master/JenisBankSampah/table', // Ganti sesuai endpoint kamu
|
|
method: 'GET',
|
|
dataType: 'json',
|
|
success: function (response) {
|
|
// Buat HTML option dengan map
|
|
let options = response.data
|
|
.map(item => `<option value="${item.nama}">${item.nama}</option>`)
|
|
.join("");
|
|
|
|
// Masukkan ke dropdown
|
|
$("#jenis_bank_sampah").html(`
|
|
<option value="" disabled selected>Pilih Jenis Bank Sampah</option>
|
|
${options}
|
|
`);
|
|
},
|
|
error: function () {
|
|
console.error('Gagal memuat data jenis bank sampah.');
|
|
}
|
|
});
|
|
</script>
|
|
} |