@extends('layouts_ext.app')

@section('content')

    <div class="container-fluid">
        <form method="GET" action="{{ route('propiedades.buscar') }}">
        <!-- FILTROS -->
            <div class="filters-top">

                <!-- Tipo -->
                <select name="tinmu_cod" class="filter-input">
                    <option value="0">Tipo</option>
                    @foreach($tipos as $tipo)
                        <option value="{{ $tipo->tinmu_cod }}"
                            {{ request('tinmu_cod') == $tipo->tinmu_cod ? 'selected' : '' }}>
                            {{ $tipo->tinmu_nombre }}
                        </option>
                    @endforeach
                </select>

                <!-- Zona -->
                <select name="zona_cod" class="filter-input">
                    <option value="0">Zonas</option>
                    @foreach($zonas as $zona)
                        <option value="{{ $zona->zona_cod }}"
                            {{ request('zona_cod') == $zona->zona_cod ? 'selected' : '' }}>
                            {{ $zona->zona_nombre }}
                        </option>
                    @endforeach
                </select>
                <input 
                    type="text" 
                    name="avanzada" 
                    class="filter-input"
                    placeholder="¿Qué buscas?"
                    value="{{ request('avanzada') }}"
                >

                <button type="submit" class="btn-filter">Buscar</button>

            </div>
        </form>
        <!-- LAYOUT -->
        
            <div class="row">                
            
                <!-- LISTADO -->
                <div class="col-sm-6">
                    <div class="row">
                    @foreach($inmuebles as $inmueble)
                        <div class="col-sm-6">
                            <div class="card"
                                onclick="focusMap({{ $inmueble->inmu_latitud }}, {{ $inmueble->inmu_longitud }})">

                                <div class="card-img">
                                    <img src="{{ $inmueble->imagen ? asset('storage/' . $inmueble->imagen) : asset('img/default.jpg') }}">
                                    <span class="badge-tipo">{{ $inmueble->cate_nombre }}</span>
                                </div>

                                <div class="card-body">

                                    <div class="price">
                                        {{ number_format($inmueble->inmu_precio_venta, 2) }} BOB
                                    </div>

                                    <div class="location">
                                        {{ $inmueble->zona_nombre }}
                                    </div>

                                    <div class="features">
                                        <span>🏠 {{ $inmueble->inmu_superficie_area }} m²</span>
                                        <span>🛏 {{ $inmueble->inmu_cuartos }}</span>
                                        <span>🚗 {{ $inmueble->inmu_garages }}</span>
                                    </div>

                                    <div style="margin-top:10px;">
                                        <a href="{{ route('portal.detalle', $inmueble->inmu_cod) }}" 
                                           class="btn btn-primary"
                                           onclick="event.stopPropagation();">
                                            Ver más información
                                        </a>
                                    </div>
                                    <!--<div class="agent">
                                        <img src="{{ asset('img/user.png') }}">
                                        <div>
                                            <small>Agente</small><br>
                                            <strong>Nombre agente</strong>
                                        </div>
                                    </div>-->

                                </div>

                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>
                <div class="col-sm-6">
                    <!-- MAPA -->
                    <div class="mapa">
                        <div id="map"></div>
                    </div>
                </div>
            </div>
        

    </div>

@endsection

@push('scripts')

    <script>

        document.addEventListener("DOMContentLoaded", function () {

            // ==========================
            // MAPA (UNA SOLA VEZ)
            // ==========================
            var map = L.map('map').setView([-16.5, -68.15], 6);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: 'Alarcón Bienes Raíces'
            }).addTo(map);

            // ==========================
            // CLUSTER
            // ==========================
            var markers = L.markerClusterGroup();

            // ==========================
            // MARCADORES DESDE LARAVEL
            // ==========================
            @foreach($inmuebles as $inmueble)

                var marker = L.marker([
                    {{ $inmueble->inmu_latitud }},
                    {{ $inmueble->inmu_longitud }}
                ]);

                marker.bindPopup(`
                    <div style="width:200px">
                        <b>{{ $inmueble->cate_nombre }}</b><br>
                        {{ number_format($inmueble->inmu_precio_venta, 2) }} BOB
                    </div>
                `);

                markers.addLayer(marker);

            @endforeach

            map.addLayer(markers);

            // ==========================
            // CLICK EN TARJETA → MAPA
            // ==========================
            window.focusMap = function (lat, lng) {
                map.setView([lat, lng], 16);
            };

        });

    </script>

@endpush