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

<!-- Why Choose Us Tab -->
<div class="tab-pane fade" id="whychooseus" 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="whyChooseUsEnabled" 
            <%= (data.whyChooseUs.enabled !== false ) ? 'checked' : '' %>>
          </div>
        </div>
      </div>

      <div class="card border shadow-sm mb-3">
        <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="whyChooseUsHeading"
                value="<%= data.whyChooseUs?.heading || '' %>"
                placeholder="e.g., Turning Study Abroad Dreams Into Reality" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="whyChooseUsSubheading"
                value="<%= data.whyChooseUs?.subheading || '' %>" placeholder="e.g., About Our Consultancy" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Highlight Word (Optional)</label>
              <input type="text" class="form-control" id="whyChooseUsHighlightWord"
                value="<%= data.whyChooseUs?.highlightWord || '' %>" placeholder="e.g., Dreams" />
              <small class="text-muted">This word in the heading will be wrapped in a colored span.</small>
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea class="form-control" id="whyChooseUsDescription" rows="3"
                placeholder="Enter description"><%= data.whyChooseUs?.description || '' %></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- About Images -->
    <div class="col-md-12">
      <div class="card border shadow-sm mb-3">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-images me-2"></i>About Images (Left side)
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-medium">Main Image</label>
              <small class="text-muted d-block mb-1">Recommended size: 375x419px</small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="whyChooseUsMainImage"
                  value="<%= data.whyChooseUs?.mainImage || '' %>" placeholder="/assets/img/home-1/about/about-1.jpg" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="whyChooseUsMainImage" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
                </button>
              </div>
              <% if (data.whyChooseUs?.mainImage) { %>
                <div class="mt-2">
                  <img src="<%= data.whyChooseUs.mainImage %>" class="img-thumbnail"
                    style="height: 200px; width: 100%; object-fit: cover;" alt="Main about image preview" />
                </div>
                <% } %>
            </div>

            <div class="col-md-6">
              <label class="form-label fw-medium">Secondary Image</label>
              <small class="text-muted d-block mb-1">Recommended size: 376x394px</small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="whyChooseUsSecondaryImage"
                  value="<%= data.whyChooseUs?.secondaryImage || '' %>"
                  placeholder="/assets/img/home-1/about/about-02.jpg" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="whyChooseUsSecondaryImage" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
                </button>
              </div>
              <% if (data.whyChooseUs?.secondaryImage) { %>
                <div class="mt-2">
                  <img src="<%= data.whyChooseUs.secondaryImage %>" class="img-thumbnail"
                    style="height: 200px; width: 100%; object-fit: cover;" alt="Secondary about image preview" />
                </div>
                <% } %>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Items -->
    <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-list-ul me-2"></i>Why Choose Us Items
          </h6>
        </div>
        <div class="card-body">
          <% (data.whyChooseUs?.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">Item <%= index + 1 %>
                </h6>
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Icon URL</label>
                    <div class="input-group mb-2">
                      <input type="text" class="form-control" id="whyChooseUsIcon_<%= index %>"
                        value="<%= item.icon || '' %>" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image"
                        data-target-input="whyChooseUsIcon_<%= index %>" data-image-type="home">
                        <i class="fas fa-upload me-1"></i>Upload
                      </button>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Title</label>
                    <input type="text" class="form-control" id="whyChooseUsTitle_<%= index %>"
                      value="<%= item.title || '' %>" placeholder="e.g., Global Reach" />
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Description</label>
                    <input type="text" class="form-control" id="whyChooseUsItemDescription_<%= index %>"
                      value="<%= item.description || '' %>" placeholder="e.g., Expanding Opportunities Worldwide" />
                  </div>
                </div>
              </div>
            </div>
            <% }); %>
        </div>
      </div>
    </div>

    <!-- Features -->
    <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-star me-2"></i>Features
          </h6>
        </div>
        <div class="card-body">
          <% (data.whyChooseUs?.features || []).forEach(function(feature, index) { %>
            <div class="mb-3">
              <label class="form-label fw-medium">Feature <%= index + 1 %></label>
              <input type="text" class="form-control" id="whyChooseUsFeature_<%= index %>" value="<%= feature %>"
                placeholder="Enter feature" />
            </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="whyChooseUsCtaLabel"
                value="<%= data.whyChooseUs?.ctaButton?.label || '' %>" placeholder="e.g., Get Started" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Link</label>
              <input type="text" class="form-control" id="whyChooseUsCtaHref"
                value="<%= data.whyChooseUs?.ctaButton?.href || '' %>" placeholder="/about" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Register scraper to collect Why Choose Us data before form submit
  window.homeScrapers = window.homeScrapers || {};
  window.homeScrapers.whyChooseUs = () => {
    const getVal = (id) => (document.getElementById(id)?.value || "").trim();
    const enabled = document.getElementById("whyChooseUsEnabled")?.checked !== false;

    // Collect items
    const items = [];
    document.querySelectorAll('input[id^="whyChooseUsTitle_"]').forEach((titleInput) => {
      const id = titleInput.id || "";
      const match = id.match(/whyChooseUsTitle_(\d+)/);
      if (!match) return;
      const idx = match[1];

      const title = (titleInput.value || "").trim();
      const icon = getVal(`whyChooseUsIcon_${idx}`);
      const description = getVal(`whyChooseUsItemDescription_${idx}`);

      // Bỏ qua item trống hoàn toàn
      if (title || icon || description) {
        items.push({ icon, title, description });
      }
    });

    // Collect features
    const features = [];
    document.querySelectorAll('input[id^="whyChooseUsFeature_"]').forEach((featureInput) => {
      const value = (featureInput.value || "").trim();
      if (value) {
        features.push(value);
      }
    });

    return {
      heading: getVal("whyChooseUsHeading"),
      subheading: getVal("whyChooseUsSubheading"),
      description: getVal("whyChooseUsDescription"),
      highlightWord: getVal("whyChooseUsHighlightWord"),
      mainImage: getVal("whyChooseUsMainImage"),
      secondaryImage: getVal("whyChooseUsSecondaryImage"),
      items,
      features,
      enabled,
      ctaButton: {
        label: getVal("whyChooseUsCtaLabel"),
        href: getVal("whyChooseUsCtaHref"),
      },
    };
  };
</script>