uldp-degree-mangement-system/views/admin/home/index.ejs

<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="whyChooseUs" id="whyChooseUsJson" />
        <input type="hidden" name="visaSolutions" id="visaSolutionsJson" />
        <input type="hidden" name="visaCountries" id="visaCountriesJson" />
        <input type="hidden" name="testimonials" id="testimonialsJson" />
        <input type="hidden" name="videoGallery" id="videoGalleryJson" />
        <input type="hidden" name="faq" id="faqJson" />
        <input type="hidden" name="achievements" id="achievementsJson" />
        <input type="hidden" name="partners" id="partnersJson" />
        <input type="hidden" name="blogPreview" id="blogPreviewJson" />

        <!-- 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="#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="#visasolutions" role="tab">
                  <i class="fas fa-concierge-bell me-2"></i>Visa Solutions
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#visacountries" role="tab">
                  <i class="fas fa-globe-americas me-2"></i>Visa Countries
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#testimonials" role="tab">
                  <i class="fas fa-comments me-2"></i>Testimonials
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#videogallery" role="tab">
                  <i class="fas fa-video me-2"></i>Video Gallery
                </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="#achievements" role="tab">
                  <i class="fas fa-chart-pie me-2"></i>Achievements
                </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="#blogpreview" role="tab">
                  <i class="fas fa-blog me-2"></i>Blog Preview
                </a>
              </li>
            </ul>
          </div>

          <div class="card-body">
            <div class="tab-content">
              <%- include('sections/hero') %>
              <%- include('sections/whyChooseUs') %>
              <%- include('sections/visaSolutions') %>
              <%- include('sections/visaCountries') %>
              <%- include('sections/testimonials') %>
              <%- include('sections/videoGallery') %>
              <%- include('sections/faq') %>
              <%- include('sections/achievements') %>
              <%- include('sections/partners') %>
              <%- include('sections/blogPreview') %>
            </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>
  /**
   * BRIDGE SCRIPT: Cho phép các section lẻ tự đăng ký logic lấy dữ liệu.
   * Cách dùng trong file lẻ (vị dụ hero.ejs):
   * <script>
   *   window.homeScrapers = window.homeScrapers || {};
   *   window.homeScrapers.hero = () => ({ title: document.getElementById('heroTitle').value, ... });
   * <\/script>
   */
  window.homeScrapers = window.homeScrapers || {};

  document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector("form");
    if (form) {
      form.addEventListener("submit", function(e) {
        console.log("Form submitting, collecting data from scrapers...");
        
        // Tự động thu gom dữ liệu từ các section đã đăng ký
        Object.keys(window.homeScrapers).forEach(section => {
          const input = document.getElementById(section + 'Json');
          if (input) {
            try {
              const data = window.homeScrapers[section]();
              console.log(`- Collected data for [${section}]:`, data);
              input.value = JSON.stringify(data);
            } catch (err) {
              console.error(`Error scraping section [${section}]:`, err);
            }
          }
        });

        // Để form tự submit tự nhiên sau khi đã điền xong các hidden inputs
      });
    }

    // Khởi tạo các nút upload ảnh (dùng chung cho toàn bộ các section)
    initImageUploads();
  });

  // --- UTILITIES (Dùng chung) ---

  function initImageUploads() {
    document.addEventListener("click", function(e) {
      const btn = e.target.closest(".btn-upload-image");
      if (btn) {
        document.getElementById("currentImageType").value = btn.dataset.imageType;
        document.getElementById("currentTargetInput").value = btn.dataset.targetInput;
        document.getElementById("directImageUpload").click();
      }
    });

    const fileInput = document.getElementById("directImageUpload");
    if (fileInput) {
      fileInput.addEventListener("change", handleDirectImageUpload);
    }
  }

  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 input = document.getElementById(targetInput);
        if (input) {
          input.value = result.path;
          // Cập nhật preview nếu có img ngay sau input group
          const previewImg = input.closest('.input-group')?.nextElementSibling?.querySelector('img');
          if (previewImg) {
            previewImg.src = result.path;
            previewImg.classList.remove('d-none');
          }
        }
        showToast("Success", "Image uploaded successfully", "success");
      } else {
        throw new Error(result.error || "Upload failed");
      }
    } catch (error) {
      showToast("Error", "Upload failed: " + error.message, "error");
    }
    this.value = "";
  }

  function showToast(title, message, type = "info") {
    let container = document.querySelector(".toast-container") || (() => {
      const c = document.createElement("div");
      c.className = "toast-container position-fixed top-0 end-0 p-3";
      document.body.appendChild(c);
      return c;
    })();

    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>`;
    container.appendChild(toast);
    new bootstrap.Toast(toast, { autohide: true, delay: 3000 }).show();
    toast.addEventListener("hidden.bs.toast", () => toast.remove());
  }
</script>