From ed60c36fa172f5766c8bf56508119ee80538b3ff Mon Sep 17 00:00:00 2001
From: MuzakkiABBAUF <muzakki.abbauftech@gmail.com>
Date: Thu, 11 Sep 2025 11:10:13 +0700
Subject: [PATCH] add modal delete

---
 .../views/admin/fitur/index.blade.php         | 68 ++++++++++++--
 .../views/admin/kategori/index.blade.php      | 90 +++++++++++++++----
 .../views/admin/pelanggan/index.blade.php     |  8 ++
 3 files changed, 140 insertions(+), 26 deletions(-)

diff --git a/backend/resources/views/admin/fitur/index.blade.php b/backend/resources/views/admin/fitur/index.blade.php
index 8873881..0843262 100644
--- a/backend/resources/views/admin/fitur/index.blade.php
+++ b/backend/resources/views/admin/fitur/index.blade.php
@@ -35,14 +35,10 @@
                                             data-id="{{ $item->id }}">
                                             <i class="bi bi-pencil mr-1"></i> Ubah
                                         </button>
-                                        <form action="{{ route('admin.fitur.destroy', $item->id) }}" method="POST"
-                                            class="inline" onsubmit="return confirm('Yakin mau hapus fitur ini?')">
-                                            @csrf
-                                            @method('DELETE')
-                                            <button class="text-red-600 flex items-center">
-                                                <i class="bi bi-trash mr-1"></i> Hapus
-                                            </button>
-                                        </form>
+                                        <button class="text-red-600 flex items-center openDeleteModalBtn"
+                                            data-id="{{ $item->id }}">
+                                            <i class="bi bi-trash mr-1"></i> Hapus
+                                        </button>
                                     </div>
                                 </td>
                             </tr>
@@ -109,6 +105,30 @@
         </div>
     @endforeach
 
+    <!-- Modal Hapus -->
+    @foreach ($fitur as $item)
+        <div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
+            <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div>
+            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+                <div class="p-4 border-b">
+                    <h5 class="text-lg font-medium">Hapus Fitur</h5>
+                </div>
+                <div class="p-4">
+                    <p>Apakah Anda yakin ingin menghapus fitur <strong>{{ $item->deskripsi }}</strong>?</p>
+                </div>
+                <div class="p-4 border-t flex justify-end space-x-2">
+                    <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
+                        data-id="{{ $item->id }}">Batal</button>
+                    <form action="{{ route('admin.fitur.destroy', $item->id) }}" method="POST" class="inline">
+                        @csrf
+                        @method('DELETE')
+                        <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    @endforeach
+
     <script>
         // Modal Tambah
         const openTambahModal = document.getElementById('openTambahModal');
@@ -160,5 +180,37 @@
                 modal.classList.remove('flex');
             });
         });
+
+        // Modal Delete
+        const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
+        const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
+        const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
+
+        openDeleteBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                modal.classList.remove('hidden');
+                modal.classList.add('flex');
+            });
+        });
+
+        closeDeleteBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            });
+        });
+
+        closeDeleteOverlays.forEach(overlay => {
+            overlay.addEventListener('click', () => {
+                const id = overlay.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            });
+        });
     </script>
 @endsection
diff --git a/backend/resources/views/admin/kategori/index.blade.php b/backend/resources/views/admin/kategori/index.blade.php
index a6fc00c..a8573ba 100644
--- a/backend/resources/views/admin/kategori/index.blade.php
+++ b/backend/resources/views/admin/kategori/index.blade.php
@@ -18,9 +18,7 @@
                 {{ session('success') }}
             </div>
             <script>
-                setTimeout(() => {
-                    document.getElementById('toast-success')?.remove();
-                }, 3000);
+                setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
             </script>
         @endif
 
@@ -33,9 +31,7 @@
                 </ul>
             </div>
             <script>
-                setTimeout(() => {
-                    document.getElementById('toast-error')?.remove();
-                }, 5000);
+                setTimeout(() => document.getElementById('toast-error')?.remove(), 5000);
             </script>
         @endif
 
@@ -59,8 +55,7 @@
                                 <td class="p-2 border border-gray-300 truncate">{{ $item->nama }}</td>
                                 <td class="p-2 border border-gray-300 truncate">{{ $item->deskripsi ?? '-' }}</td>
                                 <td class="p-2 border border-gray-300 text-center">
-                                    <div
-                                        class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center mx-auto">
+                                    <div class="w-12 h-12 overflow-hidden rounded bg-gray-100 flex items-center justify-center mx-auto">
                                         <img src="{{ $item->foto ? asset('storage/' . $item->foto) : asset('default-image.png') }}"
                                             alt="foto" class="max-w-full max-h-full object-contain">
                                     </div>
