cms.uldp.edu.vn/views/admin/home/sections/visaSolutions.ejs

<!-- Visa Solutions Tab -->
<div class="tab-pane fade" id="visasolutions" role="tabpanel">
  <div class="row g-4">
    <!-- Basic Info -->
    <div class="col-md-12">
      <div class="card border shadow-sm mb-1">
        <div class="card-header bg-white d-flex justify-content-center align-items-center">
           <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="visaSolutionsEnabled"
            <%= (data.visaSolutions?.enabled !== false ) ? 'checked' : '' %>>
          </div>
        </div>
      </div>

      <div class="card border shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h6 class="mb-0">
            <i class="fas fa-info-circle me-2"></i>Basic Information
          </h6>
        </div>
        <div class="card-body">
          <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"
                maxlength="64" data-maxlength="64" />
            </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"
                maxlength="40" data-maxlength="40" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Services Items -->
    <div class="col-md-12">
      <div class="card border shadow-sm">
        <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" 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"
                          maxlength="4" data-maxlength="4" />
                      </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"
                          maxlength="56" data-maxlength="56" />
                      </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" maxlength="180" data-maxlength="180"><%= 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"
                          maxlength="255" data-maxlength="255" />
                      </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 enabled = document.getElementById("visaSolutionsEnabled")?.checked !== false;

    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,
      enabled
    };
  };

  // 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>