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

<!-- FAQ Tab -->
<div class="tab-pane fade" id="faq" 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="faqEnabled"
            <%= (data.faq?.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 class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="faqEnabled"
            <%= (data.faq?.enabled !== false ) ? 'checked' : '' %>>
          </div>
        </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="faqHeading" value="<%= data.faq?.heading || '' %>"
                placeholder="e.g., Got Questions? We've Got Answers" 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="faqSubheading" value="<%= data.faq?.subheading || '' %>"
                placeholder="e.g., Visa FAQs" maxlength="40" data-maxlength="40" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea class="form-control" id="faqDescription" rows="3"
                placeholder="Enter description" maxlength="220" data-maxlength="220"><%= data.faq?.description || '' %></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- FAQ 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-question-circle me-2"></i>FAQ Items
          </h6>
        </div>
        <div class="card-body" id="faqItemsContainer">
          <%
            const faqItems = (data.faq && Array.isArray(data.faq.items) && data.faq.items.length === 5)
              ? data.faq.items
              : (data.faq && Array.isArray(data.faq.items) && data.faq.items.length > 0)
                ? (function () {
                    const clone = data.faq.items.slice(0, 5);
                    while (clone.length < 5) clone.push({});
                    return clone;
                  })()
                : [{}, {}, {}, {}, {}];
          %>
          <% faqItems.forEach(function(item, index) { %>
          <div class="card mb-3 bg-light border faq-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">FAQ
                <span class="faq-item-label">
                  <%= index + 1 %>
                </span>
              </h6>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-12">
                  <label class="form-label fw-medium">Question</label>
                  <input
                    type="text"
                    class="form-control"
                    id="faqQuestion_<%= index %>"
                    value="<%= item.question || '' %>"
                    maxlength="120"
                    data-maxlength="120"
                    placeholder="Enter question"
                  />
                </div>
                <div class="col-md-12">
                  <label class="form-label fw-medium">Answer</label>
                  <textarea
                    class="form-control"
                    id="faqAnswer_<%= index %>"
                    rows="3"
                    maxlength="320"
                    data-maxlength="320"
                    placeholder="Enter answer"
                  ><%= item.answer || '' %></textarea>
                </div>
              </div>
            </div>
          </div>
          <% }); %>
        </div>
      </div>
    </div>

    <!-- CTA Button -->
    <div class="col-md-12">
      <div class="card border shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-mouse-pointer me-2"></i>CTA Button
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-medium">Label</label>
              <input type="text" class="form-control" id="faqCtaLabel" value="<%= data.faq?.ctaButton?.label || '' %>"
                placeholder="e.g., contact us" maxlength="32" data-maxlength="32" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Link</label>
              <input type="text" class="form-control" id="faqCtaHref" value="<%= data.faq?.ctaButton?.href || '' %>"
                placeholder="/contact" maxlength="255" data-maxlength="255" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Register scraper to collect FAQ data before form submit
  window.homeScrapers = window.homeScrapers || {};
  window.homeScrapers.faq = () => {
    const getVal = (id) => (document.getElementById(id)?.value || "").trim();

    const enabled = document.getElementById('faqEnabled')?.checked !== false;

    const items = [];
    document.querySelectorAll(".faq-item").forEach((el, idx) => {
      const index = el.getAttribute("data-index") || idx;

      const question = getVal(`faqQuestion_${index}`);
      const answer = getVal(`faqAnswer_${index}`);

      if (question || answer) {
        items.push({ question, answer });
      }
    });

    return {
      heading: getVal("faqHeading"),
      subheading: getVal("faqSubheading"),
      description: getVal("faqDescription"),
      ctaButton: {
        label: getVal("faqCtaLabel"),
        href: getVal("faqCtaHref")
      },
      items,
      enabled
    };
  };
</script>