@php
     $version = $basicInfo->theme_version;
@endphp
@extends("frontend.layouts.layout-v$version")

@section('pageHeading')
    {{ !empty($pageHeading) ? $pageHeading->property_page_title : __('Home') }}
@endsection

@section('metaKeywords')
    @if (!empty($seoInfo))
        {{ $seoInfo->meta_keyword_properties }}
    @endif
@endsection

@section('metaDescription')
    @if (!empty($seoInfo))
        {{ $seoInfo->meta_description_properties }}
    @endif
@endsection
@section('style')
    <meta http-equiv="Cache-Control" content="no-store" />
    <style>
        .partner-logos {
            overflow: hidden;
            position: relative;
        }

        .logos-slider {
            display: flex;
            animation: scroll-left 40s linear infinite;
        }

        .partner-card {
            flex: 0 0 auto;
            width: 160px;
            transition: transform 0.3s ease;
        }

        .partner-card a {
            text-decoration: none;
        }

        .logo-wrapper {
            width: 180px;
            height: 180px;
            margin: 0 auto;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            border-radius: 12px; /* subtle rounded corners — remove if you want sharp edges */
        }

        .logo-wrapper img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }

        .partner-name {
            display: block;
            margin-top: 10px;
            font-size: 15px;
            color: #333;
            font-weight: 600;
        }

        .partner-card:hover .logo-wrapper {
            transform: scale(1.05);
        }

        .partner-card:hover {
            transform: translateY(-5px);
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Filter section styling - Full width improved design */
        .filter-section-full {
            background: #F7F9FC;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border: 1px solid #e9ecef;
        }

        .filter-section-full .form-group {
            margin-bottom: 0;
        }

        .search-input {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 15px;
            background: white;
            transition: all 0.3s ease;
            height: 48px;
        }

        .search-input:focus {
            border-color: #2B4E72;
            box-shadow: 0 0 0 0.2rem rgba(43, 78, 114, 0.15);
            outline: none;
        }

        .search-input.active {
            border-color: #2B4E72;
            background-color: #f8f9ff;
        }

        .search-input::placeholder {
            color: #6c757d;
            font-weight: 400;
        }

        .sort-label {
            font-weight: 600;
            color: #495057;
            white-space: nowrap;
        }

        .sort-select {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 14px;
            background: white;
            min-width: 120px;
            height: 40px;
            transition: all 0.3s ease;
        }

        .sort-select:focus {
            border-color: #2B4E72;
            box-shadow: 0 0 0 0.2rem rgba(43, 78, 114, 0.15);
            outline: none;
        }

        .sort-item {
            height: 48px;
            display: flex;
            align-items: center;
        }

        /* Clear filter button styling */
        .btn-clear-filter {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #6c757d;
            font-size: 16px;
            cursor: pointer;
            padding: 4px;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .btn-clear-filter:hover {
            background-color: #e9ecef;
            color: #495057;
        }

        .search-input {
            padding-right: 40px;
        }

        /* Additional spacing improvements */
        .map-area {
            margin-bottom: 20px;
        }

        .property-type-tabs {
            margin-bottom: 25px;
        }

        .listing-grid {
            margin-top: 20px;
        }

        .product-sort-area {
            margin-bottom: 25px;
        }

        /* Autocomplete suggestions styling */
        .autocomplete-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 4px 4px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .suggestion-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
            font-size: 14px;
        }

        .suggestion-item:hover {
            background-color: #f8f9fa;
        }

        .suggestion-item:last-child {
            border-bottom: none;
        }

        .suggestion-type {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            font-weight: bold;
            margin-right: 8px;
            text-transform: uppercase;
        }

        .suggestion-type.builder {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .suggestion-type.property {
            background-color: #f3e5f5;
            color: #7b1fa2;
        }

        .form-group {
            position: relative;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .partner-card {
                width: 120px;
                margin: 0 10px;
            }

            .logo-wrapper {
                width: 110px;
                height: 110px;
            }

            .filter-section-full {
                padding: 15px;
                margin-bottom: 20px;
            }

            .filter-section-full .row {
                flex-direction: column;
            }

            .filter-section-full .col-lg-9,
            .filter-section-full .col-lg-3 {
                width: 100%;
                margin-bottom: 15px;
            }

            .search-input {
                height: 44px;
                font-size: 14px;
                padding: 10px 14px;
            }

            .sort-item {
                justify-content: flex-start !important;
                height: auto;
                margin-top: 10px;
            }

            .sort-select {
                min-width: 100px;
                height: 38px;
            }

            .listing-grid {
                margin-top: 15px;
            }

            .map-area {
                margin-bottom: 15px;
            }

            .property-type-tabs {
                margin-bottom: 20px;
            }
        }

            .partner-name {
                font-size: 13px;
            }
        }
        /* Tabs Bar Custom Styles */
        .property-type-tabs {
            margin: 0 0 24px 0;
            display: flex;
            justify-content: center;
        }
        .property-type-tabs .nav-tabs {
            border-bottom: none;
            gap: 16px;
        }
        .property-type-tabs .nav-link {
            color: #2B4E72;
            background: #fff;
            border: 1px solid #2B4E72;
            border-radius: 32px;
            padding: 10px 32px;
            font-weight: 500;
            transition: background 0.2s, color 0.2s;
        }
        .property-type-tabs .nav-link.active,
        .property-type-tabs .nav-link:focus,
        .property-type-tabs .nav-link:active {
            background: var(--color-primary, #2B4E72) !important;
            color: #fff !important;
            border-color: var(--color-primary, #2B4E72) !important;
        }
        @media (max-width: 768px) {
            .property-type-tabs .nav-link {
                padding: 8px 16px;
                font-size: 15px;
            }
        }
    </style>
@endsection
@section('content')
    <!-- Map Start-->
    <div class="map-area border-top header-next pt-30 pb-20">
        <!-- Tabs Bar Start -->
        <div class="property-type-tabs">
            <ul class="nav nav-tabs justify-content-center">
                <li class="nav-item">
                    <button class="nav-link btn-md rounded-pill" type="button" onclick="updateURL('type=all')" data-type="all">
                        {{ __('All') }}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn-md rounded-pill" type="button" onclick="updateURL('type=residential')" data-type="residential">
                        {{ __('Residential') }}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn-md rounded-pill" type="button" onclick="updateURL('type=commercial')" data-type="commercial">
                        {{ __('Commercial') }}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn-md rounded-pill" type="button" onclick="updateURL('type=plots_and_villas')" data-type="plots_and_villas">
                        {{ __('Plots and villas') }}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link btn-md rounded-pill" type="button" onclick="updateURL('type=industrial')" data-type="industrial">
                        {{ __('Industrial sheds') }}
                    </button>
                </li>
            </ul>
        </div>
        <!-- Tabs Bar End -->
        <!-- Background Image -->
        <div class="container">
            <div class="lazy-container radius-md ratio border">
                <div id="main-map"></div>
            </div>
        </div>

        <!-- Map Legend -->
        <div class="container mt-4">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="map-legend d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-4">
                        <div class="legend-item d-flex align-items-center gap-1">
                            <img src="{{ asset('/assets/images/map-pins/blue-logo.png') }}" alt="Ready Possession" class="legend-icon" width="25" height="25">
                            <span class="legend-text small">Ready Possession</span>
                        </div>
                        <div class="legend-item d-flex align-items-center gap-1">
                            <img src="{{ asset('/assets/images/map-pins/yellow-logo.png') }}" alt="Under Construction" class="legend-icon" width="25" height="25">
                            <span class="legend-text small">Under Construction</span>
                        </div>
                        <div class="legend-item d-flex align-items-center gap-1">
                            <img src="{{ asset('/assets/images/map-pins/orange-logo.png') }}" alt="Upcoming" class="legend-icon" width="25" height="25">
                            <span class="legend-text small">Upcoming</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Map End-->

    <!-- Listing Start -->
    <div class="listing-grid pt-60 pb-70">
        <div class="container">
            <div class="row gx-xl-5">
                <div class="col-xl-3">
                    <div class="widget-offcanvas offcanvas-xl offcanvas-start" tabindex="-1" id="widgetOffcanvas"
                        aria-labelledby="widgetOffcanvas">
                        <div class="offcanvas-header px-20">
                            <h4 class="offcanvas-title">{{ __('Filter') }}</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                data-bs-target="#widgetOffcanvas" aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body p-3 p-xl-0">

                            <aside class="sidebar-widget-area" data-aos="fade-up">
                                {{-- <div class="widget widget-select radius-md mb-30">
                                    <h3 class="title">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#type" aria-expanded="true" aria-controls="type">
                                            {{ __('Property Type') }}
                                        </button>
                                    </h3>
                                    <div id="type" class="collapse show">
                                        <div class="accordion-body">
                                            <select name="type" id="" class="form-control form-select mb-20"
                                                onchange="updateURL('type='+$(this).val())">
                                                <option selected disabled>{{ __('Select Type') }}</option>
                                                <option value="all"
                                                    {{ request()->filled('type') && request()->input('type') == 'all' ? 'selected' : '' }}>
                                                    {{ __('All') }}</option>
                                                <option value="residential"
                                                    {{ request()->filled('type') && request()->input('type') == 'residential' ? 'selected' : '' }}>
                                                    {{ __('Residential') }}</option>
                                                <option value="commercial"
                                                    {{ request()->filled('type') && request()->input('type') == 'commercial' ? 'selected' : '' }}>
                                                    {{ __('Commercial') }}</option>
                                                <option value="plots_and_villas"
                                                    {{ request()->filled('type') && request()->input('type') == 'plots_and_villas' ? 'selected' : '' }}>
                                                    {{ __('Plots and villas') }}</option>
                                                <option value="industrial"
                                                    {{ request()->filled('type') && request()->input('type') == 'industrial' ? 'selected' : '' }}>
                                                    {{ __('Industrial sheds') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div> --}}

                                @if(!request()->filled('type') || !in_array(request()->input('type'), ['plots_and_villas', 'industrial']))
                                <div class="widget widget-categories radius-md mb-30">
                                    <h3 class="title">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#categories" aria-expanded="true" aria-controls="categories">
                                            {{ __('Categories') }}
                                        </button>
                                    </h3>
                                    <div id="categories" class="collapse show">
                                        <div class="accordion-body">
                                            <ul class="list-group">
                                                <li class="list-item">

                                                    <a class="{{ request()->filled('category') && request()->input('category') == 'all' ? 'active' : '' }}"
                                                        onclick="updateURL('category=all')">
                                                        {{ __('All') }} </a>
                                                </li>
                                                <div id="catogoryul">
                                                    @foreach ($categories as $category)
                                                        @if ($category->categoryContent)
                                                            <li class="list-item">

                                                                <a class="{{ request()->filled('category') && request()->input('category') == $category->categoryContent?->slug ? 'active' : '' }}"
                                                                    onclick="updateURL('category={{ $category->categoryContent?->slug }}');">
                                                                    {{ $category->categoryContent?->name }}</a>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <div class="widget widget-select radius-md mb-30">
                                    <h3 class="title">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#property_status" aria-expanded="true" aria-controls="property_status">
                                            {{ __('Property Status') }}
                                        </button>
                                    </h3>
                                    <div id="property_status" class="collapse show">
                                        <div class="accordion-body">
                                            <select name="property_status" id="" class="form-control form-select mb-20"
                                                onchange="updateURL('property_status='+$(this).val())">
                                                <option selected disabled>{{ __('Select Status') }}</option>
                                                <option value="all"
                                                    @selected(request()->filled('property_status') && request()->input('property_status') == 'all')>
                                                    {{ __('All') }}</option>
                                                @foreach (getPropertyStatus() as $propertyStatus)
                                                <option value="{{ $propertyStatus['value'] }}"
                                                    @selected(request()->filled('property_status') && request()->input('property_status') == $propertyStatus['value'])>
                                                    {{ $propertyStatus['title'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <form action="{{ route('frontend.properties') }}" method="get" id="searchForm"
                                    class="w-100">
                                    {{-- <div class="widget widget-select radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#purpose" aria-expanded="true" aria-controls="purpose">
                                                {{ __('Purpose') }}
                                        </h3>
                                        <div id="purpose" class="collapse show">
                                            <div class="accordion-body">
                                                <!-- Add class .list-dropdown form dropdown-menu -->
                                                <select name="purpose" onchange="updateURL('purpose='+$(this).val())"
                                                    id="" class="form-control form-select mb-20">
                                                    <option selected disabled>{{ __('Select Purpose') }}</option>
                                                    <option value="all"
                                                        {{ request()->filled('purpose') && request()->input('purpose') == 'all' ? 'selected' : '' }}>
                                                        {{ __('All') }}</option>
                                                    <option value="rent"
                                                        {{ request()->filled('purpose') && request()->input('purpose') == 'rent' ? 'selected' : '' }}>
                                                        {{ __('Rent') }}</option>
                                                    <option value="sale"
                                                        {{ request()->filled('purpose') && request()->input('purpose') == 'sale' ? 'selected' : '' }}>
                                                        {{ __('Sale') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div> --}}


                                    <!-- Default Filters - Always Visible -->
                                    <div class="widget widget-select radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#default_filters" aria-expanded="true" aria-controls="default_filters">
                                                {{ __('Basic Filters') }}
                                            </button>
                                        </h3>
                                        <div id="default_filters" class="collapse show">
                                            <div class="accordion-body">
                                                <div class="form-group mb-20">
                                                    <label class="mb-10"> {{ __('BHK') }}</label>
                                                    <input type="text" class="form-control" name="bhk" id="bhk-filter"
                                                        placeholder="{{ __('No. of bhk') }}"
                                                        value="{{ request()->input('bhk') }}"
                                                        oninput="debounceFilter('bhk', this.value)"
                                                        style="{{ request()->input('bhk') ? 'border-color: #2B4E72;' : '' }}">
                                                </div>

                                                <div class="form-group mb-20">
                                                    <label class="mb-10"> {{ __('Area') }}
                                                        ({{ __('Sqft') }})</label>
                                                    <input type="text" class="form-control" id="area-filter"
                                                        placeholder="{{ __('Enter area') }}"
                                                        value="{{ request()->input('area') }}"
                                                        oninput="debounceFilter('area', this.value)"
                                                        style="{{ request()->input('area') ? 'border-color: #2B4E72;' : '' }}">
                                                </div>

                                                <div class="form-group mb-20">
                                                    <label class="mb-10"> {{ __('Area') }}
                                                        ({{ __('Sqyd') }})</label>
                                                    <input type="text" class="form-control" id="area-sqyd-filter"
                                                        placeholder="{{ __('Enter area') }}"
                                                        value="{{ request()->input('area_sqyd') }}"
                                                        oninput="debounceFilter('area_sqyd', this.value)"
                                                        style="{{ request()->input('area_sqyd') ? 'border-color: #2B4E72;' : '' }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Additional Filters - Collapsible -->
                                    <div class="widget widget-select radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#additional_filters" aria-expanded="false" aria-controls="additional_filters">
                                                {{ __('Additional Filters') }}
                                            </button>
                                        </h3>
                                        <div id="additional_filters" class="collapse">
                                            <div class="accordion-body">
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ __('Title') }}</label>
                                                    <input type="text" class="form-control" name="title" id="title-filter"
                                                        placeholder="{{ __('Enter title') }}"
                                                        value="{{ request()->input('title') }}"
                                                        oninput="debounceFilter('title', this.value)"
                                                        style="{{ request()->input('title') ? 'border-color: #2B4E72;' : '' }}">
                                                </div>
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ __('Location') }}</label>
                                                    <input type="text" class="form-control" name="location" id="location-filter"
                                                        placeholder="{{ __('Enter location') }}"
                                                        value="{{ request()->input('location') }}"
                                                        oninput="debounceFilter('location', this.value)"
                                                        style="{{ request()->input('location') ? 'border-color: #2B4E72;' : '' }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="widget widget-amenities radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#amenities" aria-expanded="false"
                                                aria-controls="amenities">
                                                {{ __('Amenities') }}
                                            </button>
                                        </h3>
                                        <div id="amenities" class="collapse">
                                            <div class="accordion-body">
                                                <ul class="list-group custom-checkbox">
                                                    @php
                                                        if (!empty(request()->input('amenities'))) {
                                                            $selected_amenities = [];
                                                            if (is_array(request()->input('amenities'))) {
                                                                $selected_amenities = request()->input('amenities');
                                                            } else {
                                                                array_push(
                                                                    $selected_amenities,
                                                                    request()->input('amenities'),
                                                                );
                                                            }
                                                        } else {
                                                            $selected_amenities = [];
                                                        }
                                                    @endphp
                                                    @foreach ($amenities as $amenity)
                                                        @if ($amenity->amenityContent)
                                                            <li>
                                                                <input class="input-checkbox" type="checkbox"
                                                                    name="amenities[]" id="checkbox{{ $amenity->id }}"
                                                                    value="{{ $amenity->id }}"
                                                                    {{ in_array($amenity->amenityContent?->name, $selected_amenities) ? 'checked' : '' }}
                                                                    onchange="updateAmenities('amenities[]={{ $amenity->amenityContent?->name }}',this)">

                                                                <label class="form-check-label"
                                                                    for="checkbox{{ $amenity->id }}"><span>{{ $amenity->amenityContent?->name }}</span></label>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="widget widget-type radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#pricetype" aria-expanded="true" aria-controls="type">
                                                {{ __('Pricing Type') }}
                                            </button>
                                        </h3>
                                        <div id="pricetype" class="collapse show">
                                            <div class="accordion-body">
                                                <ul class="list-group">
                                                    <li class="list-item">
                                                        <div class="form-check">
                                                            <input class="form-check-input  " type="radio"
                                                                name="price"
                                                                {{ request()->input('price') == 'all' ? 'checked' : '' }}
                                                                onchange="updateURL('price=all',this)" id="exampleRadios"
                                                                value="all" checked>
                                                            <label class="form-check-label" for="exampleRadios">
                                                                {{ __('All') }}
                                                            </label>
                                                        </div>
                                                    </li>

                                                    <li class="list-item">
                                                        <div class="form-check">
                                                            <input class="form-check-input  " type="radio"
                                                                name="price"
                                                                {{ request()->input('price') == 'fixed' ? 'checked' : '' }}
                                                                onchange="updateURL('price=fixed',this)"
                                                                id="exampleRadios1" value="fixed">
                                                            <label class="form-check-label" for="exampleRadios1">
                                                                {{ __('Fixed Price') }}
                                                            </label>
                                                        </div>
                                                    </li>

                                                    <li class="list-item">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="price"
                                                                {{ request()->input('price') == 'negotiable' ? 'checked' : '' }}
                                                                onchange="updateURL('price=negotiable',this)"
                                                                id="exampleRadios2" value="negotiable">
                                                            <label class="form-check-label" for="exampleRadios2">
                                                                {{ __('Negotiable') }}
                                                            </label>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div> --}}



                                    <div class="widget widget-price radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#price" aria-expanded="false" aria-controls="price">
                                                {{ __('Pricing Filter') }}
                                            </button>
                                        </h3>
                                        <input class="form-control" type="hidden"
                                            value="{{ request()->filled('min') ? request()->input('min') : $min }}"
                                            name="min" id="min">
                                        <input class="form-control" type="hidden" value="{{ $min }}"
                                            id="o_min">
                                        <input class="form-control" type="hidden" value="{{ $max }}"
                                            id="o_max">

                                        <input class="form-control"
                                            value="{{ request()->filled('max') ? request()->input('max') : $max }}"
                                            type="hidden" name="max" id="max">
                                        <input type="hidden" id="currency_symbol"
                                            value="{{ $basicInfo->base_currency_symbol }}">

                                        <div id="price" class="collapse">
                                            <div class="accordion-body">
                                                <div class="price-item">
                                                    <div data-range-slider='priceSlider'></div>
                                                    <div class="price-value">
                                                        <span class="color-primary">{{ __('Price:') }} <span
                                                                data-range-value="priceSliderValue">
                                                                {{ symbolPrice($min) }}
                                                                -
                                                                {{ symbolPrice($max) }}
                                                            </span></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="cta">

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <button onclick="resetURL()" type="button"
                                                    class="btn-text color-primary icon-start mt-10"><i
                                                        class="fal fa-redo"></i>{{ __('Reset Search') }}</button>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </aside>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9">
                    <div class="product-sort-area mb-10" data-aos="fade-up">
                        <div class="filter-section-full">
                            <div class="row align-items-center">
                                <div class="col-lg-9 col-md-8 col-sm-12">
                                    <div class="form-group mb-0 position-relative">
                                        <input type="text" class="form-control search-input" name="combined_search" id="combined-search-filter"
                                            placeholder="{{ __('Enter property or builder name') }}"
                                            value="{{ request()->input('builder_name') ?: request()->input('property_name') }}"
                                            oninput="debounceCombinedSearch(this.value)">
                                        <button type="button" class="btn-clear-filter" onclick="clearCombinedFilter()" title="Clear filter" style="display: none;">
                                            <i class="fal fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12">
                                    <div class="sort-item d-flex align-items-center justify-content-end">
                                        <label class="color-dark me-2 font-sm sort-label">{{ __('Sort By') }} :</label>
                                        <select class="form-select form_control sort-select" name="sort"
                                            onchange="updateURL('sort='+$(this).val())">
                                            <option
                                                {{ request()->filled('sort') && request()->input('sort') == 'new' ? 'selected' : '' }}
                                                value="new">{{ __('Newest') }}</option>
                                            <option
                                                {{ request()->filled('sort') && request()->input('sort') == 'old' ? 'selected' : '' }}
                                                value="old">{{ __('Oldest') }}</option>
                                            <option
                                                {{ request()->filled('sort') && request()->input('sort') == 'low-to-high' ? 'selected' : '' }}
                                                value="low-to-high">
                                                {{ __('Price : Low to High') }}</option>
                                            <option
                                                {{ request()->filled('sort') && request()->input('sort') == 'high-to-low' ? 'selected' : '' }}
                                                value="high-to-low">{{ __('Price : High to Low') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row properties">
                        @forelse ($property_contents as $property_content)
                            <x-property :property="$property_content" :animate="false" class="col-lg-4 col-md-6" />
                        @empty
                            <div class="col-lg-12">
                                <h3 class="text-center mt-5">{{ __('NO PROPERTY FOUND') . '!' }}</h3>
                            </div>
                        @endforelse
                        <div class="row">
                            <div class="col-lg-12 pagination justify-content-center customPaginagte">
                                {{ $property_contents->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- @if($vendors->isNotEmpty())
            <div class="row gx-xl-5 py-5">
                <div class="our-partners-section py-5 bg-light">
                    <div class="section-title text-center mb-5">
                        <h2 class="fw-bold">Our Partners</h2>
                    </div>

                    <div class="partner-logos overflow-hidden position-relative">
                        <div class="logos-slider d-flex align-items-center">
                            <!-- Partner cards -->
                            @foreach ($vendors as $vendor)
                                <div class="partner-card text-center mx-4">
                                    <a href="{{ route('frontend.vendor.details', ['username' => $vendor->username]) }}" class="d-block">
                                        <div class="logo-wrapper mb-2">
                                            <img class="lazyload"
                                                src="{{ $vendor->photo ? asset('assets/admin/img/vendor-photo/' . $vendor->photo) : asset('assets/img/blank-user.jpg') }}"
                                                data-src="{{ $vendor->photo ? asset('assets/admin/img/vendor-photo/' . $vendor->photo) : asset('assets/img/blank-user.jpg') }}">
                                        </div>
                                        <span class="partner-name">
                                            {{ $vendor->vendor_info->name }}
                                        </span>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endif --}}
            {{-- <div class="row gx-xl-5 py-5">
                <div class="our-partners-section py-5 bg-light">
                    <div class="section-title text-center mb-5">
                        <h2 class="fw-bold">Our Partners</h2>
                    </div>

                    <div class="partner-logos overflow-hidden position-relative">
                        <div class="logos-slider d-flex align-items-center">
                            <!-- Partner cards -->
                            <div class="partner-card text-center mx-4">
                                 <div class="logo-wrapper mb-2">
                                    <img class="lazyload" src="{{ asset('assets/images/builders/SHALIGRAM.png') }}">
                                </div>
                                <span class="partner-name">Shaligram</span>
                            </div>
                            <div class="partner-card text-center mx-4">
                                 <div class="logo-wrapper mb-2">
                                    <img class="lazyload" src="{{ asset('assets/images/builders/Goyal.png') }}">
                                </div>
                                <span class="partner-name">Goyal & Co</span>
                            </div>
                            <div class="partner-card text-center mx-4">
                                 <div class="logo-wrapper mb-2">
                                    <img class="lazyload" src="{{ asset('assets/images/builders/swagat.png') }}">
                                </div>
                                <span class="partner-name">Swagat Group</span>
                            </div>
                            <div class="partner-card text-center mx-4">
                                 <div class="logo-wrapper mb-2">
                                    <img class="lazyload" src="{{ asset('assets/images/builders/bsafal.png') }}">
                                </div>
                                <span class="partner-name">bSafal House</span>
                            </div>
                            <div class="partner-card text-center mx-4">
                                 <div class="logo-wrapper mb-2">
                                    <img class="lazyload" src="{{ asset('assets/images/builders/addor.png') }}">
                                </div>
                                <span class="partner-name">Addor Aspire</span>
                            </div>
                            <div class="partner-card text-center mx-4">
                                 <div class="logo-wrapper mb-2">
                                    <img class="lazyload" src="{{ asset('assets/images/builders/swati.png') }}">
                                </div>
                                <span class="partner-name">Swati Procon</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
    <!-- Listing End -->
@endsection

@section('script')
    <script>
                'use strict';
        var property_contents = @json($property_contents);
        var properties = property_contents.data;

                // Function to update clear button visibility (moved outside document.ready for global access)
        function updateClearButtonVisibility() {
            let currentValue = $('#combined-search-filter').val();
            if (currentValue && currentValue.trim() !== '') {
                $('.btn-clear-filter').show();
            } else {
                $('.btn-clear-filter').hide();
            }
        }

        // Debounce function to limit API calls
        let filterTimeout;
        function debounceFilter(filterType, value) {
            clearTimeout(filterTimeout);

            filterTimeout = setTimeout(function() {
                // Show loading indicator only when actually applying the filter
                $('.request-loader').addClass('show');

                if (value.trim() !== '') {
                    updateURL(filterType + '=' + encodeURIComponent(value.trim()));
                } else {
                    // Remove the filter if value is empty
                    let currentURL = window.location.href;
                    let mainUrl = currentURL.split('?')[0];
                    let prevUrl = currentURL.split('?')[1];
                    let newUrlArray = prevUrl ? prevUrl.split('&') : [];

                    newUrlArray = newUrlArray.filter(url => {
                        let urlN = url.split('=');
                        return urlN[0] !== filterType;
                    });

                    let updatedURL = mainUrl + (newUrlArray.length > 0 ? '?' + newUrlArray.join('&') : '');
                    window.history.pushState({
                        path: updatedURL
                    }, '', updatedURL);
                    getData(updatedURL);
                }
                            }, 1000); // 1000ms delay
        }

                // Combined search functionality
        $(document).ready(function() {
                        // Initialize clear button visibility
            updateClearButtonVisibility();

            // Update clear button visibility when page loads with existing filters
            $(document).ready(function() {
                setTimeout(function() {
                    updateClearButtonVisibility();
                }, 100);
            });

            // Update clear button visibility on input change
            $('#combined-search-filter').on('input', function() {
                updateClearButtonVisibility();
            });
                                    // Combined search autocomplete
            $('#combined-search-filter').on('input', function() {
                let query = $(this).val();

                // Show/hide clear button based on input value
                updateClearButtonVisibility();

                if (query.length >= 2) {
                    // Get both builders and properties suggestions
                    $.when(
                        $.ajax({
                            url: '{{ route("frontend.get_builders_autocomplete") }}',
                            method: 'GET',
                            data: { query: query }
                        }),
                        $.ajax({
                            url: '{{ route("frontend.get_properties_autocomplete") }}',
                            method: 'GET',
                            data: { query: query }
                        })
                    ).done(function(buildersResponse, propertiesResponse) {
                        let suggestions = [];

                        // Add builders with type indicator
                        buildersResponse[0].builders.forEach(function(builder) {
                            suggestions.push({
                                text: builder.name,
                                type: 'builder'
                            });
                        });

                        // Add properties with type indicator
                        propertiesResponse[0].properties.forEach(function(property) {
                            suggestions.push({
                                text: property.title,
                                type: 'property'
                            });
                        });

                        showCombinedAutocompleteSuggestions('#combined-search-filter', suggestions);
                    });
                } else {
                    hideAutocompleteSuggestions('#combined-search-filter');
                }
            });

                        // Remove blur event handler - filters will only be cleared via clear button

                        // Apply filter on Enter key press
            $('#combined-search-filter').on('keypress', function(e) {
                if (e.which === 13) { // Enter key
                    let query = $(this).val().trim();
                    if (query !== '') {
                        hideAutocompleteSuggestions('#combined-search-filter');
                        $('.request-loader').addClass('show');

                        // Try to match with main builders first, then properties
                        $.ajax({
                            url: '{{ route("frontend.get_builders_autocomplete") }}',
                            method: 'GET',
                            data: { query: query },
                            success: function(response) {
                                if (response.builders.length > 0) {
                                    // Found main builder match
                                    updateURL('builder_name=' + encodeURIComponent(query));
                                } else {
                                    // Try property match
                                    updateURL('property_name=' + encodeURIComponent(query));
                                }
                                // Update clear button visibility
                                updateClearButtonVisibility();
                            },
                            error: function() {
                                // Fallback to property search
                                updateURL('property_name=' + encodeURIComponent(query));
                                // Update clear button visibility
                                updateClearButtonVisibility();
                            }
                        });
                    }
                }
            });

            // Hide suggestions when clicking outside
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.autocomplete-container').length) {
                    hideAutocompleteSuggestions('#combined-search-filter');
                }
            });

            // Initialize map with properties data after all scripts are loaded
            if (typeof mapInitialize === 'function' && properties && properties.length > 0) {
                mapInitialize(properties);
            }
        });

                function debounceCombinedSearch(value) {
            // Only show autocomplete suggestions, don't apply filter while typing
            clearTimeout(filterTimeout);

            filterTimeout = setTimeout(function() {
                if (value.trim() !== '') {
                    // Get both builders and properties suggestions for autocomplete only
                    $.when(
                        $.ajax({
                            url: '{{ route("frontend.get_builders_autocomplete") }}',
                            method: 'GET',
                            data: { query: value.trim() }
                        }),
                        $.ajax({
                            url: '{{ route("frontend.get_properties_autocomplete") }}',
                            method: 'GET',
                            data: { query: value.trim() }
                        })
                    ).done(function(buildersResponse, propertiesResponse) {
                        let suggestions = [];

                        // Add builders with type indicator
                        buildersResponse[0].builders.forEach(function(builder) {
                            suggestions.push({
                                text: builder.name,
                                type: 'builder'
                            });
                        });

                        // Add properties with type indicator
                        propertiesResponse[0].properties.forEach(function(property) {
                            suggestions.push({
                                text: property.title,
                                type: 'property'
                            });
                        });

                        showCombinedAutocompleteSuggestions('#combined-search-filter', suggestions);
                    });
                } else {
                    hideAutocompleteSuggestions('#combined-search-filter');
                }
            }, 300); // Reduced delay for better responsiveness
        }

                function showCombinedAutocompleteSuggestions(inputId, suggestions) {
            let $input = $(inputId);
            let $container = $input.closest('.form-group');

            // Remove existing suggestions
            $container.find('.autocomplete-suggestions').remove();

            if (suggestions.length > 0) {
                let $suggestions = $('<div class="autocomplete-suggestions"></div>');
                suggestions.forEach(function(suggestion) {
                    let typeLabel = suggestion.type === 'builder' ? '<span class="suggestion-type builder">Developer</span>' : '<span class="suggestion-type property">Property</span>';
                    let $item = $('<div class="suggestion-item">' + suggestion.text + ' ' + typeLabel + '</div>');
                                        $item.on('click', function() {
                        $input.val(suggestion.text);
                        hideAutocompleteSuggestions(inputId);

                        // Apply filter only when suggestion is selected
                        $('.request-loader').addClass('show');

                        if (suggestion.type === 'builder') {
                            // Apply main builder filter (will include sub-builders)
                            updateURL('builder_name=' + encodeURIComponent(suggestion.text));
                        } else {
                            updateURL('property_name=' + encodeURIComponent(suggestion.text));
                        }

                        // Update clear button visibility
                        updateClearButtonVisibility();
                    });
                    $suggestions.append($item);
                });
                $container.append($suggestions);
            }
        }

        function showAutocompleteSuggestions(inputId, suggestions) {
            let $input = $(inputId);
            let $container = $input.closest('.form-group');

            // Remove existing suggestions
            $container.find('.autocomplete-suggestions').remove();

            if (suggestions.length > 0) {
                let $suggestions = $('<div class="autocomplete-suggestions"></div>');
                suggestions.forEach(function(suggestion) {
                    let $item = $('<div class="suggestion-item">' + suggestion + '</div>');
                    $item.on('click', function() {
                        $input.val(suggestion);
                        hideAutocompleteSuggestions(inputId);
                        debounceFilter(inputId.replace('#', '').replace('-filter', ''), suggestion);
                    });
                    $suggestions.append($item);
                });
                $container.append($suggestions);
            }
        }

        function hideAutocompleteSuggestions(inputId) {
            $(inputId).closest('.form-group').find('.autocomplete-suggestions').remove();
        }

                function clearCombinedFilter() {
            // Clear the input field
            $('#combined-search-filter').val('');
            hideAutocompleteSuggestions('#combined-search-filter');

            // Remove only builder_name and property_name filters from URL, preserve others
            let currentURL = window.location.href;
            let mainUrl = currentURL.split('?')[0];
            let prevUrl = currentURL.split('?')[1];
            let newUrlArray = prevUrl ? prevUrl.split('&') : [];

            newUrlArray = newUrlArray.filter(url => {
                let urlN = url.split('=');
                return urlN[0] !== 'builder_name' && urlN[0] !== 'property_name';
            });

            let updatedURL = mainUrl + (newUrlArray.length > 0 ? '?' + newUrlArray.join('&') : '');
            window.history.pushState({
                path: updatedURL
            }, '', updatedURL);

            $('.request-loader').addClass('show');
            getData(updatedURL);

            // Update clear button visibility
            updateClearButtonVisibility();
        }
    </script>
    <!-- Leaflet Map JS -->
    <script src="{{ asset('/assets/front/js/vendors/leaflet.js') }}"></script>
    <script src="{{ asset('/assets/front/js/vendors/leaflet.markercluster.js') }}"></script>
    <!-- Map JS -->
    <script src="{{ asset('/assets/front/js/map.js') }}"></script>
    <script src="{{ asset('/assets/front/js/properties.js') }}"></script>
@endsection