From 7ab0f7142c8d755fe552b03bff1c7e2c6a8bf8a0 Mon Sep 17 00:00:00 2001
From: Regiaaaaaa <gheizarafashaquille@gmail.com>
Date: Mon, 8 Dec 2025 10:31:38 +0700
Subject: [PATCH] feat: add delete alert

---
 Views/Panduan/Index.cshtml | 99 ++++++++++++++++++++++++++------------
 1 file changed, 69 insertions(+), 30 deletions(-)

diff --git a/Views/Panduan/Index.cshtml b/Views/Panduan/Index.cshtml
index 742ae28..431a664 100644
--- a/Views/Panduan/Index.cshtml
+++ b/Views/Panduan/Index.cshtml
@@ -2,7 +2,7 @@
     ViewData["Title"] = "Panduan";
 }
 
-<!-- Toast Notification -->
+<!-- Toast Notification Add/Edit -->
 <div id="successToast" class="fixed top-20 right-6 z-[9999] hidden">
     <div class="alert bg-green-50 border border-green-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]">
         <div class="flex-shrink-0">
@@ -20,6 +20,24 @@
     </div>
 </div>
 
+<!-- Toast Notification Delete -->
+<div id="deleteToast" class="fixed top-20 right-6 z-[9999] hidden">
+    <div class="alert bg-red-50 border border-red-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]">
+        <div class="flex-shrink-0">
+            <div class="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
+                <span class="icon icon-fill text-white text-xs">delete</span>
+            </div>
+        </div>
+        <div class="flex-1">
+            <h3 class="font-semibold text-gray-900">Panduan berhasil dihapus!</h3>
+            <p class="text-sm text-gray-600">Data panduan telah berhasil dihapus.</p>
+        </div>
+        <button onclick="closeDeleteToast()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
+            <span class="icon text-lg">close</span>
+        </button>
+    </div>
+</div>
+
 <div class="breadcrumbs text-sm mb-4">
     <ul>
         <li class="text-gray-500"><a>CMS</a></li>
@@ -88,9 +106,9 @@
                 </label>
                 <select id="add_jenis_panduan" class="select select-bordered w-full" required>
                     <option value="">Pilih jenis panduan.</option>
-                    <option>Dokumen</option>
-                    <option>Video</option>
-                    <option>Lainnya</option>
+                    <option value="Dokumen">Dokumen</option>
+                    <option value="Video">Video</option>
+                    <option value="Lainnya">Lainnya</option>
                 </select>
             </div>
 
@@ -98,7 +116,7 @@
                 <label class="block text-sm font-medium mb-1">
                     Upload Dokumen <span class="text-red-500">*</span>
                 </label>
-                <input type="file" id="add_dokumen_panduan" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx"/>
+                <input type="file" id="add_dokumen_panduan" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx" required/>
                 <p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p>
             </div>
 
@@ -106,7 +124,7 @@
                 <label class="block text-sm font-medium mb-1">
                     Link Konten
                 </label>
-                <input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://"/>
+                <input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://" required/>
             </div>
 
             <div class="modal-action flex justify-end gap-3">
@@ -218,6 +236,8 @@
 <script src="/lib/jquery/jquery-3.7.1.js"></script>
 <script src="/lib/datatables/dataTables.js"></script>
 <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
 
 <script>
 $(document).ready(function () {
@@ -244,6 +264,10 @@ $(document).ready(function () {
         ]
     });
 
+    // Toast functions
+    window.closeToast = function(){ $("#successToast").addClass("hidden"); }
+    window.closeDeleteToast = function(){ $("#deleteToast").addClass("hidden"); }
+
     function showSuccessToast(title="Panduan berhasil ditambah!", message="Berhasil! Panduan baru telah berhasil ditambahkan.") {
         $("#successToast .font-semibold").text(title);
         $("#successToast p").text(message);
@@ -251,12 +275,20 @@ $(document).ready(function () {
         setTimeout(()=>{ $("#successToast").addClass("hidden"); }, 4000);
     }
 
+    function showDeleteToast(title="Panduan berhasil dihapus!", message="Data panduan telah berhasil dihapus.") {
+        $("#deleteToast .font-semibold").text(title);
+        $("#deleteToast p").text(message);
+        $("#deleteToast").removeClass("hidden");
+        setTimeout(()=>{ $("#deleteToast").addClass("hidden"); }, 4000);
+    }
+
     // Add Panduan
     $("#form_add_panduan").on("submit", function(e){
         e.preventDefault();
         modal_add_panduan.close();
         showSuccessToast();
         table.ajax.reload();
+        this.reset();
     });
 
     // Edit Panduan
@@ -277,6 +309,26 @@ $(document).ready(function () {
         table.ajax.reload();
     });
 
+    $(document).on("click", ".btn-delete-panduan", function(){
+        const row = table.row($(this).parents('tr')).data();
+        
+        Swal.fire({
+            title: 'Apakah Anda yakin?',
+            text: "Data yang dihapus tidak dapat dikembalikan!",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#ef4444',
+            cancelButtonColor: '#6b7280',
+            confirmButtonText: 'Ya, Hapus!',
+            cancelButtonText: 'Batal'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                showDeleteToast();
+                table.ajax.reload();
+            }
+        });
+    });
+
     // Detail Panduan
     $(document).on("click", ".btn-detail-panduan", function () {
         const row = table.row($(this).parents('tr')).data();
@@ -288,32 +340,19 @@ $(document).ready(function () {
             window.open("/uploads/"+row.dokumen,"_blank");
         });
 
-    // Tombol Edit From Detail
-    $("#btnEditFromDetail").off("click").on("click", function(){
-        modal_detail_panduan.close();
-        $("#edit_id_panduan").val(row.id);
-        $("#edit_judul_panduan").val(row.judul);
-        $("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
-        $("#edit_jenis_panduan").val(row.jenis);
-        $("#edit_link_panduan").val(row.link ?? "");
-        modal_edit_panduan.showModal(); 
-    });
+        // Tombol Edit From Detail
+        $("#btnEditFromDetail").off("click").on("click", function(){
+            modal_detail_panduan.close();
+            $("#edit_id_panduan").val(row.id);
+            $("#edit_judul_panduan").val(row.judul);
+            $("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
+            $("#edit_jenis_panduan").val(row.jenis);
+            $("#edit_link_panduan").val(row.link ?? "");
+            modal_edit_panduan.showModal(); 
+        });
 
         modal_detail_panduan.showModal();
     });
 
-
-    // Edit from Detail
-    $("#btnEditFromDetail").on("click", function(){
-        const row = table.row($(this).closest('tr')).data();
-        modal_detail_panduan.close();
-        $("#edit_id_panduan").val(row.id);
-        $("#edit_judul_panduan").val(row.judul);
-        $("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
-        $("#edit_jenis_panduan").val(row.jenis);
-        $("#edit_link_panduan").val(row.link ?? "");
-        modal_edit_panduan.showModal();
-    });
-
 });
-</script>
+</script>
\ No newline at end of file