refactor: enhance home page structure and content management

views/admin/home/sections/visaSolutions.ejs

@@ -13,23 +13,13 @@
           <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="visaSolutionsHeading"
-                value="<%= data.visaSolutions?.heading || '' %>"
-                placeholder="e.g., Comprehensive Visa Solutions"
-              />
+              <input type="text" class="form-control" id="visaSolutionsHeading"
+                value="<%= data.visaSolutions?.heading || '' %>" placeholder="e.g., Comprehensive Visa Solutions" />
             </div>
             <div class="col-md-6">
               <label class="form-label fw-medium">Subheading</label>
-              <input
-                type="text"
-                class="form-control"
-                id="visaSolutionsSubheading"
-                value="<%= data.visaSolutions?.subheading || '' %>"
-                placeholder="e.g., Our Expert Services"
-              />
+              <input type="text" class="form-control" id="visaSolutionsSubheading"
+                value="<%= data.visaSolutions?.subheading || '' %>" placeholder="e.g., Our Expert Services" />
             </div>
           </div>
         </div>
@@ -39,62 +29,109 @@
     <!-- Services 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-list-ul me-2"></i>Visa Solutions Items
           </h6>
         </div>
-        <div class="card-body">
-          <% (data.visaSolutions?.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">Service <%= index + 1 %></h6>
-              <div class="row g-3">
-                <div class="col-md-3">
-                  <label class="form-label fw-medium">Number</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="visaSolutionsNumber_<%= index %>"
-                    value="<%= item.number || '' %>"
-                    placeholder="e.g., 01"
-                  />
+        <div class="card-body" id="visaSolutionsItemsContainer">
+          <% const vsItems=(data.visaSolutions && Array.isArray(data.visaSolutions.items) &&
+            data.visaSolutions.items.length===4) ? data.visaSolutions.items : (data.visaSolutions &&
+            Array.isArray(data.visaSolutions.items) && data.visaSolutions.items.length> 0)
+            ? (function () {
+            const clone = data.visaSolutions.items.slice(0, 4);
+            while (clone.length < 4) clone.push({}); return clone; })() : [{}, {}, {}, {}]; %>
+              <% vsItems.forEach(function(item, index) { %>
+                <div class="card mb-3 bg-light border visa-solution-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">Service <span class="visa-solution-label">
+                        <%= index + 1 %>
+                      </span></h6>
+                  </div>
+                  <div class="card-body">
+                    <div class="row g-3">
+                      <div class="col-md-3">
+                        <label class="form-label fw-medium">Number</label>
+                        <input type="text" class="form-control" id="visaSolutionsNumber_<%= index %>"
+                          value="<%= item.number || '' %>" placeholder="e.g., 01" />
+                      </div>
+                      <div class="col-md-9">
+                        <label class="form-label fw-medium">Title</label>
+                        <input type="text" class="form-control" id="visaSolutionsTitle_<%= index %>"
+                          value="<%= item.title || '' %>" placeholder="e.g., Student Visa Guidance" />
+                      </div>
+                      <div class="col-md-12">
+                        <label class="form-label fw-medium">Description</label>
+                        <textarea class="form-control" id="visaSolutionsDescription_<%= index %>" rows="2"
+                          placeholder="Enter description"><%= item.description || '' %></textarea>
+                      </div>
+                      <div class="col-md-12">
+                        <label class="form-label fw-medium">Link</label>
+                        <input type="text" class="form-control" id="visaSolutionsLink_<%= index %>"
+                          value="<%= item.link || '' %>" placeholder="/service-details" />
+                      </div>
+                    </div>
+                  </div>
                 </div>
-                <div class="col-md-9">
-                  <label class="form-label fw-medium">Title</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="visaSolutionsTitle_<%= index %>"
-                    value="<%= item.title || '' %>"
-                    placeholder="e.g., Student Visa Guidance"
-                  />
-                </div>
-                <div class="col-md-12">
-                  <label class="form-label fw-medium">Description</label>
-                  <textarea
-                    class="form-control"
-                    id="visaSolutionsDescription_<%= index %>"
-                    rows="2"
-                    placeholder="Enter description"
-                  ><%= item.description || '' %></textarea>
-                </div>
-                <div class="col-md-12">
-                  <label class="form-label fw-medium">Link</label>
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="visaSolutionsLink_<%= index %>"
-                    value="<%= item.link || '' %>"
-                    placeholder="/service-details"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <% }); %>
+                <% }); %>
         </div>
       </div>
     </div>
   </div>
 </div>
+
+<script>
+  // Register scraper to collect Visa Solutions data before form submit
+  window.homeScrapers = window.homeScrapers || {};
+  window.homeScrapers.visaSolutions = () => {
+    const getVal = (id) => (document.getElementById(id)?.value || "").trim();
+
+    const items = [];
+    document.querySelectorAll(".visa-solution-item").forEach((el, idx) => {
+      const index = el.getAttribute("data-index") || idx;
+
+      const number = getVal(`visaSolutionsNumber_${index}`);
+      const title = getVal(`visaSolutionsTitle_${index}`);
+      const description = getVal(`visaSolutionsDescription_${index}`);
+      const link = getVal(`visaSolutionsLink_${index}`);
+
+      if (number || title || description || link) {
+        items.push({ number, title, description, link });
+      }
+    });
+
+    return {
+      heading: getVal("visaSolutionsHeading"),
+      subheading: getVal("visaSolutionsSubheading"),
+      items,
+    };
+  };
+
+  // Client-side add/remove for visa solutions
+  document.addEventListener("DOMContentLoaded", function () {
+    const container = document.getElementById("visaSolutionsItemsContainer");
+    if (!container) return;
+
+    const updateLabels = () => {
+      const items = container.querySelectorAll(".visa-solution-item");
+
+      items.forEach((el, idx) => {
+        el.setAttribute("data-index", String(idx));
+
+        const label = el.querySelector(".visa-solution-label");
+        if (label) label.textContent = String(idx + 1);
+
+        el.querySelectorAll("input, textarea").forEach((input) => {
+          if (!input.id) return;
+          const newId = input.id.replace(/visaSolutions\w+_\d+/, (match) => {
+            const [prefix] = match.split("_");
+            return `${prefix}_${idx}`;
+          });
+          input.id = newId;
+        });
+      });
+    };
+
+    updateLabels();
+  });
+</script>