{% set searchFilter = craft.app.request.getParam('filter') %}

{% set unfilteredResults = craft.entries()
    .section([
        'homes'
    ])
    .all() %}

{% set hasFeatured = false %}
{% set hasRobust = false %}
{% set hasHPS = false %}
{% set hasHPSRobust = false %}
{% set hasILFAHPS = false %}

{% for result in unfilteredResults %}
    {% if result.homeCategory.one() | length and result.homeCategory.one().title | length %}
        {% switch result.homeCategory.one().title %}
        {% case "Featured" %}
            {% set hasFeatured = true %}
        {% case "Robust" %}
            {% set hasRobust = true %}
        {% case "HPS" %}
            {% set hasHPS = true %}
        {% case "HPS / Robust" %}
            {% set hasHPSRobust = true %}
        {% case "IL / FA / HPS" %}
            {% set hasILFAHPS = true %}
        {% default %}
            {# Do nothing  #}
        {% endswitch %}
    {% endif %}
{% endfor %}

{# Compose searchFilter parameter #}
{% set homesQuery = panel.homes %}

{% if searchFilter | length and searchFilter != 'all' %}
    {% set categories = craft.categories()
        .group('homeCategories')
        .title(searchFilter)
        .all() %}

    {% if categories | length %}
        {% set homesQuery = homesQuery.relatedTo(categories) %}
    {% endif %}
{% endif %}

{% set totalResults = homesQuery.all() %}

<section id="genericExploreHomesPanel{{ loop.index }}" class="generic-explore-homes-panel w-full relative">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div
            class="grid-wrapper w-full flex flex-col sm:flex-row justify-start sm:justify-between items-start sm:items-center lg:items-end flex-wrap">
            <div class="header-wrapper w-full sm:w-auto lg:w-full relative sm:order-first">
                <div class="content-wrapper w-full relative flex flex-col justify-start items-start">
                    <div class="header-wrapper w-full">
                        <div class="padding-wrapper px-6 sm:px-8 lg:px-10 pt-8 pb-6 sm:py-10 lg:pt-12 lg:pb-6">
                            <h2 class="font-body text-brand-terracotta-aa font-semibold text-3xl lg:text-4xl">
                                {{ panel.header }}
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="filters-wrapper w-full sm:w-[calc(100%-2rem)] lg:w-auto max-w-fit px-6 pb-8 py-0.5 sm:p-2 sm:mx-8 lg:ml-10 lg:mr-0 sm:mb-8 flex flex-row justify-start items-center gap-2 lg:gap-4 overflow-x-scroll no-scrollbar sm:rounded-full sm:bg-mintyy-gray-i sm:border-2 sm:border-solid sm:border-white-pure">
                {% if hasFeatured or hasRobust or hasHPS or hasHPSRobust or hasILFAHPS %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'All',
                        'href': entry.url ~ '?filter=all#genericExploreHomesPanel' ~ loop.index,
                        'title': 'Click to view all results',
                        'theme': ( not searchFilter | length ) ? 'primary' : searchFilter == 'all' ? 'primary' : 'secondary',
                        'size': 'small',
                        'borderRadius': 'full'
                    } %}
                {% endif %}

                {% if hasFeatured %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'Featured',
                        'href': entry.url ~ '?filter=featured#genericExploreHomesPanel' ~ loop.index,
                        'title': 'Filter results to show only featured homes',
                        'theme': searchFilter == 'featured' ? 'primary' : 'secondary',
                        'size': 'small',
                        'borderRadius': 'full'
                    } %}
                {% endif %}

                {% if hasRobust %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'Robust',
                        'href': entry.url ~ '?filter=robust#genericExploreHomesPanel' ~ loop.index,
                        'title': 'Filter results to show only robust homes',
                        'theme': searchFilter == 'robust' ? 'primary' : 'secondary',
                        'size': 'small',
                        'borderRadius': 'full'
                    } %}
                {% endif %}

                {% if hasHPS %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'HPS',
                        'href': entry.url ~ '?filter=hps#genericExploreHomesPanel' ~ loop.index,
                        'title': 'Filter results to show only HPS homes',
                        'theme': searchFilter == 'hps' ? 'primary' : 'secondary',
                        'size': 'small',
                        'borderRadius': 'full'
                    } %}
                {% endif %}

                {% if hasHPSRobust %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'HPS / Robust',
                        'href': entry.url ~ '?filter=HPS / Robust#genericExploreHomesPanel' ~ loop.index,
                        'title': 'Filter results to show only HPS / Robust homes',
                        'theme': searchFilter == 'HPS / Robust' ? 'primary' : 'secondary',
                        'size': 'small',
                        'borderRadius': 'full'
                    } %}
                {% endif %}

                {% if hasILFAHPS %}
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'IL / FA / HPS',
                        'href': entry.url ~ '?filter=IL / FA / HPS#genericExploreHomesPanel' ~ loop.index,
                        'title': 'Filter results to show only IL / FA / HPS homes',
                        'theme': searchFilter == 'IL / FA / HPS' ? 'primary' : 'secondary',
                        'size': 'small',
                        'borderRadius': 'full'
                    } %}
                {% endif %}
            </div>
            <div aria-hidden="true" class="home-details-wrapper hidden">
                {% for home in totalResults %}
                    {# 1. Check if homeAddress is a Matrix/SuperTable block or direct field #}
                    {% set addressBlock = home.homeAddress.one() ?? home.homeAddress %}

                    {# 2. Support both .lat/.lng and .latitude/.longitude property names #}
                    {% set lat = addressBlock.latitude ?? addressBlock.lat ?? '' %}
                    {% set lng = addressBlock.longitude ?? addressBlock.lng ?? '' %}
                    {% set addressText = addressBlock.address ?? '' %}

                    {% set specs = home.homeSpecifications.one() %}

                    <div class="home-item"
                         data-title="{{ home.title }}"
                         data-address="{{ addressText }}"
                         data-lat="{{ lat }}"
                         data-lng="{{ lng }}"
                         data-zoom="16"
                         data-link="{{ home.url }}?return=/"
                         data-homes="{{ specs.homes ?? '' }}"
                         data-beds="{{ specs.beds ?? '' }}"
                         data-baths="{{ specs.baths ?? '' }}"
                    >
                    </div>
                {% endfor %}
                <div class="markers-wrapper absolute inset-0">
                    {% for home in totalResults %}
                        <div class="map-information-marker absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto bg-brand-terracotta-aa rounded-full p-1 flex flex-row justify-center items-center">
                            <a href="{{ home.url }}" class="marker-popup-link link-wrapper w-auto flex flex-row justify-center items-center pointer-events-auto">
                                <span class="title-wrapper w-auto h-8 xs:h-10 px-4 xs:px-5 bg-white-pure flex flex-row justify-center items-center rounded-full pointer-events-none">
                                    <span class="font-header text-brand-terracotta-aa font-bold text-base whitespace-nowrap">
                                        {{ home.title }}
                                    </span>
                                </span>
                                <span class="icons-wrapper w-auto px-4 xs:px-5 flex flex-row justify-center items-center gap-3 pointer-events-none">
                                    <span class="homes-wrapper flex flex-row justify-start items-center">
                                        <span class="font-body text-sm font-semibold text-white-pure">
                                            {{ home.homeSpecifications.homes }}
                                        </span>
                                        <svg class="w-4 text-white-pure ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M10.427 3.14a.781.781 0 0 0-.854 0L3.077 7.397v9.833c0 .418.344.756.77.756h2.307V13.65c0-1.253 1.033-2.27 2.307-2.27h3.077c1.274 0 2.308 1.017 2.308 2.27v4.337h2.308c.425 0 .769-.338.769-.756V7.398l-6.496-4.259Zm1.88 14.847V13.65a.763.763 0 0 0-.768-.756H8.462a.763.763 0 0 0-.77.756v4.337h4.616ZM1.198 8.632l.341-.225v8.824c0 1.253 1.034 2.269 2.308 2.269h12.308c1.274 0 2.307-1.016 2.307-2.27V8.408l.343.225a.779.779 0 0 0 1.067-.21.75.75 0 0 0-.213-1.05L11.28 1.882a2.34 2.34 0 0 0-2.56 0L.343 7.373a.75.75 0 0 0-.214 1.05.778.778 0 0 0 1.067.209Z" clip-rule="evenodd"/></svg>
                                    </span>
                                    <span class="beds-wrapper flex flex-row justify-start items-center">
                                        <span class="font-body text-sm font-semibold text-white-pure">
                                            {{ home.homeSpecifications.beds }}
                                        </span>
                                        <svg class="w-4 text-white-pure ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path fill="currentColor" d="M5.625 8.75V7.125c0-.875.625-1.5 1.5-1.5h5.75c.875 0 1.5.625 1.5 1.5V8.75h2.5v-5c0-.375-.25-.625-.625-.625H3.75c-.375 0-.625.25-.625.625v5h2.5ZM17.75 10H2.25c-.5 0-1 .5-1 1v3.375h17.5V11c0-.5-.5-1-1-1ZM1.875 8.75v-5c0-1 .875-1.875 1.875-1.875h12.5c1 0 1.875.875 1.875 1.875v5C19.25 9 20 10 20 11v6.5a.624.624 0 1 1-1.25 0v-1.875H1.25V17.5a.625.625 0 1 1-1.25 0V11c0-1 .75-2 1.875-2.25Zm11.25 0V7.125c0-.125 0-.25-.25-.25h-5.75c-.125 0-.25 0-.25.25V8.75h6.25Z"/></svg>
                                    </span>
                                    <span class="baths-wrapper flex flex-row justify-start items-center">
                                        <span class="font-body text-sm font-semibold text-white-pure">
                                            {{ home.homeSpecifications.baths }}
                                        </span>
                                        <svg class="w-4 text-white-pure ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path fill="currentColor" d="M6.721 5.024c.308-2.837 2.763-5.04 5.742-5.04 3.183 0 5.772 2.521 5.772 5.641v13.75a.641.641 0 0 1-1.282 0V5.625c0-2.404-2.008-4.359-4.49-4.359-2.278 0-4.153 1.643-4.45 3.768 2.153.321 3.807 2.141 3.807 4.341a.642.642 0 0 1-.641.641H3.48a.641.641 0 0 1-.641-.641c0-2.226 1.692-4.061 3.881-4.351Zm3.748 3.71c-.304-1.408-1.591-2.468-3.138-2.468s-2.835 1.06-3.14 2.468h6.278Zm-4.1 4.079c0-.53.434-.954.962-.954.526 0 .963.422.963.954a.957.957 0 0 1-.963.953.958.958 0 0 1-.962-.954Zm0 5c0-.53.434-.954.962-.954.526 0 .963.422.963.953a.957.957 0 0 1-.963.954.958.958 0 0 1-.962-.953Zm3.576-4.7a.953.953 0 0 1 .619-1.208.968.968 0 0 1 1.02.281.948.948 0 0 1-.258 1.463.965.965 0 0 1-1.381-.536Zm1.589 4.753a.95.95 0 0 1 .62-1.207.967.967 0 0 1 1.02.281.947.947 0 0 1 .129 1.065.963.963 0 0 1-1.77-.139Zm-10.235 0a.952.952 0 0 1 .619-1.207.967.967 0 0 1 1.02.281.948.948 0 0 1 .13 1.065.963.963 0 0 1-1.77-.139Zm1.777-5.68a.968.968 0 0 1 1.534.11.953.953 0 0 1-.734 1.468.964.964 0 0 1-.929-.513.947.947 0 0 1 .13-1.065Z"/></svg>
                                    </span>
                                </span>
                            </a>
                            <button class="close-wrapper w-auto h-8 xs:h-10 px-4 xs:px-5 bg-brand-terracotta-i rounded-full pointer-events-auto">
                                <span class="sr-only">Close Popup</span>
                                <svg class="w-4 text-white-pure pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path stroke="currentColor" stroke-width="1.6" d="m2 2.5 11.314 11.314M2 13.5 13.314 2.186"/></svg>
                            </button>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div
                class="map-wrapper w-full relative sm:order-last lg:rounded-2xl xl:rounded-3xl overflow-hidden bg-mintyy-gray-i lg:mx-10 lg:mb-12">
                <div
                    class="primary-map w-full flex justify-center items-center h-64 xs:h-72 sm:h-96 lg:h-120 xl:h-160 2xl:h-[40rem] 3xl:h-[42rem] 4xl:h-[45rem] 5xl:h-[50rem] lg:rounded-2xl xl:rounded-3xl overflow-hidden">
                    {{ svg(svgPath ~ 'animated/loading-icon-animated.svg') | attr({class: "w-4 h-4 mr-4 text-brand-terracotta-i fill-current pointer-events-none"}) }}
                </div>
            </div>
            <div class="button-wrapper w-full sm:w-auto relative sm:order-first lg:order-none">
                <div class="padding-wrapper p-6 sm:px-8 sm:py-6 lg:p-0 lg:pr-10 lg:pb-10">
                    {% include themeDir ~ '/_includes/_modules/_button' with {
                        'buttonType': 'internal-link',
                        'buttonText': 'View all homes',
                        'href': '/explore-homes',
                        'title': 'Click to view all homes',
                        'theme': 'quinary',
                    } %}
                </div>
            </div>
        </div>
    </div>
</section>