246 lines
11 KiB
Plaintext
246 lines
11 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Bio Bank Sampah";
|
|
Layout = "~/Views/Shared/_LayoutAppWithoutNavbar.cshtml";
|
|
}
|
|
|
|
@section Styles {
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<style>
|
|
#map {
|
|
height: 400px;
|
|
width: 100%;
|
|
border-radius: 0.5rem;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div class="min-h-screen flex items-center justify-center py-8 px-4">
|
|
<div class="w-full max-w-4xl">
|
|
|
|
<!-- Title -->
|
|
<div class="flex flex-col items-center mb-6">
|
|
<span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
|
|
Lengkapi Data Kelengkapan Bank Sampah
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Alert -->
|
|
<div class="border border-blue-200 bg-blue-50 rounded-lg mb-6 p-4 flex flex-col gap-2 justify-start justify-items-start">
|
|
<h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
|
|
<p class="text-sm text-blue-600">
|
|
Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah.
|
|
Form ini hanya tampil sekali.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- FORM -->
|
|
<form class="space-y-6">
|
|
|
|
<!-- ===================== SECTION 1 ===================== -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-4">Data Kelengkapan Bank Sampah</h3>
|
|
<div class="divider"></div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Bank Sampah <span class="text-red-500">*</span></label>
|
|
<input id="namaBank" type="text" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Email <span class="text-red-500">*</span></label>
|
|
<input id="email" type="email" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kategori Bank Sampah <span class="text-red-500">*</span></label>
|
|
<select id="kategori" required class="select select-bordered w-full">
|
|
<option disabled selected>Pilih kategori</option>
|
|
<option>Induk</option>
|
|
<option>Unit</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Penanggung Jawab <span class="text-red-500">*</span></label>
|
|
<input id="penanggungJawab" type="text" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">No HP Penanggung Jawab <span class="text-red-500">*</span></label>
|
|
<input id="noHp" type="text" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Badan Hukum <span class="text-red-500">*</span></label>
|
|
<select id="badanHukum" required class="select select-bordered w-full">
|
|
<option disabled selected>Pilih status</option>
|
|
<option>Ya</option>
|
|
<option>Tidak</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Tahun Berdiri <span class="text-red-500">*</span></label>
|
|
<input id="tahunBerdiri" type="number" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Luas Lahan (m²) <span class="text-red-500">*</span></label>
|
|
<input id="luasLahan" type="number" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Status Lahan <span class="text-red-500">*</span></label>
|
|
<select id="statusLahan" required class="select select-bordered w-full">
|
|
<option disabled selected>Pilih status lahan</option>
|
|
<option>Milik Sendiri</option>
|
|
<option>Sewa</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Jumlah Pengurus <span class="text-red-500">*</span></label>
|
|
<input id="jumlahPengurus" type="number" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Memiliki SOP? <span class="text-red-500">*</span></label>
|
|
<select id="sop" required class="select select-bordered w-full">
|
|
<option disabled selected>Pilih</option>
|
|
<option>Ya</option>
|
|
<option>Tidak</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 2 ===================== -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-4">Lokasi Bank Sampah</h3>
|
|
<div class="divider"></div>
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Alamat <span class="text-red-500">*</span></label>
|
|
<textarea id="alamat" rows="4" required class="textarea textarea-bordered w-full"></textarea>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">RT <span class="text-red-500">*</span></label>
|
|
<input id="rt" type="text" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">RW <span class="text-red-500">*</span></label>
|
|
<input id="rw" type="text" required class="input input-bordered w-full" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kode Pos <span class="text-red-500">*</span></label>
|
|
<input id="kodePos" type="text" required class="input input-bordered w-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Provinsi <span class="text-red-500">*</span></label>
|
|
<select id="provinsi" required class="select select-bordered w-full">
|
|
<option>Pilih Provinsi</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kota <span class="text-red-500">*</span></label>
|
|
<select id="kota" required class="select select-bordered w-full">
|
|
<option>Pilih Kota</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kecamatan <span class="text-red-500">*</span></label>
|
|
<select id="kecamatan" required class="select select-bordered w-full">
|
|
<option>Pilih Kecamatan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Kelurahan <span class="text-red-500">*</span></label>
|
|
<select id="kelurahan" required class="select select-bordered w-full">
|
|
<option>Pilih Kelurahan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- ===================== SECTION 3 ===================== -->
|
|
<div class="bg-white rounded-lg shadow-sm p-6">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-4">Titik Lokasi</h3>
|
|
<div class="divider"></div>
|
|
|
|
<div id="map" class="mb-6"></div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Latitude <span class="text-red-500">*</span></label>
|
|
<input id="lat" class="input input-bordered w-full" readonly>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Longitude <span class="text-red-500">*</span></label>
|
|
<input id="lng" class="input input-bordered w-full" readonly>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="btn bg-green-800 hover:bg-green-900 text-white px-8 py-2 rounded-full">
|
|
Simpan dan Lanjutkan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
const defaultLat = -7.2575;
|
|
const defaultLng = 112.7521;
|
|
|
|
const map = L.map('map').setView([defaultLat, defaultLng], 15);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
}).addTo(map);
|
|
|
|
const marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);
|
|
|
|
$("#lat").val(defaultLat);
|
|
$("#lng").val(defaultLng);
|
|
|
|
marker.on("dragend", function () {
|
|
const pos = marker.getLatLng();
|
|
$("#lat").val(pos.lat.toFixed(6));
|
|
$("#lng").val(pos.lng.toFixed(6));
|
|
});
|
|
|
|
map.on("click", function (e) {
|
|
marker.setLatLng(e.latlng);
|
|
$("#lat").val(e.latlng.lat.toFixed(6));
|
|
$("#lng").val(e.latlng.lng.toFixed(6));
|
|
});
|
|
|
|
});
|
|
</script>
|
|
}
|