@extends('layouts_ext.app')

@section('content')

    <section class="hero">

        <!-- MAPA -->
        <div class="hero-map">
            <div id="map"></div>
        </div>


        <!-- HERO DERECHO -->
        <div class="hero-right" style="background-image:url('{{ asset('img/imggg.jpg') }}')">

            <div class="hero-overlay"></div>

            <div class="hero-content">

                <h1>
                    Encuentra tu <span>hogar ideal</span>
                </h1>

                <p>
                    Compra, vende o alquila propiedades en las mejores zonas del país
                </p>

                @include('portal.components.search')

            </div>

        </div>

    </section>
    <section class="property-types">

        <div class="container">

            <h2 class="section-title">
                Descubra los <span>tipos de propiedades</span>
            </h2>
            <div class="types-grid">
                @foreach($inmuebles as $inmueble)
                <a href="{{ route('portal.detalle', $inmueble->inmu_cod) }}" onclick="event.stopPropagation();">
                    <div class="type-card">
                        <img src="{{ isset($inmueble->fotos[0]) ? asset('storage/' . $inmueble->fotos[0]->finmu_path) : asset('img/default.jpg') }}">
                        <span>{{ $inmueble->tinmu_nombre }}</span>                    
                    </div>
                </a>
                @endforeach
                <!--<div class="type-card">
                    <img src="{{ asset('img/departamento.jpg') }}">
                    <span>DEPARTAMENTO</span>
                </div>

                <div class="type-card">
                    <img src="{{ asset('img/terreno.jpeg') }}">
                    <span>TERRENO</span>
                </div>

                <div class="type-card">
                    <img src="{{ asset('img/tienda.jpeg') }}">
                    <span>TIENDA</span>
                </div>

                <div class="type-card">
                    <img src="{{ asset('img/oficina.jpg') }}">
                    <span>OFICINA</span>
                </div>

                <div class="type-card">
                    <img src="{{ asset('img/local.jpg') }}">
                    <span>LOCAL COMERCIAL</span>
                </div>

                <div class="type-card">
                    <img src="{{ asset('img/galpon.jpg') }}">
                    <span>GALPON</span>
                </div>

                <div class="type-card">
                    <img src="{{ asset('img/logooo.png') }}">
                    <span>Más</span>
                </div>-->

            </div>

        </div>

    </section>

    <section class="featured-properties">

        <div class="container">

            <h2 class="section-title">
                Explora las propiedades destacadas
            </h2>

            <div class="properties-grid">
                @foreach($inmuebles as $inmueble)
                <div class="property-card">

                    <img src="{{ isset($inmueble->fotos[0]) ? asset('storage/' . $inmueble->fotos[0]->finmu_path) : asset('img/default.jpg') }}">

                    <div class="property-info">

                        <h4>{{ $inmueble->tinmu_nombre }} En {{ $inmueble->cate_nombre }} </h4>

                        <!--<p>3 camas • 2 baños • 1235 m²</p>-->

                        <div class="price">${{ $inmueble->inmu_precio_venta }}</div>

                        <a href="{{ route('portal.detalle', $inmueble->inmu_cod) }}" 
                           class="btn btn-primary"
                           onclick="event.stopPropagation();">
                            Ver más información
                        </a>

                    </div>

                </div>
                @endforeach
                

                <!--<div class="property-card">

                    <img src="{{ asset('img/casa2.jpg') }}">

                    <div class="property-info">

                        <h4>Apartamento nuevo Shangri La</h4>

                        <p>2 camas • 1 baño • 1050 m²</p>

                        <div class="price">$1,500 / mes</div>

                    </div>

                </div>

                <div class="property-card">

                    <img src="{{ asset('img/casa3.jpg') }}">

                    <div class="property-info">

                        <h4>Casa unifamiliar tipo rancho</h4>

                        <p>3 camas • 2 baños • 1567 m²</p>

                        <div class="price">$985,000</div>

                    </div>

                </div>

                <div class="property-card">

                    <img src="{{ asset('img/casa4.jpg') }}">

                    <div class="property-info">

                        <h4>Apartamento Norte</h4>

                        <p>2 camas • 2 baños • 1257 m²</p>

                        <div class="price">$653,000</div>

                    </div>

                </div>-->

            </div>

        </div>

    </section>

@endsection
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {

    // ================================
    // ICONOS FIX
    // ================================
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
        iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
        iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
    });

    // ================================
    // MAPA
    // ================================
    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);

    // ================================
    // 🔍 BUSCADOR (GeoSearch)
    // ================================
    const provider = new window.GeoSearch.OpenStreetMapProvider();

    const searchControl = new window.GeoSearch.GeoSearchControl({
        provider: provider,
        style: 'bar',
        showMarker: true,
        autoClose: true,
        retainZoomLevel: true,   // 🔥 evita error bounds
        animateZoom: false,
        searchLabel: 'Buscar ubicación...',
    });

    map.addControl(searchControl);

    // ================================
    // 🔥 EVENTO CORREGIDO (ZOOM MANUAL)
    // ================================
    map.on('geosearch/showlocation', function(result) {

        const lat = result.location.y;
        const lng = result.location.x;

        // 🔥 ZOOM CONTROLADO (SIN ERROR)
        map.flyTo([lat, lng], 16, {
            animate: true,
            duration: 1.5
        });
    });

    // ================================
    // MARKERS DE PROPIEDADES
    // ================================
    var markers = L.markerClusterGroup();

    var propiedades = @json($inmuebles);
    const baseUrl = "{{ url('/') }}";

    propiedades.forEach(function (p) {

        if (!p.inmu_latitud || !p.inmu_longitud) return;

        var marker = L.marker([
            parseFloat(p.inmu_latitud),
            parseFloat(p.inmu_longitud)
        ]);

        marker.bindPopup(`
        <div style="
            width:260px;
            font-family:Poppins, sans-serif;
            border-radius:12px;
            overflow:hidden;
            box-shadow:0 10px 25px rgba(0,0,0,0.15);
        ">

            <div style="position:relative">
                <img src="${
                    p.imagen 
                    ? baseUrl + '/storage/' + p.imagen
                    : baseUrl + '/img/departamento.jpg'
                }"
                style="width:100%; height:150px; object-fit:cover;">

                <span style="
                    position:absolute;
                    top:10px;
                    right:10px;
                    background:#2563eb;
                    color:white;
                    padding:4px 10px;
                    font-size:12px;
                    border-radius:6px;
                ">
                    Venta
                </span>
            </div>

            <div style="padding:12px">
                <small style="color:#6b7280">
                    ${p.tinmu_nombre ?? ''}
                </small>

                <h6 style="margin:5px 0; font-weight:600;">
                    ${p.cate_nombre ?? ''}
                </h6>

                <div style="
                    font-size:18px;
                    font-weight:bold;
                    color:#111827;
                    margin-bottom:10px;
                ">
                    ${parseFloat(p.inmu_precio_venta ?? 0).toLocaleString()} BOB
                </div>

                <a href="${baseUrl}/detalle-inmueble/${p.inmu_cod}"
                    style="
                    display:block;
                    text-align:center;
                    background:#2563eb;
                    color:white;
                    padding:10px;
                    border-radius:8px;
                    text-decoration:none;
                    font-weight:600;
                ">
                    Ver Detalle
                </a>
            </div>
        </div>
        `);

        markers.addLayer(marker);
    });

    map.addLayer(markers);

});
</script>
@endpush