SkyArtShop/website/admin/js/homepage.js.old

// Homepage Editor JavaScript

let homepageData = {};
let quillEditors = {};
let currentMediaPicker = null;

// Initialize Quill editors
function initializeQuillEditors() {
  // Check if Quill is loaded
  if (typeof Quill === "undefined") {
    console.error("Quill.js is not loaded!");
    alert("Text editor failed to load. Please refresh the page.");
    return;
  }

  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"],
    ["blockquote", "code-block"],
    [{ header: 1 }, { header: 2 }],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ direction: "rtl" }],
    [{ size: ["small", false, "large", "huge"] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    [{ font: [] }],
    [{ align: [] }],
    ["link"],
    ["clean"],
  ];

  try {
    // Initialize Quill for each description field
    quillEditors.hero = new Quill("#heroDescription", {
      theme: "snow",
      modules: { toolbar: toolbarOptions },
      placeholder: "Enter hero section description...",
    });

    quillEditors.promotion = new Quill("#promotionDescription", {
      theme: "snow",
      modules: { toolbar: toolbarOptions },
      placeholder: "Enter promotion description...",
    });

    quillEditors.portfolio = new Quill("#portfolioDescription", {
      theme: "snow",
      modules: { toolbar: toolbarOptions },
      placeholder: "Enter portfolio description...",
    });

    console.log("Quill editors initialized successfully");
  } catch (error) {
    console.error("Error initializing Quill editors:", error);
    alert(
      "Failed to initialize text editors. Please check the console for errors."
    );
  }
}

document.addEventListener("DOMContentLoaded", function () {
  initializeQuillEditors();

  checkAuth().then((authenticated) => {
    if (authenticated) {
      loadHomepageSettings();
      setupMediaLibraryListener();
    }
  });
});

// Setup media library selection listener
function setupMediaLibraryListener() {
  window.addEventListener("message", function (event) {
    // Security: verify origin if needed
    if (
      event.data &&
      event.data.type === "mediaSelected" &&
      currentMediaPicker
    ) {
      const { section, field } = currentMediaPicker;
      handleMediaSelection(section, field, event.data.media);
      currentMediaPicker = null;
    }
  });
}

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 || {};

      // If no data exists, load defaults from the frontend
      if (Object.keys(homepageData).length === 0) {
        console.log("No homepage data found, loading defaults from frontend");
        await loadDefaultsFromFrontend();
      }

      populateFields();
    }
  } catch (error) {
    console.error("Failed to load homepage settings:", error);
    // Load defaults if API fails
    await loadDefaultsFromFrontend();
    populateFields();
  }
}

// Load default content from the current homepage
async function loadDefaultsFromFrontend() {
  homepageData = {
    hero: {
      enabled: true,
      headline: "Welcome to Sky Art Shop",
      subheading: "Your destination for creative stationery and supplies",
      description:
        "<p>Discover our curated collection of scrapbooking, journaling, cardmaking, and collaging supplies. Express your creativity and bring your artistic vision to life.</p>",
      ctaText: "Shop Now",
      ctaLink: "/shop.html",
      backgroundUrl: "",
      layout: "text-left",
    },
    promotion: {
      enabled: true,
      title: "Get Inspired",
      description:
        "<p>At Sky Art Shop, we believe in the power of creativity to transform and inspire. Whether you're an experienced crafter or just beginning your creative journey, we have everything you need to bring your ideas to life.</p><p>Explore our collection of washi tapes, stickers, stamps, and more. Each item is carefully selected to help you create something beautiful and meaningful.</p>",
      imageUrl: "",
      imagePosition: "left",
      textAlignment: "left",
    },
    portfolio: {
      enabled: true,
      title: "Featured Products",
      description: "<p>Discover our most popular items</p>",
      count: 6,
    },
  };
}

