forked from UKSOURCE/cms.hailearning.edu.vn
255 lines
11 KiB
Plaintext
255 lines
11 KiB
Plaintext
<!-- 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"
|
|
maxlength="72" data-maxlength="72" />
|
|
</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"
|
|
maxlength="48" data-maxlength="48" />
|
|
</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"
|
|
maxlength="24" data-maxlength="24" />
|
|
<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" maxlength="260" data-maxlength="260"><%= 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">The desktop frame is approximately 318x347px. Recommended upload size is at least 750x820px, with a portrait ratio near 0.91:1.</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"
|
|
maxlength="255" data-maxlength="255" />
|
|
<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">The desktop frame is approximately 363x380px. Recommended upload size is at least 760x800px, with a portrait ratio near 0.95:1.</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"
|
|
maxlength="255" data-maxlength="255" />
|
|
<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>
|
|
<small class="text-muted d-block mb-1">Icons display at roughly 24x24px. Recommended assets are SVGs or square images at 48x48px.</small>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" id="whyChooseUsIcon_<%= index %>"
|
|
value="<%= item.icon || '' %>" maxlength="255" data-maxlength="255" />
|
|
<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"
|
|
maxlength="40" data-maxlength="40" />
|
|
</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"
|
|
maxlength="72" data-maxlength="72" />
|
|
</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" maxlength="96" data-maxlength="96" />
|
|
</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"
|
|
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="whyChooseUsCtaHref"
|
|
value="<%= data.whyChooseUs?.ctaButton?.href || '' %>" placeholder="/about"
|
|
maxlength="255" data-maxlength="255" />
|
|
</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 === true;
|
|
|
|
// 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>
|