forked from UKSOURCE/cms.hailearning.edu.vn
238 lines
10 KiB
Plaintext
238 lines
10 KiB
Plaintext
<!-- Testimonials Tab -->
|
|
<div class="tab-pane fade" id="testimonials" 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="testimonialEnabled"
|
|
<%=(data.testimonials?.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="testimonialsHeading"
|
|
value="<%= data.testimonials?.heading || '' %>" placeholder="e.g., Student Reviews & Testimonials"
|
|
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="testimonialsSubheading"
|
|
value="<%= data.testimonials?.subheading || '' %>" placeholder="e.g., What Our Students Say"
|
|
maxlength="40" data-maxlength="40" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Video URL</label>
|
|
<input type="text" class="form-control" id="testimonialsVideoUrl"
|
|
value="<%= data.testimonials?.videoUrl || '' %>" placeholder="https://www.youtube.com/watch?v=..."
|
|
maxlength="255" data-maxlength="255" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Video Thumbnail</label>
|
|
<small class="text-muted d-block mb-1">The desktop thumbnail frame is approximately 416x370px. Recommended upload size is at least 832x740px.</small>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" id="testimonialsVideoThumbnail"
|
|
value="<%= data.testimonials?.videoThumbnail || '' %>" maxlength="255" data-maxlength="255" />
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image"
|
|
data-target-input="testimonialsVideoThumbnail" data-image-type="home">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 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-comments me-2"></i>Testimonials
|
|
</h6>
|
|
<button type="button" class="btn btn-sm btn-primary" id="addTestimonialBtn">
|
|
<i class="fas fa-plus me-1"></i>Add Testimonial
|
|
</button>
|
|
</div>
|
|
<div class="card-body" id="testimonialsItemsContainer">
|
|
<% (data.testimonials?.items || []).forEach(function(item, index) { %>
|
|
<div class="card mb-3 bg-light border testimonial-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">Testimonial <span class="testimonial-label">
|
|
<%= index + 1 %>
|
|
</span></h6>
|
|
<button type="button" class="btn btn-sm btn-outline-danger btn-remove-testimonial">
|
|
<i class="fas fa-trash-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Name</label>
|
|
<input type="text" class="form-control" id="testimonialsName_<%= index %>"
|
|
value="<%= item.name || '' %>" placeholder="e.g., Sohel Tanvir"
|
|
maxlength="48" data-maxlength="48" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Role</label>
|
|
<input type="text" class="form-control" id="testimonialsRole_<%= index %>"
|
|
value="<%= item.role || '' %>" placeholder="e.g., Student"
|
|
maxlength="48" data-maxlength="48" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Country</label>
|
|
<input type="text" class="form-control" id="testimonialsCountry_<%= index %>"
|
|
value="<%= item.country || '' %>" placeholder="e.g., Canada"
|
|
maxlength="48" data-maxlength="48" />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Rating</label>
|
|
<input type="number" class="form-control" id="testimonialsRating_<%= index %>"
|
|
value="<%= item.rating || 5 %>" min="1" max="5" />
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Comment</label>
|
|
<textarea class="form-control" id="testimonialsComment_<%= index %>" rows="3"
|
|
placeholder="Enter testimonial comment" maxlength="280" data-maxlength="280"><%= item.comment || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Avatar</label>
|
|
<small class="text-muted d-block mb-1">Avatars display at roughly 48x48px. Recommended square image sizes are 96x96px or 128x128px.</small>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" id="testimonialsAvatar_<%= index %>"
|
|
value="<%= item.avatar || '' %>" maxlength="255" data-maxlength="255" />
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image"
|
|
data-target-input="testimonialsAvatar_<%= index %>" data-image-type="home">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Register scraper to collect Testimonials data before form submit
|
|
window.homeScrapers = window.homeScrapers || {};
|
|
window.homeScrapers.testimonials = () => {
|
|
const getVal = (id) => (document.getElementById(id)?.value || "").trim();
|
|
|
|
const enabled = document.getElementById("testimonialEnabled")?.checked !== false;
|
|
|
|
const items = [];
|
|
document.querySelectorAll(".testimonial-item").forEach((el, idx) => {
|
|
const index = el.getAttribute("data-index") || idx;
|
|
|
|
const name = getVal(`testimonialsName_${index}`);
|
|
const role = getVal(`testimonialsRole_${index}`);
|
|
const country = getVal(`testimonialsCountry_${index}`);
|
|
const ratingStr = getVal(`testimonialsRating_${index}`);
|
|
const rating = ratingStr ? parseInt(ratingStr, 10) : 5;
|
|
const comment = getVal(`testimonialsComment_${index}`);
|
|
const avatar = getVal(`testimonialsAvatar_${index}`);
|
|
|
|
if (name || role || country || comment || avatar) {
|
|
items.push({
|
|
name,
|
|
role,
|
|
country,
|
|
rating: isNaN(rating) ? 5 : Math.min(Math.max(rating, 1), 5),
|
|
comment,
|
|
avatar,
|
|
});
|
|
}
|
|
});
|
|
|
|
return {
|
|
heading: getVal("testimonialsHeading"),
|
|
subheading: getVal("testimonialsSubheading"),
|
|
videoUrl: getVal("testimonialsVideoUrl"),
|
|
videoThumbnail: getVal("testimonialsVideoThumbnail"),
|
|
items,
|
|
enabled
|
|
};
|
|
};
|
|
|
|
// Client-side add/remove for testimonials
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const container = document.getElementById("testimonialsItemsContainer");
|
|
const addBtn = document.getElementById("addTestimonialBtn");
|
|
|
|
if (!container || !addBtn) return;
|
|
|
|
const updateLabels = () => {
|
|
container.querySelectorAll(".testimonial-item").forEach((el, idx) => {
|
|
el.setAttribute("data-index", String(idx));
|
|
|
|
const label = el.querySelector(".testimonial-label");
|
|
if (label) label.textContent = String(idx + 1);
|
|
|
|
el.querySelectorAll("input, textarea").forEach((input) => {
|
|
if (!input.id) return;
|
|
const newId = input.id.replace(/testimonials\w+_\d+/, (match) => {
|
|
const [prefix] = match.split("_");
|
|
return `${prefix}_${idx}`;
|
|
});
|
|
input.id = newId;
|
|
});
|
|
});
|
|
};
|
|
|
|
addBtn.addEventListener("click", () => {
|
|
const template = container.querySelector(".testimonial-item");
|
|
if (!template) return;
|
|
|
|
const clone = template.cloneNode(true);
|
|
|
|
clone.querySelectorAll("input, textarea").forEach((input) => {
|
|
input.value = "";
|
|
});
|
|
|
|
container.appendChild(clone);
|
|
updateLabels();
|
|
if (typeof initHomeCharacterCounters === "function") {
|
|
initHomeCharacterCounters(clone);
|
|
}
|
|
});
|
|
|
|
container.addEventListener("click", (e) => {
|
|
const btn = e.target.closest(".btn-remove-testimonial");
|
|
if (!btn) return;
|
|
|
|
const card = btn.closest(".testimonial-item");
|
|
if (!card) return;
|
|
|
|
const all = container.querySelectorAll(".testimonial-item");
|
|
if (all.length <= 1) {
|
|
return;
|
|
}
|
|
|
|
card.remove();
|
|
updateLabels();
|
|
});
|
|
|
|
updateLabels();
|
|
if (typeof initHomeCharacterCounters === "function") {
|
|
initHomeCharacterCounters(container);
|
|
}
|
|
});
|
|
</script>
|