function populateFields() {
  console.log("Populating fields with data:", homepageData);

  // 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 || "";

    if (homepageData.hero.description) {
      quillEditors.hero.root.innerHTML = homepageData.hero.description;
    }

    document.getElementById("heroCtaText").value =
      homepageData.hero.ctaText || "";
    document.getElementById("heroCtaLink").value =
      homepageData.hero.ctaLink || "";

    if (homepageData.hero.backgroundUrl) {
      document.getElementById("heroBackgroundUrl").value =
        homepageData.hero.backgroundUrl;
      displayMediaPreview(
        "hero",
        "background",
        homepageData.hero.backgroundUrl
      );
    }

    if (homepageData.hero.layout) {
      const heroSection = document.getElementById("heroSection");
      heroSection.setAttribute("data-layout", homepageData.hero.layout);
      setActiveButton(`heroSection`, `layout-${homepageData.hero.layout}`);
    }

    toggleSection("hero");
  }

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

    if (homepageData.promotion.description) {
      quillEditors.promotion.root.innerHTML =
        homepageData.promotion.description;
    }

    if (homepageData.promotion.imageUrl) {
      document.getElementById("promotionImageUrl").value =
        homepageData.promotion.imageUrl;
      displayMediaPreview(
        "promotion",
        "image",
        homepageData.promotion.imageUrl
      );
    }

    if (homepageData.promotion.imagePosition) {
      const promotionSection = document.getElementById("promotionSection");
      promotionSection.setAttribute(
        "data-image-position",
        homepageData.promotion.imagePosition
      );
      setActiveButton(
        `promotionSection`,
        `position-${homepageData.promotion.imagePosition}`
      );
    }

    if (homepageData.promotion.textAlignment) {
      const promotionSection = document.getElementById("promotionSection");
      promotionSection.setAttribute(
        "data-text-alignment",
        homepageData.promotion.textAlignment
      );
      setActiveButton(
        `promotionSection`,
        `align-${homepageData.promotion.textAlignment}`
      );
    }

    toggleSection("promotion");
  }

  // Portfolio Section
  if (homepageData.portfolio) {
    document.getElementById("portfolioEnabled").checked =
      homepageData.portfolio.enabled !== false;
    document.getElementById("portfolioTitle").value =
      homepageData.portfolio.title || "";

    if (homepageData.portfolio.description) {
      quillEditors.portfolio.root.innerHTML =
        homepageData.portfolio.description;
    }

    document.getElementById("portfolioCount").value =
      homepageData.portfolio.count || 6;
    toggleSection("portfolio");
  }

  // Show success message
  showSuccess(
    "Homepage content loaded! You can now edit and preview your changes."
  );
}

function setActiveButton(sectionId, className) {
  const section = document.getElementById(sectionId);
  if (section) {
    const buttons = section.querySelectorAll(".alignment-btn");
    buttons.forEach((btn) => {
      if (btn.classList.contains(className)) {
        btn.classList.add("active");
      }
    });
  }
}

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, button, select").forEach((el) => {
      el.disabled = false;
    });
    // Enable Quill editor
    if (quillEditors[sectionName]) {
      quillEditors[sectionName].enable();
    }
  } else {
    section.classList.add("disabled");
    content.querySelectorAll("input, button, select").forEach((el) => {
      el.disabled = true;
    });
    // Disable Quill editor
    if (quillEditors[sectionName]) {
      quillEditors[sectionName].disable();
    }
  }
}

// Open media library in a modal
function openMediaLibrary(section, field) {
  currentMediaPicker = { section, field };

  // Create modal backdrop
  const backdrop = document.createElement("div");
  backdrop.id = "mediaLibraryBackdrop";
  backdrop.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
  `;

  // Create modal container
  const modal = document.createElement("div");
  modal.id = "mediaLibraryModal";
  modal.style.cssText = `
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  `;

  // Create close button
  const closeBtn = document.createElement("button");
  closeBtn.innerHTML = '<i class="bi bi-x-lg"></i>';
  closeBtn.style.cssText = `
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10000;
    background: #dc3545;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  `;
  closeBtn.onclick = closeMediaLibrary;

  // Create iframe
  const iframe = document.createElement("iframe");
  iframe.id = "mediaLibraryFrame";
  iframe.src = "/admin/media-library.html?selectMode=true";
  iframe.style.cssText = `
    width: 100%;
    height: 100%;
    border: none;
  `;

  // Setup iframe message listener
  iframe.onload = function () {
    iframe.contentWindow.postMessage(
      {
        type: "initSelectMode",
        section: section,
        field: field,
      },
      "*"
    );
  };

  modal.appendChild(closeBtn);
  modal.appendChild(iframe);
  backdrop.appendChild(modal);
  document.body.appendChild(backdrop);

  // Close on backdrop click
  backdrop.onclick = function (e) {
    if (e.target === backdrop) {
      closeMediaLibrary();
    }
  };
}

function closeMediaLibrary() {
  const backdrop = document.getElementById("mediaLibraryBackdrop");
  if (backdrop) {
    backdrop.remove();
  }
  currentMediaPicker = null;
}

function handleMediaSelection(section, field, media) {
  closeMediaLibrary();

  const urlField = document.getElementById(
    `${section}${field === "background" ? "Background" : "Image"}Url`
  );
  if (urlField) {
    urlField.value = media.url;
  }

  displayMediaPreview(section, field, media.url);

  showSuccess(`Media selected successfully!`);
}

