@extends('tenant_frontend.layout')

@section('pageHeading')
    {{ $propertyContent->title }}
@endsection

@section('metaKeywords')
    @if ($propertyContent)
        {{ $propertyContent->meta_keyword }}
    @endif
@endsection

@section('metaDescription')
    @if ($propertyContent)
        {{ $propertyContent->meta_description }}
    @endif
@endsection

@section('og:tag')
    <meta property="og:title" content="{{ $propertyContent->title }}">
    <meta property="og:image" content="{{ asset('assets/img/property/featureds/' . $propertyContent->featured_image) }}">
    <meta property="og:url" content="{{ route('frontend.property.details', [getParam(), 'slug' => $propertyContent->slug]) }}">
@endsection

@section('content')
<style>
    .vehicle-summary-section{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:30px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.vehicle-spec-card{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
    border:1px solid #ededed;
    border-radius:14px;
    transition:.25s;
    background:#fff;
    height:100%;
}

.vehicle-spec-card:hover{
    transform:translateY(-3px);
    border-color:#FE2E00;
    box-shadow:0 10px 25px rgba(254,46,0,.12);
}

.vehicle-icon{
    width:54px;
    height:54px;
    border-radius:14px;
    background:rgba(254,46,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FE2E00;
    font-size:22px;
    flex-shrink:0;
}

.vehicle-spec-card small{
    display:block;
    color:#8a8a8a;
    font-size:13px;
    margin-bottom:4px;
}

.vehicle-spec-card h6{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#222;
}
</style>
    <div class="product-single pt-100 pb-70 border-top header-next">
        <div class="container">
            <div class="row gx-xl-5">
                <div class="col-lg-9 col-xl-9">
                    <!-- Gallery Slider -->
                    <div class="product-single-gallery mb-40">
                        <div class="slider-navigation">
                            <button type="button" title="Slide prev" class="slider-btn slider-btn-prev">
                                <i class="fal fa-angle-left"></i>
                            </button>
                            <button type="button" title="Slide next" class="slider-btn slider-btn-next">
                                <i class="fal fa-angle-right"></i>
                            </button>
                        </div>
                        <div class="swiper product-single-slider">
                            <div class="swiper-wrapper">
                                @foreach ($sliders as $slider)
                                    <div class="swiper-slide">
                                        <figure class="radius-lg lazy-container ratio ratio-16-11">
                                            <a href="{{ asset('assets/img/property/slider-images/' . $slider->image) }}" class="lightbox-single">
                                                <img class="lazyload" src="{{ asset('assets/images/placeholder.png') }}" data-src="{{ asset('assets/img/property/slider-images/' . $slider->image) }}">
                                            </a>
                                        </figure>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="swiper slider-thumbnails">
                            <div class="swiper-wrapper">
                                @foreach ($sliders as $slider)
                                    <div class="swiper-slide">
                                        <div class="thumbnail-img lazy-container radius-md ratio ratio-16-11">
                                            <img class="lazyload" src="{{ asset('assets/images/placeholder.png') }}" data-src="{{ asset('assets/img/property/slider-images/' . $slider->image) }}">
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Main Vehicle Info Details -->
                    <div class="product-single-details">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="d-flex align-items-center justify-content-between mb-10">
                                    <span class="product-category text-sm"> 
                                        <a href="{{ route('frontend.properties', [getParam(), 'category' => $propertyContent->categoryContent?->slug]) }}">
                                            {{ $propertyContent->categoryContent?->name }}
                                        </a>
                                    </span>
                                </div>
                                <h3 class="product-title">
                                    <a href="javascript:void(0);">{{ $propertyContent->title }}</a>
                                </h3>
                                <div class="product-location icon-start mb-10">
                                    <i class="fal fa-map-marker-alt"></i>
                                    <span>
                                     @if($propertyContent->property->city?->getContent($adminLang->id)?->name)
    {{ $propertyContent->property->city?->getContent($adminLang->id)?->name }}
@endif

@if($propertyContent->property->isStateActive && $propertyContent->property->state?->getContent($adminLang->id)?->name)
    {{ $propertyContent->property->city?->getContent($adminLang->id)?->name ? ', ' : '' }}
    {{ $propertyContent->property->state?->getContent($adminLang->id)?->name }}
@endif

@if($propertyContent->property->isCountryActive && $propertyContent->property->country?->getContent($adminLang->id)?->name)
    {{ ($propertyContent->property->city?->getContent($adminLang->id)?->name || ($propertyContent->property->isStateActive && $propertyContent->property->state?->getContent($adminLang->id)?->name)) ? ', ' : '' }}
    {{ $propertyContent->property->country?->getContent($adminLang->id)?->name }}
@endif
                                    </span>
                                </div>
                                
                                <ul class="product-info p-0 list-unstyled d-flex align-items-center mt-10 mb-30">
                                    <li class="icon-start" data-tooltip="tooltip" data-bs-placement="top" title="{{ $keywords['Kilómetros'] ?? __('Kilómetros') }}">
                                        <i class="fal fa-tachometer-alt"></i>
                                        <span>{{ number_format($propertyContent->km) }} km</span>
                                    </li>
                                    <li class="icon-start" data-tooltip="tooltip" data-bs-placement="top" title="{{ $keywords['Año'] ?? __('Año') }}">
                                        <i class="fal fa-calendar-alt"></i>
                                        <span>{{ $propertyContent->year }}</span>
                                    </li>
                                    <li class="icon-start" data-tooltip="tooltip" data-bs-placement="top" title="{{ $keywords['Combustible'] ?? __('Combustible') }}">
                                        <i class="fal fa-gas-pump"></i>
                                        <span>{{ $propertyContent->area }}</span>
                                    </li>
                                    <li class="icon-start" data-tooltip="tooltip" data-bs-placement="top" title="{{ $keywords['Transmisión'] ?? __('Transmisión') }}">
                                        <i class="fal fa-cog"></i>
                                        <span>{{ $propertyContent->transmision }}</span>
                                    </li>
                                </ul>
                            </div>
                            
                            @php
                                $symbol = $propertyContent->currency_symbol ?? '';
                                $price = $propertyContent->price ? $propertyContent->price : ($keywords['Negotiable'] ?? __('Negotiable'));
                                if (is_numeric($propertyContent->price)) {
                                    $formattedPrice = propertySymbol($propertyContent->price , $symbol);
                                } else {
                                    $formattedPrice = $price;
                                }
                            @endphp
                            
                            <div class="col-md-4 text-md-end">
                                <div class="product-price mb-10">
                                    <span class="new-price d-block">{{ $keywords['Precio'] ?? __('Precio') }}: {{ $formattedPrice }}</span>
                                </div>
                                
                                <ul class="share-link list-unstyled mb-30 d-flex justify-content-md-end gap-3">
                                    <li>
                                        <a class="btn blue" href="#" data-bs-toggle="modal" data-bs-target="#socialMediaModal">
                                            <i class="far fa-share-alt"></i>
                                        </a>
                                        <span class="d-block text-sm">{{ $keywords['Compartir'] ?? __('Compartir') }}</span>
                                    </li>
                                    <li>
    @if (Auth::guard('customer')->check())
        @php
            $user_id = Auth::guard('customer')->user()->id;
            $checkWishList = checkWishList($propertyContent->propertyId, $user_id);
        @endphp
    @else
        @php
            $checkWishList = false;
        @endphp
    @endif

    <a href="{{ $checkWishList
        ? route('frontend.user.property.remove.wishlist', [getParam(), 'property' => $propertyContent->propertyId])
        : route('frontend.user.property.addto.wishlist', [getParam(), 'property' => $propertyContent->propertyId]) }}"
       class="btn red"
       data-tooltip="tooltip"
       data-bs-placement="top"
       title="{{ $checkWishList ? __('Guardado') : __('Agregar a Favoritos') }}">

        <i class="{{ $checkWishList ? 'fas' : 'fal' }} fa-heart"></i>
    </a>

    <span class="d-block text-sm">
        {{ $checkWishList ? __('Guardado') : __('Guardar') }}
    </span>
