From f303c611719c05ed38cfd24bd2ff01aec8f149cf Mon Sep 17 00:00:00 2001
From: Kevin Hendrawan <projectkevin97@gmail.com>
Date: Tue, 2 Dec 2025 21:24:22 +0700
Subject: [PATCH] feat(KelengkapanBankSampah): add Kelengkapan Bank Sampah Page

---
 Views/Biodata/BankSampah.cshtml | 233 ++++++++++++++++++--------------
 1 file changed, 128 insertions(+), 105 deletions(-)

diff --git a/Views/Biodata/BankSampah.cshtml b/Views/Biodata/BankSampah.cshtml
index f52e3e0..6e842e3 100644
--- a/Views/Biodata/BankSampah.cshtml
+++ b/Views/Biodata/BankSampah.cshtml
@@ -3,9 +3,20 @@
     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']">
@@ -14,13 +25,12 @@
         </div>
 
         <!-- Alert -->
-        <div class="alert border-blue-200 bg-blue-50 rounded-lg mb-6">
-            <div>
-                <h3 class="font-semibold text-blue-800">Selamat Datang!</h3>
-                <div class="text-sm text-blue-600">
-                    Silakan lengkapi biodata Anda untuk dapat menggunakan layanan e-Bank Sampah. Form ini hanya tampil sekali.
-                </div>
-            </div>
+        <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 -->
@@ -29,113 +39,75 @@
             <!-- ===================== 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">
 
-                    <!-- Nama Bank -->
                     <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 type="text" placeholder="Nama Bank Sampah"
-                               class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- Email -->
                     <div class="form-control">
-                        <label class="block text-sm font-medium text-gray-700 mb-2">
-                            E-mail <span class="text-red-500">*</span>
-                        </label>
-                        <input type="email" placeholder="email@example.com"
-                               class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- Kategori -->
                     <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 class="select select-bordered w-full">
+                        <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>
 
-                    <!-- Penanggung Jawab -->
                     <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 type="text" placeholder="Nama Penanggung Jawab"
-                               class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- No HP -->
                     <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 type="text" placeholder="628xxxxxxxxx"
-                               class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- Badan Hukum -->
                     <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 class="select select-bordered w-full">
+                        <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>
 
-                    <!-- Tahun Berdiri -->
                     <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 type="number" placeholder="2020"
-                               class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- Luas Lahan -->
                     <div class="form-control">
-                        <label class="block text-sm font-medium text-gray-700 mb-2">
-                            Luas Lahan <span class="text-red-500">*</span>
-                        </label>
-                        <input type="number" placeholder="Contoh: 100"
-                               class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- Status Lahan -->
                     <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 class="select select-bordered w-full">
+                        <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>
 
-                    <!-- Jumlah Pengurus -->
                     <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 type="number" placeholder="Contoh: 5" class="input input-bordered w-full" />
+                        <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>
 
-                    <!-- SOP -->
                     <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 class="select select-bordered w-full">
+                        <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>
@@ -147,76 +119,127 @@
 
             <!-- ===================== SECTION 2 ===================== -->
             <div class="bg-white rounded-lg shadow-sm p-6">
-                <h3 class="text-lg font-medium text-gray-700 mb-4">Informasi Biodata</h3>
+                <h3 class="text-lg font-medium text-gray-700 mb-4">Lokasi Bank Sampah</h3>
+                <div class="divider"></div>
 
-                <!-- Alamat -->
-                <div class="form-control">
-                    <label class="label"><span class="label-text font-semibold">Alamat *</span></label>
-                    <textarea class="textarea textarea-bordered h-28" placeholder="Masukkan alamat lengkap"></textarea>
-                </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>
 
-                <!-- RT RW Kode Pos -->
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-semibold">RT *</span></label>
-                        <input type="text" class="input input-bordered" placeholder="RT" />
+                    <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 class="form-control">
-                        <label class="label"><span class="label-text font-semibold">RW *</span></label>
-                        <input type="text" class="input input-bordered" placeholder="RW" />
+                    <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 class="form-control">
-                        <label class="label"><span class="label-text font-semibold">Kode Pos *</span></label>
-                        <input type="text" class="input input-bordered" placeholder="Kode Pos" />
+                    <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>
 
-                <!-- Provinsi / Kota -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-semibold">Provinsi *</span></label>
-                        <select class="select select-bordered">
-                            <option disabled selected>Pilih Provinsi</option>
+                    <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 class="form-control">
-                        <label class="label"><span class="label-text font-semibold">Kota *</span></label>
-                        <select class="select select-bordered">
-                            <option disabled selected>Pilih Kota</option>
+                    <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>
 
-                <!-- Kecamatan / Kelurahan -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-semibold">Kecamatan *</span></label>
-                        <select class="select select-bordered">
-                            <option disabled selected>Pilih Kecamatan</option>
+                    <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 class="form-control">
-                        <label class="label"><span class="label-text font-semibold">Kelurahan *</span></label>
-                        <select class="select select-bordered">
-                            <option disabled selected>Pilih Kelurahan</option>
+                    <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>
 
-                <!-- Submit -->
                 <div class="flex justify-end">
-                    <button class="btn btn-success btn-wide">
+                    <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>
+}