@extends('layout.front.master')

@section('title', $data['publication_title'] . ' | Inmobiliaria Miguel & Terán Nougués')
@section('description', strip_tags(\Illuminate\Support\Str::limit($data['description'], 160)))

{{-- Open Graph Meta Tags --}}
@section('og_title', $data['publication_title'] . ' | Inmobiliaria Miguel & Terán Nougués')
@section('og_description', strip_tags(\Illuminate\Support\Str::limit($data['description'], 200)))
@if(isset($data['photos']) && count($data['photos']) > 0)
    @section('og_image', $data['photos'][0]['image'])
@else
    @section('og_image', asset('cd-project/img/logos/logo.png'))
@endif
@section('og_url', url()->current())
@section('og_type', 'article')

{{-- Imágenes adicionales para Open Graph --}}
@if(isset($data['photos']) && count($data['photos']) > 0)
    {{-- Si hay fotos de la propiedad, agregar el logo como imagen adicional --}}
    @section('og_additional_images')
        <meta property="og:image" content="{{ asset('cd-project/img/logos/logo.png') }}" />
        @foreach($data['photos'] as $index => $photo)
            @if($index < 4) {{-- Hasta 4 fotos adicionales (máximo 5 total) --}}
                <meta property="og:image" content="{{ $photo['image'] }}" />
            @endif
        @endforeach
    @endsection
@else
    {{-- Si no hay fotos, solo mostrar el logo --}}
    @section('og_additional_images')
        {{-- No agregar imágenes adicionales, solo el logo como principal --}}
    @endsection
@endif

{{-- Estilos para las notificaciones --}}
<style>
.notification {
    position: relative;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideInDown 0.3s ease-out;
    z-index: 1000;
}

.notification-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border-left: 4px solid #155724;
}

