{{-- ===================== Collapsible Filter Panel ===================== --}}
<style>
    #filterPanel .filter-panel-inner {
        background-color: #fafbfe;
        border-top: 1px solid #edf2f9;
        padding: 28px 32px 24px;
    }
    #filterPanel .filter-group {
        margin-bottom: 20px;
    }
    #filterPanel .filter-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #718096;
        text-transform: uppercase;
        margin-bottom: 8px;
    }
    #filterPanel .form-control {
        height: 42px;
        border-color: #e2e8f0;
        border-radius: 8px;
        font-size: 0.875rem;
        color: #4a5568;
        padding: 0 14px;
    }
    #filterPanel .form-control:focus {
        border-color: #0061f2;
        box-shadow: 0 0 0 3px rgba(0, 97, 242, 0.1);
    }
    #filterPanel .filter-range-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #filterPanel .filter-range-group .form-control {
        width: 100%;
    }
    #filterPanel .filter-range-divider {
        color: #cbd5e0;
        font-size: 0.8rem;
        flex-shrink: 0;
        padding-top: 22px;
    }
    #filterPanel .filter-section-label {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: #a0aec0;
        margin: 4px 0 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #edf2f9;
    }
    #filterPanel .filter-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 8px;
        padding-top: 20px;
        border-top: 1px solid #edf2f9;
    }
    @media (max-width: 767px) {
        #filterPanel .filter-panel-inner {
            padding: 24px 20px;
        }
    }
</style>

