<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>
