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

<!-- Visa Countries Tab -->
<div class="tab-pane fade" id="visacountries" 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="visaCountriesEnabled"
              <%=(data.visaCountries?.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="visaCountriesHeading"
                value="<%= data.visaCountries?.heading || '' %>" placeholder="e.g., Visa & VISAWAY Services To UK" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="visaCountriesSubheading"
                value="<%= data.visaCountries?.subheading || '' %>" placeholder="e.g., UK. United Kingdom" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea class="form-control" id="visaCountriesDescription" rows="3"
                placeholder="Enter description"><%= data.visaCountries?.description || '' %></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Countries (Featured Country configuration) -->
    <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-globe me-2"></i>Featured Country
          </h6>
          <small class="text-muted">This country is used in the home page feature section.</small>
        </div>
        <div class="card-body">
          <% const featured=(data.visaCountries && Array.isArray(data.visaCountries.countries) &&
            data.visaCountries.countries.length> 0)
            ? data.visaCountries.countries[0]
            : {};
            %>
            <div class="card mb-3 bg-light border visa-country-item" data-index="0">
              <div class="card-body">
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Country Name</label>
                    <input type="text" class="form-control" id="visaCountriesName_0" value="<%= featured.name || '' %>"
                      placeholder="e.g., United Kingdom" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Country Code</label>
                    <input type="text" class="form-control" id="visaCountriesCode_0" value="<%= featured.code || '' %>"
                      placeholder="e.g., UK" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Flag / Illustration Image</label>
                    <div class="input-group mb-2">
                      <input type="text" class="form-control" id="visaCountriesFlag_0"
                        value="<%= featured.flag || '' %>" placeholder="/assets/img/home-1/feature/shape.png" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image"
                        data-target-input="visaCountriesFlag_0" 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">Link</label>
                    <input type="text" class="form-control" id="visaCountriesLink_0" value="<%= featured.link || '' %>"
                      placeholder="/country-details/uk" />
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Visa Types (comma-separated)</label>
                    <textarea class="form-control" id="visaCountriesVisaTypes_0" rows="2"
                      placeholder="e.g., Student Visa, Work Visa, Tourist Visa"><%= (featured.visaTypes || []).join(', ') %></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="visaCountriesCtaLabel"
                value="<%= data.visaCountries?.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="visaCountriesCtaHref"
                value="<%= data.visaCountries?.ctaButton?.href || '' %>" placeholder="/contact" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

    const enabled = document.getElementById("visaCountriesEnabled")?.checked !== false

    const visaTypesRaw = getVal("visaCountriesVisaTypes_0");
    const visaTypes = visaTypesRaw ? visaTypesRaw.split(",").map((s) => s.trim()).filter(Boolean) : [];

    const featuredCountry = {
      name: getVal("visaCountriesName_0"),
      code: getVal("visaCountriesCode_0"),
      flag: getVal("visaCountriesFlag_0"),
      link: getVal("visaCountriesLink_0"),
      visaTypes
    };

    return {
      enabled,
      heading: getVal("visaCountriesHeading"),
      subheading: getVal("visaCountriesSubheading"),
      description: getVal("visaCountriesDescription"),
      countries: [featuredCountry],
      ctaButton: {
        label: getVal("visaCountriesCtaLabel"),
        href: getVal("visaCountriesCtaHref")
      }
    };
  };
</script>