.notification-error {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    color: white;
    border-left: 4px solid #721c24;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-content i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.notification-content span {
    flex: 1;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.notification-close:hover {
    background-color: rgba(255,255,255,0.2);
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.notification.removing {
    animation: slideOutUp 0.3s ease-in forwards;
}
</style>

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', $data['publication_title'] . ' | Inmobiliaria MTN')
@section('twitter_description', strip_tags(\Illuminate\Support\Str::limit($data['description'], 200)))
@if(isset($data['photos']) && count($data['photos']) > 0)
    @section('twitter_image', $data['photos'][0]['image'])
@else
    @section('twitter_image', asset('cd-project/img/logos/logo.png'))
@endif

@section('content')

<div role="main" class="main">

    {{-- Property Header usando Porto page-header-modern --}}
    <section class="page-header page-header-modern bg-color-primary border-0 m-0 position-relative overflow-hidden">
        <!-- SVG Background Pattern -->
        <div class="position-absolute top-0 start-0 w-100 h-100 opacity-1">
            <svg viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0L1920 0L1920 800C1920 800 1500 1000 960 800C420 600 0 800 0 800L0 0Z" fill="url(#gradient)" fill-opacity="0.1"/>
                <defs>
                    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:var(--primary);stop-opacity:1" />
                        <stop offset="100%" style="stop-color:var(--primary-300);stop-opacity:0.8" />
                    </linearGradient>
                </defs>
            </svg>
        </div>

        <div class="container container-xl-custom position-relative z-index-2">
            <div class="row text-center text-md-start py-5">
                <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                    {{-- Property Status Badge --}}
                    <div class="mb-3">
                        <span class="badge property-operation-badge text-white px-3 py-2 text-3 font-weight-bold text-uppercase
                            @if(isset($data['operations'][0]['operation_type']))
                                @if($data['operations'][0]['operation_type'] == 1) operation-venta
                                @elseif($data['operations'][0]['operation_type'] == 2) operation-alquiler
                                @elseif($data['operations'][0]['operation_type'] == 3) operation-temporario
                                @endif
                            @endif">
                            @if(isset($data['operations'][0]['operation_type']))
                                @if($data['operations'][0]['operation_type'] == 1)
                                    <i class="fas fa-tag me-2"></i>En Venta
                                @elseif($data['operations'][0]['operation_type'] == 2)
                                    <i class="fas fa-key me-2"></i>En Alquiler
                                @elseif($data['operations'][0]['operation_type'] == 3)
                                    <i class="fas fa-calendar me-2"></i>Alquiler Temporal
                                @endif
                            @endif
                        </span>

                        {{-- Property ID Badge --}}
                        <!-- <span class="badge bg-dark text-light px-3 py-2 text-3 ms-2">
                            <i class="fas fa-hashtag me-2"></i>ID: {{ $data['id'] }}
                        </span> -->
                    </div>

                    <h1 class="font-weight-bold text-color-light text-9 mb-3 line-height-2 property-title">
                        {{ $data['publication_title'] }}
                    </h1>

                    <div class="row align-items-center mb-3">
                        <div class="col-auto">
                            <p class="text-color-light opacity-8 mb-0 text-4">
                                <i class="fas fa-map-marker-alt me-2 text-warning"></i>
                                {{ ucwords($data['address'] ?? $data['real_address']) }}
                            </p>
                        </div>
                        @if(isset($data['location']['name']))
                            <div class="col-auto">
                                <span class="badge bg-warning text-dark px-3 py-2">
                                    <i class="fas fa-location-dot me-2"></i>{{ $data['location']['name'] }}
                                </span>
                            </div>
                        @endif
	                </div>

                    {{-- Property Quick Features usando Porto feature system --}}
                    <div class="property-features">
                        @if(isset($data['suite_amount']) && $data['suite_amount'] > 0)
                            <div class="feature-item bg-color-quaternary bg-opacity-9 text-color-dark px-3 py-2 rounded-pill border border-color-light-3">
                                <i class="fas fa-bed text-color-primary me-2"></i>
                                <span class="font-weight-semibold">{{ $data['suite_amount'] }} Dorm</span>
                            </div>
                        @endif
                        @if(isset($data['bathroom_amount']) && $data['bathroom_amount'] > 0)
                            <div class="feature-item bg-color-quaternary bg-opacity-9 text-color-dark px-3 py-2 rounded-pill border border-color-light-3">
                                <i class="fas fa-bath text-color-primary me-2"></i>
                                <span class="font-weight-semibold">{{ $data['bathroom_amount'] }} Baños</span>
                            </div>
                        @endif
                        @if(isset($data['surface']) && $data['surface'] > 0)
                            <div class="feature-item bg-color-quaternary bg-opacity-9 text-color-dark px-3 py-2 rounded-pill border border-color-light-3">
                                <i class="fas fa-ruler-combined text-color-primary me-2"></i>
                                <span class="font-weight-semibold">{{ number_format($data['surface']) }} m²</span>
                            </div>
                        @endif
                        @if(isset($data['parking_lot_amount']) && $data['parking_lot_amount'] > 0)
                            <div class="feature-item bg-color-quaternary bg-opacity-9 text-color-dark px-3 py-2 rounded-pill border border-color-light-3">
                                <i class="fas fa-car text-color-primary me-2"></i>
                                <span class="font-weight-semibold">{{ $data['parking_lot_amount'] }} Cocheras</span>
                                </div>
                        @endif
                    </div>
                </div>

                <div class="col-md-4 order-1 order-md-2 align-self-center text-md-end">
                    <ul class="breadcrumb breadcrumb-light d-block text-md-end text-4 mb-4">
                        <li><a href="{{ url('/') }}" class="text-decoration-none">Inicio</a></li>
                        <li><a href="{{ route('properties') }}" class="text-decoration-none">Propiedades</a></li>
                        <li class="text-uppercase active">Detalle</li>
                    </ul>

                    {{-- Property Price usando Porto pricing system --}}
                    <div class="property-price-header text-end">
                        @if(isset($data['operations'][0]['prices'][0]))
                            <div class="property-price property-price-large text-color-light font-weight-bold mb-2">
                                @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                    US$ {{ number_format($data['operations'][0]['prices'][0]['price'], 0, ',', '.') }}
                                @else
                                    $ {{ number_format($data['operations'][0]['prices'][0]['price'], 0, ',', '.') }}
                                    <small class="text-4">{{ strtoupper($data['operations'][0]['prices'][0]['currency']) }}</small>
                                @endif
                            </div>
                            @if(isset($data['surface']) && $data['surface'] > 0)
                                <div class="text-color-light opacity-7 text-3">
                                    @php
                                        $pricePerM2 = $data['operations'][0]['prices'][0]['price'] / $data['surface'];
                                    @endphp
                                    @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                        US$ {{ number_format($pricePerM2, 0) }}/m²
                                    @else
                                        $ {{ number_format($pricePerM2, 0) }}/m²
                                    @endif
                                </div>
                            @endif
                        @else
                            <div class="property-price property-price-large text-color-light font-weight-bold">
                                <i class="fas fa-phone me-2"></i>Consultar Precio
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Main Content Section --}}
    <div class="container container-xl-custom py-5">
        <div class="row">
            {{-- Main Content Area --}}
            <div class="col-lg-8">

                {{-- Gallery Section usando Thumb Gallery nativo de Porto --}}
                <div class="thumb-gallery-wrapper mb-5" data-thumbs-items="6">
                    {{-- Lightbox container para Porto --}}
                    <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'closeOnContentClick': false, 'closeBtnInside': false, 'mainClass': 'mfp-with-zoom mfp-img-mobile', 'image': { 'verticalFit': true, 'titleSrc': 'title' }}">

                        {{-- Main Gallery Detail usando Porto Thumb Gallery + Magnific Popup --}}
                        <div class="owl-carousel owl-theme manual thumb-gallery-detail" style="height: 500px;">
                            @if(isset($data['photos']) && count($data['photos']) > 0)
                                @foreach($data['photos'] as $index => $photo)
                                    @php
                                        $fullImage = $photo['image'] ?? null;
                                        $thumbImage = $photo['thumb'] ?? ($photo['image'] ?? null);
                                    @endphp
                                    @if($fullImage)
                                    <div class="item position-relative">
                                        <a href="{{ $fullImage }}" data-lightbox-gallery-item title="{{ $data['publication_title'] }} - Foto {{ $index + 1 }}">
                                            <img src="{{ $fullImage }}" alt="{{ $data['publication_title'] }} - Foto {{ $index + 1 }}" class="img-fluid w-100" style="height: 500px; object-fit: cover;" loading="lazy">
                                        </a>

                                        {{-- Overlay con información --}}
                                        @if($index === 0)
                                            <div class="position-absolute top-0 start-0 end-0 p-4 z-index-1">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div class="gallery-info">
                                                        <span class="badge bg-dark bg-opacity-75 text-light px-3 py-2 rounded-pill">
                                                            <i class="fas fa-images me-2"></i>
                                                            {{ count($data['photos']) }} fotos
                                                            @if(isset($data['videos']) && count($data['videos']) > 0)
                                                                • {{ count($data['videos']) }} videos
                                                            @endif
                                                        </span>
                                                    </div>
                                                    <div class="gallery-actions">
                                                        @if(isset($data['videos']) && count($data['videos']) > 0)
                                                            <button class="btn btn-success btn-modern btn-sm rounded-pill me-2 font-weight-semibold"
                                                                    onclick="openVideoModal()">
                                                                <i class="fas fa-video me-2"></i>Ver Video
                                                            </button>
                                                        @endif
                                                        <button class="btn btn-warning btn-modern btn-sm rounded-pill me-2 font-weight-semibold" onclick="shareProperty()">
                                                            <i class="fas fa-share-alt me-2"></i>Compartir
                                                        </button>
                                                        <a href="{{ $photo['image'] }}"
                                                           class="btn btn-primary btn-modern btn-sm rounded-pill font-weight-semibold"
                                                           data-lightbox-gallery-item>
                                                            <i class="fas fa-expand-alt me-2"></i>Ver todas
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    @endif
                                @endforeach

                        {{-- Videos como items adicionales --}}
                                @if(isset($data['videos']) && count($data['videos']) > 0)
                                    @foreach($data['videos'] as $index => $video)
                                        <div class="item position-relative">
                                            <div class="position-relative" style="height: 500px; background: #000;">
                                                <img src="https://img.youtube.com/vi/{{ $video['video_id'] }}/maxresdefault.jpg"
                                                     alt="Video {{ $index + 1 }}"
                                                     class="img-fluid w-100 h-100"
                                             style="object-fit: cover; opacity: 0.8;" loading="lazy">
                                                <div class="position-absolute top-50 start-50 translate-middle">
                                                    <a href="{{ $video['player_url'] }}"
                                                       target="_blank"
                                                       class="btn btn-warning btn-modern btn-lg rounded-circle">
                                                        <i class="fas fa-play fa-2x"></i>
                                                    </a>
                                                </div>
                                                <div class="position-absolute bottom-0 start-0 end-0 p-4">
                                                    <div class="bg-dark bg-opacity-75 p-3 rounded text-white">
                                                        <h6 class="mb-0">
                                                            <i class="fas fa-video me-2"></i>
                                                            Video de la Propiedad {{ $index + 1 }}
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            @else
                                {{-- Placeholder si no hay fotos disponibles --}}
                                <div class="item position-relative">
                                    <a href="{{ asset('cd-project/img/logos/logo.png') }}" data-lightbox-gallery-item title="{{ $data['publication_title'] }}">
                                        <img src="{{ asset('cd-project/img/logos/logo.png') }}" alt="{{ $data['publication_title'] }}" class="img-fluid w-100" style="height: 500px; object-fit: contain; background:#f8f9fa;" loading="lazy">
                                    </a>
                                </div>
                            @endif
                </div>
            </div>

                    {{-- Thumbnails usando owl carousel nativo --}}
                        @if(isset($data['photos']) && count($data['photos']) > 1)
                            <div class="owl-carousel owl-theme manual thumb-gallery-thumbs show-thumbs mt-3">
                                @foreach($data['photos'] as $index => $photo)
                                    @php
                                        $thumbSrc = $photo['thumb'] ?? ($photo['image'] ?? '');
                                    @endphp
                                    @if($thumbSrc)
                                    <div>
                                        <span class="img-thumbnail d-block cur-pointer" style="height: 80px; overflow: hidden;">
                                            <img src="{{ $thumbSrc }}" alt="Thumbnail {{ $index + 1 }}" class="img-fluid w-100 h-100" style="object-fit: cover;" loading="lazy">
                                        </span>
                                    </div>
                                    @endif
                                @endforeach

                            {{-- Video Thumbnails --}}
                            @if(isset($data['videos']) && count($data['videos']) > 0)
                                @foreach($data['videos'] as $index => $video)
                                    <div class="item">
                                        <div class="thumbnail-porto position-relative overflow-hidden rounded" style="height: 80px;">
                                            <img src="https://img.youtube.com/vi/{{ $video['video_id'] }}/maxresdefault.jpg"
                                                 alt="Video Thumbnail {{ $index + 1 }}"
                                                 class="img-fluid w-100 h-100"
                                                 style="object-fit: cover;">
                                            <div class="position-absolute top-50 start-50 translate-middle">
                                                <i class="fas fa-play-circle fa-2x text-white" style="text-shadow: 0 0 10px rgba(0,0,0,0.8);"></i>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    @endif
                </div>

                {{-- Property Information Tabs usando Porto tabs --}}
                <div class="tabs tabs-modern mb-5">
                    <ul class="nav nav-tabs" id="propertyTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">
                                <i class="fas fa-info-circle me-2"></i>Descripción
                            </button>
                        </li>
                        @if(isset($data['tags']) && count($data['tags']) > 0)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="features-tab" data-bs-toggle="tab" data-bs-target="#features" type="button" role="tab">
                                    <i class="fas fa-list-check me-2"></i>Características
                                </button>
                                </li>
                        @endif
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location" type="button" role="tab">
                                <i class="fas fa-map-marker-alt me-2"></i>Ubicación
                            </button>
                                </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="financing-tab" data-bs-toggle="tab" data-bs-target="#financing" type="button" role="tab">
                                <i class="fas fa-calculator me-2"></i>Financiación
                            </button>
                                </li>
                            </ul>

                    <div class="tab-content">
                        {{-- Description Tab --}}
                        <div class="tab-pane fade show active" id="description" role="tabpanel">
                            <div class="card border-0 shadow-modern rounded-lg mt-4">
                                <div class="card-body p-4">
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <h4 class="mb-4 text-color-dark">Descripción de la Propiedad</h4>
                                            <div class="property-description text-color-grey line-height-7 text-4">
                                                {!! nl2br(e($data['description'])) !!}
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="property-info bg-light p-4 rounded">
                                                <h5 class="mb-3 text-color-dark">Destacados</h5>
                                                <ul class="list-unstyled">
                                                    @if(isset($data['type']['name']))
                                                        <li class="mb-2">
                                                            <i class="fas fa-home text-primary me-2"></i>
                                                            <strong>Tipo:</strong> {{ $data['type']['name'] }}
                                                        </li>
                                                    @endif
                                                    @if(isset($data['antiquity']) && $data['antiquity'] > 0)
                                                        <li class="mb-2">
                                                            <i class="fas fa-calendar text-primary me-2"></i>
                                                            <strong>Antigüedad:</strong> {{ $data['antiquity'] }} años
                                                        </li>
                                                    @endif
                                                    @if(isset($data['operations'][0]['operation_type']))
                                                        <li class="mb-2">
                                                            <i class="fas fa-tag text-primary me-2"></i>
                                                            <strong>Operación:</strong>
                                                            @if($data['operations'][0]['operation_type'] == 1) Venta
                                                            @elseif($data['operations'][0]['operation_type'] == 2) Alquiler
                                                            @elseif($data['operations'][0]['operation_type'] == 3) Temporal
                                                            @endif
                                                        </li>
                                                    @endif
                                                </ul>
                                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

                        {{-- Features Tab --}}
                        @if(isset($data['tags']) && count($data['tags']) > 0)
                            <div class="tab-pane fade" id="features" role="tabpanel">
                                <div class="card border-0 shadow-modern rounded-lg mt-4">
                                    <div class="card-body p-4">
                                        <h4 class="mb-4 text-color-dark">Características y Amenities</h4>
                                        <div class="feature-grid">
                                            @foreach($data['tags'] as $tag)
                                                <div class="feature-item d-flex align-items-center mb-3">
                                                    <i class="fas fa-check-circle text-success me-3"></i>
                                                    <span class="text-4">{{ $tag['name'] }}</span>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                @endif

                        {{-- Location Tab --}}
                        <div class="tab-pane fade" id="location" role="tabpanel">
                            <div class="card border-0 shadow-modern rounded-lg mt-4">
                                <div class="card-body p-4">
                                    <h4 class="mb-4 text-color-dark">Ubicación y Zona</h4>
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="property-location mb-4">
                                                <h5 class="text-color-primary mb-3">
                                                    <i class="fas fa-map-marker-alt me-2"></i>
                                                    {{ ucwords($data['address'] ?? $data['real_address']) }}
                                                </h5>
                                                @if(isset($data['location']['name']))
                                                    <p class="mb-3">
                                                        <strong>Barrio/Zona:</strong> {{ $data['location']['name'] }}
                                                    </p>
                                                @endif
                                                <div class="alert alert-info">
                                                    <i class="fas fa-info-circle me-2"></i>
                                                    <strong>Ubicación estratégica:</strong> Esta propiedad se encuentra en una zona de alta valorización con excelente conectividad y servicios.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="d-grid gap-3">
                                                <a href="https://wa.me/5493816731210?text=Hola! Me interesa conocer la ubicación exacta de: {{ urlencode($data['publication_title']) }}"
                                                   target="_blank"
                                                   class="btn btn-primary btn-modern py-3 font-weight-semibold">
                                                    <i class="fas fa-map-marker-alt me-2"></i>Solicitar Ubicación
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Financing Tab --}}
                        <div class="tab-pane fade" id="financing" role="tabpanel">
                            <div class="card border-0 shadow-modern rounded-lg mt-4">
                                <div class="card-body p-4">
                                    <h4 class="mb-4 text-color-dark">Opciones de Financiación</h4>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="bg-color-light p-4 rounded mb-3">
                                                <h5 class="text-color-primary mb-3">
                                                    <i class="fas fa-university me-2"></i>Crédito Hipotecario
                                                </h5>
                                                <ul class="list list-icons list-primary">
                                                    <li><i class="fas fa-check"></i>Hasta 80% de financiación</li>
                                                    <li><i class="fas fa-check"></i>Plazos hasta 30 años</li>
                                                    <li><i class="fas fa-check"></i>Sistemas UVA y Pesos</li>
                                                    <li><i class="fas fa-check"></i>8 bancos adheridos</li>
                                            </ul>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="bg-color-primary p-4 rounded text-white">
                                                <h5 class="mb-3 text-color-light">
                                                    <i class="fas fa-calculator me-2"></i>Simulador de Cuota
                                                </h5>
                                                @if(isset($data['operations'][0]['prices'][0]))
                                                    @php
                                                        $price = $data['operations'][0]['prices'][0]['price'];
                                                        $monthlyPayment = ($price * 0.8) / (30 * 12);
                                                    @endphp
                                                    <p class="mb-2 text-color-light">Precio: <strong>
                                                        @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                                            US$ {{ number_format($price, 0, ',', '.') }}
                                                        @else
                                                            $ {{ number_format($price, 0, ',', '.') }}
                                                @endif
                                                    </strong></p>
                                                    <p class="mb-2 text-color-light">Financiación 80%: <strong>
                                                        @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                                            US$ {{ number_format($price * 0.8, 0, ',', '.') }}
                                                        @else
                                                            $ {{ number_format($price * 0.8, 0, ',', '.') }}
                                                @endif
                                                    </strong></p>
                                                    <hr class="border-color-light-5">
                                                    <p class="mb-0 text-4 text-color-light">Cuota estimada: <strong>
                                                        @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                                            US$ {{ number_format($monthlyPayment, 0, ',', '.') }}/mes
                                                        @else
                                                            $ {{ number_format($monthlyPayment, 0, ',', '.') }}/mes
                                                @endif
                                                    </strong></p>
                                                @endif
                                                <small class="d-block mt-2 opacity-8 text-color-light">*Cálculo estimativo. Sujeto a aprobación crediticia.</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-4 text-center">
                                        <a href="https://wa.me/5493816731210?text=Quiero información sobre financiación para: {{ urlencode($data['publication_title']) }}"
                                           target="_blank"
                                           class="btn btn-warning btn-modern btn-lg py-3 px-5 font-weight-bold">
                                            <i class="fas fa-calculator me-2"></i>Solicitar Pre-aprobación
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            {{-- Sidebar usando Porto custom-card-info --}}
            <div class="col-lg-4">
                <div class="sticky-top" style="top: 2rem;">

                    {{-- Price Card usando custom-card-info de Porto --}}
                    <div class="card custom-card-info custom-card-info-shadow bg-color-primary text-color-light border-0 mb-4">
                        <div class="card-body bg-transparent p-relative p-4 my-2 text-center z-index-1">
                            <div class="custom-card-info-header border-bottom border-color-light-5 pb-3 mb-4">
                                @if(isset($data['operations'][0]['prices'][0]))
                                    {{-- <div class="property-price property-price-large mb-2 text-color-light">
                                        @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                            US$ {{ number_format($data['operations'][0]['prices'][0]['price'], 0, ',', '.') }}
                                        @else
                                            $ {{ number_format($data['operations'][0]['prices'][0]['price'], 0, ',', '.') }}
                                                @endif
                                    </div> --}}
                                    @if(isset($data['surface']) && $data['surface'] > 0)
                                        <div class="opacity-8 text-2 text-color-dark">
                                            @php
                                                $pricePerM2 = $data['operations'][0]['prices'][0]['price'] / $data['surface'];
                                            @endphp
                                            @if($data['operations'][0]['prices'][0]['currency'] == 'USD')
                                                US$ {{ number_format($pricePerM2, 0) }}/m²
                                            @else
                                                $ {{ number_format($pricePerM2, 0) }}/m²
                                                @endif
                                        </div>
                                                @endif
                                @else
                                    <div class="property-price property-price-large text-color-light">
                                        <i class="fas fa-phone me-2"></i>Consultar Precio
                                    </div>
                                                @endif
                            </div>

                            <div class="custom-card-info-content">
                                {{-- Property Details Grid --}}
                                <div class="row g-2 mb-4">
                                    @if(isset($data['suite_amount']) && $data['suite_amount'] > 0)
                                        <div class="col-6">
                                            <div class="text-center p-3 bg-color-quaternary bg-opacity-2 rounded border border-color-light-5">
                                                <i class="fas fa-bed text-warning fa-2x mb-2"></i>
                                                <div class="font-weight-bold text-4 text-color-dark">{{ $data['suite_amount'] }}</div>
                                                <div class="text-2 text-color-dark opacity-8">Dormitorios</div>
                                            </div>
                                        </div>
                                    @endif
                                    @if(isset($data['bathroom_amount']) && $data['bathroom_amount'] > 0)
                                        <div class="col-6">
                                            <div class="text-center p-3 bg-color-quaternary bg-opacity-2 rounded border border-color-light-5">
                                                <i class="fas fa-bath text-warning fa-2x mb-2"></i>
                                                <div class="font-weight-bold text-4 text-color-dark">{{ $data['bathroom_amount'] }}</div>
                                                <div class="text-2 text-color-dark opacity-8">Baños</div>
                                            </div>
                                                    </div>
                                                @endif
                                    @if(isset($data['parking_lot_amount']) && $data['parking_lot_amount'] > 0)
                                        <div class="col-6">
                                            <div class="text-center p-3 bg-color-quaternary bg-opacity-2 rounded border border-color-light-5">
                                                <i class="fas fa-car text-warning fa-2x mb-2"></i>
                                                <div class="font-weight-bold text-4 text-color-dark">{{ $data['parking_lot_amount'] }}</div>
                                                <div class="text-2 text-color-dark opacity-8">Cocheras</div>
                                            </div>
                                        </div>
                                        @endif
                                    @if(isset($data['surface']) && $data['surface'] > 0)
                                        <div class="col-6">
                                            <div class="text-center p-3 bg-color-quaternary bg-opacity-2 rounded border border-color-light-5">
                                                <i class="fas fa-ruler-combined text-warning fa-2x mb-2"></i>
                                                <div class="font-weight-bold text-4 text-color-dark">{{ number_format($data['surface']) }}</div>
                                                <div class="text-2 text-color-dark opacity-8">m² totales</div>
                                            </div>
                                        </div>
                                                @endif
                                </div>

                                {{-- Action Buttons Estandarizados --}}
                                <div class="d-grid gap-2">
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <a href="https://wa.me/5493816731210?text=Hola! Me interesa la propiedad: {{ urlencode($data['publication_title']) }}"
                                               target="_blank"
                                               class="btn btn-success btn-modern py-3 px-2 text-2 font-weight-semibold">
                                                <i class="fab fa-whatsapp me-1"></i>WhatsApp
                                            </a>
                                        </div>
                                        <div class="col-6">
                                            <a href="tel:{{ config('site.contact.phone.number', '+5493816731210') }}"
                                               class="btn btn-quaternary btn-modern py-3 px-2 text-2 font-weight-semibold">
                                                <i class="fas fa-phone me-1"></i>Llamar
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                                </div>

                    {{-- Additional Info Card con mejor contraste --}}
                    <div class="card border-0 shadow-modern rounded-lg mb-4">
                        <div class="card-header bg-color-light border-0 p-4">
                            <h5 class="mb-0 text-color-dark font-weight-semibold">
                                <i class="fas fa-info-circle text-primary me-2"></i>
                                Información Adicional
                            </h5>
                        </div>
                        <div class="card-body p-4 bg-color-quaternary">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 d-flex justify-content-between align-items-center">
                                    <span class="text-color-dark font-weight-semibold">Código:</span>
                                    <span class="badge bg-primary text-white px-3 py-2">
                                        <i class="fas fa-hashtag me-1"></i>{{ $data['id'] }}
                                    </span>
                                </li>
                                @if(isset($data['type']['name']))
                                    <li class="mb-3 d-flex justify-content-between align-items-center">
                                        <span class="text-color-dark font-weight-semibold">Tipo:</span>
                                        <span class="text-color-default">{{ $data['type']['name'] }}</span>
                                    </li>
                                @endif
                                @if(isset($data['roofed_surface']) && $data['roofed_surface'] > 0)
                                    <li class="mb-3 d-flex justify-content-between align-items-center">
                                        <span class="text-color-dark font-weight-semibold">Superficie Cubierta:</span>
                                        <span class="text-color-default">{{ number_format($data['roofed_surface']) }} m²</span>
                                    </li>
                                @endif
                                @if(isset($data['antiquity']) && $data['antiquity'] > 0)
                                    <li class="mb-3 d-flex justify-content-between align-items-center">
                                        <span class="text-color-dark font-weight-semibold">Antigüedad:</span>
                                        <span class="text-color-default">{{ $data['antiquity'] }} años</span>
                                    </li>
                                @endif
                                <li class="mb-0 d-flex justify-content-between align-items-center">
                                    <span class="text-color-dark font-weight-semibold">Estado:</span>
                                    <span class="badge bg-success text-white px-3 py-2">
                                        <i class="fas fa-check-circle me-1"></i>Disponible
                                    </span>
                                </li>
                            </ul>
                        </div>
                            </div>

                    {{-- Contact Form Card --}}
                    <div class="card border-0 shadow-modern rounded-lg mb-4">
                        <div class="card-header bg-color-primary text-white p-4 border-0">
                            <h5 class="mb-0 text-color-light font-weight-semibold">
                                <i class="fas fa-envelope me-2"></i>
                                Solicitar Información
                            </h5>
                        </div>
                        <div class="card-body p-4 bg-color-quaternary">
                            <form id="tokkoContactForm" class="tokko-contact-form form-style-3" action="{{ route('tokko.lead') }}" method="POST" onsubmit="return false;">
                                @csrf
                                <input type="hidden" name="property_id" value="{{ $data['id'] }}">
                                <input type="hidden" name="property_title" value="{{ $data['publication_title'] }}">
                                <input type="hidden" name="property_address" value="{{ $data['address'] ?? $data['real_address'] }}">

                                <div class="form-group mb-3">
                                    <input type="text" class="form-control form-control-modern" name="name" placeholder="Tu nombre completo *" required>
                                </div>
                                <div class="form-group mb-3">
                                    <input type="email" class="form-control form-control-modern" name="email" placeholder="Tu email *" required>
                                </div>
                                <div class="form-group mb-3">
                                    <input type="tel" class="form-control form-control-modern" name="phone" placeholder="Tu teléfono *" required>
                                </div>
                                <div class="form-group mb-3">
                                    <textarea class="form-control form-control-modern" name="message" rows="4"
                                              placeholder="Me interesa esta propiedad. Por favor contáctenme para recibir más información." required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary btn-modern w-100 py-3 font-weight-bold">
                                    <i class="fas fa-paper-plane me-2"></i>Enviar Consulta
                                </button>
                            </form>
                        </div>
                    </div>

                    {{-- Trust Signals Card --}}
                    <div class="card border-0 shadow-modern rounded-lg">
                        <div class="card-header bg-color-light border-0 p-4">
                            <h6 class="mb-0 text-color-dark font-weight-semibold text-center">¿Por qué elegir Inmobiliaria MTN?</h6>
                        </div>
                        <div class="card-body p-4 text-center bg-color-quaternary">
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="text-center">
                                        <i class="fas fa-award text-primary fa-2x mb-2"></i>
                                        <div class="font-weight-bold text-3 text-primary">50+</div>
                                        <div class="text-2 text-color-default">Años Experiencia</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-center">
                                        <i class="fas fa-handshake text-primary fa-2x mb-2"></i>
                                        <div class="font-weight-bold text-3 text-primary">500+</div>
                                        <div class="text-2 text-color-default">Ventas Exitosas</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-center">
                                        <i class="fas fa-clock text-primary fa-2x mb-2"></i>
                                        <div class="font-weight-bold text-3 text-primary">24hs</div>
                                        <div class="text-2 text-color-default">Respuesta</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-center">
                                        <i class="fas fa-shield-alt text-primary fa-2x mb-2"></i>
                                        <div class="font-weight-bold text-3 text-primary">100%</div>
                                        <div class="text-2 text-color-default">Seguras</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    {{-- Call to Action Section --}}
    <section class="section bg-color-primary border-0 m-0 py-5">
        <div class="container container-xl-custom">
            <div class="row align-items-center">
                <div class="col-lg-8 text-center text-lg-start">
                    <h2 class="text-color-light font-weight-bold text-7 mb-3">
                        ¿Te Gustó Esta Propiedad?
                    </h2>
                    <p class="text-color-light opacity-8 text-4 mb-4 mb-lg-0">
                        Nuestro equipo especializado está listo para ayudarte con el proceso completo de compra, desde la tasación hasta la escrituración.
                    </p>
                </div>
                <div class="col-lg-4 text-center text-lg-end">
                    <a href="https://wa.me/5493816731210?text=Me interesa esta propiedad: {{ urlencode($data['publication_title']) }}"
                       target="_blank"
                       class="btn btn-warning btn-modern btn-xl py-4 px-5 font-weight-bold text-transform-uppercase">
                        <i class="fab fa-whatsapp me-2"></i>Contactar Ahora
                    </a>
            </div>
        </div>
    </div>
