@extends('tenant_frontend.layout')

@section('pageHeading')
    {{ !empty($pageHeading) ? $pageHeading->properties_page_title : $keywords['Property'] ?? __('Property') }}
@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" />
@endsection

@section('content')

    <div class="map-area border-top header-next pt-30 d-none d-lg-block">
        <div class="container">
            <div class="lazy-container radius-md ratio border">
                <div id="main-map"></div>
            </div>
        </div>
    </div>

    <div class="listing-grid pt-40 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">{{ $keywords['Filtros'] ?? __('Filtros') }}</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">

                                <!-- Categories Block -->
                                <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">
                                            {{ $keywords['Carrocería'] ?? __('Carrocería') }}
                                        </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')">
                                                        {{ $keywords['Todos'] ?? __('Todos') }} </a>
                                                </li>
                                                <div id="catogoryul" class="toggle-list" data-toggle-list="amenitiesToggle"
                                                    data-toggle-show="5">
                                                    @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>
                                                <span class="show-more"
                                                    data-toggle-btn="toggleListBtn">{{ $keywords['Mostrar Más'] ?? __('Mostrar Más') }} +</span>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <form action="{{ route('frontend.properties', getParam()) }}" method="get"
                                    id="searchForm" class="w-100">
                                    
                                    <!-- Condition (New/Used Selector Wrapper) -->
                                    <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">
                                                {{ $keywords['Condición'] ?? __('Condición') }}
                                            </button>
                                        </h3>
                                        <div id="purpose" class="collapse show">
                                            <div class="accordion-body">
                                                <select name="purpose" onchange="updateURL('purpose='+$(this).val())"
                                                    id="" class="form-control form-select mb-20">
                                                    <option selected disabled>{{  $keywords['Seleccionar Condición'] ?? __('Seleccionar Condición') }}</option>
                                                    <option value="all"
                                                        {{ request()->filled('purpose') && request()->input('purpose') == 'all' ? 'selected' : '' }}>
                                                        {{ $keywords['Todos'] ?? __('Todos') }}</option>
                                                    <option value="rent"
                                                        {{ request()->filled('purpose') && request()->input('purpose') == 'rent' ? 'selected' : '' }}>
                                                        {{ $keywords['Usado'] ?? __('Usado') }}</option>
                                                    <option value="sale"
                                                        {{ request()->filled('purpose') && request()->input('purpose') == 'sale' ? 'selected' : '' }}>
                                                        {{ $keywords['Nuevo'] ?? __('Nuevo') }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Vehicle Information (Technical Fields) Wrapper Block -->
                                    <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="#select" aria-expanded="true" aria-controls="select">
                                                {{  $keywords['Información del Vehículo'] ?? __('Información del Vehículo') }}
                                            </button>
                                        </h3>
                                        <div id="select" class="collapse show">
                                            <div class="accordion-body">
                                                <!-- Listing Title Field -->
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ $keywords['Título'] ?? __('Título') }}</label>
                                                    <input type="text" class="form-control" name="title"
                                                        placeholder="{{ $keywords['Ingresar Título'] ?? __('Ingresar Título') }}"
                                                        onkeydown="if (event.keyCode == 13) updateURL('title='+$(this).val())">
                                                </div>

                                                <!-- Brand Field -->
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ $keywords['Marca'] ?? __('Marca') }}</label>
                                                    <select id="brand_id" name="brand_id"
                                                        class="form-control form-select"
                                                        onchange="updateURL('brand_id='+$(this).val())">
                                                        <option value="">{{ $keywords['Todas las Marcas'] ?? __('Todas las Marcas') }}</option>
                                                        @foreach($brands as $brand)
                                                            <option
                                                                value="{{ $brand->id }}"
                                                                {{ request('brand_id')==$brand->id ? 'selected' : '' }}>
                                                                {{ $brand->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <!-- Model Field (Populated dynamically via JS) -->
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ $keywords['Modelo'] ?? __('Modelo') }}</label>
                                                    <select id="model_id" name="model_id"
                                                        class="form-control form-select"
                                                        onchange="updateURL('model_id='+$(this).val())">
                                                        <option value=""> {{ $keywords['Todos los Modelos'] ?? __('Todos los Modelos') }}</option>
                                                    </select>
                                                </div>

                                                <!-- Fuel Type Field -->
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ $keywords['Tipo de Combustible'] ?? __('Tipo de Combustible') }}</label>
                                                    <select name="fuel"
                                                        class="form-control form-select"
                                                        onchange="updateURL('fuel='+$(this).val())">
                                                        <option value="">{{ $keywords['Todos'] ?? __('Todos') }}</option>
                                                        <option value="Nafta" {{ request('fuel') == 'Nafta' ? 'selected' : '' }}> {{ $keywords['Nafta'] ?? __('Nafta') }}</option>
                                                        <option value="Diesel" {{ request('fuel') == 'Diesel' ? 'selected' : '' }}> {{ $keywords['Diesel'] ?? __('Diesel') }}</option>
                                                        <option value="Híbrido" {{ request('fuel') == 'Híbrido' ? 'selected' : '' }}> {{ $keywords['Híbrido'] ?? __('Híbrido') }}</option>
                                                        <option value="Eléctrico" {{ request('fuel') == 'Eléctrico' ? 'selected' : '' }}> {{ $keywords['Eléctrico'] ?? __('Eléctrico') }}</option>
                                                        <option value="Gas" {{ request('fuel') == 'Gas' ? 'selected' : '' }}> {{ $keywords['Gas'] ?? __('Gas') }}</option>
                                                        <option value="Flex" {{ request('fuel') == 'Flex' ? 'selected' : '' }}> {{ $keywords['Flex'] ?? __('Flex') }}</option>
                                                    </select>
                                                </div>

                                                <!-- Year Field -->
                                                <div class="form-group mb-20">
                                                    <label class="mb-10">{{ $keywords['Año'] ?? __('Año') }}</label>
                                                    <select name="year"
                                                        class="form-control form-select"
                                                        onchange="updateURL('year='+$(this).val())">
                                                        <option value=""> {{ $keywords['Todos los Años'] ?? __('Todos los Años') }}</option>
                                                        @foreach($years as $year)
                                                            <option
                                                                value="{{ $year }}"
                                                                {{ request('year')==$year ? 'selected' : '' }}>
                                                                {{ $year }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <!-- Mileage Min & Max Input Range Fields -->
                                                <div class="row">
                                                    <div class="col-6">
                                                        <input
                                                            type="number"
                                                            name="km_min"
                                                            class="form-control"
                                                            placeholder="Min KM"
                                                            value="{{ request('km_min') }}"
                                                            onkeydown="if (event.keyCode == 13) updateURL('km_min='+$(this).val())">
                                                    </div>
                                                    <div class="col-6">
                                                        <input
                                                            type="number"
                                                            name="km_max"
                                                            class="form-control"
                                                            placeholder="Max KM"
                                                            value="{{ request('km_max') }}"
                                                            onkeydown="if (event.keyCode == 13) updateURL('km_max='+$(this).val())">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Amenities Block -->
                                    <div class="widget widget-amenities radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#amenities" aria-expanded="true"
                                                aria-controls="amenities">
                                                {{ $keywords['Equipamiento'] ?? __('Equipamiento') }}
                                            </button>
                                        </h3>
                                        <div id="amenities" class="collapse show">
                                            <div class="accordion-body">
                                                <ul class="list-group custom-checkbox toggle-list"
                                                    data-toggle-list="amenitiesToggle" data-toggle-show="7">
                                                    @php
                                                        if (!empty(request()->input('amenities'))) {
                                                            $selected_amenities = is_array(request()->input('amenities')) ? request()->input('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>
                                                <span class="show-more"
                                                    data-toggle-btn="toggleListBtn">{{ $keywords['Mostrar Más'] ?? __('Mostrar Más') }} +</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Pricing Type Block -->
                                    <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">
                                                {{ $keywords['Tipo de Precio'] ?? __('Tipo de Precio') }}
                                            </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' || !request()->has('price') ? 'checked' : '' }}
                                                                onchange="updateURL('price=all',this)" id="exampleRadios"
                                                                value="all">
                                                            <label class="form-check-label" for="exampleRadios">
                                                                {{ $keywords['Todos'] ?? __('Todos') }}
                                                            </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">
                                                                {{ $keywords['Precio Fijo'] ?? __('Precio Fijo') }}
                                                            </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">
                                                                {{ $keywords['Negociable'] ?? __('Negociable') }}
                                                            </label>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Price Slider Section Range Wrapper Component -->
                                    <div class="widget widget-price radius-md mb-30">
                                        <h3 class="title">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#price" aria-expanded="true" aria-controls="price">
                                                {{ $keywords['Filtro de Precio'] ?? __('Filtro de Precio') }}
                                            </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" type="hidden" value="{{ $min }}" id="min1">
                                        <input class="form-control" type="hidden" value="{{ $max }}" id="max1">

                                        <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 show">
                                            <div class="accordion-body">
                                                <div class="price-item">
                                                    <div data-range-slider='priceSlider'></div>
                                                    <div class="price-value">
                                                        <span
                                                            class="color-primary">{{ ($keywords['Precio'] ?? __('Precio')) . ':' }}
                                                            <span data-range-value="priceSliderValue">
                                                                {{ propertySymbol($min,$basicInfo->base_currency_symbol) }}
                                                                -
                                                                {{ propertySymbol($max,$basicInfo->base_currency_symbol) }}
                                                            </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>{{ $keywords['Reiniciar Búsqueda'] ?? __('Reiniciar Búsqueda') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </aside>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-9">
                    <div class="product-sort-area mt-4 mt-lg-0 mb-10" data-aos="fade-up">
                        <div class="row align-items-center">
                            <div class="col-6 d-lg-none">
                                <button type="button" class="btn btn-sm btn-primary radius-sm mb-20"
                                    data-bs-toggle="modal" data-bs-target="#mapModal">
                                    {{ $keywords['Ver Mapa'] ?? __('Ver Mapa') }}
                                </button>
                            </div>
                            <div class="col-6 d-xl-none">
                                <div class="text-lg-start text-end ">
                                    <button class="btn btn-sm btn-outline icon-end radius-sm mb-15" type="button"
                                        data-bs-toggle="offcanvas" data-bs-target="#widgetOffcanvas"
                                        aria-controls="widgetOffcanvas">
                                        {{ $keywords['Filtros'] ?? __('Filtros') }} <i class="fal fa-filter"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <ul class="product-sort-list text-sm-end list-unstyled mb-15">
                                    <li class="item">
                                        <div class="sort-item d-flex align-items-center">
                                            <label
                                                class="color-dark me-2 font-sm flex-auto">{{ $keywords['Ordenar por'] ?? __('Ordenar por') }}
                                                :</label>
                                            <select class="form-select form_control" name="sort"
                                                onchange="updateURL('sort='+$(this).val())">
                                                <option
                                                    {{ request()->filled('sort') && request()->input('sort') == 'new' ? 'selected' : '' }}
                                                    value="new">{{ $keywords['Más Reciente'] ?? __('Más Reciente') }}</option>
                                                <option
                                                    {{ request()->filled('sort') && request()->input('sort') == 'old' ? 'selected' : '' }}
                                                    value="old">{{ $keywords['Más Antiguo'] ?? __('Más Antiguo') }}</option>
                                                <option
                                                    {{ request()->filled('sort') && request()->input('sort') == 'low-to-high' ? 'selected' : '' }}
                                                    value="low-to-high">
                                                    {{ $keywords['Precio : de Menor a Mayor'] ?? __('Precio : de Menor a Mayor') }}
                                                </option>
                                                <option
                                                    {{ request()->filled('sort') && request()->input('sort') == 'high-to-low' ? 'selected' : '' }}
                                                    value="high-to-low">
                                                    {{ $keywords['Precio : de Mayor a Menor'] ?? __('Precio : de Mayor a Menor') }}
                                                </option>
                                            </select>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
<div class="row properties">
    @forelse ($property_contents as $property_content)
        <x-tenant.frontend.property
            :property="$property_content"
            :adminLang="$adminLang"
            :animate="false"
            class="col-lg-4 col-md-6" />
    @empty
        <div class="col-lg-12">
            <h3 class="text-center mt-5">
                {{ $keywords['No se encontraron autos'] ?? __('No se encontraron autos') }}
            </h3>
        </div>
    @endforelse

    {{ $property_contents->links() }}

    @if (!empty(showAd(3)))
        <div class="text-center mt-4">
            {!! showAd(3) !!}
        </div>
    @endif
</div>                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel">{{ $keywords['Mapa'] ?? __('Mapa') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="modal-main-map" style="height: 600px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        'use strict';
        var property_contents = @json($property_contents);
        var properties = property_contents.data;
        var imgUrl = "{{ asset('/') }}";
        const categoryUrl = "{{ route('frontend.get_categories', getParam()) }}";
    </script>
    <!-- Leaflet Map JS -->
    <script src="{{ asset('/assets/tenant-front/js/vendors/leaflet.js') }}"></script>
    <script src="{{ asset('/assets/tenant-front/js/vendors/leaflet.markercluster.js') }}"></script>
    <!-- Map JS -->
    <script src="{{ asset('/assets/tenant-front/js/map.js') }}"></script>
    <script src="{{ asset('/assets/tenant-front/js/properties.js') }}"></script>

    <!-- Dependent Brand/Model Dropdown Logic -->
    <script>
        $(document).ready(function () {
            function loadModels(brandId, selectedModelId = null) {
                $('#model_id').html('<option value=""> ' + "{{ $keywords['Todos los Modelos'] ?? __('Todos los Modelos') }}" + '</option>');
                
                if (!brandId) return;

                $.get("{{ route('frontend.get_car_models', getParam()) }}", {
                    brand_id: brandId
                }, function (models) {
                    $.each(models, function (i, model) {
                        let isSelected = (selectedModelId == model.id) ? 'selected' : '';
                        $('#model_id').append(
                            '<option value="' + model.id + '" ' + isSelected + '>' + model.name + '</option>'
                        );
                    });
                });
            }

            // Handle dropdown change event manually triggered by user selection
            $('#brand_id').on('change', function () {
                loadModels($(this).val());
            });

            // Initial verification when page first loads to restore old parameters from the URL query
            @if(request()->filled('brand_id'))
                loadModels("{{ request('brand_id') }}", "{{ request('model_id') }}");
            @endif
        });
    </script>
@endsection