</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="mb-20"></div>

                        <!-- MAPPED SECTION: Resumen del Vehículo (Using looked-up string variables) -->
               <div class="vehicle-summary-section mb-40">

    <div class="d-flex align-items-center mb-4">
        <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
             style="width:52px;height:52px;background:#FE2E00;">
            <i class="fas fa-car text-white fa-lg"></i>
        </div>

        <div>
            <h3 class="mb-0 fw-bold">{{ $keywords['Resumen del Vehículo'] ?? __('Resumen del Vehículo') }}</h3>
            <small class="text-muted">{{ $keywords['Información principal del vehículo'] ?? __('Información principal del vehículo') }}</small>
        </div>
    </div>

    <div class="row g-3">

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-car-side"></i></div>
                <div>
                    <small>{{ $keywords['Marca'] ?? __('Marca') }}</small>
                    <h6>{{ $brand_name }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-layer-group"></i></div>
                <div>
                    <small>{{ $keywords['Modelo'] ?? __('Modelo') }}</small>
                    <h6>{{ $model_name }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-code-branch"></i></div>
                <div>
                    <small>{{ $keywords['Versión'] ?? __('Versión') }}</small>
                    <h6>{{ $version_name }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-road"></i></div>
                <div>
                    <small>{{ $keywords['Kilómetros'] ?? __('Kilómetros') }}</small>
                    <h6>{{ number_format($propertyContent->km) }} km</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-gas-pump"></i></div>
                <div>
                    <small>{{ $keywords['Combustible'] ?? __('Combustible') }}</small>
                    <h6>{{ $propertyContent->area }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-cogs"></i></div>
                <div>
                    <small>{{ $keywords['Transmisión'] ?? __('Transmisión') }}</small>
                    <h6>{{ $propertyContent->transmision }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-calendar-alt"></i></div>
                <div>
                    <small>{{ $keywords['Año'] ?? __('Año') }}</small>
                    <h6>{{ $propertyContent->year }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-palette"></i></div>
                <div>
                    <small>{{ $keywords['Color'] ?? __('Color') }}</small>
                    <h6>{{ $propertyContent->color }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-engine-warning"></i></div>
                <div>
                    <small>{{ $keywords['Motor'] ?? __('Motor') }}</small>
                    <h6>{{ $propertyContent->engine }}</h6>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="vehicle-spec-card">
                <div class="vehicle-icon"><i class="fas fa-truck-monster"></i></div>
                <div>
                    <small>{{ $keywords['Tracción'] ?? __('Tracción') }}</small>
                    <h6>{{ $propertyContent->traction }}</h6>
                </div>
            </div>
        </div>
        
        @if(!empty($propertyContent->steering))
<div class="col-md-6">
    <div class="vehicle-spec-card">
        <div class="vehicle-icon">
            <i class="fas fa-steering-wheel"></i>
        </div>
        <div>
            <small>{{ $keywords['Dirección'] ?? __('Dirección') }}</small>
            <h6>{{ $propertyContent->steering }}</h6>
        </div>
    </div>
</div>
@endif

    </div>

</div>

                        <!-- Vehicle Description -->
                        <div class="product-desc mb-40">
                            <h3 class="mb-20">{{ $keywords['Descripción del Vehículo'] ?? __('Descripción del Vehículo') }}</h3>
                            <div class="summernote-content">{!! $propertyContent->description !!}</div>
                        </div>

                        @if (!empty(showAd(3)))
                            <div class="text-center mb-3 mt-3">{!! showAd(3) !!}</div>
                        @endif

                        <!-- Features & Accessories Section Elements -->
                        @if (count($propertyContent->propertySpacifications) > 0)
                            <div class="row mb-40">
                                <div class="col-12">
                                    <h3 class="mb-20"> {{ $keywords['Características / Accesorios'] ?? __('Características / Accesorios') }}</h3>
                                </div>
                                @foreach ($propertyContent->propertySpacifications as $specification)
                                    @php $ps_content = $specification->getContent($language->id); @endphp
                                    @if(!empty($ps_content?->label) && !empty($ps_content?->value))
                                        <div class="col-lg-3 col-sm-6 col-md-4 mb-20">
                                            <strong class="mb-1 text-dark d-block">{{ $ps_content?->label }}</strong>
                                            <span>{{ $ps_content?->value }}</span>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @endif

                       

                        <!-- Amenities -->
                        <div class="product-featured mb-40">
                            <h3 class="mb-20">{{ $keywords['Equipamiento'] ?? __('Equipamiento') }}</h3>
                            <ul class="featured-list list-unstyled p-0 m-0 row">
                                @foreach ($amenities as $amenity)
                                    <li class="col-md-4 col-sm-6 mb-2 icon-start">
                                        <i class="{{ $amenity->amenity->icon }}"></i>
                                        <span>{{ $amenity->amenityContent?->name }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        
                         <!-- REPLACEMENT SECTION: Información Técnica Block -->
                      @if(
    $propertyContent->publicar_mercado_libre == 1 &&
    strtolower($propertyContent->meli_status ?? '') == 'active' &&
    count($meliAttributes) > 0
)
                            <div class="vehicle-technical-info mb-40 p-4 border radius-md" style="background-color: #fffdf0; border-color: #ffda73 !important;">
                                <h3 class="mb-20 text-dark"><i class="fal fa-info-circle text-warning"></i> {{ $keywords['Información Técnica'] ?? __('Información Técnica') }}</h3>
                                <div class="row">
                                    @foreach($meliAttributes as $attr)
    <div class="col-md-6 col-lg-4 mb-3">
        <strong class="text-secondary d-block text-sm" style="font-size:0.85rem;">
            {{ $attr->meli_attribute_name ?? ucwords(strtolower(str_replace('_',' ',$attr->meli_attribute_id))) }}
        </strong>

        <span class="text-dark" style="font-weight:500;">
            {{ $attr->value_name ?: $attr->value }}
        </span>
    </div>
@endforeach
                                </div>
                                @if(!empty($propertyContent->meli_permalink))
                                    <!--<div class="col-12 mt-2 border-top pt-3">-->
                                    <!--    <a href="{{ $propertyContent->meli_permalink }}" target="_blank" class="btn btn-outline-primary btn-sm rounded">-->
                                    <!--        <i class="fal fa-external-link-alt"></i> {{ __('Ver en MercadoLibre') }}-->
                                    <!--    </a>-->
                                    <!--    @if(!empty($propertyContent->meli_payment_link))-->
                                    <!--        <a href="{{ $propertyContent->meli_payment_link }}" target="_blank" class="btn btn-success btn-sm rounded ms-2">-->
                                    <!--            <i class="fal fa-credit-card"></i> {{ __('Pagar Reserva en MercadoPago') }}-->
                                    <!--        </a>-->
                                    <!--    @endif-->
                                    <!--</div>-->
                                @endif
                            </div>
                        @endif

                        <!-- Video Section -->
                        @if (!empty($propertyContent->video_url))
                            <div class="product-video mb-40">
                                <h3 class="mb-20"> {{ $keywords['Video'] ?? __('Video del Vehículo') }}</h3>
                                <div class="lazy-container radius-lg ratio ratio-16-11">
                                    <img class="lazyload" src="{{ asset('assets/front/images/placeholder.png') }}" data-src="{{ $propertyContent->video_image ? asset('assets/img/property/video/' . $propertyContent->video_image) : asset('assets/front/images/placeholder.png') }}">
                                    <a href="{{ $propertyContent->video_url }}" class="video-btn youtube-popup p-absolute">
                                        <i class="fas fa-play"></i>
                                    </a>
                                </div>
                            </div>
                        @endif

                        <!-- Engine Image Section -->
                        @if (!empty($propertyContent->floor_planning_image))
                            <div class="product-planning mb-40">
                                <h3 class="mb-20">{{ $keywords['Foto del Motor'] ?? __('Foto del Motor') }}</h3>
                                <div class="lazy-container radius-lg ratio ratio-16-11 border">
                                    <img class="lazyload" src="{{ asset('assets/images/placeholder.png') }}" data-src="{{ asset('assets/img/property/plannings/' . $propertyContent->floor_planning_image) }}">
                                </div>
                            </div>
                        @endif

                        <!-- Map Location Wrapper Component -->
                        @if (!empty($propertyContent->latitude) && !empty($propertyContent->longitude))
                            <div class="product-location mb-40">
                                <h3 class="mb-20">{{ $keywords['Ubicación'] ?? __('Ubicación') }}</h3>
                                <div class="map-wrapper" style="border-radius:10px; overflow:hidden;">
                                    <div id="map"></div>
                                </div>
                            </div>
                        @endif

                        @if (!empty(showAd(3)))
                            <div class="text-center mb-3 mt-3">{!! showAd(3) !!}</div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar Content & Mapped Sales Agent Card Structure -->
                <div class="col-lg-3 col-xl-3">
                    <aside class="sidebar-widget-area mb-10" data-aos="fade-up">
                        @if ((!empty($agent) && $agent->show_contact_form) || (empty($agent) && !empty($user) && $user->show_contact_form))
                            <div class="widget widget-form radius-md mb-30">
                                <div class="user mb-20">
                                    <div class="user-img">
                                        <div class="lazy-container ratio ratio-1-1 rounded-pill">
                                            @if (!empty($agent))
                                                <a href="{{ route('frontend.agent.details', [getParam(), 'agentusername' => $agent->username]) }}">
                                                    <img class="lazyload" src="{{ !empty($agent->image) ? asset($agent->image) : asset('assets/img/blank-user.jpg') }}">
                                                </a>
                                            @else
                                                <a href="{{ route('frontend.tenant.details', [getParam()]) }}">
                                                    <img class="lazyload" src="{{ !empty($user->photo) ? asset($user->photo) : asset('assets/img/blank-user.jpg') }}">
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="user-info">
                                        <h4 class="mb-0">
                                            @if (!empty($agent))
                                                <a href="{{ route('frontend.agent.details', [getParam(), 'agentusername' => $agent->username]) }}">
                                                    {{ !empty($agent->agentInfo?->full_name) ? $agent->agentInfo->full_name : $agent->username }}
                                                </a>
                                            @else
                                                <a href="{{ route('frontend.tenant.details', [getParam()]) }}">
                                                    {{ (!empty($user->first_name) || !empty($user->last_name)) ? ($user->first_name . ' ' . $user->last_name) : $user->username }}
                                                </a>
                                            @endif
                                        </h4>
                                        <a class="d-block text-sm text-muted mt-1" href="tel:@if(!empty($agent) && $agent->show_phone_number){{ $agent->phone }}@elseif(empty($agent) && $user->show_phone_number){{ $user->phone }}@endif">
                                            <i class="fal fa-phone-alt me-1"></i>
                                            @if (!empty($agent) && $agent->show_phone_number)
                                                {{ $agent->phone }}
                                            @elseif (empty($agent) && $user->show_phone_number)
                                                {{ $user->phone }}
                                            @endif
                                        </a>
                                        <a class="d-block text-sm text-muted" href="mailto:@if(!empty($agent) && $agent->show_email_addresss){{ $agent->email }}@elseif(empty($agent) && $user->show_email_addresss){{ $user->email }}@endif">
                                            <i class="fal fa-envelope me-1"></i>
                                            @if (!empty($agent) && $agent->show_email_addresss)
                                                {{ $agent->email }}
                                            @elseif (empty($agent) && $user->show_email_addresss)
                                                {{ $user->email }}
                                            @endif
                                        </a>
                                    </div>
                                </div>

                                <form action="{{ route('frontend.property_contact', getParam()) }}" method="POST">
                                    @csrf
                                    @if (!empty($agent))
                                        <input type="hidden" name="user_id" value="{{ $agent->user_id }}">
                                        <input type="hidden" name="agent_id" value="{{ $agent->id }}">
                                    @else
                                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                                    @endif
                                    <input type="hidden" name="property_id" value="{{ $propertyContent->propertyId }}">
                                    <x-tenant.frontend.agentContact />
                                </form>
                            </div>
                        @endif

                        <!-- Vehicles Similares Block -->
                        @if ($relatedProperty->count() > 0)
                            <div class="widget widget-recent radius-md mb-30 ">
                                <h3 class="title">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#products" aria-expanded="true" aria-controls="products">
                                        {{ $keywords['Vehículos Similares'] ?? __('Vehículos Similares') }}
                                    </button>
                                </h3>
                                <div id="products" class="collapse show">
                                    <div class="accordion-body p-0">
    @foreach ($relatedProperty as $related)
        @php
            $r_symbol = $related->currency_symbol ?? '';
            $r_price = $related->price
                ? $related->price
                : ($keywords['Negociable'] ?? __('Negociable'));

            $formattedRelatedPrice = is_numeric($related->price)
                ? propertySymbol($related->price, $r_symbol)
                : $r_price;

            $city = $related->city?->getContent($related->language_id)?->name;

            $state = ($related->isStateActive && $related->state)
                ? $related->state->getContent($related->language_id)?->name
                : null;

            $country = ($related->isCountryActive && $related->country)
                ? $related->country->getContent($related->language_id)?->name
                : null;

            $location = collect([$city, $state, $country])
                ->filter()
                ->implode(', ');
        @endphp

        <div class="product-default product-inline mt-20">
            <figure class="product-img">
                <a href="{{ !empty($related->slug) ? route('frontend.property.details', [getParam(), 'slug' => $related->slug]) : '#' }}">
                    <img class="lazyload"
                         src="{{ asset('assets/images/placeholder.png') }}"
                         data-src="{{ asset('assets/img/property/featureds/' . $related->featured_image) }}">
                </a>
            </figure>

            <div class="product-details">

                <h6 class="product-title mb-1">
                    <a href="{{ route('frontend.property.details', [getParam(), 'slug' => $related->slug]) }}">
                        {{ $related->title }}
                    </a>
                </h6>

                @if($location)
                    <div class="text-muted small mb-1">
                        <i class="fal fa-map-marker-alt"></i>
                        {{ $location }}
                    </div>
                @endif

                <div class="product-price mb-1">
                    <span class="new-price font-sm">
                        {{ $keywords['Precio'] ?? __('Precio') }}: {{ $formattedRelatedPrice }}
                    </span>
                </div>

                <div class="text-muted small">

                    {{ number_format($related->km) }} km

                    @if($related->year)
                        &nbsp;&bull;&nbsp;
                        {{ $related->year }}
                    @endif

                </div>

                <div class="text-muted small">

                    @if($related->area)
                        {{ $related->area }}
                    @endif

                    @if($related->area && $related->transmision)
                        &nbsp;&bull;&nbsp;
                    @endif

                    {{ $related->transmision }}

                </div>

            </div>
        </div>
    @endforeach
</div>
                                </div>
                            </div>
                        @endif

                        @if (!empty(showAd(2)))
                            <div class="text-center mb-3 mt-3">{!! showAd(2) !!}</div>
                        @endif
                    </aside>
                </div>
            </div>
        </div>
    </div>

    <x-tenant.frontend.social-share />
@endsection

@section('script')
    <script>
        'use strict';
        var google_map_type = "{{ $basicInfo->google_map_type }}";
        var google_map_radius = "{{ $basicInfo->google_map_radius }}";
        var google_map_apiKey = "{{ $basicInfo->google_map_api_key }}";
        var website_title = "{{ $basicInfo->website_title }}";
    </script>

    <script>
        function loadGoogleMap(callback) {
            const script = document.createElement('script');
            script.src = `https://maps.googleapis.com/maps/api/js?key=${google_map_apiKey}&callback=${callback.name}`;
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }

        function initMap() {
            const location = {
                lat: parseFloat("{{ $propertyContent->latitude }}"),
                lng: parseFloat("{{ $propertyContent->longitude }}")
            };

            const map = new google.maps.Map(document.getElementById("map"), {
                center: location,
                zoom: 18,
                mapTypeId: "roadmap",
                zoomControl: true,
                mapTypeControl: true,
                streetViewControl: true,
                rotateControl: true,
                fullscreenControl: true,
            });

            if (google_map_type === 'exact_location') {
                const marker = new google.maps.Marker({
                    position: location,
                    map: map,
                    title: "{{ $keywords['Ubicación del Vehículo'] ?? __('Ubicación del Vehículo') }}",
                    icon: "https://img.icons8.com/color/48/000000/marker.png"
                });
                marker.setAnimation(google.maps.Animation.BOUNCE);

                const infoWindow = new google.maps.InfoWindow({
                    content: `
                        <div style="font-size:14px; padding:10px; max-width:250px; border-radius:8px;">
                            <h4>${website_title}</h4>
                            <i class="fas fa-car" style="color:#FF0000; margin-right:5px;"></i>
                            <strong>{{ $keywords['Ubicación del Vehículo'] ?? __('Ubicación del Vehículo') }}</strong><br>
                            ${@json($propertyContent->address ?? 'Exact Location')}
                        </div>
                    `
                });

                marker.addListener("click", () => infoWindow.open(map, marker));

            } else if (google_map_type === 'approximate_area') {
                let radius = google_map_radius ? parseInt(google_map_radius) : 40;
                let growing = true;

                const circle = new google.maps.Circle({
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35,
                    map,
                    center: location,
                    radius: radius
                });

                setInterval(() => {
                    if (growing) {
                        radius += 1;
                        if (radius >= (parseInt(google_map_radius) + 5)) growing = false;
                    } else {
                        radius -= 1;
                        if (radius <= (parseInt(google_map_radius) - 5)) growing = true;
                    }
                    circle.setRadius(radius);
                }, 100);
            }
        }

        try {
            loadGoogleMap(initMap);
        } catch (e) {
            console.warn("Google Map load blocked or failed:", e);
        }
    </script>
@endsection