@extends('layouts_ext.app')

@section('content')

    <style>
        .detalle-container {
            font-family: 'Poppins', sans-serif;
        }

        /* TITULO */
        .titulo-detalle {
            font-weight: 700;
        }

        .linea {
            width: 80px;
            height: 4px;
            background: #16a34a;
            margin: 10px auto;
            border-radius: 5px;
        }

        /* GALERIA */
        .img-main {
            width: 100%;
            height: 420px;
            object-fit: cover;
            border-radius: 12px;
        }

        .img-thumb {
            width: 100%;
            height: 90px;
            object-fit: cover;
            margin-bottom: 10px;
            cursor: pointer;
            border-radius: 8px;
            opacity: 0.7;
            transition: 0.3s;
        }

        .img-thumb:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        .img-thumb.active {
            border: 3px solid #16a34a;
            opacity: 1;
        }

        /* INFO */
        .precio {
            color: #16a34a;
            font-weight: bold;
        }

        .ubicacion {
            color: #6b7280;
        }

        /* CARACTERISTICAS */
        .grid-caracteristicas {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        /* MAPA */
        #mapDetalle {
            height: 400px;
            border-radius: 10px;
        }

        /* CARD */
        .card-custom {
            border: none;
            border-radius: 12px;
        }

        /* CONTACTO */
        .card-contacto {
            position: sticky;
            top: 100px;
        }

        .whatsapp-card {
            overflow: hidden;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #eef2f7;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        }

        .whatsapp-card .card-body {
            padding: 28px;
        }

        .whatsapp-icon {
            width: 54px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            color: #fff;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            border-radius: 16px;
            box-shadow: 0 12px 24px rgba(34, 197, 94, 0.25);
            font-size: 30px;
        }

        .whatsapp-title {
            margin-bottom: 8px;
            color: #0f172a;
            font-size: 22px;
            font-weight: 700;
        }

        .whatsapp-text {
            margin-bottom: 22px;
            color: #64748b;
            font-size: 14px;
            line-height: 1.6;
        }

        .whatsapp-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 48px;
            color: #fff;
            background: linear-gradient(135deg, #25d366, #128c7e);
            border-radius: 12px;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 12px 24px rgba(18, 140, 126, 0.24);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .whatsapp-button:hover {
            color: #fff;
            text-decoration: none;
            transform: translateY(-2px);
            box-shadow: 0 16px 30px rgba(18, 140, 126, 0.3);
        }

        .whatsapp-note {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            color: #64748b;
            font-size: 12px;
        }
    </style>


    <div class="container mt-4 detalle-container">

        <!-- ===================== -->
        <!-- TITULO -->
        <!-- ===================== -->
        <div class="text-center mb-4">
            <h1 class="titulo-detalle">Detalle de Inmueble</h1>
            <div class="linea"></div>
        </div>

        <div class="row">

            <!-- ===================== -->
            <!-- IZQUIERDA -->
            <!-- ===================== -->
            <div class="col-md-8">

                <!-- GALERIA -->
                <div class="card card-custom shadow-sm mb-4">
                    <div class="card-body">

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

                        <!-- MINIATURAS -->
                        <div class="row mt-3">
                            @foreach($inmueble->fotos as $foto)
                                <div class="col-3">
                                    <img src="{{ asset('storage/' . $foto->finmu_path) }}" onclick="changeImage(this)"
                                        class="img-thumb">
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>

                <!-- INFO -->
                <div class="card card-custom shadow-sm mb-4">
                    <div class="card-body">

                        <h3>{{ $inmueble->inmu_descripcion }}</h3>

                        <p class="ubicacion">
                            📍 {{ $inmueble->zona_nombre }} - {{ $inmueble->inmu_calle }}
                        </p>

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

                    </div>
                </div>


                <div class="mb-4">

                @foreach($itemsOrdenados->whereNull('titem_padre') as $padre)

                    <div class="card card-custom shadow-sm mb-3">
                        <div class="card-body">

                            <!-- TITULO PADRE -->
                            <h5 class="mb-3">
                                {!! $padre->titem_icono !!}
                                {{ $padre->titem_nombre }}
                            </h5>

                            <!-- HIJOS -->
                            <div class="grid-caracteristicas">

                                @foreach($itemsOrdenados->where('titem_padre', $padre->titem_cod) as $hijo)

                                    <div class="p-2 border rounded">

                                        <div>
                                            {!! $hijo->titem_icono !!}
                                            <strong>{{ $hijo->titem_nombre }}</strong>
                                        </div>

                                        <div class="mt-1 text-muted">

                                            @if($hijo->titem_entero)
                                                {{ $hijo->iitem_entero }}

                                            @elseif($hijo->titem_decimal)
                                                {{ $hijo->iitem_decimal }}

                                            @elseif($hijo->titem_texto)
                                                {{ $hijo->iitem_texto }}

                                            @elseif($hijo->titem_textolargo)
                                                {{ $hijo->iitem_textolargo }}

                                            @elseif($hijo->titem_check)
                                                {!! $hijo->iitem_check ? '✅ Sí' : '❌ No' !!}
                                            @endif

                                        </div>

                                    </div>

                                @endforeach

                            </div>

                        </div>
                    </div>

                @endforeach

            </div>
                                
                

                <!-- MAPA -->
                <div class="card card-custom shadow-sm mb-4">
                    <div class="card-body">

                        <h4>Ubicación</h4>
                        <div id="mapDetalle"></div>

                    </div>
                </div>

            </div>

            <!-- ===================== -->
            <!-- DERECHA -->
            <!-- ===================== -->
            <div class="col-md-4">
                @php
                    $whatsappNumber = preg_replace('/\D+/', '', config('services.admin.whatsapp'));
                    $whatsappMessage = rawurlencode(
                        'Hola, quiero informacion sobre el inmueble: '
                        . $inmueble->inmu_descripcion
                        . ' - Precio: '
                        . number_format($inmueble->inmu_precio_venta, 2)
                        . ' BOB'
                    );
                @endphp

                <div class="card card-custom card-contacto whatsapp-card">
                    <div class="card-body">
                        <div class="whatsapp-icon">
                            <i class="fa-brands fa-whatsapp"></i>
                        </div>
                        <h5 class="whatsapp-title">Habla con un asesor</h5>
                        <p class="whatsapp-text">
                            Contacta al administrador por WhatsApp para resolver dudas, coordinar una visita o pedir mas informacion del inmueble.
                        </p>
                        <a
                            href="https://wa.me/{{ $whatsappNumber }}?text={{ $whatsappMessage }}"
                            class="whatsapp-button"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <i class="fa-brands fa-whatsapp"></i>
                            Contactar por WhatsApp
                        </a>
                        <div class="whatsapp-note">
                            <i class="fa-solid fa-clock"></i>
                            <span>Respuesta directa con el administrador.</span>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>

@endsection


@push('scripts')

    <script>

        // ==========================
        // GALERIA CON ACTIVO
        // ==========================
        function changeImage(img) {
            document.getElementById('mainImage').src = img.src;

            document.querySelectorAll('.img-thumb').forEach(el => el.classList.remove('active'));
            img.classList.add('active');
        }

        // ==========================
        // MAPA
        // ==========================
        document.addEventListener("DOMContentLoaded", function () {

            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',
            });
            
            var lat = {{ $inmueble->inmu_latitud ?? -16.5 }};
            var lng = {{ $inmueble->inmu_longitud ?? -68.15 }};

            var map = L.map('mapDetalle').setView([lat, lng], 15);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

            L.marker([lat, lng]).addTo(map)
                .bindPopup("Ubicación del inmueble")
                .openPopup();

        });

    </script>

@endpush