</section>

{{-- Video Modal - Se abre automáticamente si hay videos --}}
@if(isset($data['videos']) && count($data['videos']) > 0)
    <div class="modal fade" id="propertyVideoModal" tabindex="-1" aria-labelledby="propertyVideoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content bg-dark border-0">
                <div class="modal-header border-0 bg-transparent">
                    <h5 class="modal-title text-white" id="propertyVideoModalLabel">
                        <i class="fas fa-video me-2"></i>Video de la Propiedad
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row g-0">
                        {{-- Video Principal --}}
                        <div class="col-lg-8">
                            <div class="ratio ratio-16x9" style="min-height: 400px;">
                                <iframe id="videoIframe"
                                        src="{{ $data['videos'][0]['player_url'] }}&autoplay=1"
                                        title="Video de la Propiedad"
                                        frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowfullscreen
                                        class="rounded-start">
                                </iframe>
                            </div>
                        </div>

                        {{-- Información Lateral --}}
                        <div class="col-lg-4">
                            <div class="p-4 h-100 d-flex flex-column justify-content-between">
                                <div>
                                    <h6 class="text-white mb-3">{{ $data['publication_title'] }}</h6>

                                    {{-- Videos adicionales si hay más de uno --}}
                                    @if(count($data['videos']) > 1)
                                        <div class="mb-4">
                                            <h6 class="text-warning mb-2">
                                                <i class="fas fa-list me-2"></i>Más Videos
                                            </h6>
                                            @foreach($data['videos'] as $index => $video)
                                                @if($index > 0) {{-- Skip the first one as it's already playing --}}
                                                    <div class="video-item mb-2">
                                                        <button type="button"
                                                                class="btn btn-outline-light btn-sm w-100 text-start video-switch"
                                                                data-video-url="{{ $video['player_url'] }}"
                                                                data-video-index="{{ $index }}">
                                                            <i class="fas fa-play me-2"></i>Video {{ $index + 1 }}
                                                        </button>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif

                                    {{-- Property Highlights --}}
                                    <div class="property-highlights">
                                        <h6 class="text-warning mb-2">
                                            <i class="fas fa-star me-2"></i>Destacados
                                        </h6>
                                        <ul class="list-unstyled text-white-50">
                                            @if(isset($data['suite_amount']) && $data['suite_amount'] > 0)
                                                <li class="mb-1">
                                                    <i class="fas fa-bed text-warning me-2"></i>
                                                    {{ $data['suite_amount'] }} Dormitorios
                                                </li>
                                            @endif
                                            @if(isset($data['bathroom_amount']) && $data['bathroom_amount'] > 0)
                                                <li class="mb-1">
                                                    <i class="fas fa-bath text-warning me-2"></i>
                                                    {{ $data['bathroom_amount'] }} Baños
                                                </li>
                                            @endif
                                            @if(isset($data['surface']) && $data['surface'] > 0)
                                                <li class="mb-1">
                                                    <i class="fas fa-ruler-combined text-warning me-2"></i>
                                                    {{ number_format($data['surface']) }} m²
                                                </li>
                                            @endif
                                            @if(isset($data['location']['name']))
                                                <li class="mb-1">
                                                    <i class="fas fa-map-marker-alt text-warning me-2"></i>
                                                    {{ $data['location']['name'] }}
                                                </li>
                                            @endif
                                        </ul>
                                    </div>
                                </div>

                                {{-- Action Buttons --}}
                                <div class="mt-4">
                                    <div class="d-grid gap-2">
                                        <a href="https://wa.me/5493816731210?text=Vi el video de: {{ urlencode($data['publication_title']) }} y me interesa conocer más detalles"
                                           target="_blank"
                                           class="btn btn-success btn-modern">
                                            <i class="fab fa-whatsapp me-2"></i>Me Interesa
                                        </a>
                                        <button type="button"
                                                class="btn btn-warning btn-modern"
                                                data-bs-dismiss="modal"
                                                onclick="scrollToGallery()">
                                            <i class="fas fa-images me-2"></i>Ver Fotos
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

</div>

@endsection

@section('scripts')
<!-- Contact Form Script -->
<script src="{{ asset('template/js/views/view.contact.js') }}"></script>
<!-- Porto Gallery Script (ya incluido en el theme) -->
<script src="{{ asset('template/js/examples/examples.gallery.js') }}"></script>

<!-- Video Modal Styles -->
<style>
#propertyVideoModal .modal-content {
    border-radius: 15px;
    overflow: hidden;
}

#propertyVideoModal .modal-xl {
    max-width: 1200px;
}

