webdlh-net/wwwroot/js/Home/Layanan.js

document.addEventListener("DOMContentLoaded", function () {
  const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;

  const serviceData = {
    "Penjemputan e-Waste": {
      image: asset("jemput.jpg"),
      description: "Layanan pengumpulan sampah elektronik.",
    },
    "Uji Sampel Laboratorium": {
      image: asset("lab.jpg"),
      description: "Pengujian kualitas lingkungan hidup.",
    },
    "Bus Toilet": {
      image: asset("lab.jpg"),
      description: "Fasilitas toilet keliling untuk kegiatan umum.",
    },
    AMDAL: {
      image: asset("lab.jpg"),
      description: "Proses Analisis Mengenai Dampak Lingkungan.",
    },
    "Bulky Waste": {
      image: asset("lab.jpg"),
      description: "Layanan khusus pengangkutan sampah besar.",
    },
    "Permohonan Informasi Publik": {
      image: asset("lab.jpg"),
      description: "Saluran pengaduan pelanggaran lingkungan.",
    },
    "BPS-RW": {
      image: asset("lab.jpg"),
      description: "Basis data lingkungan hidup tingkat Rukun Warga",
    },
    "Whistleblowing System": {
      image: asset("lab.jpg"),
      description: "Sarana pelaporan pelanggaran terkait lingkungan",
    },
  };

  const mobileTabs = document.querySelectorAll(".mobile-tab");
  const mobileServiceImage = document.getElementById("mobile-service-image");
  const mobileServiceTitle = document.getElementById("mobile-service-title");
  const mobileServiceDescription = document.getElementById(
    "mobile-service-description"
  );

  mobileTabs.forEach((tab) => {
    tab.addEventListener("click", function () {
      const serviceName = this.getAttribute("data-service");

      mobileTabs.forEach((t) => {
        t.classList.remove("bg-orange-500", "text-white");
        t.classList.add("bg-gray-200", "text-gray-600");
      });

      this.classList.remove("bg-gray-200", "text-gray-600");
      this.classList.add("bg-orange-500", "text-white");

      if (serviceData[serviceName]) {
        mobileServiceImage.src = serviceData[serviceName].image;
        mobileServiceTitle.textContent = serviceName;
        mobileServiceDescription.textContent =
          serviceData[serviceName].description;
      }
    });
  });

  const serviceItems = Array.from(document.querySelectorAll(".service-item"));
  const imageCard = document.querySelector(".md\\:col-span-1 .rounded-lg img");
  const serviceTitle = document.querySelector(
    ".md\\:col-span-1 .rounded-lg h3"
  );
  const cardContainer = document.querySelector(".md\\:col-span-1 .rounded-lg");

  let activeService = "Penjemputan e-Waste";

  const style = document.createElement("style");
  style.innerHTML = `
    .service-item {
        position: relative;
        transition: all 0.3s ease-in-out;
        border-left: 0px solid #ed8936;
        overflow: hidden;
    }
    .service-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: rgba(237, 137, 54, 0.1);
        transition: width 0.3s ease-in-out;
        z-index: -1;
    }
    .service-item.active::before {
        width: 100%;
    }
    .service-item h2, .service-item p {
        transition: all 0.3s ease-in-out;
    }
    .rounded-lg.overflow-hidden {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .rounded-lg.overflow-hidden:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                    0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .rounded-lg.overflow-hidden img {
        transition: transform 0.6s ease;
    }
    .image-fade {
        animation: imageFade 0.4s ease-in-out;
    }
    @keyframes imageFade {
        0% { opacity: 0.6; transform: scale(0.95); }
        100% { opacity: 1; transform: scale(1); }
    }
  `;
  document.head.appendChild(style);

  function setActiveService(title) {
    serviceItems.forEach((item) => {
      const h2 = item.querySelector("h2");
      const p = item.querySelector("p");
      if (!h2 || !p) return;

      const serviceName = h2.textContent.trim();

      if (serviceName === title) {
        item.classList.add("active");
        item.style.borderLeft = "4px solid #ed8936";
        item.style.paddingLeft = "1rem";

        h2.classList.remove("text-gray-400");
        h2.classList.add("text-black", "font-bold");

        p.classList.remove("text-gray-400");
        p.classList.add("text-gray-600");
      } else {
        item.classList.remove("active");
        item.style.borderLeft = "none";
        item.style.paddingLeft = "0";

        h2.classList.add("text-gray-400");
        h2.classList.remove("text-black", "font-bold");

        p.classList.add("text-gray-400");
        p.classList.remove("text-gray-600");
      }
    });

    if (imageCard && serviceData[title]) {
      imageCard.classList.add("image-fade");
      imageCard.src = serviceData[title].image;
      imageCard.alt = title;
      setTimeout(() => imageCard.classList.remove("image-fade"), 400);
    }

    if (serviceTitle) {
      serviceTitle.textContent = title;
    }

    activeService = title;
  }

  let autoplayInterval;
  let isHovering = false;

  serviceItems.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      isHovering = true;
      const h2 = item.querySelector("h2");
      if (!h2) return;
      const hoveredTitle = h2.textContent.trim();
      if (serviceData[hoveredTitle]) setActiveService(hoveredTitle);
    });

    item.addEventListener("mouseleave", () => {
      isHovering = false;
    });
  });

  if (cardContainer) {
    cardContainer.addEventListener("mouseenter", () => {
      if (imageCard) imageCard.style.transform = "scale(1.05)";
    });

    cardContainer.addEventListener("mouseleave", () => {
      if (imageCard) imageCard.style.transform = "scale(1)";
    });
  }

  function startAutoplay() {
    autoplayInterval = setInterval(() => {
      if (!isHovering) {
        const serviceNames = Object.keys(serviceData);
        const currentIndex = serviceNames.indexOf(activeService);
        const nextIndex = (currentIndex + 1) % serviceNames.length;
        setActiveService(serviceNames[nextIndex]);
      }
    }, 4000);
  }

  setActiveService(activeService);
  startAutoplay();
});