minhnhat/cms.uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/cms.hailearning.edu.vn
Code Pull Requests Activity
Files
08061232dd6b9a2ae7f8a96a65d1ca4319a770f6
cms.uldp.edu.vn/views/admin/home/index.ejs
Wini_Fy 7dd52d8669 refactor: remove camp location functionality
2026-02-05 10:52:27 +07:00

2741 lines
118 KiB
Plaintext
Raw Blame History

<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)">
Homepage Management
</h1>
<p class="text-muted mb-0">Edit content displayed on homepage</p>
</div>
<div>
<a
href="<%= frontendUrl %>"
class="btn btn-outline-primary"
target="_blank"
>
<i class="fas fa-external-link-alt me-2"></i>View Homepage
</a>
</div>
</div>
<div class="row">
<div class="col-12">
<form
action="/admin/home/update"
method="POST"
class="content-with-fixed-buttons"
>
<!-- Hidden inputs for JSON data -->
<input type="hidden" name="hero" id="heroJson" />
<input type="hidden" name="about" id="aboutJson" />
<input type="hidden" name="missionVision" id="missionVisionJson" />
<input type="hidden" name="whyChooseUs" id="whyChooseUsJson" />
<input type="hidden" name="activities" id="activitiesJson" />
<input type="hidden" name="faq" id="faqJson" />
<input type="hidden" name="partners" id="partnersJson" />
<input type="hidden" name="programs" id="programsJson" />
<input type="hidden" name="newsletter" id="newsletterJson" />
<input type="hidden" name="latestPosts" id="latestPostsJson" />
<!-- 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="#hero"
role="tab"
>
<i class="fas fa-home me-2"></i>Hero
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#about"
role="tab"
>
<i class="fas fa-info-circle me-2"></i>About
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#missionvision"
role="tab"
>
<i class="fas fa-bullseye me-2"></i>Mission & Vision
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#whychooseus"
role="tab"
>
<i class="fas fa-star me-2"></i>Why Choose Us
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#activities"
role="tab"
>
<i class="fas fa-running me-2"></i>Activities
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#faq" role="tab">
<i class="fas fa-question-circle me-2"></i>FAQ
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#partners"
role="tab"
>
<i class="fas fa-handshake me-2"></i>Partners
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#programs"
role="tab"
>
<i class="fas fa-th-large me-2"></i>Programs
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#newsletter"
role="tab"
>
<i class="fas fa-envelope me-2"></i>Newsletter
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-bs-toggle="tab"
href="#latestposts"
role="tab"
>
<i class="fas fa-blog me-2"></i>Latest Posts
</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<!-- Hero Tab -->
<div class="tab-pane fade show active" id="hero" role="tabpanel">
<div class="row g-4">
<!-- Basic Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-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">Title</label>
<input
type="text"
class="form-control"
id="heroTitle"
name="heroTitle"
value="<%= data.hero?.title || '' %>"
placeholder="e.g., Welcome to Adventure Camp"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Background Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="heroBackgroundImage"
name="heroBackgroundImage"
value="<%= data.hero?.backgroundImage || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="heroBackgroundImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.hero?.backgroundImage) { %>
<div class="mt-2">
<img
src="<%= data.hero.backgroundImage %>"
class="img-thumbnail"
style="
height: 200px;
width: 100%;
object-fit: cover;
"
alt="Background preview"
/>
</div>
<% } %>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="heroDescription"
name="heroDescription"
rows="3"
placeholder="Enter hero description"
>
<%= data.hero?.description || '' %></textarea
>
</div>
</div>
</div>
</div>
</div>
<!-- Button Configuration -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-mouse-pointer me-2"></i>Button
Configuration
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Button Label</label
>
<input
type="text"
class="form-control"
id="heroButtonLabel"
name="heroButtonLabel"
value="<%= data.hero?.button?.label || 'Book Your Adventure' %>"
placeholder="e.g., Book Your Adventure"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Button Link</label
>
<input
type="text"
class="form-control"
id="heroButtonHref"
name="heroButtonHref"
value="<%= data.hero?.button?.href || '/booking' %>"
placeholder="/booking"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Box -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-address-card me-2"></i>Contact Box
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium"
>Welcome Text</label
>
<input
type="text"
class="form-control"
id="heroContactWelcome"
name="heroContactWelcome"
value="<%= data.hero?.contactBox?.welcomeText || '' %>"
placeholder="e.g., Get in touch with us"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Phone Number</label
>
<input
type="text"
class="form-control"
id="heroContactPhone"
name="heroContactPhone"
value="<%= data.hero?.contactBox?.phone?.number || '' %>"
placeholder="+1 234 567 890"
/>
<small class="text-muted"
>Will auto-generate tel: link</small
>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Email Address</label
>
<input
type="email"
class="form-control"
id="heroContactEmail"
name="heroContactEmail"
value="<%= data.hero?.contactBox?.email?.address || '' %>"
placeholder="info@camp.com"
/>
<small class="text-muted"
>Will auto-generate mailto: link</small
>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Working Hours</label
>
<input
type="text"
class="form-control"
id="heroContactHours"
name="heroContactHours"
value="<%= data.hero?.contactBox?.workingHours?.hours || '' %>"
placeholder="Mon-Fri: 9AM-5PM"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About Tab -->
<div class="tab-pane fade" id="about" role="tabpanel">
<div class="row g-4">
<!-- Basic Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-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">Title</label>
<input
type="text"
class="form-control"
id="aboutTitle"
name="aboutTitle"
value="<%= data.about?.title || '' %>"
placeholder="e.g., About Our Camp"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="aboutSubtitle"
name="aboutSubtitle"
value="<%= data.about?.subtitle || '' %>"
placeholder="e.g., Creating Memories Since 2010"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="aboutDescription"
name="aboutDescription"
rows="4"
placeholder="Enter about description"
>
<%= data.about?.description || '' %></textarea
>
</div>
<div class="col-md-12">
<label class="form-label fw-medium">Quote</label>
<textarea
class="form-control"
id="aboutQuote"
name="aboutQuote"
rows="2"
placeholder="Enter inspirational quote"
>
<%= data.about?.quote || '' %></textarea
>
</div>
</div>
</div>
</div>
</div>
<!-- Main Images -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-images me-2"></i>Main Images
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Main Image 1</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="aboutMainImage1"
name="aboutMainImage1"
value="<%= data.about?.images?.mainImage1 || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="aboutMainImage1"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.about?.images?.mainImage1) { %>
<div class="mt-2">
<img
src="<%= data.about.images.mainImage1 %>"
class="img-thumbnail"
style="
height: 200px;
width: 100%;
object-fit: cover;
"
alt="Main Image 1"
/>
</div>
<% } %>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Main Image 2</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="aboutMainImage2"
name="aboutMainImage2"
value="<%= data.about?.images?.mainImage2 || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="aboutMainImage2"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.about?.images?.mainImage2) { %>
<div class="mt-2">
<img
src="<%= data.about.images.mainImage2 %>"
class="img-thumbnail"
style="
height: 200px;
width: 100%;
object-fit: cover;
"
alt="Main Image 2"
/>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Avatars -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-user-circle me-2"></i>Team Avatars
</h6>
</div>
<div class="card-body">
<% (data.about?.images?.avatars || []).forEach((avatar,
index) => { %>
<div class="row g-3 mb-3">
<div class="col-md-8">
<label class="form-label fw-medium"
>Avatar <%= index + 1 %></label
>
<div class="input-group">
<input
type="text"
class="form-control"
id="aboutAvatar_<%= index %>"
name="aboutAvatar_<%= index %>"
value="<%= avatar %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="aboutAvatar_<%= index %>"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
</div>
<div class="col-md-4">
<% if (avatar) { %>
<img
src="<%= avatar %>"
class="img-thumbnail mt-4"
style="
height: 80px;
width: 80px;
object-fit: cover;
border-radius: 50%;
"
alt="Avatar <%= index + 1 %>"
/>
<% } %>
</div>
</div>
<% }); %>
</div>
</div>
</div>
<!-- Features -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-list-ul me-2"></i>Features
</h6>
</div>
<div class="card-body">
<% (data.about?.features ||
[]).forEach(function(feature, index) { %>
<div class="mb-3">
<label class="form-label fw-medium"
>Feature <%= index + 1 %></label
>
<textarea
class="form-control"
id="aboutFeature_<%= index %>"
name="aboutFeature_<%= index %>"
rows="2"
placeholder="Enter feature description"
>
<%= feature %></textarea
>
</div>
<% }); %>
</div>
</div>
</div>
<!-- Button & Stats -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-cog me-2"></i>Button & Statistics
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Button Label</label
>
<input
type="text"
class="form-control"
id="aboutButtonLabel"
name="aboutButtonLabel"
value="<%= data.about?.button?.label || '' %>"
placeholder="e.g., Learn More"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Button Link</label
>
<input
type="text"
class="form-control"
id="aboutButtonHref"
name="aboutButtonHref"
value="<%= data.about?.button?.href || '' %>"
placeholder="/about"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Customer Count</label
>
<input
type="number"
class="form-control"
id="aboutCustomerCount"
name="aboutCustomerCount"
value="<%= data.about?.stats?.customerCount || 0 %>"
placeholder="1000"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Customer Label</label
>
<input
type="text"
class="form-control"
id="aboutCustomerLabel"
name="aboutCustomerLabel"
value="<%= data.about?.stats?.customerLabel || '' %>"
placeholder="e.g., Happy Campers"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mission Vision Tab -->
<div class="tab-pane fade" id="missionvision" role="tabpanel">
<div class="row g-4">
<!-- General Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-info-circle me-2"></i>General
Information
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="mvTitle"
name="mvTitle"
value="<%= data.missionVision?.title || '' %>"
placeholder="e.g., Who We Are"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="mvSubtitle"
name="mvSubtitle"
value="<%= data.missionVision?.subtitle || '' %>"
placeholder="e.g., Company Mission & Vision"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Background Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="mvBackgroundImage"
name="mvBackgroundImage"
value="<%= data.missionVision?.backgroundImage || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="mvBackgroundImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.missionVision?.backgroundImage) { %>
<div class="mt-2">
<img
src="<%= data.missionVision.backgroundImage %>"
class="img-thumbnail"
style="
height: 200px;
width: 100%;
object-fit: cover;
"
alt="Mission Vision Background"
/>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Cards -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-th-large me-2"></i>Mission & Vision
Cards
</h6>
</div>
<div class="card-body">
<% (data.missionVision?.cards ||
[]).forEach(function(card, index) { %>
<div class="card mb-3 bg-light border">
<div class="card-body">
<div class="d-flex justify-content-between mb-2">
<h6 class="card-title fw-bold">
Card <%= index + 1 %>
</h6>
</div>
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium"
>Title</label
>
<input
type="text"
class="form-control"
id="mvCardTitle_<%= index %>"
value="<%= card.title || '' %>"
placeholder="Card Title"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="mvCardDesc_<%= index %>"
rows="2"
placeholder="Card Description"
>
<%= card.description || '' %></textarea
>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.missionVision?.cards ||
data.missionVision.cards.length === 0) { %>
<div class="alert alert-secondary text-center">
No cards available. To add cards, please update the
database or run migration.
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Why Choose Us Tab -->
<div class="tab-pane fade" id="whychooseus" role="tabpanel">
<div class="row g-4">
<!-- General Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-info-circle me-2"></i>General
Information
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="wcuTitle"
value="<%= data.whyChooseUs?.title || '' %>"
placeholder="e.g., - Why Choose Us"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="wcuSubtitle"
value="<%= data.whyChooseUs?.subtitle || '' %>"
placeholder="e.g., Creating unforgettable camp experiences"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="wcuDescription"
rows="3"
placeholder="Enter description"
>
<%= data.whyChooseUs?.description || '' %></textarea
>
</div>
</div>
</div>
</div>
</div>
<!-- Button Config -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-mouse-pointer me-2"></i>Main Button
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Label</label>
<input
type="text"
class="form-control"
id="wcuButtonLabel"
value="<%= data.whyChooseUs?.button?.label || '' %>"
placeholder="e.g., Explore Now"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Link</label>
<input
type="text"
class="form-control"
id="wcuButtonHref"
value="<%= data.whyChooseUs?.button?.href || '' %>"
placeholder="/booking"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Features List -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-list-check me-2"></i>Features
</h6>
</div>
<div class="card-body">
<% (data.whyChooseUs?.features ||
[]).forEach(function(feature, index) { %>
<div class="card mb-3 bg-light border">
<div class="card-body">
<h6 class="card-title fw-bold mb-3">
Feature <%= index + 1 %>
</h6>
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium"
>Title</label
>
<input
type="text"
class="form-control"
id="wcuFeatureTitle_<%= index %>"
value="<%= feature.title || '' %>"
placeholder="Feature Title"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="wcuFeatureDesc_<%= index %>"
rows="2"
placeholder="Feature Description"
>
<%= feature.description || '' %></textarea
>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.whyChooseUs?.features ||
data.whyChooseUs.features.length === 0) { %>
<div class="alert alert-secondary text-center">
No features available. Add via database or migration.
</div>
<% } %>
</div>
</div>
</div>
<!-- Tags -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-tags me-2"></i>Tags
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label fw-medium"
>Tags (One per line)</label
>
<textarea
class="form-control"
id="wcuTags"
rows="5"
placeholder="Nature-Friendly&#10;Adventure-Ready&#10;Community Service"
>
<%= (data.whyChooseUs?.tags || []).join('\n') %></textarea
>
<div class="form-text">
Enter each tag on a new line.
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-bullhorn me-2"></i>Call to Action
(CTA)
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium"
>Main Text</label
>
<input
type="text"
class="form-control"
id="wcuCtaText"
value="<%= data.whyChooseUs?.cta?.text || '' %>"
placeholder="e.g., Let's make something great work together."
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Link Text</label
>
<input
type="text"
class="form-control"
id="wcuCtaLinkText"
value="<%= data.whyChooseUs?.cta?.linkText || '' %>"
placeholder="e.g., Get Free Quote"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Link URL</label>
<input
type="text"
class="form-control"
id="wcuCtaLinkHref"
value="<%= data.whyChooseUs?.cta?.linkHref || '' %>"
placeholder="#"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Activities Tab -->
<div class="tab-pane fade" id="activities" role="tabpanel">
<div class="row g-4">
<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-running me-2"></i>Activity Cards
</h6>
</div>
<div class="card-body">
<% (data.activities?.cards || []).forEach(function(card,
index) { %>
<div class="card mb-4 bg-light border">
<div class="card-body">
<h6 class="card-title fw-bold mb-3">
Activity <%= index + 1 %>
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Title</label
>
<input
type="text"
class="form-control"
id="activityTitle_<%= index %>"
value="<%= card.title || '' %>"
placeholder="Activity Title"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="activityImage_<%= index %>"
value="<%= card.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="activityImage_<%= index %>"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (card.image) { %>
<div class="mt-2">
<img
src="<%= card.image %>"
class="img-thumbnail"
style="
height: 150px;
width: 100%;
object-fit: cover;
"
alt="Activity Image"
/>
</div>
<% } %>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="activityDesc_<%= index %>"
rows="3"
placeholder="To get good in camping, you have to be..."
>
<%= card.description || '' %></textarea
>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.activities?.cards ||
data.activities.cards.length === 0) { %>
<div class="alert alert-secondary text-center">
No activities found. Add them via database or
migration.
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- FAQ Tab -->
<div class="tab-pane fade" id="faq" role="tabpanel">
<div class="row g-4">
<!-- General Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-info-circle me-2"></i>General
Information
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="faqTitle"
value="<%= data.faq?.title || '' %>"
placeholder="e.g., - Frequently Asked Questions"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="faqSubtitle"
value="<%= data.faq?.subtitle || '' %>"
placeholder="e.g., Essential Camp Info"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="faqDescription"
rows="3"
placeholder="Description..."
>
<%= data.faq?.description || '' %></textarea
>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Side Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="faqImage"
value="<%= data.faq?.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="faqImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.faq?.image) { %>
<div class="mt-2">
<img
src="<%= data.faq.image %>"
class="img-thumbnail"
style="
height: 200px;
width: 100%;
object-fit: cover;
"
alt="FAQ Image"
/>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-phone-alt me-2"></i>Sidebar Contact
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="faqContactTitle"
value="<%= data.faq?.contact?.title || '' %>"
placeholder="e.g., Need Any Help?"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Contact Info</label
>
<input
type="text"
class="form-control"
id="faqContactInfo"
value="<%= data.faq?.contact?.info || '' %>"
placeholder="e.g., +(123) 456-789 | info@hailearning.edu.vn"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Questions List -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-question-circle me-2"></i>Questions &
Answers
</h6>
</div>
<div class="card-body">
<% (data.faq?.questions || []).forEach(function(item,
index) { %>
<div class="card mb-3 bg-light border">
<div class="card-body">
<h6 class="card-title fw-bold mb-3">
Q&A <%= index + 1 %>
</h6>
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium"
>Question</label
>
<input
type="text"
class="form-control"
id="faqQuestion_<%= index %>"
value="<%= item.question || '' %>"
placeholder="Type question here"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Answer</label
>
<textarea
class="form-control"
id="faqAnswer_<%= index %>"
rows="3"
placeholder="Type answer here"
>
<%= item.answer || '' %></textarea
>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.faq?.questions ||
data.faq.questions.length === 0) { %>
<div class="alert alert-secondary text-center">
No questions available. Add via database or migration.
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Partners Tab -->
<div class="tab-pane fade" id="partners" role="tabpanel">
<div class="row g-4">
<!-- General Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-info-circle me-2"></i>General
Information
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="partnersTitle"
value="<%= data.partners?.title || '' %>"
placeholder="e.g., - Our Partners"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="partnersSubtitle"
value="<%= data.partners?.subtitle || '' %>"
placeholder="e.g., Collaborating for a Better Future"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Background Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="partnersBackgroundImage"
value="<%= data.partners?.backgroundImage || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="partnersBackgroundImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.partners?.backgroundImage) { %>
<div class="mt-2">
<img
src="<%= data.partners.backgroundImage %>"
class="img-thumbnail"
style="
height: 200px;
width: 100%;
object-fit: cover;
"
alt="Partners Background"
/>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Logos -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-images me-2"></i>Partner Logos
</h6>
</div>
<div class="card-body">
<% (data.partners?.logos || []).forEach(function(logo,
index) { %>
<div class="row g-3 mb-3 border-bottom pb-3">
<div class="col-md-12">
<label class="form-label fw-medium"
>Logo <%= index + 1 %></label
>
<div class="input-group">
<input
type="text"
class="form-control"
id="partnersLogo_<%= index %>"
value="<%= logo %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="partnersLogo_<%= index %>"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (logo) { %>
<div class="mt-2">
<img
src="<%= logo %>"
class="img-thumbnail"
style="height: 60px; object-fit: contain"
alt="Logo <%= index + 1 %>"
/>
</div>
<% } %>
</div>
</div>
<% }); %> <% if (!data.partners?.logos ||
data.partners.logos.length === 0) { %>
<div class="alert alert-secondary text-center">
No logos available. Add via database or migration.
</div>
<% } %>
</div>
</div>
</div>
<!-- Call to Action -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-bullhorn me-2"></i>CTA Section
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Badge</label>
<input
type="text"
class="form-control"
id="partnersCtaBadge"
value="<%= data.partners?.cta?.badge || '' %>"
placeholder="e.g., Volunteer"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Link Text</label
>
<input
type="text"
class="form-control"
id="partnersCtaLinkText"
value="<%= data.partners?.cta?.linkText || '' %>"
placeholder="e.g., Become a Volunteer"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Main Text</label
>
<input
type="text"
class="form-control"
id="partnersCtaText"
value="<%= data.partners?.cta?.text || '' %>"
placeholder="e.g., Join your hand with us for a better life and beautiful future."
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium">Link URL</label>
<input
type="text"
class="form-control"
id="partnersCtaLinkHref"
value="<%= data.partners?.cta?.linkHref || '' %>"
placeholder="/volunteer"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Programs Tab -->
<div class="tab-pane fade" id="programs" role="tabpanel">
<div class="row g-4">
<!-- General Info -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-info-circle me-2"></i>General
Information
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="programsTitle"
value="<%= data.programs?.title || '' %>"
placeholder="e.g., - Activities"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="programsSubtitle"
value="<%= data.programs?.subtitle || '' %>"
placeholder="e.g., Explore Our Activities"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Button Label</label
>
<input
type="text"
class="form-control"
id="programsButtonLabel"
value="<%= data.programs?.button?.label || '' %>"
placeholder="e.g., Explore Now"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Button Link</label
>
<input
type="text"
class="form-control"
id="programsButtonHref"
value="<%= data.programs?.button?.href || '' %>"
placeholder="/booking"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Card Configuration -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-credit-card me-2"></i>Card Display
Settings
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-3">
<label class="form-label fw-medium"
>Price Prefix</label
>
<input
type="text"
class="form-control"
id="programsCardPricePrefix"
value="<%= data.programs?.card?.pricePrefix || 'from' %>"
placeholder="from"
/>
</div>
<div class="col-md-3">
<label class="form-label fw-medium"
>Price Suffix</label
>
<input
type="text"
class="form-control"
id="programsCardPriceSuffix"
value="<%= data.programs?.card?.priceSuffix || 'USD' %>"
placeholder="USD"
/>
</div>
<div class="col-md-3">
<label class="form-label fw-medium"
>Card Button Label</label
>
<input
type="text"
class="form-control"
id="programsCardButtonLabel"
value="<%= data.programs?.card?.buttonLabel || 'Camp Detail' %>"
placeholder="Camp Detail"
/>
</div>
<div class="col-md-3">
<label class="form-label fw-medium"
>Card Button Link</label
>
<input
type="text"
class="form-control"
id="programsCardButtonHref"
value="<%= data.programs?.card?.buttonHref || '/camp-profiles' %>"
placeholder="/camp-profiles"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Program Items -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-th-large me-2"></i>Program Items
<span class="badge bg-secondary ms-2"
><%= (data.programs?.items || []).length %>
items</span
>
</h6>
</div>
<div class="card-body">
<% (data.programs?.items || []).forEach(function(item,
index) { %>
<div class="card mb-4 bg-light border">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<h6 class="card-title fw-bold mb-0">
Program <%= index + 1 %>: <%= item.title ||
'Untitled' %>
</h6>
<span class="badge bg-info"
><%= item.id || 'No ID' %></span
>
</div>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label fw-medium">ID</label>
<input
type="text"
class="form-control"
id="programItemId_<%= index %>"
value="<%= item.id || '' %>"
placeholder="e.g., adventure-sports-creative"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Title</label
>
<input
type="text"
class="form-control"
id="programItemTitle_<%= index %>"
value="<%= item.title || '' %>"
placeholder="e.g., Adventure, Sports & Creative"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Price (USD)</label
>
<input
type="text"
class="form-control"
id="programItemPrice_<%= index %>"
value="<%= item.price || '' %>"
placeholder="395"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Age Range</label
>
<input
type="text"
class="form-control"
id="programItemAge_<%= index %>"
value="<%= item.age || '' %>"
placeholder="From 12 - 18 years old"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Location</label
>
<input
type="text"
class="form-control"
id="programItemLocation_<%= index %>"
value="<%= item.location || '' %>"
placeholder="Thailand"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium">Slug</label>
<input
type="text"
class="form-control"
id="programItemSlug_<%= index %>"
value="<%= item.slug || '' %>"
placeholder="adventure-sports-creative"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Seasons (comma-separated)</label
>
<input
type="text"
class="form-control"
id="programItemSeasons_<%= index %>"
value="<%= (item.seasons || []).join(', ') %>"
placeholder="spring, summer, autumn"
/>
<div class="form-text">
Enter seasons separated by commas
</div>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="programItemImage_<%= index %>"
value="<%= item.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="programItemImage_<%= index %>"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (item.image) { %>
<div class="mt-2">
<img
src="<%= item.image %>"
class="img-thumbnail"
style="
height: 150px;
width: 100%;
object-fit: cover;
"
alt="Program Image"
/>
</div>
<% } %>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.programs?.items ||
data.programs.items.length === 0) { %>
<div class="alert alert-secondary text-center">
<i class="fas fa-info-circle me-2"></i>
No program items available. Add them via database or
migration.
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter Tab -->
<div class="tab-pane fade" id="newsletter" role="tabpanel">
<div class="row g-4">
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-envelope me-2"></i>Newsletter
Configuration
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="newsletterTitle"
value="<%= data.newsletter?.title || '' %>"
placeholder="e.g., Subscribe to Our Newsletter"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Subtitle</label>
<input
type="text"
class="form-control"
id="newsletterSubtitle"
value="<%= data.newsletter?.subtitle || '' %>"
placeholder="e.g., Stay updated with our latest news"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="newsletterDescription"
rows="3"
placeholder="e.g., Join our community and get access to exclusive camping tips..."
>
<%= data.newsletter?.description || '' %></textarea
>
</div>
<!-- Images -->
<div class="col-md-6">
<label class="form-label fw-medium"
>Main Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="newsletterImage"
value="<%= data.newsletter?.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="newsletterImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.newsletter?.image) { %>
<div class="mt-2">
<img
src="<%= data.newsletter.image %>"
class="img-thumbnail"
style="
height: 150px;
width: 100%;
object-fit: cover;
"
alt="Newsletter Image"
/>
</div>
<% } %>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Decorative Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="newsletterDecorativeImage"
value="<%= data.newsletter?.decorativeImage || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="newsletterDecorativeImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.newsletter?.decorativeImage) { %>
<div class="mt-2">
<img
src="<%= data.newsletter.decorativeImage %>"
class="img-thumbnail"
style="
height: 150px;
width: 100%;
object-fit: contain;
"
alt="Decorative Image"
/>
</div>
<% } %>
</div>
<!-- Form Config -->
<div class="col-md-4">
<label class="form-label fw-medium"
>Input Placeholder</label
>
<input
type="text"
class="form-control"
id="newsletterPlaceholder"
value="<%= data.newsletter?.button?.placeholder || '' %>"
placeholder="e.g., Enter your email address"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Button Label</label
>
<input
type="text"
class="form-control"
id="newsletterButtonLabel"
value="<%= data.newsletter?.button?.label || '' %>"
placeholder="e.g., Subscribe"
/>
</div>
<div class="col-md-4">
<label class="form-label fw-medium"
>Button Link</label
>
<input
type="text"
class="form-control"
id="newsletterButtonHref"
value="<%= data.newsletter?.button?.href || '' %>"
placeholder="/booking"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Latest Posts Tab -->
<div class="tab-pane fade" id="latestposts" role="tabpanel">
<div class="row g-4">
<!-- General Settings -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-cog me-2"></i>General Settings
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Section Title</label
>
<input
type="text"
class="form-control"
id="lpTitle"
value="<%= data.latestPosts?.title || '' %>"
placeholder="e.g., Latest From Our Blog"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Section Subtitle</label
>
<input
type="text"
class="form-control"
id="lpSubtitle"
value="<%= data.latestPosts?.subtitle || '' %>"
placeholder="e.g., News & Updates"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Search Placeholder</label
>
<input
type="text"
class="form-control"
id="lpSearchPlaceholder"
value="<%= data.latestPosts?.searchPlaceholder || '' %>"
placeholder="e.g., Search posts..."
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Sidebar Title</label
>
<input
type="text"
class="form-control"
id="lpSidebarTitle"
value="<%= data.latestPosts?.sidebarTitle || '' %>"
placeholder="e.g., Recent News"
/>
</div>
</div>
</div>
</div>
</div>
<!-- Featured Card -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-star me-2"></i>Featured Card
(Sidebar)
</h6>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-medium">Image</label>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="lpFeaturedImage"
value="<%= data.latestPosts?.featuredCard?.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="lpFeaturedImage"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>Upload
</button>
</div>
<% if (data.latestPosts?.featuredCard?.image) { %>
<div class="mt-2">
<img
src="<%= data.latestPosts.featuredCard.image %>"
class="img-thumbnail"
style="height: 150px; object-fit: cover"
alt="Featured"
/>
</div>
<% } %>
</div>
<div class="col-md-6">
<label class="form-label fw-medium">Title</label>
<input
type="text"
class="form-control"
id="lpFeaturedTitle"
value="<%= data.latestPosts?.featuredCard?.title || '' %>"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="lpFeaturedDesc"
rows="2"
>
<%= data.latestPosts?.featuredCard?.description || '' %></textarea
>
</div>
</div>
</div>
</div>
</div>
<!-- Blog Posts List -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-list me-2"></i>Main Blog Posts
</h6>
</div>
<div class="card-body">
<% (data.latestPosts?.blogPosts ||
[]).forEach(function(post, index) { %>
<div class="card mb-3 bg-light border">
<div class="card-body">
<h6 class="card-title fw-bold mb-3">
Post <%= index + 1 %>
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Title</label
>
<input
type="text"
class="form-control"
id="lpPostTitle_<%= index %>"
value="<%= post.title || '' %>"
/>
</div>
<div class="col-md-3">
<label class="form-label fw-medium">Date</label>
<input
type="text"
class="form-control"
id="lpPostDate_<%= index %>"
value="<%= post.date || '' %>"
/>
</div>
<div class="col-md-3">
<label class="form-label fw-medium"
>ID (Info)</label
>
<input
type="number"
class="form-control"
id="lpPostId_<%= index %>"
value="<%= post.id || 0 %>"
/>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Image</label
>
<div class="input-group mb-2">
<input
type="text"
class="form-control"
id="lpPostImage_<%= index %>"
value="<%= post.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="lpPostImage_<%= index %>"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>
</button>
</div>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description</label
>
<textarea
class="form-control"
id="lpPostDesc_<%= index %>"
rows="2"
>
<%= post.description || '' %></textarea
>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.latestPosts?.blogPosts ||
data.latestPosts.blogPosts.length === 0) { %>
<div class="alert alert-secondary text-center">
No blog posts found.
</div>
<% } %>
</div>
</div>
</div>
<!-- Sidebar Posts List -->
<div class="col-md-12">
<div class="card border shadow-sm">
<div class="card-header bg-white">
<h6 class="mb-0">
<i class="fas fa-newspaper me-2"></i>Sidebar Posts
</h6>
</div>
<div class="card-body">
<% (data.latestPosts?.sidebarPosts ||
[]).forEach(function(post, index) { %>
<div class="card mb-3 bg-light border">
<div class="card-body">
<h6 class="card-title fw-bold mb-3">
Sidebar Post <%= index + 1 %>
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-medium"
>Title</label
>
<input
type="text"
class="form-control"
id="lpSidebarPostTitle_<%= index %>"
value="<%= post.title || '' %>"
/>
</div>
<div class="col-md-6">
<label class="form-label fw-medium"
>Image</label
>
<div class="input-group">
<input
type="text"
class="form-control"
id="lpSidebarPostImage_<%= index %>"
value="<%= post.image || '' %>"
/>
<button
type="button"
class="btn btn-outline-primary btn-upload-image"
data-target-input="lpSidebarPostImage_<%= index %>"
data-image-type="home"
>
<i class="fas fa-upload me-1"></i>
</button>
</div>
</div>
<div class="col-md-12">
<label class="form-label fw-medium"
>Description (Optional)</label
>
<textarea
class="form-control"
id="lpSidebarPostDesc_<%= index %>"
rows="1"
>
<%= post.description || '' %></textarea
>
</div>
</div>
</div>
</div>
<% }); %> <% if (!data.latestPosts?.sidebarPosts ||
data.latestPosts.sidebarPosts.length === 0) { %>
<div class="alert alert-secondary text-center">
No sidebar posts found.
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Move buttons to fixed bottom -->
<div class="fixed-bottom-buttons">
<button type="reset" class="btn btn-secondary">
<i class="fas fa-undo"></i>
<span>Reset</span>
</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i>
<span>Save Changes</span>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Image upload input -->
<input type="file" id="directImageUpload" style="display: none" />
<input type="hidden" id="currentImageType" name="imageType" />
<input type="hidden" id="currentTargetInput" name="targetInput" />
<script>
document.addEventListener("DOMContentLoaded", function () {
console.log("Admin Home page loaded");
initializeFormHandlers();
});
function initializeFormHandlers() {
// Form submission
const form = document.querySelector("form");
if (form) {
form.addEventListener("submit", handleFormSubmit);
}
// 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 direct image upload
const fileInput = document.getElementById("directImageUpload");
if (fileInput) {
fileInput.addEventListener("change", handleDirectImageUpload);
}
}
function openImageUploader(targetInput, imageType) {
document.getElementById("currentImageType").value = imageType;
document.getElementById("currentTargetInput").value = targetInput;
document.getElementById("directImageUpload").click();
}
async function handleDirectImageUpload(e) {
if (!this.files || !this.files[0]) return;
const file = this.files[0];
const imageType = document.getElementById("currentImageType").value;
const targetInput = document.getElementById("currentTargetInput").value;
try {
const formData = new FormData();
formData.append("image", file);
const response = await fetch(
`/admin/upload/image?imageType=${imageType}`,
{
method: "POST",
body: formData,
}
);
const result = await response.json();
if (result.success && result.path) {
const inputElement = document.getElementById(targetInput);
if (inputElement) {
inputElement.value = result.path;
updateImagePreview(inputElement, result.path);
}
showToast("Success", "Image uploaded successfully", "success");
} else {
throw new Error(result.error || "Upload failed");
}
} catch (error) {
console.error("Upload error:", error);
showToast("Error", "Failed to upload image: " + error.message, "error");
}
this.value = "";
}
function updateImagePreview(inputElement, imagePath) {
let preview = inputElement.parentElement.nextElementSibling;
if (preview && preview.classList.contains("mt-2")) {
const img = preview.querySelector("img");
if (img) {
img.src = imagePath;
}
}
}
function handleFormSubmit(e) {
e.preventDefault();
try {
const formData = prepareFormData();
// Update hidden JSON inputs
Object.keys(formData).forEach((key) => {
const input = document.getElementById(`${key}Json`);
if (input) {
input.value = JSON.stringify(formData[key]);
}
});
showToast("Info", "Saving changes...", "info");
this.submit();
} catch (error) {
console.error("Error handling form:", error);
showToast("Error", "Error processing data: " + error.message, "error");
}
}
function prepareFormData() {
return {
hero: prepareHeroData(),
about: prepareAboutData(),
missionVision: prepareMissionVisionData(),
whyChooseUs: prepareWhyChooseUsData(),
activities: prepareActivitiesData(),
faq: prepareFaqData(),
partners: preparePartnersData(),
programs: prepareProgramsData(),
newsletter: prepareNewsletterData(),
latestPosts: prepareLatestPostsData(),
};
}
function prepareHeroData() {
return {
title: document.getElementById("heroTitle")?.value || "",
description: document.getElementById("heroDescription")?.value || "",
backgroundImage:
document.getElementById("heroBackgroundImage")?.value || "",
button: {
label:
document.getElementById("heroButtonLabel")?.value ||
"Book Your Adventure",
href: document.getElementById("heroButtonHref")?.value || "/booking",
},
contactBox: {
welcomeText: document.getElementById("heroContactWelcome")?.value || "",
phone: {
label: "Call us",
number: document.getElementById("heroContactPhone")?.value || "",
href: `tel:${
document.getElementById("heroContactPhone")?.value || ""
}`,
},
email: {
label: "Email",
address: document.getElementById("heroContactEmail")?.value || "",
href: `mailto:${
document.getElementById("heroContactEmail")?.value || ""
}`,
},
workingHours: {
label: "Working Hours",
hours: document.getElementById("heroContactHours")?.value || "",
},
},
};
}
function prepareAboutData() {
// Count avatars and features by checking how many inputs exist in DOM
let avatarCount = 0;
while (document.getElementById(`aboutAvatar_${avatarCount}`)) {
avatarCount++;
}
let featureCount = 0;
while (document.getElementById(`aboutFeature_${featureCount}`)) {
featureCount++;
}
// Collect avatars
const avatars = Array.from({ length: avatarCount }, (_, i) => {
const input = document.getElementById(`aboutAvatar_${i}`);
return input ? input.value : "";
}).filter((url) => url);
// Collect features
const features = Array.from({ length: featureCount }, (_, i) => {
const textarea = document.getElementById(`aboutFeature_${i}`);
return textarea ? textarea.value : "";
}).filter((f) => f);
return {
title: document.getElementById("aboutTitle")?.value || "",
subtitle: document.getElementById("aboutSubtitle")?.value || "",
description: document.getElementById("aboutDescription")?.value || "",
images: {
mainImage1: document.getElementById("aboutMainImage1")?.value || "",
mainImage2: document.getElementById("aboutMainImage2")?.value || "",
avatars: avatars,
},
features: features,
quote: document.getElementById("aboutQuote")?.value || "",
button: {
label: document.getElementById("aboutButtonLabel")?.value || "",
href: document.getElementById("aboutButtonHref")?.value || "",
},
stats: {
customerCount:
parseInt(document.getElementById("aboutCustomerCount")?.value) || 0,
customerLabel:
document.getElementById("aboutCustomerLabel")?.value || "",
},
};
}
function prepareMissionVisionData() {
// Count cards
let cardCount = 0;
while (document.getElementById(`mvCardTitle_${cardCount}`)) {
cardCount++;
}
const cards = Array.from({ length: cardCount }, (_, i) => {
const titleInput = document.getElementById(`mvCardTitle_${i}`);
const descInput = document.getElementById(`mvCardDesc_${i}`);
return {
title: titleInput ? titleInput.value : "",
description: descInput ? descInput.value : "",
};
}).filter((c) => c.title || c.description);
return {
title: document.getElementById("mvTitle")?.value || "",
subtitle: document.getElementById("mvSubtitle")?.value || "",
backgroundImage:
document.getElementById("mvBackgroundImage")?.value || "",
cards: cards,
};
}
function prepareWhyChooseUsData() {
// Collect features
let featureCount = 0;
while (document.getElementById(`wcuFeatureTitle_${featureCount}`)) {
featureCount++;
}
const features = Array.from({ length: featureCount }, (_, i) => {
const titleInput = document.getElementById(`wcuFeatureTitle_${i}`);
const descInput = document.getElementById(`wcuFeatureDesc_${i}`);
return {
title: titleInput ? titleInput.value : "",
description: descInput ? descInput.value : "",
};
}).filter((f) => f.title || f.description);
// Collect tags
const tagsInput = document.getElementById("wcuTags");
const tags = tagsInput
? tagsInput.value
.split("\n")
.map((t) => t.trim())
.filter((t) => t)
: [];
return {
title: document.getElementById("wcuTitle")?.value || "",
subtitle: document.getElementById("wcuSubtitle")?.value || "",
description: document.getElementById("wcuDescription")?.value || "",
button: {
label: document.getElementById("wcuButtonLabel")?.value || "",
href: document.getElementById("wcuButtonHref")?.value || "",
},
features: features,
tags: tags,
cta: {
text: document.getElementById("wcuCtaText")?.value || "",
linkText: document.getElementById("wcuCtaLinkText")?.value || "",
linkHref: document.getElementById("wcuCtaLinkHref")?.value || "",
},
};
}
function prepareActivitiesData() {
let cardCount = 0;
while (document.getElementById(`activityTitle_${cardCount}`)) {
cardCount++;
}
const cards = Array.from({ length: cardCount }, (_, i) => {
return {
title: document.getElementById(`activityTitle_${i}`)?.value || "",
description: document.getElementById(`activityDesc_${i}`)?.value || "",
image: document.getElementById(`activityImage_${i}`)?.value || "",
};
}).filter((c) => c.title || c.description || c.image);
return {
cards: cards,
};
}
function prepareFaqData() {
let qCount = 0;
while (document.getElementById(`faqQuestion_${qCount}`)) {
qCount++;
}
const questions = Array.from({ length: qCount }, (_, i) => {
return {
question: document.getElementById(`faqQuestion_${i}`)?.value || "",
answer: document.getElementById(`faqAnswer_${i}`)?.value || "",
};
}).filter((q) => q.question || q.answer);
return {
title: document.getElementById("faqTitle")?.value || "",
subtitle: document.getElementById("faqSubtitle")?.value || "",
description: document.getElementById("faqDescription")?.value || "",
image: document.getElementById("faqImage")?.value || "",
contact: {
title: document.getElementById("faqContactTitle")?.value || "",
info: document.getElementById("faqContactInfo")?.value || "",
},
questions: questions,
};
}
function preparePartnersData() {
let logoCount = 0;
while (document.getElementById(`partnersLogo_${logoCount}`)) {
logoCount++;
}
const logos = Array.from({ length: logoCount }, (_, i) => {
const input = document.getElementById(`partnersLogo_${i}`);
return input ? input.value : "";
}).filter((url) => url);
return {
title: document.getElementById("partnersTitle")?.value || "",
subtitle: document.getElementById("partnersSubtitle")?.value || "",
backgroundImage:
document.getElementById("partnersBackgroundImage")?.value || "",
logos: logos,
cta: {
badge: document.getElementById("partnersCtaBadge")?.value || "",
text: document.getElementById("partnersCtaText")?.value || "",
linkText: document.getElementById("partnersCtaLinkText")?.value || "",
linkHref: document.getElementById("partnersCtaLinkHref")?.value || "",
},
};
}
function prepareProgramsData() {
// Count program items
let itemCount = 0;
while (document.getElementById(`programItemId_${itemCount}`)) {
itemCount++;
}
// Collect program items
const items = Array.from({ length: itemCount }, (_, i) => {
const seasonsInput = document.getElementById(`programItemSeasons_${i}`);
const seasons = seasonsInput
? seasonsInput.value
.split(",")
.map((s) => s.trim())
.filter((s) => s)
: [];
return {
id: document.getElementById(`programItemId_${i}`)?.value || "",
title: document.getElementById(`programItemTitle_${i}`)?.value || "",
price: document.getElementById(`programItemPrice_${i}`)?.value || "",
seasons: seasons,
age: document.getElementById(`programItemAge_${i}`)?.value || "",
location:
document.getElementById(`programItemLocation_${i}`)?.value || "",
image: document.getElementById(`programItemImage_${i}`)?.value || "",
slug: document.getElementById(`programItemSlug_${i}`)?.value || "",
};
}).filter((item) => item.id || item.title);
return {
title: document.getElementById("programsTitle")?.value || "",
subtitle: document.getElementById("programsSubtitle")?.value || "",
button: {
label: document.getElementById("programsButtonLabel")?.value || "",
href: document.getElementById("programsButtonHref")?.value || "",
},
card: {
pricePrefix:
document.getElementById("programsCardPricePrefix")?.value || "from",
priceSuffix:
document.getElementById("programsCardPriceSuffix")?.value || "USD",
buttonLabel:
document.getElementById("programsCardButtonLabel")?.value ||
"Camp Detail",
buttonHref:
document.getElementById("programsCardButtonHref")?.value ||
"/camp-profiles",
},
items: items,
};
}
function prepareNewsletterData() {
return {
title: document.getElementById("newsletterTitle")?.value || "",
subtitle: document.getElementById("newsletterSubtitle")?.value || "",
description:
document.getElementById("newsletterDescription")?.value || "",
image: document.getElementById("newsletterImage")?.value || "",
decorativeImage:
document.getElementById("newsletterDecorativeImage")?.value || "",
button: {
label: document.getElementById("newsletterButtonLabel")?.value || "",
placeholder:
document.getElementById("newsletterPlaceholder")?.value || "",
href: document.getElementById("newsletterButtonHref")?.value || "",
},
};
}
function prepareLatestPostsData() {
// Collect blog posts
let postCount = 0;
while (document.getElementById(`lpPostTitle_${postCount}`)) {
postCount++;
}
const blogPosts = Array.from({ length: postCount }, (_, i) => ({
id: parseInt(document.getElementById(`lpPostId_${i}`)?.value) || 0,
title: document.getElementById(`lpPostTitle_${i}`)?.value || "",
date: document.getElementById(`lpPostDate_${i}`)?.value || "",
image: document.getElementById(`lpPostImage_${i}`)?.value || "",
description: document.getElementById(`lpPostDesc_${i}`)?.value || "",
})).filter((p) => p.title || p.description);
// Collect sidebar posts
let sidebarCount = 0;
while (document.getElementById(`lpSidebarPostTitle_${sidebarCount}`)) {
sidebarCount++;
}
const sidebarPosts = Array.from({ length: sidebarCount }, (_, i) => ({
title: document.getElementById(`lpSidebarPostTitle_${i}`)?.value || "",
image: document.getElementById(`lpSidebarPostImage_${i}`)?.value || "",
description:
document.getElementById(`lpSidebarPostDesc_${i}`)?.value || "",
})).filter((p) => p.title || p.description);
return {
title: document.getElementById("lpTitle")?.value || "",
subtitle: document.getElementById("lpSubtitle")?.value || "",
searchPlaceholder:
document.getElementById("lpSearchPlaceholder")?.value || "",
sidebarTitle: document.getElementById("lpSidebarTitle")?.value || "",
featuredCard: {
title: document.getElementById("lpFeaturedTitle")?.value || "",
image: document.getElementById("lpFeaturedImage")?.value || "",
description: document.getElementById("lpFeaturedDesc")?.value || "",
},
blogPosts: blogPosts,
sidebarPosts: sidebarPosts,
};
}
function showToast(title, message, type = "info") {
const toast = document.createElement("div");
toast.className = `toast align-items-center text-white bg-${
type === "error" ? "danger" : type
} border-0`;
toast.setAttribute("role", "alert");
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">
<strong>${title}:</strong> ${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
</div>
`;
let container = document.querySelector(".toast-container");
if (!container) {
container = document.createElement("div");
container.className = "toast-container position-fixed top-0 end-0 p-3";
document.body.appendChild(container);
}
container.appendChild(toast);
const bsToast = new bootstrap.Toast(toast, { autohide: true, delay: 3000 });
bsToast.show();
toast.addEventListener("hidden.bs.toast", () => toast.remove());
}
</script>
View Git Blame Copy Permalink