@props([
    'action' => null,
    'propertyTypes' => null,
    'operationTypes' => null,
    'locationId' => null,
    'location' => null,
    'showActiveFilters' => true
])

<aside class="sidebar" data-plugin-sticky
       data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">

        <div class="filter-sidebar" style="background: var(--light); border-radius: var(--border-radius3x); padding: var(--spacing-lg); box-shadow: var(--shadow-modern);">
        <form action="{{ $action ?? route('filtrar_propiedades') }}" method="POST" id="filterForm">
            @csrf

            {{-- Filtros Activos --}}
            @if($showActiveFilters && ($propertyTypes || $operationTypes || $locationId))
                <div class="card border-0 shadow-modern mb-4" style="border-radius: var(--border-radius2x);">
                    <div class="card-body p-4">
                        <h5 class="font-weight-semibold text-color-dark mb-3">
                            <i class="fas fa-filter text-primary me-2"></i>Filtros Activos
                        </h5>
                        <div class="d-flex flex-wrap gap-2">
                            @if($propertyTypes)
                                <span class="badge text-white px-3 py-2"
                                      style="background: var(--primary); border-radius: var(--border-radius2x);">
                                    @switch($propertyTypes)
                                        @case(1) Terrenos @break
                                        @case(2) Departamentos @break
                                        @case(3) Casas @break
                                        @case(4) Quintas @break
                                        @case(5) Oficinas @break
                                        @case(7) Locales @break
                                        @case(9) Campos @break
                                        @case(10) Cocheras @break
                                    @endswitch
                                </span>
                            @endif
                            @if($operationTypes)
                                <span class="badge text-white px-3 py-2"
                                      style="background: var(--mtn-success); border-radius: var(--border-radius2x);">
                                    @switch($operationTypes)
                                        @case(1) Venta @break
                                        @case(2) Alquiler @break
                                        @case(3) Alquiler Temporal @break
                                    @endswitch
                                </span>
                            @endif
                            @if($locationId)
                                <span class="badge text-dark px-3 py-2"
                                      style="background: var(--mtn-warning); border-radius: var(--border-radius2x);">
                                    @switch($locationId)
                                        @case(49044) San Miguel de Tucumán @break
                                        @case(49037) Capital @break
                                        @case(49166) Parque Guillermina @break
                                        @case(51206) Yerba Buena @break
                                        @case(51004) Los Nogales @break
                                        @case(51006) Tafí Viejo @break
                                        @default {{ $location }} @break
                                    @endswitch
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            {{-- Ubicación --}}
            <div class="card border-0 shadow-modern mb-4" style="border-radius: var(--border-radius2x);">
                <div class="card-body p-4">
                    <h5 class="font-weight-semibold text-color-dark mb-3">
                        <i class="fas fa-map-marker-alt text-primary me-2"></i>
                        Ubicación
                    </h5>
                    <select name="location_id" class="form-control form-control-modern"
                            style="border-radius: var(--border-radius2x); border: 2px solid #e9ecef; transition: var(--transition-default);">
                        <option value="">Todas las ubicaciones</option>
                        <option value="49044" @if($locationId == 49044) selected @endif>San Miguel de Tucumán</option>
                        <option value="49037" @if($locationId == 49037) selected @endif>Capital</option>
                        <option value="49166" @if($locationId == 49166) selected @endif>Parque Guillermina</option>
                        <option value="51206" @if($locationId == 51206) selected @endif>Yerba Buena</option>
                        <option value="51004" @if($locationId == 51004) selected @endif>Los Nogales</option>
                        <option value="51006" @if($locationId == 51006) selected @endif>Tafí Viejo</option>
                    </select>
                </div>
            </div>

            {{-- Tipo de Propiedad --}}
            <div class="card border-0 shadow-modern mb-4" style="border-radius: var(--border-radius2x);">
                <div class="card-body p-4">
                    <h5 class="font-weight-semibold text-color-dark mb-3">
                        <i class="fas fa-home text-primary me-2"></i>
                        Tipo de Propiedad
                    </h5>
                    <select name='property_types' class="form-control form-control-modern"
                            style="border-radius: var(--border-radius2x); border: 2px solid #e9ecef; transition: var(--transition-default);">
                        <option value="" @if(!$propertyTypes) selected @endif>Todos los tipos</option>
                        <option value="3" @if($propertyTypes == 3) selected @endif>Casas</option>
                        <option value="2" @if($propertyTypes == 2) selected @endif>Departamentos</option>
                        <option value="1" @if($propertyTypes == 1) selected @endif>Terrenos</option>
                        <option value="5" @if($propertyTypes == 5) selected @endif>Oficinas</option>
                        <option value="7" @if($propertyTypes == 7) selected @endif>Locales</option>
                        <option value="4" @if($propertyTypes == 4) selected @endif>Quintas</option>
                        <option value="9" @if($propertyTypes == 9) selected @endif>Campos</option>
                        <option value="10" @if($propertyTypes == 10) selected @endif>Cocheras</option>
                    </select>
                </div>
            </div>

            {{-- Tipo de Operación --}}
            <div class="card border-0 shadow-modern mb-4" style="border-radius: var(--border-radius2x);">
                <div class="card-body p-4">
                    <h5 class="font-weight-semibold text-color-dark mb-3">
                        <i class="fas fa-handshake text-primary me-2"></i>
                        Tipo de Operación
                    </h5>
                    <select name='operation_types' class="form-control form-control-modern"
                            style="border-radius: var(--border-radius2x); border: 2px solid #e9ecef; transition: var(--transition-default);">
                        <option value="" @if(!$operationTypes) selected @endif>Todas las operaciones</option>
                        <option value="1" @if($operationTypes == 1) selected @endif>Venta</option>
                        <option value="2" @if($operationTypes == 2) selected @endif>Alquiler</option>
                        <option value="3" @if($operationTypes == 3) selected @endif>Alquiler Temporal</option>
                    </select>
                </div>
            </div>

            {{-- Rango de Precios --}}
            {{-- <div class="card border-0 shadow-modern mb-4" style="border-radius: var(--border-radius2x);">
                <div class="card-body p-4">
                    <h5 class="font-weight-semibold text-color-dark mb-3">
                        <i class="fas fa-dollar-sign text-primary me-2"></i>
                        Rango de Precios
                    </h5>
                    <div class="row">
                        <div class="col-6">
                            <input type="number" name="price_from" class="form-control form-control-modern"
                                   placeholder="Desde" value="{{ request('price_from') }}"
                                   style="border-radius: var(--border-radius2x); border: 2px solid #e9ecef; transition: var(--transition-default);">
                        </div>
                        <div class="col-6">
                            <input type="number" name="price_to" class="form-control form-control-modern"
                                   placeholder="Hasta" value="{{ request('price_to') }}"
                                   style="border-radius: var(--border-radius2x); border: 2px solid #e9ecef; transition: var(--transition-default);">
                        </div>
                    </div>
                </div>
            </div> --}}

            {{-- Moneda --}}
            {{-- <div class="card border-0 shadow-modern mb-4" style="border-radius: var(--border-radius2x);">
                <div class="card-body p-4">
                    <h5 class="font-weight-semibold text-color-dark mb-3">
                        <i class="fas fa-coins text-primary me-2"></i>
                        Moneda
                    </h5>
                    <select name='currencies' class="form-control form-control-modern"
                            style="border-radius: var(--border-radius2x); border: 2px solid #e9ecef; transition: var(--transition-default);">
                        <option value="" @if(!request('currencies')) selected @endif>Todas las monedas</option>
                        <option value="USD" @if(request('currencies') == 'USD') selected @endif>USD - Dólares</option>
                        <option value="ARS" @if(request('currencies') == 'ARS') selected @endif>ARS - Pesos</option>
                    </select>
                </div>
            </div> --}}

                        {{-- Botones de Acción --}}
            <div class="text-center">
                <button type="submit" class="btn btn-primary btn-lg w-100 mb-3"
                        style="background: linear-gradient(135deg, var(--primary), var(--secondary));
                               border: none;
                               border-radius: var(--border-radius2x);
                               transition: var(--transition-default);
                               box-shadow: var(--shadow-modern);">
                    <i class="fas fa-search me-2"></i>Buscar Propiedades
                </button>
                <a href="{{ route('properties') }}" class="btn btn-outline-secondary w-100"
                   style="border-radius: var(--border-radius2x); transition: var(--transition-default);">
                    <i class="fas fa-undo me-2"></i>Limpiar Filtros
                </a>
            </div>
        </form>
    </div>
</aside>