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">
        <div class="card-header bg-white">
          <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"
                maxlength="88" data-maxlength="88" />
            </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"
                maxlength="56" data-maxlength="56" />
            </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" maxlength="240" data-maxlength="240"><%= 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" maxlength="40" data-maxlength="40" />
                  </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" maxlength="12" data-maxlength="12" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Flag / Illustration Image</label>
                    <small class="text-muted d-block mb-1">The desktop image frame is approximately 840x830px. Recommended assets are near-square images at least 1000x1000px.</small>
                    <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"
                        maxlength="255" data-maxlength="255" />
                      <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" maxlength="255" data-maxlength="255" />
                  </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" maxlength="220" data-maxlength="220"><%= (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"
                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="visaCountriesCtaHref"
                value="<%= data.visaCountries?.ctaButton?.href || '' %>" placeholder="/contact"
                maxlength="255" data-maxlength="255" />
            </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 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 {
      heading: getVal("visaCountriesHeading"),
      subheading: getVal("visaCountriesSubheading"),
      description: getVal("visaCountriesDescription"),
      countries: [featuredCountry],
      ctaButton: {
        label: getVal("visaCountriesCtaLabel"),
        href: getVal("visaCountriesCtaHref")
      }
    };
  };
</script>