<div
  class="px-1 py-2 flex flex-row gap-2 max-w-full overflow-x-auto whitespace-nowrap"
>
  <button
    id="all"
    class="flex gap-2 items-center px-4 border border-gray-200 rounded-lg focus:outline-none focus:ring"
    onclick="window.location.href = '/catalog'"
  >
    <span class="text-xs p-2 font-medium text-gray-900">All</span>
  </button>
  {{ $uniqueCategories := slice }} {{ range .Params.catalog }} {{ if not (in
  $uniqueCategories .cat) }} {{ $uniqueCategories = $uniqueCategories | append
  .cat }}
  <div
    class="flex gap-2 items-center px-3 py-2 border border-gray-200 rounded-lg"
  >
    <input
      id="radio-button-{{ .cat }}"
      type="radio"
      value="{{ .cat }}"
      name="category"
      class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
    />
    <label
      for="radio-button-{{ .cat }}"
      class="noselect text-xs sm:p-0 font-medium text-gray-900"
      >{{ .cat }}</label
    >
  </div>
  {{ end }} {{ end }}
</div>

<div
  class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
>
  {{ range .Params.catalog }} {{ if ne .item "" }}
  <div
    class="flex flex-col justify-between bg-white rounded-lg border p-4 relative"
  >
    {{ if .thumbnail }}
    <img
      loading="lazy"
      src="{{ .thumbnail }}"
      alt="Thumbnail"
      class="w-full aspect-square rounded-md object-cover"
    />
    {{ else }}

    <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">
        {{- $text := .item -}} {{- $parts := split $text "(" -}}

        <div
          class="relative flex flex-col gap-0 text-2xl mb-2 font-bold italic"
          id="modal-title"
        >
          {{- with index $parts 0 -}} {{ . }} {{- end -}} {{- if gt (len $parts)
          1 -}}
          <span class="text-sm text-gray-600">
            {{- $innerParts := split (index $parts 1) ")" -}} {{- with index
            $innerParts 0 -}} ({{ . }}) {{- end -}}
          </span>
          {{- if gt (len $innerParts) 1 -}} {{- index $innerParts 1 -}} {{- end
          -}} {{- end -}}
        </div>
        <div>
          <span
            style="white-space: nowrap"
            class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full"
            >{{ .cat }}</span
          >
        </div>
      </div>
      <div class="text-sm text-gray-800 text-base mb-4">
        {{ if ne .quant "" }}
        <div class="flex flex-row justify-between">
          <strong>Quantity:</strong>
          <span>{{ .quant }}</span>
        </div>
        {{ end }} {{ if ne .dimensions "" }}
        <div class="gap-1 text-right flex flex-row justify-between">
          <strong>Dimensions:</strong>
          <span>{{ .dimensions }}</span>
        </div>
        {{ end }}
        <div class="border-b-[1px] mx-1 my-2"></div>
        {{ if ne .baseCost "" }}
        <div class="flex flex-row justify-between">
          <strong>Purchase Cost:</strong>
          <span>{{ .purchaseCost }}</span>
        </div>
        {{ end }}{{ if ne .baseCost "" }}
        <div class="flex flex-row justify-between">
          <strong>Rental Cost:</strong>
          <span>{{ .baseCost }}</span>
        </div>
        {{ end }} {{ if ne .deliveryPickup "" }}
        <div class="flex flex-row justify-between">
          <strong>+ Delivery Both Ways:</strong>
          <span>{{ .deliveryPickup }}</span>
        </div>
        {{ end }}
        <div class="text-xs">— or —</div>
        {{ if ne .installBreakdown "" }}
        <div class="flex flex-row justify-between">
          <strong>+ Setup & Breakdown:</strong>
          <span>{{ .installBreakdown }}</span>
        </div>
        {{ end }}
      </div>
    </div>
    <a class="w-full h-8" href="#modal-{{ .item | urlize }}">
      <button
        type="button"
        class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
      >
        Expand
      </button>
    </a>
    <div
      id="modal-{{ .item | urlize }}"
      class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
      aria-labelledby="modal-title"
      role="dialog"
      aria-modal="true"
    >
      <div
        class="flex items-end justify-center min-h-screen p-4 text-center sm:block sm:p-0"
      >
        <div class="fixed inset-0" aria-hidden="true"></div>
        <span
          class="hidden sm:inline-block sm:align-middle sm:h-screen"
          aria-hidden="true"
          >&#8203;</span
        >
        <div
          id="modal-overlay"
          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-xl w-full md:max-w-[800px]"
        >
          <div id="modal-overlay" class="bg-white p-4">
            <div class="sm:flex sm:items-start">
              <div class="z-20 w-full mt-3 text-center sm:mt-0 sm:text-left">
                <div class="flex flex-col sm:flex-row">
                  {{ if .gallery }}
                  <div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
                    {{ partial "carousel.html" . }}
                  </div>
                  {{ end }}
                  <div
                    class="z-20 pt-4 sm:pt-0 sm:pl-4 w-full md:w-1/3 sm:w-1/2"
                  >
                    <div
                      class="flex flex-col h-full justify-between text-md text-gray-800 text-base"
                    >
                      <div>
                        <div>
                          {{- $text := .item -}} {{- $parts := split $text "("
                          -}}

                          <div
                            class="relative flex flex-col gap-0 text-2xl mb-2 font-bold italic"
                            id="modal-title"
                          >
                            {{- with index $parts 0 -}} {{ . }} {{- end -}} {{-
                            if gt (len $parts) 1 -}}
                            <span class="text-sm text-gray-600">
                              {{- $innerParts := split (index $parts 1) ")" -}}
                              {{- with index $innerParts 0 -}} ({{ . }}) {{- end
                              -}}
                            </span>
                            {{- if gt (len $innerParts) 1 -}} {{- index
                            $innerParts 1 -}} {{- end -}} {{- end -}}
                          </div>

                          {{ if ne .deliveryPickup "" }}
                          <div class="flex flex-row justify-between">
                            <strong>Rental Cost:</strong>
                            <span>{{ .baseCost }}</span>
                          </div>
                          {{ end }} {{ if ne .installBreakdown "" }}
                          <div class="flex flex-row justify-between">
                            <strong>Purchase Cost:</strong>
                            <span>{{ .purchaseCost }}</span>
                          </div>
                          {{ end }} {{ if ne .deliveryPickup "" }}
                          <div class="flex flex-row justify-between">
                            <strong>+ Delivery Both Ways:</strong>
                            <span>{{ .deliveryPickup }}</span>
                          </div>
                          <div class="text-xs text-left">— or —</div>
                          {{ end }} {{ if ne .installBreakdown "" }}
                          <div class="flex flex-row justify-between">
                            <strong>+ Setup & Breakdown:</strong>
                            <span>{{ .installBreakdown }}</span>
                          </div>
                          {{ end }}
                        </div>
                        <div class="border-b-2 my-2 mx-4 sm:my-8"></div>
                        <div>
                          {{ if ne .quant "" }}
                          <div class="flex flex-row justify-between">
                            <strong>Quantity:</strong>
                            <span>{{ .quant }}</span>
                          </div>
                          {{ end }} {{ if ne .dimensions "" }}
                          <div
                            class="gap-1 text-right flex flex-row justify-between"
                          >
                            <strong>Dimensions:</strong>
                            <span>{{ .dimensions }}</span>
                          </div>
                          {{ end }}
                        </div>
                      </div>
                      <button
                        id="close-modal"
                        class="z-20 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm p-1 mt-4 bg-black text-base font-sm text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
                        @click="open = false"
                      >
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ end }} {{ end }}
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const modalButtons = document.querySelectorAll(".grid.grid-cols-1 a");
    const closeButtons = document.querySelectorAll("#close-modal");
    const modals = document.querySelectorAll(".fixed");
    const radioButtons = document.querySelectorAll(
      'input[type="radio"][name="category"]'
    );

    function filterItems(category) {
      console.log("Filtering items for category:", category);
      const items = document.querySelectorAll(".grid.grid-cols-1 > div");

      items.forEach((item) => {
        const itemCategory = item.querySelector(".bg-blue-100");
        // Decode category to match actual category names in catalog
        const decodedCategory = decodeURIComponent(category);
        if (!category || itemCategory.textContent.trim() === decodedCategory) {
          item.classList.remove("hidden");
        } else {
          item.classList.add("hidden");

          const modalId = item.id.replace("modal-", "");
          const modal = document.getElementById(modalId);
          if (modal) modal.classList.add("hidden");
        }
      });
    }

    function updateUrl(category) {
      const url = new URL(window.location.href);
      url.hash = encodeURIComponent(category); // Encode category for URL
      window.history.replaceState({}, "", url.toString());
    }

    const category = window.location.hash.substring(1);
    console.log("Initial category:", category);
    filterItems(category);

    window.addEventListener("hashchange", function () {
      const newCategory = window.location.hash.substring(1);
      console.log("New category:", newCategory);
      filterItems(newCategory);
    });

    radioButtons.forEach((radio) => {
      radio.addEventListener("change", function () {
        const category = this.value;
        console.log("Selected category:", category);
        updateUrl(category);
        filterItems(category);
      });
    });

    modalButtons.forEach((button) => {
      button.addEventListener("click", function (e) {
        e.preventDefault();
        const modalId = this.getAttribute("href").substring(1);
        const modal = document.getElementById(modalId);
        modal.classList.remove("hidden");
      });
    });

    closeButtons.forEach((button) => {
      button.addEventListener("click", function (e) {
        e.preventDefault();
        const modal = this.closest(".fixed");
        modal.classList.add("hidden");
      });
    });

    if (category) {
      const radioToSelect = document.querySelector(
        `input[type="radio"][name="category"][value="${category}"]`
      );
      if (radioToSelect) {
        radioToSelect.checked = true;
        filterItems(category);
      }
    }
  });
</script>