forked from UKSOURCE/cms.lams
654 lines
31 KiB
Plaintext
654 lines
31 KiB
Plaintext
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-center mt-4 mb-4 flex-wrap gap-2">
|
|
<div>
|
|
<h1 class="h3 mb-0" style="color: var(--primary-dark);">
|
|
<%= title %>
|
|
</h1>
|
|
<p class="text-muted mb-0">Edit content displayed on the Home page</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<% if (frontendUrl) { %>
|
|
<a href="<%= frontendUrl %>" class="btn btn-outline-primary" target="_blank" rel="noopener">
|
|
<i class="fas fa-external-link-alt me-2"></i>View Home Page
|
|
</a>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form method="POST" id="homeForm" action="/admin/home/update" class="content-with-fixed-buttons">
|
|
<!-- Hidden JSON inputs -->
|
|
<input type="hidden" name="hero" id="heroJson">
|
|
<input type="hidden" name="quickLinks" id="quickLinksJson">
|
|
<input type="hidden" name="valueProp" id="valuePropJson">
|
|
<input type="hidden" name="programs" id="programsJson">
|
|
<input type="hidden" name="requestInfo" id="requestInfoJson">
|
|
|
|
<!-- Tabs -->
|
|
<div class="card shadow-sm border-0 mb-4">
|
|
<div class="card-header bg-white border-bottom">
|
|
<ul class="nav nav-tabs card-header-tabs" id="homeTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" id="tab-hero" data-bs-toggle="tab" href="#tab-hero-pane" role="tab"><i
|
|
class="fas fa-image me-2"></i>Hero</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="tab-quickLinks" data-bs-toggle="tab" href="#tab-quickLinks-pane" role="tab"><i
|
|
class="fas fa-link me-2"></i>Quick Links</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="tab-valueProp" data-bs-toggle="tab" href="#tab-valueProp-pane" role="tab"><i
|
|
class="fas fa-star me-2"></i>Value Prop</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="tab-programs" data-bs-toggle="tab" href="#tab-programs-pane" role="tab"><i
|
|
class="fas fa-graduation-cap me-2"></i>Programs</a>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" id="tab-requestInfo" data-bs-toggle="tab" href="#tab-requestInfo-pane" role="tab"><i
|
|
class="fas fa-envelope me-2"></i>Request Info</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
|
|
<!-- ===== HERO TAB ===== -->
|
|
<div class="tab-pane fade show active" id="tab-hero-pane" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0"><i class="fas fa-image me-2"></i>Hero Section</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Badge</label>
|
|
<input type="text" class="form-control" id="heroBadge" value="<%= data.hero?.badge || '' %>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Button Label</label>
|
|
<input type="text" class="form-control" id="heroButtonLabel"
|
|
value="<%= data.hero?.buttonLabel || '' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" class="form-control" id="heroTitle" value="<%= data.hero?.title || '' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control" id="heroDescription"
|
|
rows="3"><%= data.hero?.description || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Search Placeholder</label>
|
|
<input type="text" class="form-control" id="heroSearchPlaceholder"
|
|
value="<%= data.hero?.searchPlaceholder || '' %>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Image Alt Text</label>
|
|
<input type="text" class="form-control" id="heroImageAlt"
|
|
value="<%= data.hero?.imageAlt || '' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Image URL</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="heroImage" value="<%= data.hero?.image || '' %>">
|
|
<button class="btn btn-outline-primary btn-upload-image" type="button"
|
|
data-target-input="heroImage" data-image-type="home"><i
|
|
class="fas fa-upload me-1"></i>Upload</button>
|
|
</div>
|
|
<% if (data.hero?.image) { %>
|
|
<img src="<%= data.hero.image %>" class="img-thumbnail uploaded-preview mt-2"
|
|
style="max-height:180px;">
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
|
|
<h6 class="mt-4 mb-3">Floating Badge</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Icon (FA class)</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text icon-preview-cell" style="min-width:38px">
|
|
<% if (data.hero?.floatingBadge?.icon) { %><i
|
|
class="<%= data.hero.floatingBadge.icon %>"></i>
|
|
<% } %>
|
|
</span>
|
|
<input type="text" class="form-control" id="floatingBadgeIcon"
|
|
value="<%= data.hero?.floatingBadge?.icon || '' %>" placeholder="Click to pick..." readonly
|
|
style="cursor:pointer;background:#fff" onclick="IconPicker.open(this)">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Value</label>
|
|
<input type="text" class="form-control" id="floatingBadgeValue"
|
|
value="<%= data.hero?.floatingBadge?.value || '' %>">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label">Label</label>
|
|
<input type="text" class="form-control" id="floatingBadgeLabel"
|
|
value="<%= data.hero?.floatingBadge?.label || '' %>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== QUICK LINKS TAB ===== -->
|
|
<div class="tab-pane fade" id="tab-quickLinks-pane" role="tabpanel">
|
|
<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-link me-2"></i>Quick Links</h6>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addQuickLink()"><i
|
|
class="fas fa-plus me-1"></i>Add Link</button>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div id="quickLinksContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== VALUE PROP TAB ===== -->
|
|
<div class="tab-pane fade" id="tab-valueProp-pane" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0"><i class="fas fa-star me-2"></i>Value Proposition</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Badge</label>
|
|
<input type="text" class="form-control" id="valuePropBadge"
|
|
value="<%= data.valueProp?.badge || '' %>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" class="form-control" id="valuePropTitle"
|
|
value="<%= data.valueProp?.title || '' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control" id="valuePropDescription"
|
|
rows="3"><%= data.valueProp?.description || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0">Features</h6>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addValuePropFeature()"><i
|
|
class="fas fa-plus me-1"></i>Add Feature</button>
|
|
</div>
|
|
<div id="valuePropFeaturesContainer"></div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0">Stats</h6>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addValuePropStat()"><i
|
|
class="fas fa-plus me-1"></i>Add Stat</button>
|
|
</div>
|
|
<div id="valuePropStatsContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== PROGRAMS TAB ===== -->
|
|
<div class="tab-pane fade" id="tab-programs-pane" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0"><i class="fas fa-graduation-cap me-2"></i>Programs Section</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Heading</label>
|
|
<input type="text" class="form-control" id="programsHeading"
|
|
value="<%= data.programs?.heading || '' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control" id="programsDescription"
|
|
rows="2"><%= data.programs?.description || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-info mt-4 mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Programs items will automatically display from the Programs table.
|
|
<a href="/admin/programme" target="_blank" class="fw-bold ms-1">
|
|
<i class="fas fa-external-link-alt me-1"></i>Manage programs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== REQUEST INFO TAB ===== -->
|
|
<div class="tab-pane fade" id="tab-requestInfo-pane" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-header bg-white">
|
|
<h6 class="mb-0"><i class="fas fa-envelope me-2"></i>Request Info Section</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Heading</label>
|
|
<input type="text" class="form-control" id="requestInfoHeading"
|
|
value="<%= data.requestInfo?.heading || '' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control" id="requestInfoDescription"
|
|
rows="2"><%= data.requestInfo?.description || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Phone</label>
|
|
<input type="text" class="form-control" id="requestInfoPhone"
|
|
value="<%= data.requestInfo?.phone || '' %>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Email</label>
|
|
<input type="text" class="form-control" id="requestInfoEmail"
|
|
value="<%= data.requestInfo?.email || '' %>">
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0">Programs List</h6>
|
|
<button type="button" class="btn btn-outline-primary btn-sm"
|
|
onclick="addRequestInfoProgram()"><i class="fas fa-plus me-1"></i>Add Program</button>
|
|
</div>
|
|
<div id="requestInfoProgramsContainer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /.tab-content -->
|
|
</div><!-- /.card-body -->
|
|
|
|
</div>
|
|
|
|
<div class="fixed-bottom-buttons">
|
|
<button type="button" class="btn btn-secondary" onclick="resetForm()">
|
|
<i class="fas fa-undo"></i>
|
|
<span>Reset</span>
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-save"></i>
|
|
<span>Save Changes</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let originalFormData = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
originalFormData = <%- JSON.stringify(data) %>;
|
|
populateAll(originalFormData);
|
|
|
|
document.getElementById('homeForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
serializeAll();
|
|
this.submit();
|
|
});
|
|
|
|
document.body.addEventListener('click', function (e) {
|
|
const btn = e.target.closest('.btn-upload-image');
|
|
if (btn) openImageUploader(btn.dataset.targetInput, btn.dataset.imageType);
|
|
});
|
|
});
|
|
|
|
// ── Populate all sections from data object ──────────────────────────────
|
|
function populateAll(data) {
|
|
if (!data) return;
|
|
|
|
// Hero
|
|
const h = data.hero || {};
|
|
setVal('heroBadge', h.badge);
|
|
setVal('heroTitle', h.title);
|
|
setVal('heroDescription', h.description);
|
|
setVal('heroSearchPlaceholder', h.searchPlaceholder);
|
|
setVal('heroButtonLabel', h.buttonLabel);
|
|
setVal('heroImage', h.image);
|
|
setVal('heroImageAlt', h.imageAlt);
|
|
setVal('floatingBadgeIcon', h.floatingBadge?.icon);
|
|
setVal('floatingBadgeValue', h.floatingBadge?.value);
|
|
setVal('floatingBadgeLabel', h.floatingBadge?.label);
|
|
updateImagePreview('heroImage', h.image);
|
|
|
|
// Quick Links
|
|
populateQuickLinks(data.quickLinks || []);
|
|
|
|
// Value Prop
|
|
const vp = data.valueProp || {};
|
|
setVal('valuePropBadge', vp.badge);
|
|
setVal('valuePropTitle', vp.title);
|
|
setVal('valuePropDescription', vp.description);
|
|
populateValuePropFeatures(vp.features || []);
|
|
populateValuePropStats(vp.stats || []);
|
|
|
|
// Programs
|
|
const pr = data.programs || {};
|
|
setVal('programsHeading', pr.heading);
|
|
setVal('programsDescription', pr.description);
|
|
|
|
// Request Info
|
|
const ri = data.requestInfo || {};
|
|
setVal('requestInfoHeading', ri.heading);
|
|
setVal('requestInfoDescription', ri.description);
|
|
setVal('requestInfoPhone', ri.phone);
|
|
setVal('requestInfoEmail', ri.email);
|
|
populateRequestInfoPrograms(ri.programs || []);
|
|
}
|
|
|
|
function setVal(id, val) {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
el.tagName === 'TEXTAREA' ? (el.value = val || '') : (el.value = val || '');
|
|
}
|
|
|
|
// ── Serialize all sections into hidden JSON inputs ───────────────────────
|
|
function serializeAll() {
|
|
// Hero
|
|
document.getElementById('heroJson').value = JSON.stringify({
|
|
badge: v('heroBadge'),
|
|
title: v('heroTitle'),
|
|
description: v('heroDescription'),
|
|
searchPlaceholder: v('heroSearchPlaceholder'),
|
|
buttonLabel: v('heroButtonLabel'),
|
|
image: v('heroImage'),
|
|
imageAlt: v('heroImageAlt'),
|
|
floatingBadge: {
|
|
icon: v('floatingBadgeIcon'),
|
|
value: v('floatingBadgeValue'),
|
|
label: v('floatingBadgeLabel')
|
|
}
|
|
});
|
|
|
|
// Quick Links
|
|
document.getElementById('quickLinksJson').value = JSON.stringify(
|
|
Array.from(document.querySelectorAll('.quicklink-item')).map(row => ({
|
|
icon: row.querySelector('[data-field="icon"]').value.trim(),
|
|
title: row.querySelector('[data-field="title"]').value.trim(),
|
|
description: row.querySelector('[data-field="description"]').value.trim(),
|
|
linkText: row.querySelector('[data-field="linkText"]').value.trim(),
|
|
href: row.querySelector('[data-field="href"]').value.trim()
|
|
}))
|
|
);
|
|
|
|
// Value Prop
|
|
document.getElementById('valuePropJson').value = JSON.stringify({
|
|
badge: v('valuePropBadge'),
|
|
title: v('valuePropTitle'),
|
|
description: v('valuePropDescription'),
|
|
features: Array.from(document.querySelectorAll('.vp-feature-item')).map(row => ({
|
|
icon: row.querySelector('[data-field="icon"]').value.trim(),
|
|
title: row.querySelector('[data-field="title"]').value.trim(),
|
|
description: row.querySelector('[data-field="description"]').value.trim()
|
|
})),
|
|
stats: Array.from(document.querySelectorAll('.vp-stat-item')).map(row => ({
|
|
value: row.querySelector('[data-field="value"]').value.trim(),
|
|
label: row.querySelector('[data-field="label"]').value.trim(),
|
|
image: row.querySelector('[data-field="image"]').value.trim(),
|
|
imageAlt: row.querySelector('[data-field="imageAlt"]').value.trim()
|
|
}))
|
|
});
|
|
|
|
// Programs
|
|
document.getElementById('programsJson').value = JSON.stringify({
|
|
heading: v('programsHeading'),
|
|
description: v('programsDescription'),
|
|
items: Array.from(document.querySelectorAll('.program-item')).map(row => ({
|
|
category: row.querySelector('[data-field="category"]').value.trim(),
|
|
image: row.querySelector('[data-field="image"]').value.trim(),
|
|
duration: row.querySelector('[data-field="duration"]').value.trim(),
|
|
rating: row.querySelector('[data-field="rating"]').value.trim(),
|
|
title: row.querySelector('[data-field="title"]').value.trim(),
|
|
description: row.querySelector('[data-field="description"]').value.trim(),
|
|
studentCount: row.querySelector('[data-field="studentCount"]').value.trim(),
|
|
href: row.querySelector('[data-field="href"]').value.trim()
|
|
}))
|
|
});
|
|
|
|
// Request Info
|
|
document.getElementById('requestInfoJson').value = JSON.stringify({
|
|
heading: v('requestInfoHeading'),
|
|
description: v('requestInfoDescription'),
|
|
phone: v('requestInfoPhone'),
|
|
email: v('requestInfoEmail'),
|
|
programs: Array.from(document.querySelectorAll('.ri-program-input')).map(i => i.value.trim()).filter(Boolean)
|
|
});
|
|
}
|
|
|
|
function v(id) {
|
|
const el = document.getElementById(id);
|
|
return el ? el.value.trim() : '';
|
|
}
|
|
|
|
// ── Quick Links ──────────────────────────────────────────────────────────
|
|
function addQuickLink(item = {}) {
|
|
const c = document.getElementById('quickLinksContainer');
|
|
const html = `
|
|
<div class="card mb-3 quicklink-item">
|
|
<div class="card-body p-3">
|
|
<div class="row g-2">
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Icon</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text icon-preview-cell" style="min-width:38px">
|
|
${item.icon ? `<i class="${esc(item.icon)}"></i>` : ''}
|
|
</span>
|
|
<input type="text" class="form-control form-control-sm" data-field="icon"
|
|
value="${esc(item.icon)}" placeholder="Click to pick..." readonly
|
|
style="cursor:pointer;background:#fff"
|
|
onclick="IconPicker.open(this)">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Title</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="title" value="${esc(item.title)}">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small">Description</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="description" value="${esc(item.description)}">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Link Text</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="linkText" value="${esc(item.linkText)}">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Href</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="href" value="${esc(item.href)}">
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-link text-danger btn-sm p-0 mt-2" onclick="this.closest('.quicklink-item').remove()"><i class="fas fa-trash me-1"></i>Remove</button>
|
|
</div>
|
|
</div>`;
|
|
c.insertAdjacentHTML('beforeend', html);
|
|
}
|
|
|
|
function populateQuickLinks(items) {
|
|
document.getElementById('quickLinksContainer').innerHTML = '';
|
|
items.forEach(item => addQuickLink(item));
|
|
}
|
|
|
|
// ── Value Prop Features ──────────────────────────────────────────────────
|
|
function addValuePropFeature(item = {}) {
|
|
const c = document.getElementById('valuePropFeaturesContainer');
|
|
const html = `
|
|
<div class="card mb-2 vp-feature-item">
|
|
<div class="card-body p-3">
|
|
<div class="row g-2">
|
|
<div class="col-md-3">
|
|
<label class="form-label small">Icon</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text icon-preview-cell" style="min-width:38px">
|
|
${item.icon ? `<i class="${esc(item.icon)}"></i>` : ''}
|
|
</span>
|
|
<input type="text" class="form-control form-control-sm" data-field="icon"
|
|
value="${esc(item.icon)}" placeholder="Click to pick..." readonly
|
|
style="cursor:pointer;background:#fff"
|
|
onclick="IconPicker.open(this)">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label small">Title</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="title" value="${esc(item.title)}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label small">Description</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="description" value="${esc(item.description)}">
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-link text-danger btn-sm p-0 mt-2" onclick="this.closest('.vp-feature-item').remove()"><i class="fas fa-trash me-1"></i>Remove</button>
|
|
</div>
|
|
</div>`;
|
|
c.insertAdjacentHTML('beforeend', html);
|
|
}
|
|
|
|
function populateValuePropFeatures(items) {
|
|
document.getElementById('valuePropFeaturesContainer').innerHTML = '';
|
|
items.forEach(item => addValuePropFeature(item));
|
|
}
|
|
|
|
// ── Value Prop Stats ─────────────────────────────────────────────────────
|
|
function addValuePropStat(item = {}) {
|
|
const idx = Date.now();
|
|
const c = document.getElementById('valuePropStatsContainer');
|
|
const html = `
|
|
<div class="card mb-2 vp-stat-item">
|
|
<div class="card-body p-3">
|
|
<div class="row g-2">
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Value</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="value" value="${esc(item.value)}">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small">Label</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="label" value="${esc(item.label)}">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label class="form-label small">Image URL</label>
|
|
<div class="input-group input-group-sm">
|
|
<input type="text" class="form-control" data-field="image" id="vpStatImg_${idx}" value="${esc(item.image)}">
|
|
<button class="btn btn-outline-primary btn-upload-image" type="button" data-target-input="vpStatImg_${idx}" data-image-type="home"><i class="fas fa-upload"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label small">Image Alt</label>
|
|
<input type="text" class="form-control form-control-sm" data-field="imageAlt" value="${esc(item.imageAlt)}">
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-link text-danger btn-sm p-0 mt-2" onclick="this.closest('.vp-stat-item').remove()"><i class="fas fa-trash me-1"></i>Remove</button>
|
|
</div>
|
|
</div>`;
|
|
c.insertAdjacentHTML('beforeend', html);
|
|
}
|
|
|
|
function populateValuePropStats(items) {
|
|
document.getElementById('valuePropStatsContainer').innerHTML = '';
|
|
items.forEach(item => addValuePropStat(item));
|
|
}
|
|
|
|
// ── Request Info Programs ────────────────────────────────────────────────
|
|
function addRequestInfoProgram(val = '') {
|
|
const c = document.getElementById('requestInfoProgramsContainer');
|
|
const html = `
|
|
<div class="input-group input-group-sm mb-2">
|
|
<input type="text" class="form-control ri-program-input" value="${esc(val)}" placeholder="Program name">
|
|
<button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
|
|
</div>`;
|
|
c.insertAdjacentHTML('beforeend', html);
|
|
}
|
|
|
|
function populateRequestInfoPrograms(programs) {
|
|
document.getElementById('requestInfoProgramsContainer').innerHTML = '';
|
|
programs.forEach(p => addRequestInfoProgram(p));
|
|
}
|
|
|
|
// ── Utilities ────────────────────────────────────────────────────────────
|
|
function esc(val) {
|
|
if (!val) return '';
|
|
return String(val).replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
|
|
function resetForm() {
|
|
if (confirm('Reset all changes to last saved state?')) {
|
|
populateAll(originalFormData);
|
|
}
|
|
}
|
|
|
|
function updateImagePreview(inputId, imagePath) {
|
|
if (!imagePath) return;
|
|
const input = document.getElementById(inputId);
|
|
if (!input) return;
|
|
const card = input.closest('.card');
|
|
const preview = card ? card.querySelector('.uploaded-preview') : null;
|
|
if (preview) preview.src = imagePath;
|
|
}
|
|
|
|
function openImageUploader(targetInput, imageType) {
|
|
// Dùng persistent hidden file input để tránh browser block programmatic click
|
|
let fileInput = document.getElementById('__globalFileInput');
|
|
if (!fileInput) {
|
|
fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.accept = 'image/*';
|
|
fileInput.id = '__globalFileInput';
|
|
fileInput.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;width:1px;height:1px;';
|
|
document.body.appendChild(fileInput);
|
|
}
|
|
|
|
fileInput.value = '';
|
|
|
|
fileInput.onchange = async function (e) {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`) ||
|
|
document.querySelector(`[onclick*="${targetInput}"]`);
|
|
if (uploadBtn) uploadBtn.disabled = true;
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('image', file);
|
|
|
|
const response = await fetch(`/admin/upload/image?imageType=${imageType}`, { method: 'POST', body: formData });
|
|
if (!response.ok) throw new Error('Upload failed');
|
|
const result = await response.json();
|
|
if (!result.success) throw new Error(result.error || 'Upload failed');
|
|
|
|
const input = document.getElementById(targetInput) || document.querySelector(`[data-target-input-id="${targetInput}"]`);
|
|
if (input) {
|
|
input.value = result.path;
|
|
const previewUrl = result.path.startsWith('http') ? result.path : window.location.origin + result.path;
|
|
let preview = input.closest('.card')?.querySelector('.uploaded-preview');
|
|
if (preview) {
|
|
preview.src = previewUrl;
|
|
} else {
|
|
const img = document.createElement('img');
|
|
img.src = previewUrl;
|
|
img.className = 'img-thumbnail uploaded-preview mt-2';
|
|
img.style.maxHeight = '150px';
|
|
input.closest('.input-group')?.insertAdjacentElement('afterend', img);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Upload error:', err);
|
|
alert('Upload failed: ' + err.message);
|
|
} finally {
|
|
if (uploadBtn) uploadBtn.disabled = false;
|
|
fileInput.value = '';
|
|
}
|
|
};
|
|
fileInput.click();
|
|
}
|
|
</script> |