fix rental catalog bugs

themes/gallo/layouts/partials/rental_catalog.html

@@ -49,7 +49,6 @@
     <div
       class="w-full h-52 rounded-md object-cover border-2 border-gray-200 bg-gray-100"
     ></div>
-
     {{ end }}
     <div class="px-1 pt-4">
       <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
@@ -140,7 +139,34 @@
                 <h3 class="text-xl mb-2" id="modal-title">
                   <strong>{{ .item }}</strong>
                 </h3>
-                {{ partial "catalog-gallery.html" . }}
+                {{ if .gallery }}
+                <div
+                  class="w-full mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
+                >
+                  {{ range .gallery }}
+                  <div
+                    class="relative hover:scale-105 ease-in-out duration-200 transition-all hover:shadow-2xl"
+                  >
+                    <img
+                      loading="lazy"
+                      class="rounded-lg w-full"
+                      src="{{ .image }}"
+                    />
+                    <button class="absolute right-2 top-2">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 448 512"
+                        class="fill-black w-6 h-6 bg-white p-1 rounded-sm"
+                      >
+                        <path
+                          d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  {{ end }}
+                </div>
+                {{ end }}
                 <div class="px-4 pt-6 w-full">
                   <div class="text-sm text-gray-800 text-base mb-4">
                     {{ if ne .quant "" }}
@@ -183,7 +209,9 @@
                       <strong>Rental Unavailable</strong>
                     </div>
                     {{ end }} {{ if ne .purchaseCost "" }}
-                    <div class="border border-s-0 rounded-e-lg p-2 flex justify-between">
+                    <div
+                      class="border border-s-0 rounded-e-lg p-2 flex justify-between"
+                    >
                       <strong>Purchase Cost:</strong>
                       <span>{{ .purchaseCost }}</span>
                     </div>
@@ -216,7 +244,7 @@
 </div>
 <script>
   document.addEventListener("DOMContentLoaded", function () {
-    const modalButtons = document.querySelectorAll(".grid-cols-1 a");
+    const modalButtons = document.querySelectorAll(".grid.grid-cols-1 a");
     const closeButtons = document.querySelectorAll("#close-modal");
     const modals = document.querySelectorAll(".fixed");
     const radioButtons = document.querySelectorAll(
@@ -225,14 +253,13 @@
 
     function filterItems(category) {
       console.log("Filtering items for category:", category);
-      const items = document.querySelectorAll(".grid > div");
+      const items = document.querySelectorAll(".grid.grid-cols-1 > div");
 
       items.forEach((item) => {
         const itemCategory = item.querySelector(".bg-blue-100");
-        if (
+        // Decode category to match actual category names in catalog
-          !category ||
+        const decodedCategory = decodeURIComponent(category);
-          decodeURIComponent(itemCategory.textContent.trim()) === category
+        if (!category || itemCategory.textContent.trim() === decodedCategory) {
-        ) {
           item.classList.remove("hidden");
         } else {
           item.classList.add("hidden");
@@ -245,31 +272,27 @@
     }
 
     function updateUrl(category) {
-      const url = window.location.href.split("#")[0];
+      const url = new URL(window.location.href);
-      const newUrl = category ? `${url}#${encodeURIComponent(category)}` : url;
+      url.hash = encodeURIComponent(category); // Encode category for URL
-      window.history.replaceState({}, "", newUrl);
+      window.history.replaceState({}, "", url.toString());
     }
 
-    function handleCategoryChange(category) {
+    const category = window.location.hash.substring(1);
-      console.log("Selected category:", category);
-      updateUrl(category);
-      filterItems(category);
-    }
-
-    const category = decodeURIComponent(window.location.hash.substring(1));
     console.log("Initial category:", category);
-    handleCategoryChange(category);
+    filterItems(category);
 
     window.addEventListener("hashchange", function () {
-      const newCategory = decodeURIComponent(window.location.hash.substring(1));
+      const newCategory = window.location.hash.substring(1);
       console.log("New category:", newCategory);
-      handleCategoryChange(newCategory);
+      filterItems(newCategory);
     });
 
     radioButtons.forEach((radio) => {
       radio.addEventListener("change", function () {
         const category = this.value;
-        handleCategoryChange(category);
+        console.log("Selected category:", category);
+        updateUrl(category);
+        filterItems(category);
       });
     });