<div class="collapse" id="filterPanel">
    <div class="filter-panel-inner">
        <form action="{{ route('user.property_management.properties') }}" method="get" id="carFilterForm">
            {{-- preserve search title if present --}}
            <input type="hidden" name="title" value="{{ request()->input('title') }}">

            {{-- Basics --}}
            <div class="filter-section-label">{{ __('Estado y publicación') }}</div>
            <div class="row gx-4 gy-0">
                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Estado') }}</label>
                    <select name="status" class="form-control">
                        <option value="">{{ __('Todos') }}</option>
                        <option value="1" {{ (string) request('status') === '1' ? 'selected' : '' }}>{{ __('Activo') }}</option>
                        <option value="0" {{ (string) request('status') === '0' ? 'selected' : '' }}>{{ __('Inactivo') }}</option>
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('MercadoLibre') }}</label>
                    <select name="meli_status" class="form-control">
                        <option value="">{{ __('Todos') }}</option>
                        <option value="published" {{ request('meli_status') == 'published' ? 'selected' : '' }}>{{ __('Publicado') }}</option>
                        <option value="payment_required" {{ request('meli_status') == 'payment_required' ? 'selected' : '' }}>{{ __('Pendiente Pago') }}</option>
                        <option value="not_published" {{ request('meli_status') == 'not_published' ? 'selected' : '' }}>{{ __('No publicado') }}</option>
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Precio') }}</label>
                    <div class="filter-range-group">
                        <input type="number" name="price_min" value="{{ request('price_min') }}" class="form-control" placeholder="{{ __('Mín.') }}">
                        <span class="filter-range-divider">—</span>
                        <input type="number" name="price_max" value="{{ request('price_max') }}" class="form-control" placeholder="{{ __('Máx.') }}">
                    </div>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Año') }}</label>
                    <div class="filter-range-group">
                        <input type="number" name="year_min" value="{{ request('year_min') }}" class="form-control" placeholder="{{ __('Desde') }}">
                        <span class="filter-range-divider">—</span>
                        <input type="number" name="year_max" value="{{ request('year_max') }}" class="form-control" placeholder="{{ __('Hasta') }}">
                    </div>
                </div>
            </div>

            {{-- Vehicle --}}
            <div class="filter-section-label">{{ __('Vehículo') }}</div>
            <div class="row gx-4 gy-0">
                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Marca') }}</label>
                    <select name="brand_id" id="filterBrand" class="form-control">
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" {{ (string) request('brand_id') === (string) $brand->id ? 'selected' : '' }}>
                                {{ $brand->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Modelo') }}</label>
                    <select name="model_id" id="filterModel" class="form-control" {{ request('brand_id') ? '' : 'disabled' }}>
                        <option value="">{{ __('Todos') }}</option>
                        @foreach($selectedModels as $model)
                            <option value="{{ $model->id }}" {{ (string) request('model_id') === (string) $model->id ? 'selected' : '' }}>
                                {{ $model->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Versión') }}</label>
                    <select name="version_id" id="filterVersion" class="form-control" {{ request('model_id') ? '' : 'disabled' }}>
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($selectedVersions as $version)
                            <option value="{{ $version->id }}" {{ (string) request('version_id') === (string) $version->id ? 'selected' : '' }}>
                                {{ $version->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Transmisión') }}</label>
                    <select name="transmision" class="form-control">
                        <option value="">{{ __('Todas') }}</option>
                        <option value="Manual" {{ request('transmision') == 'Manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                        <option value="Automática" {{ request('transmision') == 'Automática' ? 'selected' : '' }}>{{ __('Automática') }}</option>
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Combustible') }}</label>
                    <select name="fuel_type" class="form-control">
                        <option value="">{{ __('Todos') }}</option>
                        <option value="Electrico" {{ request('fuel_type') == 'Electrico' ? 'selected' : '' }}>{{ __('Eléctrico') }}</option>
                        <option value="Diesel" {{ request('fuel_type') == 'Diesel' ? 'selected' : '' }}>{{ __('Diesel') }}</option>
                        <option value="Nafta" {{ request('fuel_type') == 'Nafta' ? 'selected' : '' }}>{{ __('Nafta') }}</option>
                        <option value="Hibrido" {{ request('fuel_type') == 'Hibrido' ? 'selected' : '' }}>{{ __('Híbrido') }}</option>
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Motor') }}</label>
                    <input type="text" name="engine" value="{{ request('engine') }}" class="form-control" placeholder="{{ __('Ej: 1.5') }}">
                </div>
            </div>

            {{-- Location --}}
            <div class="filter-section-label">{{ __('Ubicación') }}</div>
            <div class="row gx-4 gy-0">
                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Departamento') }}</label>
                    <select name="state_id" id="filterState" class="form-control">
                        <option value="">{{ __('Todos') }}</option>
                        @foreach($states as $state)
                            <option value="{{ $state->id }}" {{ (string) request('state_id') === (string) $state->id ? 'selected' : '' }}>
                                {{ $state->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 filter-group">
                    <label class="filter-label">{{ __('Ciudad') }}</label>
                    <select name="city_id" id="filterCity" class="form-control" {{ request('state_id') ? '' : 'disabled' }}>
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($selectedCities as $city)
                            <option value="{{ $city->id }}" {{ (string) request('city_id') === (string) $city->id ? 'selected' : '' }}>
                                {{ $city->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="filter-footer">
                <a href="{{ route('user.property_management.properties') }}" class="btn btn-white border ref-action-btn text-secondary mr-2" style="background-color: #fff; border-color: #e2e8f0;">
                    {{ __('Limpiar') }}
                </a>
                <button type="submit" class="btn btn-primary ref-action-btn" style="background-color: #0061f2; border-color: #0061f2;">
                    {{ __('Aplicar filtros') }}
                </button>
            </div>
        </form>
    </div>
</div>
{{-- ===================== End Collapsible Filter Panel ===================== --}}
<script>
    (function () {
        const brandSelect = document.getElementById('filterBrand');
        const modelSelect = document.getElementById('filterModel');
        const versionSelect = document.getElementById('filterVersion');
        const stateSelect = document.getElementById('filterState');
        const citySelect = document.getElementById('filterCity');

        const getModelsUrl = "{{ route('user.property_management.get_models') }}";
        const getVersionsUrl = "{{ route('user.property_management.get_versions') }}";
        // state -> city lookup (mirrors the add-car page's "cityUrl", which is also get_cities)
        const getCitiesUrl = "{{ route('user.property_management.get_cities') }}";

        function resetSelect(select, placeholder) {
            select.innerHTML = '<option value="">' + placeholder + '</option>';
            select.disabled = true;
        }

        function populateSelect(select, items, placeholder, selectedId) {
            select.innerHTML = '<option value="">' + placeholder + '</option>';
            items.forEach(function (item) {
                const opt = document.createElement('option');
                opt.value = item.id;
                opt.textContent = item.name;
                if (selectedId && String(selectedId) === String(item.id)) {
                    opt.selected = true;
                }
                select.appendChild(opt);
            });
            select.disabled = items.length === 0;
        }

        // Normalizes whatever shape the endpoint returns: {models:[...]}, {data:[...]}, or a bare array
        function extractList(payload, key) {
            if (Array.isArray(payload)) {
                return payload;
            }
            if (payload && Array.isArray(payload[key])) {
                return payload[key];
            }
            if (payload && Array.isArray(payload.data)) {
                return payload.data;
            }
            return [];
        }

        if (brandSelect) {
            brandSelect.addEventListener('change', function () {
                resetSelect(modelSelect, '{{ __('Todos') }}');
                resetSelect(versionSelect, '{{ __('Todas') }}');

                if (!this.value) {
                    return;
                }

                fetch(getModelsUrl + '?brand_id=' + encodeURIComponent(this.value), {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function (res) { return res.json(); })
                    .then(function (data) {
                        populateSelect(modelSelect, extractList(data, 'models'), '{{ __('Todos') }}');
                    })
                    .catch(function (err) { console.error('Error loading models:', err); });
            });
        }

        if (modelSelect) {
            modelSelect.addEventListener('change', function () {
                resetSelect(versionSelect, '{{ __('Todas') }}');

                if (!this.value) {
                    return;
                }

                fetch(getVersionsUrl + '?model_id=' + encodeURIComponent(this.value), {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function (res) { return res.json(); })
                    .then(function (data) {
                        populateSelect(versionSelect, extractList(data, 'versions'), '{{ __('Todas') }}');
                    })
                    .catch(function (err) { console.error('Error loading versions:', err); });
            });
        }

        if (stateSelect) {
            stateSelect.addEventListener('change', function () {
                resetSelect(citySelect, '{{ __('Todas') }}');

                if (!this.value) {
                    return;
                }

                fetch(getCitiesUrl + '?state_id=' + encodeURIComponent(this.value), {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function (res) { return res.json(); })
                    .then(function (data) {
                        populateSelect(citySelect, extractList(data, 'cities'), '{{ __('Todas') }}');
                    })
                    .catch(function (err) { console.error('Error loading cities:', err); });
            });
        }

        // Auto-expand the filter panel if any filter is already applied (e.g. after a redirect)
        const activeFilters = [
            '{{ request('status') }}', '{{ request('price_min') }}', '{{ request('price_max') }}',
            '{{ request('year_min') }}', '{{ request('year_max') }}', '{{ request('brand_id') }}',
            '{{ request('model_id') }}', '{{ request('version_id') }}', '{{ request('engine') }}',
            '{{ request('fuel_type') }}', '{{ request('transmision') }}', '{{ request('state_id') }}',
            '{{ request('city_id') }}', '{{ request('meli_status') }}'
        ];
        if (activeFilters.some(function (v) { return v !== ''; })) {
            const panel = document.getElementById('filterPanel');
            if (panel && window.jQuery) {
                jQuery(panel).addClass('show');
            } else if (panel) {
                panel.classList.add('show');
            }
        }
    })();
</script>