document.addEventListener("DOMContentLoaded", function () {
  // List of properties
  const properties = [
    {
      status: "For Sale",
      title: "3 BHK Luxury 2394 SF Apartment in New Chandigarh",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 3,
      bathrooms: 3,
      area: 2394,
      location: "Suntec New Chandigarh",
      price: 10000,
      detailsLink: "property-details.html",
    },
    {
      status: "For Lease",
      title: "2 BHK Luxury 1500 SF Apartment in Sector 17",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
    {
      status: "For Rent",
      title: "4 BHK Luxury 1500 SF Apartment Available in Sector 22",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
    {
      status: "For Sale",
      title: "4 BHK Luxury 1500 SF Apartment Available in Sector 22",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
    {
      status: "For Sale",
      title: "4 BHK Luxury 1500 SF Apartment Available in Sector 22",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
    {
      status: "For Sale",
      title: "4 BHK Luxury 1500 SF Apartment Available in Sector 22",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
  ];

  // Function to display properties
  function displayProperties(filteredProperties) {
    const propertyCardsContainer = document.getElementById("propertyCards");
    const propertyCount = document.getElementById("propertyCount");

    // Check if the container exists
    if (!propertyCardsContainer || !propertyCount) {
      console.error(
        "Property cards container or property count element not found."
      );
      return;
    }

    propertyCardsContainer.innerHTML = ""; // Clear previous cards

    // Check if there are properties to display
    if (filteredProperties.length === 0) {
      propertyCardsContainer.innerHTML =
        "<p>No properties available for this filter.</p>";
      propertyCount.innerHTML = `Showing 0 out of ${properties.length} properties.`;
      return;
    }

    filteredProperties.forEach((property) => {
      const propertyCard = document.createElement("div");
      propertyCard.classList.add(
        "bg-gray-100",
        "p-2",
        "rounded-md",
        "group",
        "select-none",
        "flex",
        "flex-col",
        "justify-between"
      );

      const cardContent = `
    <a draggable="false" href="${property.detailsLink}" class="inline-block overflow-hidden rounded-md relative">
    <span class="text-xs font-medium text-white bg-[var(--primary-color)] px-2 py-1 rounded-full absolute top-2 right-2 z-10">${property.status}</span>
      <img draggable="false" class="aspect-video object-cover object-center group-hover:scale-150 transition-all duration-700" src="${property.imgSrc}" alt="${property.title}"/>
    </a>
    <div class="px-1 py-2">
      <a draggable="false" href="${property.detailsLink}" class="line-clamp-2 text-lg font-semibold">${property.title}</a>
      <div class="bg-gray-50 p-4 flex justify-start items-center flex-wrap gap-4 rounded-lg mt-2 mb-4">
        <div class="flex items-center gap-x-2 opacity-70">
          <span class="text-sm font-medium">${property.bedrooms} Bedrooms</span>
        </div>
        <div class="flex items-center gap-x-2 opacity-70">
          <span class="text-sm font-medium">${property.bathrooms} Bathrooms</span>
        </div>
        <div class="flex items-center gap-x-2 opacity-70">
          <span class="text-sm font-medium">${property.area} SF</span>
        </div>
        <div class="flex items-center gap-x-2 opacity-70">
          <span class="text-sm font-medium">${property.location}</span>
        </div>
      </div>
      <div class="flex justify-between items-end gap-x-5 px-2">
        <span class="font-medium text-black/40 text-sm"><b class="text-lg text-[var(--primary-color)]">₹${property.price}</b></span>
        <a draggable="false" href="${property.detailsLink}" class="inline-block text-sm bg-[var(--primary-color)] py-2 px-4 rounded-md text-white font-medium whitespace-nowrap">View Details</a>
      </div>
    </div>
  `;

      propertyCard.innerHTML = cardContent;
      propertyCardsContainer.appendChild(propertyCard);
    });

    // Update the "Showing X out of Y properties" message
    propertyCount.innerHTML = `Showing ${filteredProperties.length} out of ${properties.length} properties.`;
  }

  // Filter properties by status
  function filterProperties(status) {
    let filteredProperties;

    if (status === "All") {
      filteredProperties = properties; // Show all properties if "All" is selected
    } else {
      filteredProperties = properties.filter(
        (property) => property.status === status
      );
    }

    displayProperties(filteredProperties);

    // Update the "Filter" button text and retain the arrow icon
    const filterBtn = document.getElementById("filterBtn");
    if (filterBtn) {
      const filterText = filterBtn.querySelector(".filter-text"); // Get the filter text part
      if (filterText) {
        filterText.textContent = status; // Update only the text part of the button
      }
    } else {
      console.error("Filter button not found.");
    }
  }

  // Initially display all properties
  displayProperties(properties);

  // Add event listener to filter button
  const filterBtn = document.getElementById("filterBtn");
  if (filterBtn) {
    filterBtn.addEventListener("click", () => {
      const filterMenu = document.getElementById("filterMenu");
      if (filterMenu) {
        filterMenu.classList.toggle("hidden"); // Toggle visibility of the dropdown
      } else {
        console.error("Filter menu not found.");
      }
    });
  } else {
    console.error("Filter button not found.");
  }

  // Event listener for filter options
  const filterOptions = document.querySelectorAll("[data-filter]");
  if (filterOptions.length === 0) {
    console.error("Filter options not found.");
  } else {
    filterOptions.forEach((option) => {
      option.addEventListener("click", function () {
        const filterStatus = this.getAttribute("data-filter");
        filterProperties(filterStatus);
        const filterMenu = document.getElementById("filterMenu");
        if (filterMenu) {
          filterMenu.classList.add("hidden"); // Hide dropdown after selecting a filter
        } else {
          console.error("Filter menu not found when clicking filter option.");
        }
      });
    });
  }

  //   Popular properties section
  const popularProperties = [
    {
      status: "New",
      title: "3 BHK Luxury 2394 SF Apartment in New Chandigarh",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 3,
      bathrooms: 3,
      area: 2394,
      location: "Suntec New Chandigarh",
      price: 10000,
      detailsLink: "property-details.html",
    },
    {
      status: "New",
      title: "2 BHK Luxury 1500 SF Apartment in Sector 17",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
    {
      status: "New",
      title: "4 BHK Luxury 1500 SF Apartment Available in Sector 22",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
    {
      status: "New",
      title: "4 BHK Luxury 1500 SF Apartment Available in Sector 22",
      imgSrc: "./assets/images/property/dummy.webp",
      bedrooms: 2,
      bathrooms: 2,
      area: 1500,
      location: "Suntec Sector 17",
      price: 8500,
      detailsLink: "property-details.html",
    },
  ];

  const popularPropertyCardsContainer = document.getElementById(
    "popularPropertyCards"
  );

  popularProperties.forEach((property) => {
    const popPropertyCard = document.createElement("div");
    popPropertyCard.classList.add(
      "bg-gray-100",
      "p-2",
      "rounded-md",
      "group",
      "select-none",
      "flex",
      "flex-col",
      "justify-between"
    );

    const cardContent = `
      <a draggable="false" href="${property.detailsLink}" class="inline-block overflow-hidden rounded-md relative">
      <span class="text-xs font-medium text-white bg-[var(--primary-color)] px-2 py-1 rounded-full absolute top-2 right-2 z-10">${property.status}</span>
        <img draggable="false" class="aspect-video object-cover object-center group-hover:scale-150 transition-all duration-700" src="${property.imgSrc}" alt="${property.title}"/>
      </a>
      <div class="px-1 py-2">
        <a draggable="false" href="${property.detailsLink}" class="line-clamp-2 text-lg font-semibold">${property.title}</a>
        <div class="bg-gray-50 p-4 flex justify-start items-center flex-wrap gap-4 rounded-lg mt-2 mb-4">
          <div class="flex items-center gap-x-2 opacity-70">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 lucide lucide-bed-icon lucide-bed">
              <path d="M2 4v16"/>
              <path d="M2 8h18a2 2 0 0 1 2 2v10"/>
              <path d="M2 17h20"/>
              <path d="M6 8v9"/>
            </svg>
            <span class="text-sm font-medium">${property.bedrooms} Bedrooms</span>
          </div>
          <div class="flex items-center gap-x-2 opacity-70">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 lucide lucide-bath-icon lucide-bath">
              <path d="M10 4 8 6"/>
              <path d="M17 19v2"/>
              <path d="M2 12h20"/>
              <path d="M7 19v2"/>
              <path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/>
            </svg>
            <span class="text-sm font-medium">${property.bathrooms} Bathrooms</span>
          </div>
          <div class="flex items-center gap-x-2 opacity-70">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 lucide lucide-land-plot-icon lucide-land-plot">
              <path d="m12 8 6-3-6-3v10"/>
              <path d="m8 11.99-5.5 3.14a1 1 0 0 0 0 1.74l8.5 4.86a2 2 0 0 0 2 0l8.5-4.86a1 1 0 0 0 0-1.74L16 12"/>
              <path d="m6.49 12.85 11.02 6.3"/>
              <path d="M17.51 12.85 6.5 19.15"/>
            </svg>
            <span class="text-sm font-medium">${property.area} SF</span>
          </div>
          <div class="flex items-center gap-x-2 opacity-70">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 lucide lucide-building2-icon lucide-building-2">
              <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/>
              <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/>
              <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/>
              <path d="M10 6h4"/>
              <path d="M10 10h4"/>
              <path d="M10 14h4"/>
              <path d="M10 18h4"/>
            </svg>
            <span class="text-sm font-medium">${property.location}</span>
          </div>
        </div>
        <div class="flex justify-between items-end gap-x-5 px-2">
          <span class="font-medium text-black/40 text-sm"><b class="text-lg text-[var(--primary-color)]">₹${property.price}</b></span>
          <a draggable="false" href="${property.detailsLink}" class="inline-block text-sm bg-[var(--primary-color)] py-2 px-4 rounded-md text-white font-medium whitespace-nowrap">View Details</a>
        </div>
      </div>
    `;

    popPropertyCard.innerHTML = cardContent;
    popularPropertyCardsContainer.appendChild(popPropertyCard);
  });
});
