refactor: enhance home page structure and content management

views/admin/home/sections/testimonials.ejs

@@ -13,49 +13,26 @@
           <div class="row g-3">
             <div class="col-md-6">
               <label class="form-label fw-medium">Heading</label>
-              <input
-                type="text"
-                class="form-control"
-                id="testimonialsHeading"
-                value="<%= data.testimonials?.heading || '' %>"
-                placeholder="e.g., Student Reviews & Testimonials"
-              />
+              <input type="text" class="form-control" id="testimonialsHeading"
+                value="<%= data.testimonials?.heading || '' %>" placeholder="e.g., Student Reviews & Testimonials" />
             </div>
             <div class="col-md-6">
               <label class="form-label fw-medium">Subheading</label>
-              <input
-                type="text"
-                class="form-control"
-                id="testimonialsSubheading"
-                value="<%= data.testimonials?.subheading || '' %>"
-                placeholder="e.g., What Our Students Say"
-              />
+              <input type="text" class="form-control" id="testimonialsSubheading"
+                value="<%= data.testimonials?.subheading || '' %>" placeholder="e.g., What Our Students Say" />
             </div>
             <div class="col-md-6">
               <label class="form-label fw-medium">Video URL</label>
-              <input
-                type="text"
-                class="form-control"
-                id="testimonialsVideoUrl"
-                value="<%= data.testimonials?.videoUrl || '' %>"
-                placeholder="https://www.youtube.com/watch?v=..."
-              />
+              <input type="text" class="form-control" id="testimonialsVideoUrl"
+                value="<%= data.testimonials?.videoUrl || '' %>" placeholder="https://www.youtube.com/watch?v=..." />
             </div>
             <div class="col-md-6">
               <label class="form-label fw-medium">Video Thumbnail</label>
               <div class="input-group mb-2">
-                <input
-                  type="text"
-                  class="form-control"
-                  id="testimonialsVideoThumbnail"
-                  value="<%= data.testimonials?.videoThumbnail || '' %>"
-                />
-                <button
-                  type="button"
-                  class="btn btn-outline-primary btn-upload-image"
-                  data-target-input="testimonialsVideoThumbnail"
-                  data-image-type="home"
-                >
+                <input type="text" class="form-control" id="testimonialsVideoThumbnail"
+                  value="<%= data.testimonials?.videoThumbnail || '' %>" />
+                <button type="button" class="btn btn-outline-primary btn-upload-image"
+                  data-target-input="testimonialsVideoThumbnail" data-image-type="home">
                   <i class="fas fa-upload me-1"></i>Upload
                 </button>
               </div>
@@ -68,92 +45,167 @@
     <!-- Testimonial Items -->
     <div class="col-md-12">
       <div class="card border shadow-sm">
-        <div class="card-header bg-white">
+        <div class="card-header bg-white d-flex justify-content-between align-items-center">
           <h6 class="mb-0">
             <i class="fas fa-comments me-2"></i>Testimonials
           </h6>
+          <button type="button" class="btn btn-sm btn-primary" id="addTestimonialBtn">
+            <i class="fas fa-plus me-1"></i>Add Testimonial
+          </button>
         </div>
-        <div class="card-body">
+        <div class="card-body" id="testimonialsItemsContainer">
           <% (data.testimonials?.items || []).forEach(function(item, index) { %>
-          <div class="card mb-3 bg-light border">
-            <div class="card-body">
-              <h6 class="card-title fw-bold mb-3">Testimonial <%= index + 1 %></h6>
-              <div class="row g-3">
-                <div class="col-md-6">
-                  <label class="form-label fw-medium">Name</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="testimonialsName_<%= index %>"
-                    value="<%= item.name || '' %>"
-                    placeholder="e.g., Sohel Tanvir"
-                  />
-                </div>
-                <div class="col-md-6">
-                  <label class="form-label fw-medium">Role</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="testimonialsRole_<%= index %>"
-                    value="<%= item.role || '' %>"
-                    placeholder="e.g., Student"
-                  />
-                </div>
-                <div class="col-md-6">
-                  <label class="form-label fw-medium">Country</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="testimonialsCountry_<%= index %>"
-                    value="<%= item.country || '' %>"
-                    placeholder="e.g., Canada"
-                  />
-                </div>
-                <div class="col-md-6">
-                  <label class="form-label fw-medium">Rating</label>
-                  <input
-                    type="number"
-                    class="form-control"
-                    id="testimonialsRating_<%= index %>"
-                    value="<%= item.rating || 5 %>"
-                    min="1"
-                    max="5"
-                  />
-                </div>
-                <div class="col-md-12">
-                  <label class="form-label fw-medium">Comment</label>
-                  <textarea
-                    class="form-control"
-                    id="testimonialsComment_<%= index %>"
-                    rows="3"
-                    placeholder="Enter testimonial comment"
-                  ><%= item.comment || '' %></textarea>
-                </div>
-                <div class="col-md-12">
-                  <label class="form-label fw-medium">Avatar</label>
-                  <div class="input-group mb-2">
-                    <input
-                      type="text"
-                      class="form-control"
-                      id="testimonialsAvatar_<%= index %>"
-                      value="<%= item.avatar || '' %>"
-                    />
-                    <button
-                      type="button"
-                      class="btn btn-outline-primary btn-upload-image"
-                      data-target-input="testimonialsAvatar_<%= index %>"
-                      data-image-type="home"
-                    >
-                      <i class="fas fa-upload me-1"></i>Upload
-                    </button>
+            <div class="card mb-3 bg-light border testimonial-item" data-index="<%= index %>">
+              <div class="card-header d-flex justify-content-between align-items-center bg-white">
+                <h6 class="card-title fw-bold mb-0">Testimonial <span class="testimonial-label">
+                    <%= index + 1 %>
+                  </span></h6>
+                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-testimonial">
+                  <i class="fas fa-trash-alt"></i>
+                </button>
+              </div>
+              <div class="card-body">
+                <div class="row g-3">
+                  <div class="col-md-6">
+                    <label class="form-label fw-medium">Name</label>
+                    <input type="text" class="form-control" id="testimonialsName_<%= index %>"
+                      value="<%= item.name || '' %>" placeholder="e.g., Sohel Tanvir" />
+                  </div>
+                  <div class="col-md-6">
+                    <label class="form-label fw-medium">Role</label>
+                    <input type="text" class="form-control" id="testimonialsRole_<%= index %>"
+                      value="<%= item.role || '' %>" placeholder="e.g., Student" />
+                  </div>
+                  <div class="col-md-6">
+                    <label class="form-label fw-medium">Country</label>
+                    <input type="text" class="form-control" id="testimonialsCountry_<%= index %>"
+                      value="<%= item.country || '' %>" placeholder="e.g., Canada" />
+                  </div>
+                  <div class="col-md-6">
+                    <label class="form-label fw-medium">Rating</label>
+                    <input type="number" class="form-control" id="testimonialsRating_<%= index %>"
+                      value="<%= item.rating || 5 %>" min="1" max="5" />
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label fw-medium">Comment</label>
+                    <textarea class="form-control" id="testimonialsComment_<%= index %>" rows="3"
+                      placeholder="Enter testimonial comment"><%= item.comment || '' %></textarea>
+                  </div>
+                  <div class="col-md-12">
+                    <label class="form-label fw-medium">Avatar</label>
+                    <div class="input-group mb-2">
+                      <input type="text" class="form-control" id="testimonialsAvatar_<%= index %>"
+                        value="<%= item.avatar || '' %>" />
+                      <button type="button" class="btn btn-outline-primary btn-upload-image"
+                        data-target-input="testimonialsAvatar_<%= index %>" data-image-type="home">
+                        <i class="fas fa-upload me-1"></i>Upload
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <% }); %>
+            <% }); %>
         </div>
       </div>
     </div>
   </div>
 </div>