#propertyVideoModal .video-switch {
    transition: all 0.3s ease;
}

#propertyVideoModal .video-switch:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

#propertyVideoModal .video-switch.active {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

#propertyVideoModal .property-highlights {
    border-left: 3px solid var(--bs-warning);
    padding-left: 15px;
}

@media (max-width: 991px) {
    #propertyVideoModal .modal-dialog {
        max-width: 95%;
    }

    #propertyVideoModal .col-lg-4 {
        max-height: 300px;
        overflow-y: auto;
    }

    #propertyVideoModal .ratio {
        min-height: 250px !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {

    // Auto-show video modal if property has videos
    @if(isset($data['videos']) && count($data['videos']) > 0)
        // Wait a bit for page to load, then show modal
        setTimeout(function() {
            const videoModal = new bootstrap.Modal(document.getElementById('propertyVideoModal'), {
                keyboard: true,
                focus: true
            });
            videoModal.show();
        }, 1000); // Show after 1 second

        // Handle video switching for multiple videos
        document.querySelectorAll('.video-switch').forEach(function(button) {
            button.addEventListener('click', function() {
                const videoUrl = this.getAttribute('data-video-url');
                const videoIndex = this.getAttribute('data-video-index');
                const iframe = document.getElementById('videoIframe');

                // Update iframe src with autoplay
                iframe.src = videoUrl + '&autoplay=1';

                // Update active state of buttons
                document.querySelectorAll('.video-switch').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // Stop video when modal is closed
        document.getElementById('propertyVideoModal').addEventListener('hidden.bs.modal', function () {
            const iframe = document.getElementById('videoIframe');
            const src = iframe.src;
            iframe.src = '';
            iframe.src = src.replace('&autoplay=1', '');
        });
    @endif

    // Scroll to gallery function
    window.scrollToGallery = function() {
        const gallerySection = document.querySelector('.thumb-gallery-wrapper');
        if (gallerySection) {
            gallerySection.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    };

    // Open video modal function
    @if(isset($data['videos']) && count($data['videos']) > 0)
    window.openVideoModal = function() {
        const videoModal = new bootstrap.Modal(document.getElementById('propertyVideoModal'), {
            keyboard: true,
            focus: true
        });

        // Reset to first video
        const iframe = document.getElementById('videoIframe');
        iframe.src = '{{ $data["videos"][0]["player_url"] }}&autoplay=1';

            // Reset button states
    document.querySelectorAll('.video-switch').forEach(btn => btn.classList.remove('active'));

    videoModal.show();
};

// Manejar el formulario de contacto de Tokko
(function() {
    function initTokkoForm() {
        const tokkoForm = document.getElementById('tokkoContactForm');

        if (tokkoForm) {
            // Remover listeners anteriores si existen
            tokkoForm.removeEventListener('submit', handleSubmit);

            // Agregar nuevo listener
            tokkoForm.addEventListener('submit', handleSubmit);
        } else {
            setTimeout(initTokkoForm, 1000);
        }
    }

    function handleSubmit(e) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        // Mostrar loading
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Enviando...';
        submitBtn.disabled = true;

        // Agregar el token CSRF al FormData
        formData.append('_token', '{{ csrf_token() }}');

        fetch(this.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mostrar notificación de éxito
                showNotification('Tu consulta ha sido enviada correctamente. Te contactaremos pronto.', 'success');
                // Limpiar formulario
                this.reset();
            } else {
                showNotification(data.message || 'Hubo un error al enviar tu consulta. Por favor intenta nuevamente.', 'error');
            }
        })
        .catch(error => {
            showNotification('Hubo un error al enviar tu consulta. Por favor intenta nuevamente.', 'error');
        })
        .finally(() => {
            // Restaurar botón
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });

        return false;
    }

    // Inicializar cuando el DOM esté listo
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTokkoForm);
    } else {
        initTokkoForm();
    }

    // También intentar después de un delay por si acaso
    setTimeout(initTokkoForm, 2000);

    // Función para mostrar notificaciones
    function showNotification(message, type = 'success') {
        // Crear el elemento de notificación
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                <span>${message}</span>
                <button class="notification-close" onclick="this.parentElement.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;

        // Insertar antes del formulario
        const form = document.getElementById('tokkoContactForm');
        if (form && form.parentElement) {
            form.parentElement.insertBefore(notification, form);
        }

        // Auto-remover después de 5 segundos
        setTimeout(() => {
            if (notification.parentElement) {
                notification.remove();
            }
        }, 5000);
    }
})();
    @endif



    // Share functionality usando Web Share API o fallback
    window.shareProperty = function() {
        if (navigator.share) {
            navigator.share({
                title: '{{ $data["publication_title"] }}',
                text: 'Mira esta increíble propiedad en Inmobiliaria MTN',
                url: window.location.href
            });
        } else {
            // Fallback: copy to clipboard
            navigator.clipboard.writeText(window.location.href).then(function() {
                // Show toast or alert
                if (typeof theme !== 'undefined' && theme.PluginNotifications) {
                    theme.PluginNotifications.showNotification({
                        message: '¡Enlace copiado al portapapeles!',
                        type: 'success',
                        timeout: 3000
                    });
                } else {
                    alert('¡Enlace copiado al portapapeles!');
                }
            }).catch(function() {
                alert('No se pudo copiar el enlace');
            });
        }
    };

    // Initialize Porto components
    if (typeof theme !== 'undefined') {
        // Initialize Lightbox
        if (theme.PluginLightbox) {
            theme.PluginLightbox.initialize();
        }

        // Initialize Carousel (Owl Carousel para thumb gallery)
        if (theme.PluginCarousel) {
            theme.PluginCarousel.initialize();
        }

        // Initialize Thumb Gallery específicamente
        if (theme.fn && theme.fn.intObs) {
            // El thumb gallery se inicializa automáticamente con examples.gallery.js
            console.log('Porto Thumb Gallery initialized');
        }
    }

    // Enhanced form validation para el contact form
    const contactForm = document.querySelector('.contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            const requiredFields = this.querySelectorAll('[required]');
            let isValid = true;

            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.classList.add('is-invalid');
                } else {
                    field.classList.remove('is-invalid');
                }
            });

            if (!isValid) {
                e.preventDefault();
                // Show error message
                if (typeof theme !== 'undefined' && theme.PluginNotifications) {
                    theme.PluginNotifications.showNotification({
                        message: 'Por favor completa todos los campos requeridos',
                        type: 'error',
                        timeout: 3000
                    });
                }
            }
        });
    }

    // Console log para debugging
    console.log('Property detail page initialized with Porto Thumb Gallery');
    console.log('Photos count:', {{ count($data['photos'] ?? []) }});
    @if(isset($data['videos']))
        console.log('Videos count:', {{ count($data['videos']) }});
    @endif
});
</script>

