forked from UKSOURCE/cms.hailearning.edu.vn
1102 lines
38 KiB
Plaintext
1102 lines
38 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);"><%= title %></h1>
|
|
<p class="text-muted mb-0">Manage services and their detailed content</p>
|
|
</div>
|
|
<div>
|
|
<a href="<%= frontendUrl %>/admin/service/" class="btn btn-outline-primary" target="_blank">
|
|
<i class="fas fa-external-link-alt me-2"></i>View Services Page
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form action="/admin/service/update" method="POST" class="content-with-fixed-buttons" id="serviceForm">
|
|
<!-- Hidden inputs for JSON data -->
|
|
<input type="hidden" name="services" id="servicesJson">
|
|
|
|
<!-- 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="#services-list" role="tab">
|
|
<i class="fas fa-list me-2"></i>Services List
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#section-settings" role="tab">
|
|
<i class="fas fa-cog me-2"></i>Section Settings
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#add-service" role="tab">
|
|
<i class="fas fa-plus me-2"></i>Add Service
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
<!-- Services List Tab -->
|
|
<div class="tab-pane fade show active" id="services-list" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-body">
|
|
<!-- Statistics Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-primary bg-opacity-10 rounded-circle p-3">
|
|
<i class="fas fa-cogs text-primary"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="text-muted mb-0">Total Services</h6>
|
|
<h3 class="mb-0" id="totalCount">
|
|
<%= (data.services && data.services.items) ? data.services.items.length : 0 %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-success bg-opacity-10 rounded-circle p-3">
|
|
<i class="fas fa-align-left text-success"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="text-muted mb-0">Left Layout</h6>
|
|
<h3 class="mb-0" id="leftCount">
|
|
<%= (data.services && data.services.items) ? data.services.items.filter(s => s && s.layout === 'left').length : 0 %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="bg-info bg-opacity-10 rounded-circle p-3">
|
|
<i class="fas fa-align-right text-info"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="text-muted mb-0">Right Layout</h6>
|
|
<h3 class="mb-0" id="rightCount">
|
|
<%= (data.services && data.services.items) ? data.services.items.filter(s => s && s.layout === 'right').length : 0 %>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0" id="servicesTable">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width: 40px;">#</th>
|
|
<th style="width: 80px;">Image</th>
|
|
<th>Name</th>
|
|
<th>Slug</th>
|
|
<th style="width: 100px;">Layout</th>
|
|
<th style="width: 200px;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="servicesTableBody">
|
|
<% if (data.services && data.services.items) { %>
|
|
<% data.services.items.forEach((service, index) => { %>
|
|
<% if (service) { %>
|
|
<tr data-index="<%= index %>">
|
|
<td class="text-muted"><%= index + 1 %></td>
|
|
<td>
|
|
<% if (service.image) { %>
|
|
<img src="<%= getFullImageUrl(service.image) %>" class="rounded" style="width: 60px; height: 45px; object-fit: cover;" alt="<%= service.name %>" >
|
|
<% } else { %>
|
|
<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 60px; height: 45px;">
|
|
<i class="fas fa-image text-muted"></i>
|
|
</div>
|
|
<% } %>
|
|
</td>
|
|
<td>
|
|
<strong><%= service.name %></strong>
|
|
<% if (service.description) { %>
|
|
<br><small class="text-muted"><%= service.description.substring(0, 50) %>...</small>
|
|
<% } %>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-light text-dark"><%= service.slug %></span>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-<%= service.layout === 'left' ? 'primary' : 'success' %>">
|
|
<i class="fas fa-align-<%= service.layout %>"></i> <%= service.layout %>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="/admin/service/<%= service.slug %>/edit" class="btn btn-sm btn-outline-primary" title="Edit Service">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a href="/admin/service/<%= service.slug %>/details" class="btn btn-sm btn-outline-warning" title="Edit Details">
|
|
<i class="fas fa-cog"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteService(<%= index %>)" title="Delete Service">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<% } %>
|
|
<% }) %>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<% if (!data.services || !data.services.items || data.services.items.length === 0) { %>
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-inbox fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">No services found</h5>
|
|
<p class="text-muted">Click "Add Service" tab to create your first service.</p>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Settings Tab -->
|
|
<div class="tab-pane fade" id="section-settings" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="fw-medium mb-3">Services Section Title</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Sub Title</label>
|
|
<input type="text" class="form-control" id="servicesSubTitle"
|
|
value="<%= data.services?.title?.subTitle || '' %>"
|
|
placeholder="Enter subtitle for services section">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Main Title</label>
|
|
<input type="text" class="form-control" id="servicesMainTitle"
|
|
value="<%= data.services?.title?.mainTitle || '' %>"
|
|
placeholder="Enter main title for services section">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Service Tab -->
|
|
<div class="tab-pane fade" id="add-service" role="tabpanel">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-body">
|
|
<h6 class="fw-medium mb-3">Add New Service</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label fw-medium">Service Name</label>
|
|
<input type="text" class="form-control" id="newServiceName" placeholder="Enter service name">
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">
|
|
Slug
|
|
<small class="text-muted">(generated from name)</small>
|
|
<span id="slugAutoIndicator" class="badge bg-success ms-1" style="font-size: 0.7em;">AUTO</span>
|
|
</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="newServiceSlug" placeholder="Click generate to create slug" readonly>
|
|
<button type="button" class="btn btn-primary" id="generateSlugBtn" title="Generate slug from name">
|
|
<i class="fas fa-magic me-1"></i>Generate
|
|
</button>
|
|
</div>
|
|
<small class="form-text text-muted">URL-friendly version of the service name. Generated automatically from the service name.</small>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label fw-medium">Layout</label>
|
|
<select class="form-control" id="newServiceLayout">
|
|
<option value="left">Left</option>
|
|
<option value="right">Right</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-md-8">
|
|
<label class="form-label fw-medium">Image</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="newServiceImage" placeholder="Enter image path">
|
|
<button type="button" class="btn btn-outline-primary btn-upload-image" data-target-input="newServiceImage" data-image-type="service">
|
|
<i class="fas fa-upload me-1"></i>Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div id="newServiceImagePreview"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mt-2">
|
|
<div class="col-12">
|
|
<label class="form-label fw-medium">Description</label>
|
|
<textarea class="form-control" id="newServiceDescription" rows="3" placeholder="Enter service description"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button type="button" class="btn btn-primary" onclick="addService()">
|
|
<i class="fas fa-plus me-2"></i>Add Service
|
|
</button>
|
|
</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>
|
|
|
|
<!-- Custom Delete Confirmation Modal -->
|
|
<div id="customDeleteModal" class="custom-modal" style="display: none;">
|
|
<div class="custom-modal-backdrop"></div>
|
|
<div class="custom-modal-dialog">
|
|
<div class="custom-modal-content">
|
|
<div class="custom-modal-header">
|
|
<h5 class="custom-modal-title">
|
|
<i class="fas fa-exclamation-triangle text-warning me-2"></i>Confirm Delete
|
|
</h5>
|
|
<button type="button" class="custom-modal-close" onclick="closeDeleteModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="custom-modal-body">
|
|
<div class="text-center mb-3">
|
|
<div class="delete-icon">
|
|
<i class="fas fa-trash fa-2x text-danger"></i>
|
|
</div>
|
|
</div>
|
|
<h6 class="text-center mb-3">Delete Service</h6>
|
|
<p class="text-center text-muted mb-0">
|
|
Are you sure you want to delete "<strong id="deleteServiceName"></strong>"?
|
|
<br><small class="text-danger">This action cannot be undone.</small>
|
|
</p>
|
|
</div>
|
|
<div class="custom-modal-footer">
|
|
<button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
|
|
<i class="fas fa-trash me-2"></i>Delete Service
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
let originalFormData = null;
|
|
let servicesData = <%- JSON.stringify(data.services?.items || []) %>;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize form data
|
|
originalFormData = <%- JSON.stringify(data) %>;
|
|
|
|
// Set initial JSON values
|
|
updateAllJsonInputs(originalFormData);
|
|
|
|
// Initialize form handlers
|
|
initializeFormHandlers();
|
|
});
|
|
|
|
function initializeFormHandlers() {
|
|
// Form submission
|
|
const form = document.getElementById('serviceForm');
|
|
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);
|
|
});
|
|
});
|
|
|
|
// Image preview for new service
|
|
const newServiceImageInput = document.getElementById('newServiceImage');
|
|
if (newServiceImageInput) {
|
|
newServiceImageInput.addEventListener('input', function() {
|
|
updateImagePreview('newServiceImagePreview', this.value);
|
|
});
|
|
}
|
|
|
|
// Generate slug from service name
|
|
const newServiceNameInput = document.getElementById('newServiceName');
|
|
const newServiceSlugInput = document.getElementById('newServiceSlug');
|
|
const slugAutoIndicator = document.getElementById('slugAutoIndicator');
|
|
const generateSlugBtn = document.getElementById('generateSlugBtn');
|
|
|
|
if (newServiceNameInput && newServiceSlugInput && generateSlugBtn) {
|
|
// Generate slug button
|
|
generateSlugBtn.addEventListener('click', async function() {
|
|
const serviceName = newServiceNameInput.value.trim();
|
|
if (serviceName) {
|
|
// Show loading state
|
|
const originalBtnHtml = this.innerHTML;
|
|
this.disabled = true;
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
|
|
|
|
try {
|
|
const slug = await generateSlugFromText(serviceName);
|
|
|
|
// Check if we're in edit mode
|
|
const addBtn = document.querySelector('#add-service .btn-primary');
|
|
const isEditMode = addBtn && addBtn.textContent.includes('Update');
|
|
|
|
// Get current service index if editing
|
|
let currentIndex = -1;
|
|
if (isEditMode) {
|
|
const onclickAttr = addBtn.getAttribute('onclick');
|
|
const match = onclickAttr.match(/updateService\((\d+)\)/);
|
|
if (match) {
|
|
currentIndex = parseInt(match[1]);
|
|
}
|
|
}
|
|
|
|
// Check for duplicate slug
|
|
if (isSlugDuplicate(slug, currentIndex)) {
|
|
const uniqueSlug = generateUniqueSlug(slug);
|
|
newServiceSlugInput.value = uniqueSlug;
|
|
showWarning(`Slug "${slug}" already exists. Generated unique slug: "${uniqueSlug}"`);
|
|
} else {
|
|
newServiceSlugInput.value = slug;
|
|
showSuccess('Slug generated successfully!');
|
|
}
|
|
|
|
if (slugAutoIndicator) {
|
|
slugAutoIndicator.textContent = 'GENERATED';
|
|
slugAutoIndicator.className = 'badge bg-success ms-1';
|
|
slugAutoIndicator.style.fontSize = '0.7em';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating slug:', error);
|
|
showError('Failed to generate slug. Please try again.');
|
|
} finally {
|
|
// Restore button state
|
|
this.disabled = false;
|
|
this.innerHTML = originalBtnHtml;
|
|
}
|
|
} else {
|
|
showError('Please enter a service name first.');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Generate slug using backend API
|
|
async function generateSlugFromText(text) {
|
|
try {
|
|
const response = await fetch('/admin/service/generate-slug', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ text: text })
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
return result.slug;
|
|
} else {
|
|
throw new Error(result.message || 'Failed to generate slug');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating slug:', error);
|
|
// Fallback to simple slug generation if API fails
|
|
return text
|
|
.toString()
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/\s+/g, '-')
|
|
.replace(/[^\w\-]+/g, '')
|
|
.replace(/\-\-+/g, '-')
|
|
.replace(/^-+/, '')
|
|
.replace(/-+$/, '');
|
|
}
|
|
}
|
|
|
|
// Check if slug already exists (excluding current service when editing)
|
|
function isSlugDuplicate(slug, excludeIndex = -1) {
|
|
return servicesData.some((service, index) => {
|
|
return service && service.slug === slug && index !== excludeIndex;
|
|
});
|
|
}
|
|
|
|
// Generate unique slug by appending number
|
|
function generateUniqueSlug(baseSlug) {
|
|
let counter = 1;
|
|
let uniqueSlug = baseSlug;
|
|
|
|
while (isSlugDuplicate(uniqueSlug, -1)) {
|
|
uniqueSlug = baseSlug + '-' + counter;
|
|
counter++;
|
|
}
|
|
|
|
return uniqueSlug;
|
|
}
|
|
|
|
function updateImagePreview(previewId, imagePath) {
|
|
const preview = document.getElementById(previewId);
|
|
if (imagePath) {
|
|
const fullImageUrl = getFullImageUrlJS(imagePath);
|
|
preview.innerHTML = `<img src="${fullImageUrl}" class="img-thumbnail" style="height: 80px; width: 100%; object-fit: cover;" alt="Preview">`;
|
|
} else {
|
|
preview.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function addService() {
|
|
const name = document.getElementById('newServiceName').value.trim();
|
|
const slug = document.getElementById('newServiceSlug').value.trim();
|
|
const description = document.getElementById('newServiceDescription').value.trim();
|
|
const image = document.getElementById('newServiceImage').value.trim();
|
|
const layout = document.getElementById('newServiceLayout').value;
|
|
|
|
if (!name || !slug || !description) {
|
|
showError('Please fill in all required fields and generate a slug.');
|
|
return;
|
|
}
|
|
|
|
// Check if service with same slug already exists
|
|
if (isSlugDuplicate(slug, -1)) {
|
|
showError('Service with this slug already exists. Please generate a new slug.');
|
|
return;
|
|
}
|
|
|
|
const newService = {
|
|
slug: slug,
|
|
name: name,
|
|
description: description,
|
|
image: image,
|
|
layout: layout,
|
|
details: {
|
|
title: name,
|
|
description: description,
|
|
mainImage: "img/inner-page/service-details/details-1.jpg",
|
|
overviewTitle: "Service Overview",
|
|
overviewDescription: "Service overview description...",
|
|
additionalDescription: "Additional description...",
|
|
keyFeaturesTitle: "Key Features",
|
|
keyFeaturesImage: "img/inner-page/service-details/details-2.jpg",
|
|
features: [],
|
|
faqTitle: "Frequently Asked Question",
|
|
faqImage: "img/inner-page/service-details/details-3.jpg",
|
|
faq: []
|
|
}
|
|
};
|
|
|
|
servicesData.push(newService);
|
|
updateServicesTable();
|
|
updateStatistics();
|
|
|
|
// Clear form
|
|
clearAddServiceForm();
|
|
|
|
showSuccess('Service added successfully!');
|
|
}
|
|
|
|
function deleteService(index) {
|
|
const service = servicesData[index];
|
|
if (!service) return;
|
|
|
|
// Set service name in modal
|
|
document.getElementById('deleteServiceName').textContent = service.name || 'Unnamed Service';
|
|
|
|
// Show custom modal
|
|
showDeleteModal();
|
|
|
|
// Handle confirm delete
|
|
const confirmBtn = document.getElementById('confirmDeleteBtn');
|
|
const newConfirmBtn = confirmBtn.cloneNode(true);
|
|
confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);
|
|
|
|
newConfirmBtn.addEventListener('click', async function() {
|
|
// Show loading state
|
|
this.disabled = true;
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Deleting...';
|
|
|
|
// Disable cancel button and close button during delete
|
|
const cancelBtn = document.querySelector('.custom-modal .btn-secondary');
|
|
const closeBtn = document.querySelector('.custom-modal-close');
|
|
cancelBtn.disabled = true;
|
|
closeBtn.disabled = true;
|
|
|
|
// Add loading overlay to modal
|
|
showModalLoading();
|
|
|
|
try {
|
|
// Simulate API call delay for better UX
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
// Perform delete
|
|
servicesData.splice(index, 1);
|
|
updateServicesTable();
|
|
updateStatistics();
|
|
|
|
// Hide modal
|
|
closeDeleteModal();
|
|
|
|
// Show success message
|
|
showSuccess(`Service "${service.name}" deleted successfully!`);
|
|
|
|
} catch (error) {
|
|
console.error('Error deleting service:', error);
|
|
showError('Failed to delete service. Please try again.');
|
|
} finally {
|
|
// Reset button states
|
|
this.disabled = false;
|
|
this.innerHTML = '<i class="fas fa-trash me-2"></i>Delete Service';
|
|
cancelBtn.disabled = false;
|
|
closeBtn.disabled = false;
|
|
|
|
// Hide loading overlay
|
|
hideModalLoading();
|
|
}
|
|
});
|
|
}
|
|
|
|
function showModalLoading() {
|
|
const modal = document.getElementById('customDeleteModal');
|
|
const loadingOverlay = document.createElement('div');
|
|
loadingOverlay.className = 'modal-loading-overlay';
|
|
loadingOverlay.innerHTML = `
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
|
|
<p class="mt-2 mb-0">Deleting service...</p>
|
|
</div>
|
|
`;
|
|
modal.appendChild(loadingOverlay);
|
|
}
|
|
|
|
function hideModalLoading() {
|
|
const loadingOverlay = document.querySelector('.modal-loading-overlay');
|
|
if (loadingOverlay) {
|
|
loadingOverlay.remove();
|
|
}
|
|
}
|
|
|
|
function showDeleteModal() {
|
|
const modal = document.getElementById('customDeleteModal');
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Add animation
|
|
setTimeout(() => {
|
|
modal.classList.add('show');
|
|
}, 10);
|
|
|
|
// Close modal when clicking backdrop (only if not loading)
|
|
const backdrop = modal.querySelector('.custom-modal-backdrop');
|
|
backdrop.onclick = function() {
|
|
if (!document.querySelector('.modal-loading-overlay')) {
|
|
closeDeleteModal();
|
|
}
|
|
};
|
|
|
|
// Close modal with ESC key (only if not loading)
|
|
document.addEventListener('keydown', handleEscKey);
|
|
}
|
|
|
|
function handleEscKey(event) {
|
|
if (event.key === 'Escape' && !document.querySelector('.modal-loading-overlay')) {
|
|
closeDeleteModal();
|
|
}
|
|
}
|
|
|
|
function clearAddServiceForm() {
|
|
document.getElementById('newServiceName').value = '';
|
|
document.getElementById('newServiceSlug').value = '';
|
|
document.getElementById('newServiceDescription').value = '';
|
|
document.getElementById('newServiceImage').value = '';
|
|
document.getElementById('newServiceLayout').value = 'left';
|
|
document.getElementById('newServiceImagePreview').innerHTML = '';
|
|
|
|
// Reset slug indicator
|
|
const slugAutoIndicator = document.getElementById('slugAutoIndicator');
|
|
if (slugAutoIndicator) {
|
|
slugAutoIndicator.textContent = 'AUTO';
|
|
slugAutoIndicator.className = 'badge bg-success ms-1';
|
|
slugAutoIndicator.style.fontSize = '0.7em';
|
|
}
|
|
}
|
|
|
|
function updateServicesTable() {
|
|
const tbody = document.getElementById('servicesTableBody');
|
|
tbody.innerHTML = '';
|
|
|
|
servicesData.forEach((service, index) => {
|
|
if (!service) return; // Skip undefined services
|
|
|
|
let imageHtml = '';
|
|
if (service.image) {
|
|
const fullImageUrl = getFullImageUrlJS(service.image);
|
|
imageHtml = `<img src="${fullImageUrl}" class="rounded" style="width: 60px; height: 45px; object-fit: cover;" alt="${service.name || 'Service'}" onerror="this.onerror=null; this.src='/images/placeholder.png'; this.classList.add('bg-light');">`;
|
|
} else {
|
|
imageHtml = `<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 60px; height: 45px;"><i class="fas fa-image text-muted"></i></div>`;
|
|
}
|
|
|
|
const row = `
|
|
<tr data-index="${index}">
|
|
<td class="text-muted">${index + 1}</td>
|
|
<td>${imageHtml}</td>
|
|
<td>
|
|
<strong>${service.name || 'Unnamed Service'}</strong>
|
|
${service.description ? `<br><small class="text-muted">${service.description.substring(0, 50)}...</small>` : ''}
|
|
</td>
|
|
<td><span class="badge bg-light text-dark">${service.slug || 'no-slug'}</span></td>
|
|
<td><span class="badge bg-${(service.layout === 'left') ? 'primary' : 'success'}"><i class="fas fa-align-${service.layout || 'left'}"></i> ${service.layout || 'left'}</span></td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="/admin/service/${service.slug || 'unknown'}/edit" class="btn btn-sm btn-outline-primary" title="Edit Service">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a href="/admin/service/${service.slug || 'unknown'}/details" class="btn btn-sm btn-outline-warning" title="Edit Details">
|
|
<i class="fas fa-cog"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteService(${index})" title="Delete Service">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
tbody.innerHTML += row;
|
|
});
|
|
}
|
|
|
|
function updateStatistics() {
|
|
const validServices = servicesData.filter(s => s && s.layout);
|
|
document.getElementById('totalCount').textContent = servicesData.length;
|
|
document.getElementById('leftCount').textContent = validServices.filter(s => s.layout === 'left').length;
|
|
document.getElementById('rightCount').textContent = validServices.filter(s => s.layout === 'right').length;
|
|
}
|
|
|
|
function updateAllJsonInputs(data) {
|
|
const servicesSection = {
|
|
title: data.services?.title || { subTitle: '', mainTitle: '' },
|
|
items: data.services?.items || []
|
|
};
|
|
|
|
document.getElementById('servicesJson').value = JSON.stringify(servicesSection);
|
|
}
|
|
|
|
function updateJsonData() {
|
|
const servicesSection = {
|
|
title: {
|
|
subTitle: document.getElementById('servicesSubTitle').value,
|
|
mainTitle: document.getElementById('servicesMainTitle').value,
|
|
},
|
|
items: servicesData
|
|
};
|
|
|
|
// Gửi toàn bộ services section (bao gồm cả title và items)
|
|
document.getElementById('servicesJson').value = JSON.stringify(servicesSection);
|
|
}
|
|
|
|
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...';
|
|
}
|
|
|
|
// Sử dụng imageType=service để upload vào folder service
|
|
const response = await fetch(`/admin/upload/image?imageType=service`, {
|
|
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 preview if it's the new service image
|
|
if (targetInput === 'newServiceImage') {
|
|
updateImagePreview('newServiceImagePreview', 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 showWarning(message) {
|
|
// Create and show warning alert
|
|
const alert = document.createElement('div');
|
|
alert.className = 'alert alert-warning 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;
|
|
}
|
|
|
|
/* Custom Delete Modal Styles */
|
|
.custom-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.custom-modal.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.custom-modal-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.custom-modal-dialog {
|
|
position: relative;
|
|
z-index: 10001;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
transform: scale(0.8);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.custom-modal.show .custom-modal-dialog {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.custom-modal-content {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.custom-modal-header {
|
|
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
|
padding: 20px 25px 15px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: between;
|
|
align-items: center;
|
|
}
|
|
|
|
.custom-modal-title {
|
|
color: var(--primary-dark);
|
|
font-weight: 600;
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.custom-modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 18px;
|
|
color: #6c757d;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.custom-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #495057;
|
|
}
|
|
|
|
.custom-modal-body {
|
|
padding: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.delete-icon {
|
|
background: rgba(220, 53, 69, 0.1);
|
|
border-radius: 50%;
|
|
width: 80px;
|
|
height: 80px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.custom-modal-footer {
|
|
padding: 15px 25px 25px;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.custom-modal-footer .btn {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.custom-modal .btn-danger {
|
|
background: linear-gradient(135deg, #dc3545, #c82333);
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.custom-modal .btn-danger:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
|
}
|
|
|
|
.custom-modal .btn-secondary {
|
|
background: #6c757d;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.custom-modal .btn-secondary:hover {
|
|
background: #5a6268;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Modal Loading Overlay */
|
|
.modal-loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10002;
|
|
border-radius: 15px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.loading-spinner {
|
|
text-align: center;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.loading-spinner p {
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.loading-spinner i {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Disable buttons during loading */
|
|
.custom-modal .btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
.custom-modal-close:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
</style> |