SkyArtShop/website/admin/js/homepage.js

// Homepage Editor JavaScript

let homepageData = {};

document.addEventListener("DOMContentLoaded", function () {
  checkAuth().then((authenticated) => {
    if (authenticated) {
      loadHomepageSettings();
    }
  });
});

async function loadHomepageSettings() {
  try {
    const response = await fetch("/api/admin/homepage/settings", {
      credentials: "include",
    });
    const data = await response.json();
    if (data.success) {
      homepageData = data.settings || {};
      populateFields();
    }
  } catch (error) {
    console.error("Failed to load homepage settings:", error);
  }
}

function populateFields() {
  // Hero Section
  if (homepageData.hero) {
    document.getElementById("heroEnabled").checked =
      homepageData.hero.enabled !== false;
    document.getElementById("heroHeadline").value =
      homepageData.hero.headline || "";
    document.getElementById("heroSubheading").value =
      homepageData.hero.subheading || "";
    document.getElementById("heroDescription").value =
      homepageData.hero.description || "";
    document.getElementById("heroCtaText").value =
      homepageData.hero.ctaText || "";
    document.getElementById("heroCtaLink").value =
      homepageData.hero.ctaLink || "";
    toggleSection("hero");
  }

  // Promotion Section
  if (homepageData.promotion) {
    document.getElementById("promotionEnabled").checked =
      homepageData.promotion.enabled !== false;
    document.getElementById("promotionTitle").value =
      homepageData.promotion.title || "";
    document.getElementById("promotionDescription").value =
      homepageData.promotion.description || "";
    toggleSection("promotion");
  }

  // Portfolio Section
  if (homepageData.portfolio) {
    document.getElementById("portfolioEnabled").checked =
      homepageData.portfolio.enabled !== false;
    document.getElementById("portfolioTitle").value =
      homepageData.portfolio.title || "";
    document.getElementById("portfolioDescription").value =
      homepageData.portfolio.description || "";
    document.getElementById("portfolioCount").value =
      homepageData.portfolio.count || 6;
    toggleSection("portfolio");
  }
}

function toggleSection(sectionName) {
  const enabled = document.getElementById(`${sectionName}Enabled`).checked;
  const section = document.getElementById(`${sectionName}Section`);
  const content = section.querySelector(".section-content");

  if (enabled) {
    section.classList.remove("disabled");
    content
      .querySelectorAll("input, textarea, button, select")
      .forEach((el) => {
        el.disabled = false;
      });
  } else {
    section.classList.add("disabled");
    content
      .querySelectorAll("input, textarea, button, select")
      .forEach((el) => {
        el.disabled = true;
      });
  }
}

function previewImage(sectionName) {
  const fileInput =
    document.getElementById(`${sectionName}Background`) ||
    document.getElementById(`${sectionName}Image`);
  const preview = document.getElementById(`${sectionName}Preview`);

  if (fileInput.files && fileInput.files[0]) {
    const reader = new FileReader();
    reader.onload = function (e) {
      preview.classList.remove("empty");
      preview.innerHTML = `<img src="${e.target.result}" alt="Preview" />`;
    };
    reader.readAsDataURL(fileInput.files[0]);
  }
}

function setLayout(sectionName, layout) {
  const buttons = document.querySelectorAll(
    `#${sectionName}Section .alignment-btn`
  );
  buttons.forEach((btn) => btn.classList.remove("active"));
  event.target.closest(".alignment-btn").classList.add("active");
}

function setImagePosition(sectionName, position) {
  const buttons = event.target
    .closest(".alignment-selector")
    .querySelectorAll(".alignment-btn");
  buttons.forEach((btn) => btn.classList.remove("active"));
  event.target.closest(".alignment-btn").classList.add("active");
}

function setTextAlignment(sectionName, alignment) {
  const buttons = event.target
    .closest(".alignment-selector")
    .querySelectorAll(".alignment-btn");
  buttons.forEach((btn) => btn.classList.remove("active"));
  event.target.closest(".alignment-btn").classList.add("active");
}

async function saveHomepage() {
  const settings = {
    hero: {
      enabled: document.getElementById("heroEnabled").checked,
      headline: document.getElementById("heroHeadline").value,
      subheading: document.getElementById("heroSubheading").value,
      description: document.getElementById("heroDescription").value,
      ctaText: document.getElementById("heroCtaText").value,
      ctaLink: document.getElementById("heroCtaLink").value,
    },
    promotion: {
      enabled: document.getElementById("promotionEnabled").checked,
      title: document.getElementById("promotionTitle").value,
      description: document.getElementById("promotionDescription").value,
    },
    portfolio: {
      enabled: document.getElementById("portfolioEnabled").checked,
      title: document.getElementById("portfolioTitle").value,
      description: document.getElementById("portfolioDescription").value,
      count: parseInt(document.getElementById("portfolioCount").value) || 6,
    },
  };

  try {
    const response = await fetch("/api/admin/homepage/settings", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify(settings),
    });

    const data = await response.json();
    if (data.success) {
      showSuccess(
        "Homepage settings saved successfully! Changes are now live."
      );
    } else {
      showError(data.message || "Failed to save homepage settings");
    }
  } catch (error) {
    console.error("Failed to save homepage:", error);
    showError("Failed to save homepage settings");
  }
}

async function logout() {
  try {
    const response = await fetch("/api/admin/logout", {
      method: "POST",
      credentials: "include",
    });
    if (response.ok) window.location.href = "/admin/login.html";
  } catch (error) {
    console.error("Logout failed:", error);
  }
}

function showSuccess(message) {
  alert(message);
}

function showError(message) {
  alert("Error: " + message);
}