Added dummy modal

src/Views/Home/Index.cshtml

@@ -40,7 +40,12 @@
                     <td>
                         <div class="d-flex gap-2">
                             <button class="btn btn-sm btn-primary">Update</button>
-                            <button class="btn btn-sm btn-danger">🗑️ Delete</button>
+                            <button class="btn btn-sm btn-danger btn-delete" 
+                                data-asset-id="4827391"
+                                data-bs-toggle="modal"
+                                data-bs-target="#deleteModal">
+                                🗑️ Delete
+                            </button>
                         </div>
                     </td>
                 </tr>
@@ -52,7 +57,12 @@
                     <td>
                         <div class="d-flex gap-2">
                             <button class="btn btn-sm btn-primary">Update</button>
-                            <button class="btn btn-sm btn-danger">🗑️ Delete</button>
+                            <button class="btn btn-sm btn-danger btn-delete" 
+                                data-asset-id="9150732"
+                                data-bs-toggle="modal"
+                                data-bs-target="#deleteModal">
+                                🗑️ Delete
+                            </button>
                         </div>
                     </td>
                 </tr>
@@ -64,7 +74,12 @@
                     <td>
                         <div class="d-flex gap-2">
                             <button class="btn btn-sm btn-primary">Update</button>
-                            <button class="btn btn-sm btn-danger">🗑️ Delete</button>
+                            <button class="btn btn-sm btn-danger btn-delete" 
+                                data-asset-id="1642235"
+                                data-bs-toggle="modal"
+                                data-bs-target="#deleteModal">
+                                🗑️ Delete
+                            </button>
                         </div>
                     </td>
                 </tr>
@@ -73,6 +88,133 @@
     </div>
 </div>
 
+<!-- Asset Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the asset <strong id="assetName"></strong> (ID: <span id="assetId"></span>)?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form id="deleteForm" method="post" action="">
+                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const deleteModal = document.getElementById('deleteModal');
+        let currentButton = null; // The delete button that opened the modal
+
+        deleteModal.addEventListener('show.bs.modal', event => {
+            currentButton = event.relatedTarget; // Button that triggered the modal
+            const assetId = currentButton.getAttribute('data-asset-id');
+            const assetName = currentButton.getAttribute('data-asset-name');
+
+            deleteModal.querySelector('#assetId').textContent = assetId;
+            deleteModal.querySelector('#assetName').textContent = assetName;
+
+            // Store the delete URL for later use
+            deleteModal.querySelector('#deleteForm').dataset.url = `/Assets/Delete?cn=${assetId}`;
+        });
+
+        // Handle submit of deleteForm via fetch()
+        const deleteForm = document.getElementById('deleteForm');
+        deleteForm.addEventListener('submit', async e => {
+            e.preventDefault();
+
+            const url = deleteForm.dataset.url;
+            const assetId = deleteModal.querySelector('#assetId').textContent;
+
+            try {
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    }//,
+                    //body: JSON.stringify({ id: assetId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Close the modal
+                    const modal = bootstrap.Modal.getInstance(deleteModal);
+                    modal.hide();
+
+                    // Remove the row from the table
+                    const row = currentButton.closest('tr');
+                    row.classList.add('table-danger');
+                    setTimeout(() => row.remove(), 300);
+
+                    showToast('Asset deleted successfully', 'success');
+                } else {
+                    showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
+                }
+            } catch (error) {
+                console.error(error);
+                showToast('Error contacting server', 'danger');
+            }
+        });
+
+        // Simple toast helper
+        function showToast(message, type) {
+            const toastContainer = document.getElementById('toastContainer') || createToastContainer();
+            const toast = document.createElement('div');
+            toast.className = `toast align-items-center text-white bg-${type} border-0`;
+            toast.role = 'alert';
+            toast.innerHTML = `
+                <div class="d-flex">
+                    <div class="toast-body">${message}</div>
+                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+                </div>
+            `;
+            toastContainer.appendChild(toast);
+            const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
+            bsToast.show();
+            toast.addEventListener('hidden.bs.toast', () => toast.remove());
+        }
+
+        function createToastContainer() {
+            const container = document.createElement('div');
+            container.id = 'toastContainer';
+            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+            document.body.appendChild(container);
+            return container;
+        }
+    });
+</script>
+@* <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        alert("DEBUG@1");
+        const deleteModal = document.getElementById('deleteModal');
+        deleteModal.addEventListener('show.bs.modal', event => {
+            alert("DEBUG@2");
+            const button = event.relatedTarget; // Button that triggered the modal
+            const assetId = button.getAttribute('data-asset-id');
+            const assetName = button.getAttribute('data-asset-name');
+
+            // Update modal content
+            deleteModal.querySelector('#assetId').textContent = assetId;
+            deleteModal.querySelector('#assetName').textContent = assetName;
+
+            // Set the form action dynamically
+            const form = deleteModal.querySelector('#deleteForm');
+            form.action = `/Assets/Delete/${assetId}`; // <-- adjust controller/action as needed
+        });
+    });
+</script> *@
+
 <!-- 
 
 In case someone wants to reread this: