Root Explorer PHP

Editing: home-page.js

document.addEventListener("DOMContentLoaded", () => {
  // === AWARD CAROUSEL ================
  let currentAwardIndex = 0;
  const awardSlides = document.querySelectorAll("#AWARDSlides .AWARD-slide");
  const awardDots = document.querySelectorAll(".AWARD-dots .AWARD-dot");

function showAwardSlide(index) {
    awardSlides.forEach((slide, i) => {
      slide.classList.toggle("active", i === index);
      if (awardDots[i]) awardDots[i].classList.toggle("active", i === index);
    });
    currentAwardIndex = index;
  }

function moveAwardSlide(step) {
    currentAwardIndex =
      (currentAwardIndex + step + awardSlides.length) % awardSlides.length;
    showAwardSlide(currentAwardIndex);
  }

window.goToAwardSlide = function (index) {
    showAwardSlide(index);
  };

showAwardSlide(currentAwardIndex);
  setInterval(() => moveAwardSlide(1), 7000);
});

// =========================

document.addEventListener("DOMContentLoaded", () => {
  // === PRODUCT CAROUSEL ==============
  let currentProductIndex = 0;
  const productSlides = document.querySelectorAll("#productSlides .product-slide");
  const productDots = document.querySelectorAll(".product-dots .product-dot");

function showProductSlide(index) {
    productSlides.forEach((slide, i) => {
      slide.classList.toggle("active", i === index);
      if (productDots[i]) productDots[i].classList.toggle("active", i === index);
    });
    currentProductIndex = index;
  }

function moveProductSlide(step) {
    currentProductIndex =
      (currentProductIndex + step + productSlides.length) % productSlides.length;
    showProductSlide(currentProductIndex);
  }

window.goToProductSlide = function (index) {
    showProductSlide(index);
  };

showProductSlide(currentProductIndex);
  setInterval(() => moveProductSlide(1), 7000);
});

// =========================

document.addEventListener("DOMContentLoaded", () => {
  // === NEWS CAROUSEL =================
  let currentNewsIndex = 0;
  const newsSlides = document.querySelectorAll("#newsSlides .news-slide");
  const newsDots = document.querySelectorAll(".news-dots .news-dot");

function showNewsSlide(index) {
    newsSlides.forEach((slide, i) => {
      slide.classList.toggle("active", i === index);
      if (newsDots[i]) newsDots[i].classList.toggle("active", i === index);
    });
    currentNewsIndex = index;
  }

function moveNewsSlide(step) {
    currentNewsIndex =
      (currentNewsIndex + step + newsSlides.length) % newsSlides.length;
    showNewsSlide(currentNewsIndex);
  }

window.goToNewsSlide = function (index) {
    showNewsSlide(index);
  };

showNewsSlide(currentNewsIndex);
  setInterval(() => moveNewsSlide(1), 7000);
});

document.addEventListener("DOMContentLoaded", function () {
  const newsSlides = document.querySelectorAll(".news-clickable");

newsSlides.forEach((slide) => {
    slide.addEventListener("click", function () {
      
      const lang = localStorage.getItem("language") || "en";

const refId = this.dataset.refid;
      const newsTitle =
        lang === "th"
          ? this.dataset.newstitleTh || ""
          : this.dataset.newstitleEn || "";

if (!refId) {
        console.error("RefID not found for this news slide.");
        return;
      }

Swal.fire({
        title: "กำลังโหลดข้อมูล...",
        allowOutsideClick: false,
        didOpen: () => {
          Swal.showLoading();
        },
        customClass: {
          popup: "swal-news-detail-popup",
        },
      });

fetch("../php-backend/get_news_details.php?action=getNewsDetails&ref_id=" + refId)
  .then(async (response) => {
    const text = await response.text();

try {
      return JSON.parse(text);
    } catch (e) {
      console.error("❌ ไม่ใช่ JSON:", text);
      throw new Error("Server response is not JSON");
    }
  })

.then((data) => {
          if (data.status === "success") {
            const mainImage = `https://www.wdi.co.th/adminkit-dev/static/back-php/${data.news_image}`;

let imagesHtml = "";
            if (data.details.length > 0) {
              imagesHtml += `<div class="news-detail-images-container" style="margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap;">`;

data.details.forEach((detail) => {
                if (detail.news_image_detail?.trim() !== "") {
                  const imagePath = `https://www.wdi.co.th/adminkit-dev/static/back-php/${detail.news_image_detail}`;
                  imagesHtml += `
                    <img src="${imagePath}" 
                      alt="News Image Detail" 
                      class="news-thumb" 
                      style="cursor: pointer; max-width: 120px; height: auto; border: 1px solid #ccc; border-radius: 6px;"
                      onclick="swapMainImage(this)">
                  `;
                }
              });

imagesHtml += "</div>";
            } else {
              imagesHtml = "<p>ไม่มีรูปภาพเพิ่มเติม</p>";
            }

const savedLang = lang;

let newsContent =
              savedLang === "th"
                ? data.news_content_th || data.news_content_en || "ไม่มีข้อมูลเนื้อหา"
                : data.news_content_en || data.news_content_th || "No content available";

Swal.fire({
              title: newsTitle,
              width: "90%",
              html: `
                <div style="text-align: left; max-height: 70vh; overflow-y: auto; padding-right: 10px;">
                  <img id="main-news-image" src="${mainImage}" 
                    alt="รูปภาพข่าวหลัก" 
                    style="width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; margin-bottom: 15px;" />
                  <p>${newsContent}</p>
                  ${imagesHtml}
                </div>
              `,
              confirmButtonText: savedLang === "th" ? "ปิด" : "Close",
              customClass: {
                container: "swal-news-detail-container",
                popup: "swal-news-detail-popup",
              },
            });
          } else {
            Swal.fire({
              icon: "error",
              title: "เกิดข้อผิดพลาด!",
              text: data.message || "ไม่สามารถดึงข้อมูลได้",
              customClass: { popup: "swal-news-detail-popup" },
            });
          }
        })
        .catch((error) => {
          console.error("Error:", error);
          Swal.fire({
            icon: "error",
            title: "เกิดข้อผิดพลาด!",
            text: "ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ได้: " + error.message,
            customClass: { popup: "swal-news-detail-popup" },
          });
        });
    });
  });
});

function swapMainImage(clickedImgElement) {
  const mainImage = document.getElementById("main-news-image");
  if (!mainImage || !clickedImgElement) return;

const tempSrc = mainImage.src;
  mainImage.src = clickedImgElement.src;
  clickedImgElement.src = tempSrc;
}

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

const savedLang = localStorage.getItem("language") || "en";
    setLanguageContent(savedLang);

function switchLanguage(lang) {
        localStorage.setItem("language", lang);
        setLanguageContent(lang);
    }

// คลิกภาษาไทย
    document.querySelectorAll(".lang-th a").forEach(el => {
        el.addEventListener("click", e => {
            e.preventDefault();
            switchLanguage("th");
        });
    });

// คลิกภาษาอังกฤษ
    document.querySelectorAll(".lang-en a").forEach(el => {
        el.addEventListener("click", e => {
            e.preventDefault();
            switchLanguage("en");
        });
    });

function setLanguageContent(lang) {
    const isThai = lang === "th";

// ปิดทั้งหมดก่อน
    document.querySelectorAll(
        ".award-title-th, .award-title-en, .news-title-th, .news-title-en, .lang-th-content, .lang-en-content"
    ).forEach(el => el.style.display = "none");

// เปิดเฉพาะภาษาที่เลือก
    if (isThai) {
        document.querySelectorAll(".award-title-th, .news-title-th, .lang-th-content")
            .forEach(el => el.style.display = "block");
    } else {
        document.querySelectorAll(".award-title-en, .news-title-en, .lang-en-content")
            .forEach(el => el.style.display = "block");
    }

// active ปุ่มภาษา
    document.querySelector(".lang-th")?.classList.toggle("active", isThai);
    document.querySelector(".lang-en")?.classList.toggle("active", !isThai);
}

});

document.addEventListener("DOMContentLoaded", function () {
  function setLanguageContent(lang) {
    const isThai = lang === "th";
    document.getElementById("content-th").style.display = isThai
      ? "block"
      : "none";
    document.getElementById("content-en").style.display = isThai
      ? "none"
      : "block";
  }

const savedLang = localStorage.getItem("language") || "en";
  setLanguageContent(savedLang);

document.querySelectorAll(".lang-th a").forEach((el) => {
    el.addEventListener("click", function (e) {
      e.preventDefault();
      localStorage.setItem("language", "th");
      setLanguageContent("th");
    });
  });

document.querySelectorAll(".lang-en a").forEach((el) => {
    el.addEventListener("click", function (e) {
      e.preventDefault();
      localStorage.setItem("language", "en");
      setLanguageContent("en");
    });
  });
});

document.addEventListener("DOMContentLoaded", function () {
  const newsSlides = document.querySelectorAll(".AwardAndProduct-clickable");
  const dataAward = [];
  const dataProduct = [];

newsSlides.forEach((slide) => {
    const refId = slide.dataset.refid;
    const AWARD_id = slide.dataset.awardId;
    const News_Product_id = slide.dataset.newsProductId;

const item = {
      refId,
      AWARD_id,
      News_Product_id,
      source: AWARD_id ? "award" : "product",
    };

if (item.source === "award") {
      dataAward.push(item);
    } else {
      dataProduct.push(item);
    }

slide.addEventListener("click", function () {
      const clickedRefId = this.dataset.refid;
      const group = this.dataset.awardId ? "award" : "product";
      const targetList = group === "award" ? dataAward : dataProduct;
      const currentIndex = targetList.findIndex(
        (d) => d.refId === clickedRefId
      );

if (currentIndex === -1) {
        console.error("RefID not found in list.");
        return;
      }

loadAndShowPopup(targetList, currentIndex, group);
    });
  });

// ฟังก์ชันสำหรับแสดงรูปซูม
    function showImageZoom(imageSrc, imageTitle, onCloseCallback = null) {
    Swal.fire({
      html: `
            <div style="position: relative; width: 100%; height: 90vh; display: flex; align-items: center; justify-content: center; background: #000;">
          <img id="zoomImage" src="${imageSrc}" alt="${imageTitle}" 
               style="max-width: 100%; max-height: 100%; object-fit: contain; cursor: grab; transition: transform 0.2s ease;" />
          <button id="closeZoomBtn" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8); border: none; padding: 10px; border-radius: 50%; cursor: pointer; font-size: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">×</button>
          <div id="zoomControls" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 25px;">
            <button id="zoomInBtn" style="background: #fff; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer;">🔍+</button>
            <button id="zoomOutBtn" style="background: #fff; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer;">🔍-</button>
            <button id="resetZoomBtn" style="background: #fff; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer;">↺</button>
          </div>
        </div>
      `,
      width: "95%",
      showConfirmButton: false,
      showCloseButton: false,
      customClass: {
        popup: "swal-zoom-popup",
      },
      didOpen: () => {
        // CSS สำหรับ popup ซูม
        const style = document.createElement("style");
        style.textContent = `
          .swal-zoom-popup {
            padding: 0 !important;
            background: #000 !important;
            border-radius: 0 !important;
          }
          .swal-zoom-popup .swal2-html-container {
            margin: 0 !important;
            padding: 0 !important;
          }
        `;
        document.head.appendChild(style);

const zoomImage = document.getElementById("zoomImage");
        const closeBtn = document.getElementById("closeZoomBtn");
        const zoomInBtn = document.getElementById("zoomInBtn");
        const zoomOutBtn = document.getElementById("zoomOutBtn");
        const resetBtn = document.getElementById("resetZoomBtn");

let scale = 1;
        let isDragging = false;
        let startX,
          startY,
          translateX = 0,
          translateY = 0;

// ฟังก์ชันอัพเดตการแปลง
        function updateTransform() {
          zoomImage.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
        }

// การซูมด้วยปุ่ม
        zoomInBtn.addEventListener("click", () => {
          scale = Math.min(scale * 1.2, 5);
          updateTransform();
        });

zoomOutBtn.addEventListener("click", () => {
          scale = Math.max(scale / 1.2, 0.1);
          updateTransform();
        });

resetBtn.addEventListener("click", () => {
          scale = 1;
          translateX = 0;
          translateY = 0;
          updateTransform();
        });

// การซูมด้วย mouse wheel
        zoomImage.addEventListener("wheel", (e) => {
          e.preventDefault();
          const rect = zoomImage.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;

const oldScale = scale;
          if (e.deltaY < 0) {
            scale = Math.min(scale * 1.1, 5);
          } else {
            scale = Math.max(scale / 1.1, 0.1);
          }

const scaleRatio = scale / oldScale;
          translateX = x - (x - translateX) * scaleRatio;
          translateY = y - (y - translateY) * scaleRatio;

updateTransform();
        });

// การลากรูป
        zoomImage.addEventListener("mousedown", (e) => {
          if (scale > 1) {
            isDragging = true;
            startX = e.clientX - translateX;
            startY = e.clientY - translateY;
            zoomImage.style.cursor = "grabbing";
          }
        });

document.addEventListener("mousemove", (e) => {
          if (isDragging) {
            translateX = e.clientX - startX;
            translateY = e.clientY - startY;
            updateTransform();
          }
        });

document.addEventListener("mouseup", () => {
          isDragging = false;
          zoomImage.style.cursor = scale > 1 ? "grab" : "default";
        });

// ปิด popup
        function closeZoomPopup() {
          Swal.close();
          // เรียก callback เมื่อปิด zoom popup
          if (onCloseCallback && typeof onCloseCallback === 'function') {
            setTimeout(() => {
              onCloseCallback();
            }, 100); // รอให้ popup ปิดเสร็จก่อน
          }
        }

closeBtn.addEventListener("click", closeZoomPopup);

// กด ESC เพื่อปิด
       document.addEventListener("keydown", function escHandler(e) {
          if (e.key === "Escape") {
            closeZoomPopup();
            document.removeEventListener("keydown", escHandler);
          }
        });
      },
		 willClose: () => {
        if (onCloseCallback && typeof onCloseCallback === 'function') {
          setTimeout(() => {
            onCloseCallback();
          }, 100);
        }
      }
    });
  }

function loadAndShowPopup(targetList, index, group) {
  const data = targetList[index];
  if (!data || !data.refId) return;

Swal.fire({
    title: "กำลังโหลดข้อมูล...",
    allowOutsideClick: false,
    didOpen: () => Swal.showLoading(),
    customClass: { popup: "swal-news-detail-popup" },
  });

const url = `../php-backend/get_news_details.php?action=searchAwardAndProduct&ref_id=${encodeURIComponent(
    data.refId
  )}&award_id=${encodeURIComponent(
    data.AWARD_id
  )}&news_product_id=${encodeURIComponent(data.News_Product_id)}`;

fetch(url)
    .then((res) => {
      if (!res.ok) throw new Error(res.statusText);
      return res.json();
    })
    .then((dataRes) => {
      if (dataRes.status !== "success" || !Array.isArray(dataRes.data)) {
        throw new Error(dataRes.message || "ไม่สามารถดึงข้อมูลได้");
      }

const item = dataRes.data[0];
      const imagePath = `../adminkit-dev/static/back-php/${item.image}`;
      const typeLabel = "";

// parse image_detail
      let imageDetails = [];
      if (item.image_detail && item.image_detail.trim().startsWith("[")) {
        try {
          imageDetails = JSON.parse(item.image_detail);
        } catch (e) {
          console.error("parse image_detail error:", e);
        }
      }
      const hasImages = Array.isArray(imageDetails) && imageDetails.length > 0;

// ภาษา
      const lang = localStorage.getItem("language") || "th";
      const contentTh = item.content_th || "";
      const contentEn = item.content_en || "";
      const initialContent = lang === "th" ? contentTh : contentEn;

const isEmptyContent = !initialContent || initialContent.trim() === "" || initialContent.trim() === "<p><br></p>" || initialContent.trim() === "<p></p>";

// HTML
      let htmlContent = `
        <div style="text-align:left; max-height:80vh; overflow-y:auto; padding-right:10px;">
          <h3 id="popup-title">${typeLabel ? `${typeLabel} ` : ""}${getTitleByLang(item)}</h3>

<div style="position:relative; text-align:center; margin-top:10px;">
            <button id="prevBtn" style="position:absolute; top:50%; left:0; transform:translateY(-50%); background:#eee; border:none; padding:10px; border-radius:50%; cursor:pointer; z-index:2;">&#x25C0;</button>
            <img id="mainImage_${item.id}" src="${imagePath}" alt="${getTitleByLang(item)}"
              style="width:100%; max-height:60vh; object-fit:contain; border:1px solid #ccc; border-radius:8px;" />
            <button id="nextBtn" style="position:absolute; top:50%; right:0; transform:translateY(-50%); background:#eee; border:none; padding:10px; border-radius:50%; cursor:pointer; z-index:2;">&#x25B6;</button>
            <style>
#zoomBtn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: #ece5e5;
  border: 0.5px solid rgba(0,0,0,0.18);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
#zoomBtn:hover {
  background: rgba(0,0,0,0.05);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
#zoomBtn:active { transform: scale(0.93); }

.lens {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.8px solid #000;
  position: relative;
  transform: translate(-1px, -1px);
}
.lens::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 7px;
  background: #000;
  border-radius: 1px;
  bottom: -7px;
  right: -2px;
  transform: rotate(-45deg);
  transform-origin: top center;
}
</style>

<button id="zoomBtn">
  <div class="lens"></div>
</button>
          </div>
      `;

// ลิงก์ดูสินค้า
      if (item.link_detail) {
        htmlContent += `
          <div style="display:flex; justify-content:flex-end; margin:10px 0;">
            <a href="${item.link_detail}" target="_blank"
              style="background:#3498db; color:#fff; padding:10px 20px; border-radius:5px; text-decoration:none;">
              <span class="lang-th-content" style="display:${lang==="th"?"inline":"none"};">🔗 เพิ่มเติมสินค้า</span>
              <span class="lang-en-content" style="display:${lang==="en"?"inline":"none"};">🔗 See more products</span>
            </a>
          </div>
        `;
      }

// Two-column layout
      htmlContent += `<div style="display:flex; flex-wrap:wrap; gap:20px; margin-top:20px;">`;

if (hasImages) {
        htmlContent += `<div style="flex:1; min-width:250px; display:flex; flex-wrap:wrap; gap:10px;">`;
        imageDetails.forEach((path, i) => {
          htmlContent += `<img src="../adminkit-dev/static/back-php/${path}" alt="รูปเสริม ${i+1}" class="image-detail"
            style="width:150px; height:150px; object-fit:cover; border:1px solid #ccc; border-radius:4px; cursor:pointer;" data-main-id="${item.id}" />`;
        });
        htmlContent += `</div>`;
      }

if (!isEmptyContent) {
        htmlContent += `
          <div style="flex:${hasImages?"2":"1"};">
            <p class="content-switch"
              data-th="${contentTh.replace(/"/g,"&quot;")}"
              data-en="${contentEn.replace(/"/g,"&quot;")}"
              style="line-height:1.6; color:#333;">
              ${initialContent}
            </p>
          </div>
        `;
      }

htmlContent += `</div></div>`;

Swal.fire({
        width:"80%",
        html: htmlContent,
        confirmButtonText: lang==="th"?"ปิด":"Close",
        customClass: {
          container:"swal-news-detail-container",
          popup:"swal-news-detail-popup",
        },
        didRender: () => {
          const updateTitle = () => {
            const titleEl = document.getElementById("popup-title");
            if(titleEl) titleEl.innerHTML = (typeLabel?`${typeLabel} `:"")+getTitleByLang(item);
          };

const updateContent = () => {
            const contentEl = document.querySelector(".content-switch");
            if(contentEl){
              const th = contentEl.getAttribute("data-th");
              const en = contentEl.getAttribute("data-en");
              contentEl.innerHTML = localStorage.getItem("language")==="th"?th:en;
            }
          };

const updateLink = () => {
            const linkTh = document.querySelector(".lang-th-content");
            const linkEn = document.querySelector(".lang-en-content");
            if(linkTh && linkEn){
              const langNow = localStorage.getItem("language")||"th";
              linkTh.style.display = langNow==="th"?"inline":"none";
              linkEn.style.display = langNow==="en"?"inline":"none";
            }
          };

updateTitle();
          updateContent();
          updateLink();

// override setLanguage
          const originalSetLanguage = window.setLanguage;
          window.setLanguage = function(lang){
            localStorage.setItem("language", lang);
            updateTitle();
            updateContent();
            updateLink();
            if(typeof originalSetLanguage==="function") originalSetLanguage(lang);
          };

const returnCb = () => loadAndShowPopup(targetList,index,group);

document.getElementById("zoomBtn")?.addEventListener("click",()=>showImageZoom(document.getElementById(`mainImage_${item.id}`).src,getTitleByLang(item),returnCb));

document.querySelectorAll(".image-detail").forEach(img=>{
            img.addEventListener("click",()=>showImageZoom(img.src,img.alt,returnCb));
          });

document.getElementById("prevBtn")?.addEventListener("click",()=>loadAndShowPopup(targetList,(index-1+targetList.length)%targetList.length,group));
          document.getElementById("nextBtn")?.addEventListener("click",()=>loadAndShowPopup(targetList,(index+1)%targetList.length,group));
        }
      });
    })
    .catch((err)=>{
      console.error(err);
      Swal.fire({icon:"error",title:"เกิดข้อผิดพลาด!",text:err.message});
    });
}

// ฟังก์ชันช่วยเลือก title ตามภาษา
function getTitleByLang(item){
  const lang = localStorage.getItem("language")||"th";
  const titleTh = item.title_th || item.AWARD_title_th || item.News_Product_title_th || "";
  const titleEn = item.title_en || item.AWARD_title_en || item.News_Product_title_en || "";
  return lang==="th"? (titleTh||titleEn) : (titleEn||titleTh);
}

});

document.addEventListener("click", function (e) {
  if (e.target.classList.contains("image-detail")) {
    const detailImg = e.target;
    const mainImgId = "mainImage_" + detailImg.getAttribute("data-main-id");
    const mainImg = document.getElementById(mainImgId);

const tempSrc = mainImg.src;
    mainImg.src = detailImg.src;
    detailImg.src = tempSrc;
  }
});

[ CANCEL ]

Name	Type	Actions
.. (Parent Directory)
📄 home-page.js	FILE	[EDIT]
📄 manage-index.js	FILE	[EDIT]
📄 register.js	FILE	[EDIT]

[ Root System Explorer ]

Editing: home-page.js