@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">

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

                <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">

                <div class="property-card">

                    <img src="{{ asset('img/casa1.jpeg') }}">

                    <div class="property-info">

                        <h4>Casa En Venta </h4>

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

                        <div class="price">$150.000</div>

                    </div>

                </div>

                <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 () {

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

    var markers = L.markerClusterGroup();

    // ================================
    // 🔥 DATOS DESDE LARAVEL
    // ================================
    const inmuebles = @json($inmuebles);

    // ================================
    // RECORRER INMUEBLES
    // ================================
    inmuebles.forEach(function (inmueble) {

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

        let lat = parseFloat(inmueble.inmu_latitud);
        let lng = parseFloat(inmueble.inmu_longitud);

        // Imagen
        let imagen = inmueble.imagen
            ? '/storage/inmuebles/' + inmueble.imagen
            : '/img/default.jpg';

        let marker = L.marker([lat, lng]);

        // ================================
        // 🔥 POPUP PROFESIONAL
        // ================================
        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);
        ">

            <!-- IMAGEN -->
            <div style="position:relative">

                <img src="${imagen}"
                     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>

            <!-- CONTENIDO -->
            <div style="padding:12px">

                <small style="color:#6b7280">
                    ${inmueble.tinmu_nombre ?? ''}
                </small>

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

                <p style="font-size:13px; color:#6b7280; margin-bottom:5px">
                    ${inmueble.inmu_descripcion ?? ''}
                </p>

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

                <a href="/detalle-inmueble/${inmueble.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);

    });

    // ================================
    // AGREGAR AL MAPA
    // ================================
    map.addLayer(markers);

    // ================================
    // 🔥 AUTO ZOOM (PRO)
    // ================================
    if (markers.getLayers().length > 0) {
        map.fitBounds(markers.getBounds());
    }

});

</script>

@endpush