const features = [
  {
    category: "All Tools",
    active: true,
    type: "tab",
    display: "block",
    features: [
      {
        name: "All tools",
        description: "Appscms feature layout with new design",
        color: "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "feature",
        description: "Appscms feature layout with new design",
        color: "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "Ai",
        description: "Appscms feature layout with new design",
        color: "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "All tools",
        description: "Appscms feature layout with new design",
        color: "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "All tools",
        description: "Appscms feature layout with new design",
        color: "#1A2EE7",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
    ],
  },
  {
    category: "Calculators",
    type: "tab",
    active: false,
    display: "none",
    features: [
      {
        name: "Calculators",
        description: "Appscms feature layout with new design",
        color: "#1A2EE7",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "Calculators",
        description: "Appscms feature layout with new design",
        color: "#1A2EE7",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "Calculators",
        description: "Appscms feature layout with new design",
        color: "#1A2EE7",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
      {
        name: "Calculators",
        description: "Appscms feature layout with new design",
        color: "#1A2EE7",
        icon: "/assets/images/digipaint.svg",
        url: "/appscms-feature",
      },
    ],
  },
  {
    category: "Calculators",
    type: "link",
    link: "/tools",
    features: [],
  },
];

const featureList = document.querySelector("#appscms-tools-section-row");

const renderFeatures = (query) => {
  featureList.innerHTML = "";

  features.forEach((category) => {
    const filteredFeatures = category.features.filter((feature) =>
      feature.name.toLowerCase().includes(query.toLowerCase())
    );

    if (filteredFeatures.length > 0) {
      filteredFeatures.forEach((item) => {
        const listItem = document.createElement("div");
        const classNames = "col-xl-4 col-lg-6 col-md-6 appscms-tool-container";
        listItem.classList.add(...classNames.split(" "));

        // Adding data-category attribute
        listItem.dataset.category = category.category;

        listItem.innerHTML = `
          <a href="${item.url}">
            <div class="appscms-tool">
              <div class="tool-top" style="background: ${item.color};">
                <div class="tool-img">
                  <img crossorigin="anonymous" src="${item.icon}" alt="img" />
                </div>
                <div class="tool-text">${item.description}</div>
              </div>
              <div class="tool-heading">${item.name}</div>
            </div>
          </a>
        `;
        featureList.appendChild(listItem);
      });
    }
  });

  if (featureList.innerHTML === "") {
    let msg = document.createElement("div");
    msg.classList.add("no-result-found-msg");
    msg.innerHTML = "No search results found!";
    featureList.appendChild(msg);
  }
};

const searchInput = document.querySelector("#search-features");
searchInput.addEventListener("input", function () {
  const query = searchInput.value.trim();
  renderFeatures(query);
});