@@ -72,21 +67,18 @@
                                             data-id="{{ $item->id }}">
                                             <i class="bi bi-pencil mr-1"></i> Ubah
                                         </button>
-                                        <form action="{{ route('admin.kategori.destroy', $item->id) }}" method="POST"
-                                            class="inline" onsubmit="return confirm('Yakin mau hapus kategori ini?')">
-                                            @csrf
-                                            @method('DELETE')
-                                            <button class="text-red-600 hover:underline flex items-center">
-                                                <i class="bi bi-trash mr-1"></i> Hapus
-                                            </button>
-                                        </form>
+                                        <button class="text-red-600 hover:underline flex items-center openDeleteModalBtn"
+                                            data-id="{{ $item->id }}">
+                                            <i class="bi bi-trash mr-1"></i> Hapus
+                                        </button>
                                     </div>
                                 </td>
                             </tr>
                         @empty
                             <tr>
-                                <td colspan="5" class="p-2 text-center text-gray-500 border border-gray-300">Belum ada
-                                    kategori</td>
+                                <td colspan="5" class="p-2 text-center text-gray-500 border border-gray-300">
+                                    Belum ada kategori
+                                </td>
                             </tr>
                         @endforelse
                     </tbody>
@@ -176,6 +168,30 @@
         </div>
     @endforeach
 
+    <!-- Modal Hapus -->
+    @foreach ($kategori as $item)
+        <div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
+            <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div>
+            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+                <div class="p-4 border-b">
+                    <h5 class="text-lg font-medium">Hapus Kategori</h5>
+                </div>
+                <div class="p-4">
+                    <p>Apakah Anda yakin ingin menghapus kategori <strong>{{ $item->nama }}</strong>?</p>
+                </div>
+                <div class="p-4 border-t flex justify-end space-x-2">
+                    <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
+                        data-id="{{ $item->id }}">Batal</button>
+                    <form action="{{ route('admin.kategori.destroy', $item->id) }}" method="POST" class="inline">
+                        @csrf
+                        @method('DELETE')
+                        <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    @endforeach
+
     <script>
         // Modal Tambah
         const openTambahModal = document.getElementById('openTambahModal');
@@ -227,5 +243,43 @@
                 modal.classList.remove('flex');
             });
         });
+
+        // Modal Hapus
+        const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
+        const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
+        const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
+
+        openDeleteBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                if (modal) {
+                    modal.classList.remove('hidden');
+                    modal.classList.add('flex');
+                }
+            });
+        });
+
+        closeDeleteBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                if (modal) {
+                    modal.classList.add('hidden');
+                    modal.classList.remove('flex');
+                }
+            });
+        });
+
+        closeDeleteOverlays.forEach(overlay => {
+            overlay.addEventListener('click', () => {
+                const id = overlay.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                if (modal) {
+                    modal.classList.add('hidden');
+                    modal.classList.remove('flex');
+                }
+            });
+        });
     </script>
 @endsection
diff --git a/backend/resources/views/admin/pelanggan/index.blade.php b/backend/resources/views/admin/pelanggan/index.blade.php
index 8bad1f1..9f9812b 100644
--- a/backend/resources/views/admin/pelanggan/index.blade.php
+++ b/backend/resources/views/admin/pelanggan/index.blade.php
@@ -28,8 +28,11 @@
                         <tr>
                             <th class="p-2 border border-gray-300 text-center w-16">Nomor</th>
                             <th class="p-2 border border-gray-300 text-center">Nama</th>
+                            <th class="p-2 border border-gray-300 text-center">Nama template</th>
+                            <th class="p-2 border border-gray-300 text-center">Kategori</th>
                             <th class="p-2 border border-gray-300 text-center">Email</th>
                             <th class="p-2 border border-gray-300 text-center">No. Telepon</th>
+                            <th class="p-2 border border-gray-300 text-center">Harga</th>
                             <th class="p-2 border border-gray-300 text-center">Aksi</th>
                         </tr>
                     </thead>
@@ -38,8 +41,13 @@
                             <tr>
                                 <td class="p-2 border border-gray-300 text-center">{{ $key + 1 }}</td>
                                 <td class="p-2 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td>
+                                <td class="p-2 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td>
+                                <td class="p-2 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td>
                                 <td class="p-2 border border-gray-300 truncate">{{ $pelanggan->email }}</td>
                                 <td class="p-2 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td>
+                                <td class="py-3 px-2 border border-gray-300 text-center">
+                                    Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
+                                </td>
                                 <td class="p-2 border border-gray-300 text-center">
                                     <div class="flex justify-center space-x-2">
                                         <a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}"