fix: enhance FAQ management and add delete confirmation modal

views/admin/service/details.ejs

@@ -249,9 +249,9 @@
                                   </div>
                                   <div class="row g-3">
                                     <div class="col-md-6">
-                                      <label class="form-label">ID</label>
+                                      <label class="form-label">ID (Auto-generated)</label>
                                       <input type="text" class="form-control faq-id" 
-                                             value="<%= faq.id || 'faq-' + (index + 1) %>" required>
+                                             value="<%= faq.id || 'faq-' + (index + 1) %>" readonly>
                                     </div>
                                     <div class="col-md-6">
                                       <label class="form-label">Expanded by Default</label>
@@ -399,20 +399,22 @@ function removeFeature(button) {
 
 function addFAQ() {
   const container = document.getElementById('faqContainer');
+  const newFaqId = generateFAQId();
+  const faqNumber = document.querySelectorAll('.faq-item').length + 1;
   const faqHtml = `
     <div class="card mb-3 faq-item">
       <div class="card-body">
         <div class="d-flex justify-content-between align-items-center mb-3">
-          <h6 class="mb-0 text-decoration-underline">FAQ ${faqIndex + 1}</h6>
+          <h6 class="mb-0 text-decoration-underline">FAQ ${faqNumber}</h6>
           <button type="button" class="btn btn-danger btn-sm" onclick="removeFAQ(this)">
             <i class="fas fa-trash"></i>
           </button>
         </div>
         <div class="row g-3">
           <div class="col-md-6">
-            <label class="form-label">ID</label>
+            <label class="form-label">ID (Auto-generated)</label>
             <input type="text" class="form-control faq-id" 
-                   value="faq-${faqIndex + 1}" required>
+                   value="${newFaqId}" readonly>
           </div>
           <div class="col-md-6">
             <label class="form-label">Expanded by Default</label>
@@ -441,13 +443,43 @@ function addFAQ() {
   faqIndex++;
 }
 
+function updateFAQId(questionInput) {
+  // Không cần update ID nữa vì đã tự động theo số thứ tự
+}
+
 function removeFAQ(button) {
   const faqItem = button.closest('.faq-item');
   if (faqItem) {
     faqItem.remove();
+    // Cập nhật lại số thứ tự và ID của tất cả FAQ
+    updateFAQNumbers();
   }
 }
 
+function generateFAQId() {
+  // Đếm số lượng FAQ hiện tại và tạo ID tiếp theo
+  const existingFAQs = document.querySelectorAll('.faq-item');
+  const nextNumber = existingFAQs.length + 1;
+  return `faq-${nextNumber}`;
+}
+
+function updateFAQNumbers() {
+  // Cập nhật lại tất cả FAQ ID và số thứ tự
+  const faqItems = document.querySelectorAll('.faq-item');
+  faqItems.forEach((item, index) => {
+    const number = index + 1;
+    const idInput = item.querySelector('.faq-id');
+    const titleElement = item.querySelector('h6');
+    
+    if (idInput) {
+      idInput.value = `faq-${number}`;
+    }
+    if (titleElement) {
+      titleElement.textContent = `FAQ ${number}`;
+    }
+  });
+}
+
 function updateAllJsonInputs(data) {
   // Collect basic details data
   const details = {