forked from UKSOURCE/cms.hailearning.edu.vn
724 lines
30 KiB
Plaintext
724 lines
30 KiB
Plaintext
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-center mt-4 mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0" style="color: var(--primary-dark);">Service Details: <%= service.name %></h1>
|
|
<p class="text-muted mb-0">Edit detailed content for <%= service.name %> service</p>
|
|
</div>
|
|
<div>
|
|
<a href="/admin/service" class="btn btn-outline-primary">
|
|
<i class="fas fa-arrow-left me-2"></i>Back to Services
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form action="/admin/service/<%= service.slug %>/details/update" method="POST" class="content-with-fixed-buttons" id="serviceDetailsForm">
|
|
<!-- Hidden inputs for JSON data -->
|
|
<input type="hidden" name="details" id="detailsJson">
|
|
<input type="hidden" name="features" id="featuresJson">
|
|
<input type="hidden" name="faq" id="faqJson">
|
|
|
|
<!-- Navigation 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" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#basic-info" role="tab">
|
|
<i class="fas fa-info-circle me-2"></i>Basic Information
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#key-features" role="tab">
|
|
<i class="fas fa-star me-2"></i>Key Features
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#faq-section" role="tab">
|
|
<i class="fas fa-question-circle me-2"></i>FAQ Section
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
<!-- Basic Information Tab -->
|
|
<div class="tab-pane fade show active" id="basic-info" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<label class="form-label fw-medium">Main Image</label>
|
|
<div class="input-group mb-2">
|
|
<input type="text" class="form-control" id="mainImage" name="mainImage"
|
|
value="<%= service.details?.mainImage || '' %>">
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image"
|
|
data-target-input="mainImage" data-image-type="service">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
<small class="form-text text-muted">Recommended size: 800x600px</small>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div id="mainImagePreview">
|
|
<% if (service.details?.mainImage) { %>
|
|
<img src="<%= getFullImageUrl(service.details.mainImage) %>" class="img-thumbnail" style="max-height: 250px; width: auto; max-width: 100%; object-fit: contain;" alt="Main image preview">
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Title</label>
|
|
<input type="text" class="form-control" id="detailsTitle" name="title"
|
|
value="<%= service.details?.title || service.name %>">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Description</label>
|
|
<textarea class="form-control" id="detailsDescription" name="description" rows="3"><%= service.details?.description || service.description %></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overview Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card border">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0">Overview Section</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Overview Title</label>
|
|
<input type="text" class="form-control" id="overviewTitle" name="overviewTitle"
|
|
value="<%= service.details?.overviewTitle || 'Service Overview' %>">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Overview Description</label>
|
|
<textarea class="form-control" id="overviewDescription" name="overviewDescription" rows="4"><%= service.details?.overviewDescription || '' %></textarea>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label class="form-label">Additional Description</label>
|
|
<textarea class="form-control" id="additionalDescription" name="additionalDescription" rows="3"><%= service.details?.additionalDescription || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Features Tab -->
|
|
<div class="tab-pane fade" id="key-features" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-body">
|
|
<!-- Features Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Features Title</label>
|
|
<input type="text" class="form-control" id="keyFeaturesTitle" name="keyFeaturesTitle"
|
|
value="<%= service.details?.keyFeaturesTitle || 'Key Features' %>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Features Image</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="keyFeaturesImage" name="keyFeaturesImage"
|
|
value="<%= service.details?.keyFeaturesImage || '' %>">
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image"
|
|
data-target-input="keyFeaturesImage" data-image-type="service">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Features Image Preview -->
|
|
<div class="row mt-3">
|
|
<div class="col-12">
|
|
<div id="keyFeaturesImagePreview">
|
|
<% if (service.details?.keyFeaturesImage) { %>
|
|
<img src="<%= getFullImageUrl(service.details.keyFeaturesImage) %>" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="Key Features image preview">
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features List -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="fw-medium mb-0">Features</h6>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="addFeature()">
|
|
<i class="fas fa-plus"></i> Add Feature
|
|
</button>
|
|
</div>
|
|
<div id="featuresContainer">
|
|
<% if (service.details?.features && service.details.features.length > 0) { %>
|
|
<% service.details.features.forEach((feature, index) => { %>
|
|
<div class="card mb-3 feature-item">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="mb-0 text-decoration-underline">Feature <%= index + 1 %></h6>
|
|
<button type="button" class="btn btn-danger btn-sm" onclick="removeFeature(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-8">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" class="form-control feature-title"
|
|
value="<%= feature.title || '' %>" required>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control feature-description" rows="2" required><%= feature.description || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }) %>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Section Tab -->
|
|
<div class="tab-pane fade" id="faq-section" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-body">
|
|
<!-- FAQ Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">FAQ Title</label>
|
|
<input type="text" class="form-control" id="faqTitle" name="faqTitle"
|
|
value="<%= service.details?.faqTitle || 'Frequently Asked Questions' %>">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">FAQ Image</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="faqImage" name="faqImage"
|
|
value="<%= service.details?.faqImage || '' %>">
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image"
|
|
data-target-input="faqImage" data-image-type="service">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Image Preview -->
|
|
<div class="row mt-3">
|
|
<div class="col-12">
|
|
<div id="faqImagePreview">
|
|
<% if (service.details?.faqImage) { %>
|
|
<img src="<%= getFullImageUrl(service.details.faqImage) %>" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="FAQ image preview">
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ List -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="fw-medium mb-0">FAQ Items</h6>
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="addFAQ()">
|
|
<i class="fas fa-plus"></i> Add FAQ
|
|
</button>
|
|
</div>
|
|
<div id="faqContainer">
|
|
<% if (service.details?.faq && service.details.faq.length > 0) { %>
|
|
<% service.details.faq.forEach((faq, index) => { %>
|
|
<div class="card mb-3 faq-item">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="mb-0 text-decoration-underline">FAQ <%= index + 1 %></h6>
|
|
<button type="button" class="btn btn-danger btn-sm" onclick="removeFAQ(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">ID</label>
|
|
<input type="text" class="form-control faq-id"
|
|
value="<%= faq.id || 'faq-' + (index + 1) %>" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Expanded by Default</label>
|
|
<select class="form-control faq-expanded">
|
|
<option value="false" <%= !faq.isExpanded ? 'selected' : '' %>>No</option>
|
|
<option value="true" <%= faq.isExpanded ? 'selected' : '' %>>Yes</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Question</label>
|
|
<input type="text" class="form-control faq-question"
|
|
value="<%= faq.question || '' %>" required>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Answer</label>
|
|
<textarea class="form-control faq-answer" rows="3" required><%= faq.answer || '' %></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }) %>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Buttons -->
|
|
<div class="bottom-buttons">
|
|
<button type="reset" class="btn btn-secondary">
|
|
<i class="fas fa-undo me-2"></i>Reset
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-save me-2"></i>Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Scripts -->
|
|
<script>
|
|
let originalFormData = null;
|
|
let featureIndex = <%= service.details?.features?.length || 0 %>;
|
|
let faqIndex = <%= service.details?.faq?.length || 0 %>;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize form data
|
|
originalFormData = <%- JSON.stringify(service) %>;
|
|
|
|
// Set initial JSON values
|
|
updateAllJsonInputs(originalFormData);
|
|
|
|
// Initialize form handlers
|
|
initializeFormHandlers();
|
|
});
|
|
|
|
function initializeFormHandlers() {
|
|
// Form submission
|
|
const form = document.getElementById('serviceDetailsForm');
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
|
|
|
|
try {
|
|
updateJsonData();
|
|
this.submit();
|
|
} catch (error) {
|
|
console.error('Error updating data:', error);
|
|
showError('Failed to process form data. Please try again.');
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Save Changes';
|
|
}
|
|
});
|
|
|
|
// Initialize image upload buttons
|
|
document.querySelectorAll('.btn-upload-image').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const targetInput = this.dataset.targetInput;
|
|
const imageType = this.dataset.imageType;
|
|
openImageUploader(targetInput, imageType);
|
|
});
|
|
});
|
|
|
|
// Initialize image input change listeners for manual URL input
|
|
const imageInputs = ['mainImage', 'keyFeaturesImage', 'faqImage'];
|
|
imageInputs.forEach(inputId => {
|
|
const input = document.getElementById(inputId);
|
|
if (input) {
|
|
input.addEventListener('input', function() {
|
|
updateImagePreviewAfterUpload(inputId, this.value);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function addFeature() {
|
|
const container = document.getElementById('featuresContainer');
|
|
const featureHtml = `
|
|
<div class="card mb-3 feature-item">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="mb-0 text-decoration-underline">Feature ${featureIndex + 1}</h6>
|
|
<button type="button" class="btn btn-danger btn-sm" onclick="removeFeature(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-8">
|
|
<label class="form-label">Title</label>
|
|
<input type="text" class="form-control feature-title" required>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea class="form-control feature-description" rows="2" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', featureHtml);
|
|
featureIndex++;
|
|
}
|
|
|
|
function removeFeature(button) {
|
|
const featureItem = button.closest('.feature-item');
|
|
if (featureItem) {
|
|
featureItem.remove();
|
|
}
|
|
}
|
|
|
|
function addFAQ() {
|
|
const container = document.getElementById('faqContainer');
|
|
const faqHtml = `
|
|
<div class="card mb-3 faq-item">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="mb-0 text-decoration-underline">FAQ ${faqIndex + 1}</h6>
|
|
<button type="button" class="btn btn-danger btn-sm" onclick="removeFAQ(this)">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">ID</label>
|
|
<input type="text" class="form-control faq-id"
|
|
value="faq-${faqIndex + 1}" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Expanded by Default</label>
|
|
<select class="form-control faq-expanded">
|
|
<option value="false">No</option>
|
|
<option value="true">Yes</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Question</label>
|
|
<input type="text" class="form-control faq-question" required>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Answer</label>
|
|
<textarea class="form-control faq-answer" rows="3" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', faqHtml);
|
|
faqIndex++;
|
|
}
|
|
|
|
function removeFAQ(button) {
|
|
const faqItem = button.closest('.faq-item');
|
|
if (faqItem) {
|
|
faqItem.remove();
|
|
}
|
|
}
|
|
|
|
function updateAllJsonInputs(data) {
|
|
// Collect basic details data
|
|
const details = {
|
|
title: data.details?.title || data.name,
|
|
description: data.details?.description || data.description,
|
|
mainImage: data.details?.mainImage || '',
|
|
overviewTitle: data.details?.overviewTitle || 'Service Overview',
|
|
overviewDescription: data.details?.overviewDescription || '',
|
|
additionalDescription: data.details?.additionalDescription || '',
|
|
keyFeaturesTitle: data.details?.keyFeaturesTitle || 'Key Features',
|
|
keyFeaturesImage: data.details?.keyFeaturesImage || '',
|
|
faqTitle: data.details?.faqTitle || 'Frequently Asked Questions',
|
|
faqImage: data.details?.faqImage || ''
|
|
};
|
|
|
|
document.getElementById('detailsJson').value = JSON.stringify(details);
|
|
document.getElementById('featuresJson').value = JSON.stringify(data.details?.features || []);
|
|
document.getElementById('faqJson').value = JSON.stringify(data.details?.faq || []);
|
|
}
|
|
|
|
function updateJsonData() {
|
|
// Collect basic details data
|
|
const details = {
|
|
title: document.getElementById('detailsTitle').value,
|
|
description: document.getElementById('detailsDescription').value,
|
|
mainImage: document.getElementById('mainImage').value,
|
|
overviewTitle: document.getElementById('overviewTitle').value,
|
|
overviewDescription: document.getElementById('overviewDescription').value,
|
|
additionalDescription: document.getElementById('additionalDescription').value,
|
|
keyFeaturesTitle: document.getElementById('keyFeaturesTitle').value,
|
|
keyFeaturesImage: document.getElementById('keyFeaturesImage').value,
|
|
faqTitle: document.getElementById('faqTitle').value,
|
|
faqImage: document.getElementById('faqImage').value
|
|
};
|
|
|
|
// Collect features data
|
|
const features = [];
|
|
document.querySelectorAll('.feature-item').forEach(item => {
|
|
features.push({
|
|
title: item.querySelector('.feature-title').value,
|
|
description: item.querySelector('.feature-description').value
|
|
});
|
|
});
|
|
|
|
// Collect FAQ data
|
|
const faq = [];
|
|
document.querySelectorAll('.faq-item').forEach(item => {
|
|
faq.push({
|
|
id: item.querySelector('.faq-id').value,
|
|
question: item.querySelector('.faq-question').value,
|
|
answer: item.querySelector('.faq-answer').value,
|
|
isExpanded: item.querySelector('.faq-expanded').value === 'true'
|
|
});
|
|
});
|
|
|
|
document.getElementById('detailsJson').value = JSON.stringify(details);
|
|
document.getElementById('featuresJson').value = JSON.stringify(features);
|
|
document.getElementById('faqJson').value = JSON.stringify(faq);
|
|
}
|
|
|
|
// Helper function để tạo full URL cho ảnh - tương tự như server-side helper
|
|
function getFullImageUrlJS(imagePath) {
|
|
if (!imagePath) return '';
|
|
|
|
// Nếu đã là full URL thì return luôn
|
|
if (imagePath.startsWith('http')) {
|
|
return imagePath;
|
|
}
|
|
|
|
// Lấy backend URL
|
|
const backendUrl = '<%= (process.env.BACKEND_URL || "http://localhost:3001").replace(/\/$/, "") %>';
|
|
|
|
// Xử lý đường dẫn
|
|
let imgSrc = imagePath;
|
|
if (!imgSrc.startsWith('/')) {
|
|
imgSrc = '/uploads/' + imgSrc;
|
|
}
|
|
|
|
return backendUrl + imgSrc;
|
|
}
|
|
|
|
// Function để cập nhật image preview sau khi upload
|
|
function updateImagePreviewAfterUpload(targetInput, imagePath) {
|
|
const fullImageUrl = getFullImageUrlJS(imagePath);
|
|
|
|
switch(targetInput) {
|
|
case 'mainImage':
|
|
const mainPreview = document.getElementById('mainImagePreview');
|
|
if (mainPreview) {
|
|
mainPreview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="max-height: 250px; width: auto; max-width: 100%; object-fit: contain;" alt="Main image preview">`;
|
|
}
|
|
break;
|
|
|
|
case 'keyFeaturesImage':
|
|
const featuresPreview = document.getElementById('keyFeaturesImagePreview');
|
|
if (featuresPreview) {
|
|
featuresPreview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="Key Features image preview">`;
|
|
}
|
|
break;
|
|
|
|
case 'faqImage':
|
|
const faqPreview = document.getElementById('faqImagePreview');
|
|
if (faqPreview) {
|
|
faqPreview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="max-height: 180px; width: auto; max-width: 100%; object-fit: contain;" alt="FAQ image preview">`;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
async function openImageUploader(targetInput, imageType) {
|
|
return new Promise((resolve, reject) => {
|
|
const fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.accept = 'image/*';
|
|
fileInput.style.display = 'none';
|
|
document.body.appendChild(fileInput);
|
|
|
|
fileInput.onchange = async function (e) {
|
|
const file = e.target.files[0];
|
|
if (!file) return reject(new Error('No file selected'));
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('image', file);
|
|
|
|
const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
|
|
const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : null;
|
|
if (uploadBtn) {
|
|
uploadBtn.disabled = true;
|
|
uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Uploading...';
|
|
}
|
|
|
|
const response = await fetch(`/admin/upload/image?imageType=${encodeURIComponent(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(`[name="${targetInput}"]`);
|
|
if (!input) throw new Error('Target input not found');
|
|
|
|
input.value = result.path;
|
|
|
|
// Update image preview based on target input
|
|
updateImagePreviewAfterUpload(targetInput, result.path);
|
|
|
|
if (uploadBtn) {
|
|
uploadBtn.disabled = false;
|
|
uploadBtn.innerHTML = originalBtnHtml;
|
|
}
|
|
|
|
resolve(result);
|
|
} catch (err) {
|
|
if (uploadBtn) {
|
|
uploadBtn.disabled = false;
|
|
uploadBtn.innerHTML = originalBtnHtml;
|
|
}
|
|
console.error('Upload error:', err);
|
|
showError('Upload failed: ' + (err.message || 'Unknown error'));
|
|
reject(err);
|
|
} finally {
|
|
fileInput.remove();
|
|
}
|
|
};
|
|
|
|
fileInput.click();
|
|
});
|
|
}
|
|
|
|
function showSuccess(message) {
|
|
// Create and show success alert
|
|
const alert = document.createElement('div');
|
|
alert.className = 'alert alert-success alert-dismissible fade show position-fixed';
|
|
alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
|
|
alert.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
document.body.appendChild(alert);
|
|
|
|
setTimeout(() => {
|
|
if (alert.parentNode) {
|
|
alert.parentNode.removeChild(alert);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
function showError(message) {
|
|
// Create and show error alert
|
|
const alert = document.createElement('div');
|
|
alert.className = 'alert alert-danger alert-dismissible fade show position-fixed';
|
|
alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
|
|
alert.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
document.body.appendChild(alert);
|
|
|
|
setTimeout(() => {
|
|
if (alert.parentNode) {
|
|
alert.parentNode.removeChild(alert);
|
|
}
|
|
}, 5000);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bottom-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
padding: 15px 0;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
.content-with-fixed-buttons {
|
|
/* Remove bottom padding since buttons are no longer fixed */
|
|
}
|
|
|
|
.btn-group .btn {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.btn-group .btn:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.card-header h6 {
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
.text-decoration-underline {
|
|
text-decoration: underline;
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
/* Image Preview Styles */
|
|
#mainImagePreview, #keyFeaturesImagePreview, #faqImagePreview {
|
|
min-height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f9fa;
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#mainImagePreview:empty::before,
|
|
#keyFeaturesImagePreview:empty::before,
|
|
#faqImagePreview:empty::before {
|
|
content: "No image selected";
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
#mainImagePreview img,
|
|
#keyFeaturesImagePreview img,
|
|
#faqImagePreview img {
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|