From 804cce0b51d2ed10a1addac41c8e64c11860537e Mon Sep 17 00:00:00 2001
From: Kevin Hendrawan <projectkevin97@gmail.com>
Date: Thu, 20 Nov 2025 00:14:08 +0700
Subject: [PATCH] feat(HargaSampah): add button hide harga

---
 Views/Data/HargaSampah/Index.cshtml | 81 +++++++++++++++++++++++++++--
 1 file changed, 76 insertions(+), 5 deletions(-)

diff --git a/Views/Data/HargaSampah/Index.cshtml b/Views/Data/HargaSampah/Index.cshtml
index 0180b18..8b5babe 100644
--- a/Views/Data/HargaSampah/Index.cshtml
+++ b/Views/Data/HargaSampah/Index.cshtml
@@ -10,10 +10,17 @@
     </div>
 
     <div>
-        <button class="btn btn-sm rounded-full bg-green-800 text-white hover:bg-green-900" onclick="modal_tambah.showModal()">
-            <i class="ph ph-plus"></i>
-            Tambah
-        </button>
+        <div class="flex gap-2">
+            
+            <button id="togglePriceBtn" class="btn btn-sm rounded-full bg-white">
+                <i id="eyeIcon" class="ph ph-eye-slash"></i>
+                <span id="btnText">Sembunyikan Harga</span>
+            </button>
+            <button class="btn btn-sm rounded-full bg-green-800 text-white hover:bg-green-900" onclick="modal_tambah.showModal()">
+                <i class="ph ph-plus"></i>
+                Tambah
+            </button>
+        </div>
     </div>
 </div>
 
@@ -64,6 +71,49 @@
 </dialog>
 <!-- /modal tambah/edit -->
 
+<!-- Modal Hide Harga -->
+<dialog id="modal_hide" class="modal modal-bottom sm:modal-middle">
+    <div class="modal-box w-full max-w-lg p-6 bg-white rounded-2xl">
+
+        <!-- Header -->
+        <div class="flex items-start justify-between mb-4">
+            <div class="flex items-center gap-2">
+                <i class="ph ph-info text-red-500 text-xl"></i>
+            </div>
+            <button onclick="modal_hide.close()" class="text-gray-500 hover:text-gray-700 cursor-pointer">
+                <i class="ph ph-x text-lg"></i>
+            </button>
+        </div>
+
+        <!-- Message -->
+        <p class="text-gray-700 leading-relaxed mb-8 text-base">
+            Apakah Anda yakin ingin menyembunyikan (hide) harga sampah ini dari tampilan publik pada halaman Landing Page?
+        </p>
+
+        <!-- Buttons -->
+        <form id="formHide" onsubmit="submitFormHide(event)">
+            <div class="flex justify-end gap-3">
+                <button type="button" onclick="modal_hide.close()"
+                        class="px-8 py-2.5 bg-white rounded-full outline outline-1 outline-gray-300 text-gray-700 font-semibold hover:bg-gray-50">
+                    Tidak
+                </button>
+
+                <button type="submit"
+                        class="px-8 py-2.5 bg-green-800 rounded-full text-white font-semibold hover:bg-green-900 cursor-pointer">
+                    Ya
+                </button>
+            </div>
+        </form>
+
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
+</dialog>
+
+<!-- End Modal Hide Harga -->
+
 <div class="h-6"></div>
 
 <div class="card bg-white shadow-sm">
@@ -90,6 +140,7 @@
 @section Scripts {
     <script type="text/javascript">
         var table;
+        var isHidden = false;
     
         $(document).ready(function () {
             table = new DataTable('#example', {
@@ -103,8 +154,11 @@
                     { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                     { data: 'nama_subkategori' },
                     {
-                        data: 'harga',
+                         data: 'harga',
                         render: function(data) {
+                            if (isHidden) {
+                                return '********';
+                            } 
                             return new Intl.NumberFormat('id-ID').format(data);
                         }
                     },
@@ -165,6 +219,10 @@
                 // Open modal
                 modal_tambah.showModal();
             });
+
+            $('#togglePriceBtn').on('click', function() {
+                modal_hide.showModal();
+            });
         });
     
         function closeModal() {
@@ -199,5 +257,18 @@
                 table.ajax.reload();
             });
         }
+
+        function submitFormHide(e){
+            e.preventDefault();
+            modal_hide.close();
+
+            Swal.fire({
+                icon: 'success',
+                title: 'Sukses!',
+                text: 'Data harga berhasil di sembunyikan.',
+                timer: 1000,
+                showConfirmButton: false
+            });
+        }
     </script>
 }