function displayMediaPreview(section, field, url) {
  const previewId = `${section}Preview`;
  const preview = document.getElementById(previewId);
  const clearBtnId = `${section}${
    field === "background" ? "Background" : "Image"
  }Clear`;
  const clearBtn = document.getElementById(clearBtnId);

  if (preview) {
    preview.classList.remove("empty");

    // Check if it's a video
    const isVideo = url.match(/\.(mp4|webm|ogg)$/i);

    if (isVideo) {
      preview.innerHTML = `<video src="${url}" style="max-width: 100%; max-height: 100%;" controls></video>`;
    } else {
      preview.innerHTML = `<img src="${url}" alt="Preview" />`;
    }
  }

  if (clearBtn) {
    clearBtn.style.display = "inline-block";
  }
}

function clearMedia(section, field) {
  const urlField = document.getElementById(
    `${section}${field === "background" ? "Background" : "Image"}Url`
  );
  if (urlField) {
    urlField.value = "";
  }

  const previewId = `${section}Preview`;
  const preview = document.getElementById(previewId);
  if (preview) {
    preview.classList.add("empty");
    preview.innerHTML = '<i class="bi bi-image" style="font-size: 3rem"></i>';
  }

  const clearBtnId = `${section}${
    field === "background" ? "Background" : "Image"
  }Clear`;
  const clearBtn = document.getElementById(clearBtnId);
  if (clearBtn) {
    clearBtn.style.display = "none";
  }

  showSuccess("Media cleared");
}

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

  // Store in a data attribute
  section.setAttribute(`data-layout`, layout);
}

function setImagePosition(sectionName, position) {
  const section = document.getElementById(`${sectionName}Section`);
  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");

  section.setAttribute(`data-image-position`, position);
}

function setTextAlignment(sectionName, alignment) {
  const section = document.getElementById(`${sectionName}Section`);
  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");

  section.setAttribute(`data-text-alignment`, alignment);
}

async function saveHomepage() {
  // Get hero layout
  const heroSection = document.getElementById("heroSection");
  const heroLayout = heroSection.getAttribute("data-layout") || "text-left";

  // Get promotion layout settings
  const promotionSection = document.getElementById("promotionSection");
  const promotionImagePosition =
    promotionSection.getAttribute("data-image-position") || "left";
  const promotionTextAlignment =
    promotionSection.getAttribute("data-text-alignment") || "left";

  const settings = {
    hero: {
      enabled: document.getElementById("heroEnabled").checked,
      headline: document.getElementById("heroHeadline").value,
      subheading: document.getElementById("heroSubheading").value,
      description: quillEditors.hero.root.innerHTML,
      ctaText: document.getElementById("heroCtaText").value,
      ctaLink: document.getElementById("heroCtaLink").value,
      backgroundUrl: document.getElementById("heroBackgroundUrl")?.value || "",
      layout: heroLayout,
    },
    promotion: {
      enabled: document.getElementById("promotionEnabled").checked,
      title: document.getElementById("promotionTitle").value,
      description: quillEditors.promotion.root.innerHTML,
      imageUrl: document.getElementById("promotionImageUrl")?.value || "",
      imagePosition: promotionImagePosition,
      textAlignment: promotionTextAlignment,
    },
    portfolio: {
      enabled: document.getElementById("portfolioEnabled").checked,
      title: document.getElementById("portfolioTitle").value,
      description: quillEditors.portfolio.root.innerHTML,
      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 on the frontend."
      );
      homepageData = settings;
    } else {
      showError(data.message || "Failed to save homepage settings");
    }
  } catch (error) {
    console.error("Failed to save homepage:", error);
    showError("Failed to save homepage settings");
  }
}

function showSuccess(message) {
  const alert = document.createElement("div");
  alert.className =
    "alert alert-success alert-dismissible fade show position-fixed";
  alert.style.cssText =
    "top: 20px; right: 20px; z-index: 9999; min-width: 300px;";
  alert.innerHTML = `
    ${message}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  `;
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), 5000);
}

function showError(message) {
  const alert = document.createElement("div");
  alert.className =
    "alert alert-danger alert-dismissible fade show position-fixed";
  alert.style.cssText =
    "top: 20px; right: 20px; z-index: 9999; min-width: 300px;";
  alert.innerHTML = `
    ${message}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  `;
  document.body.appendChild(alert);
  setTimeout(() => alert.remove(), 5000);
}