+
+<script>
+  // Register scraper to collect Testimonials data before form submit
+  window.homeScrapers = window.homeScrapers || {};
+  window.homeScrapers.testimonials = () => {
+    const getVal = (id) => (document.getElementById(id)?.value || "").trim();
+
+    const items = [];
+    document.querySelectorAll(".testimonial-item").forEach((el, idx) => {
+      const index = el.getAttribute("data-index") || idx;
+
+      const name = getVal(`testimonialsName_${index}`);
+      const role = getVal(`testimonialsRole_${index}`);
+      const country = getVal(`testimonialsCountry_${index}`);
+      const ratingStr = getVal(`testimonialsRating_${index}`);
+      const rating = ratingStr ? parseInt(ratingStr, 10) : 5;
+      const comment = getVal(`testimonialsComment_${index}`);
+      const avatar = getVal(`testimonialsAvatar_${index}`);
+
+      if (name || role || country || comment || avatar) {
+        items.push({
+          name,
+          role,
+          country,
+          rating: isNaN(rating) ? 5 : Math.min(Math.max(rating, 1), 5),
+          comment,
+          avatar,
+        });
+      }
+    });
+
+    return {
+      heading: getVal("testimonialsHeading"),
+      subheading: getVal("testimonialsSubheading"),
+      videoUrl: getVal("testimonialsVideoUrl"),
+      videoThumbnail: getVal("testimonialsVideoThumbnail"),
+      items,
+    };
+  };
+
+  // Client-side add/remove for testimonials
+  document.addEventListener("DOMContentLoaded", function () {
+    const container = document.getElementById("testimonialsItemsContainer");
+    const addBtn = document.getElementById("addTestimonialBtn");
+
+    if (!container || !addBtn) return;
+
+    const updateLabels = () => {
+      container.querySelectorAll(".testimonial-item").forEach((el, idx) => {
+        el.setAttribute("data-index", String(idx));
+
+        const label = el.querySelector(".testimonial-label");
+        if (label) label.textContent = String(idx + 1);
+
+        el.querySelectorAll("input, textarea").forEach((input) => {
+          if (!input.id) return;
+          const newId = input.id.replace(/testimonials\w+_\d+/, (match) => {
+            const [prefix] = match.split("_");
+            return `${prefix}_${idx}`;
+          });
+          input.id = newId;
+        });
+      });
+    };
+
+    addBtn.addEventListener("click", () => {
+      const template = container.querySelector(".testimonial-item");
+      if (!template) return;
+
+      const clone = template.cloneNode(true);
+
+      clone.querySelectorAll("input, textarea").forEach((input) => {
+        input.value = "";
+      });
+
+      container.appendChild(clone);
+      updateLabels();
+    });
+
+    container.addEventListener("click", (e) => {
+      const btn = e.target.closest(".btn-remove-testimonial");
+      if (!btn) return;
+
+      const card = btn.closest(".testimonial-item");
+      if (!card) return;
+
+      const all = container.querySelectorAll(".testimonial-item");
+      if (all.length <= 1) {
+        return;
+      }
+
+      card.remove();
+      updateLabels();
+    });
+
+    updateLabels();
+  });
+</script>