{{-- Structured Data (JSON-LD) para SEO --}}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "RealEstateListing",
    "name": "{{ $data['publication_title'] }}",
    "description": "{{ strip_tags($data['description']) }}",
    "url": "{{ url()->current() }}",
    @if(isset($data['photos']) && count($data['photos']) > 0)
    "image": [
        @foreach($data['photos'] as $index => $photo)
            "{{ $photo['image'] }}"@if($index < count($data['photos']) - 1),@endif
        @endforeach
    ],
    @endif
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "{{ $data['address'] ?? $data['real_address'] ?? '' }}",
        @if(isset($data['location']['name']))
        "addressLocality": "{{ $data['location']['name'] }}",
        @endif
        "addressRegion": "Tucumán",
        "addressCountry": "AR"
    },

    @if(isset($data['operations'][0]['prices'][0]))
    "offers": {
        "@type": "Offer",
        "price": "{{ $data['operations'][0]['prices'][0]['price'] }}",
        "priceCurrency": "{{ $data['operations'][0]['prices'][0]['currency'] }}",
        "availability": "https://schema.org/InStock",
        "seller": {
            "@type": "RealEstateAgent",
            "name": "Inmobiliaria Miguel & Terán Nougués",
            "telephone": "+54-381-6731210",
            "url": "{{ config('site.url') }}"
        }
    },
    @endif
    "floorSize": {
        "@type": "QuantitativeValue",
        @if(isset($data['surface']))
        "value": {{ $data['surface'] }},
        @endif
        "unitCode": "MTK"
    },
    @if(isset($data['suite_amount']))
    "numberOfRooms": {{ $data['suite_amount'] }},
    @endif
    @if(isset($data['bathroom_amount']))
    "numberOfBathroomsTotal": {{ $data['bathroom_amount'] }},
    @endif
    "yearBuilt": @if(isset($data['antiquity']) && $data['antiquity'] > 0) {{ date('Y') - $data['antiquity'] }} @else null @endif
}
</script>
@endsection