@extends('layouts.app')


@section('title', $tour->titulo . ' | Cartagena Tours & Viajes')


@section('content')


{{-- BREADCRUMB --}}
<div class="max-w-7xl mx-auto px-6 py-4 text-sm text-gray-500">
    <a href="{{ route('home') }}" class="hover:text-purple-700">Inicio</a> &gt;
    <a href="{{ route('tours.index') }}" class="hover:text-purple-700">Tours</a> &gt;
    <a href="#" class="hover:text-purple-700">{{ $tour->categoria }}</a> &gt;
    <span class="text-gray-800">{{ $tour->titulo }}</span>
</div>


<div class="max-w-7xl mx-auto px-6 pb-16 grid grid-cols-1 lg:grid-cols-3 gap-8 items-start"
     x-data="{
        adultos: 1,
        ninos: 0,
        precioAdulto: {{ $tour->prices->firstWhere('tipo_viajero','adulto')->precio ?? 0 }},
        precioNino: {{ $tour->prices->firstWhere('tipo_viajero','nino')->precio ?? 0 }},
        get subtotalAdultos() { return this.adultos * this.precioAdulto },
        get subtotalNinos() { return this.ninos * this.precioNino },
        get total() { return this.subtotalAdultos + this.subtotalNinos },
     }">


    {{-- COLUMNA IZQUIERDA --}}
    <div class="lg:col-span-2" x-data="{ tab: 'descripcion', activa: 0 }">


        {{-- GALERÍA --}}
        <div class="relative rounded-xl overflow-hidden">
            @if($tour->badge)
                <span class="absolute top-3 left-3 z-10 bg-purple-700 text-white text-xs font-semibold px-3 py-1 rounded-full">
                    ⭐ {{ $tour->badge }}
                </span>
            @endif


            <button class="absolute top-3 right-16 z-10 w-9 h-9 rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow">🔍</button>
            <button class="absolute top-3 right-3 z-10 w-9 h-9 rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow">❤️</button>


            @foreach($tour->images as $i => $img)
                <div x-show="activa === {{ $i }}" class="relative">
                    <img src="{{ $img->url }}" class="w-full h-[420px] object-cover">
                    @if($img->es_video)
                        <button class="absolute inset-0 flex items-center justify-center">
                            <span class="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center text-2xl">▶</span>
                        </button>
                    @endif
                </div>
            @endforeach
        </div>


        <div class="flex gap-3 mt-3">
            @foreach($tour->images as $i => $img)
                <button @click="activa = {{ $i }}"
                        :class="activa === {{ $i }} ? 'ring-2 ring-purple-700' : ''"
                        class="rounded-lg overflow-hidden w-24 h-16 flex-shrink-0 relative">
                    <img src="{{ $img->url }}" class="w-full h-full object-cover">
                    @if($img->es_video)
                        <span class="absolute inset-0 flex items-center justify-center bg-black/20 text-white text-xs">▶</span>
                    @endif
                </button>
            @endforeach
        </div>


        {{-- BADGES DE CONFIANZA --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
            <div class="flex items-center gap-3 bg-white border border-gray-200 rounded-xl p-4">
                <span class="text-purple-700 text-xl">🛡️</span>
                <div>
                    <p class="font-semibold text-sm">Cancelación gratis</p>
                    <p class="text-xs text-gray-500">Hasta 24 horas antes</p>
                </div>
            </div>
            <div class="flex items-center gap-3 bg-white border border-gray-200 rounded-xl p-4">
                <span class="text-purple-700 text-xl">🎧</span>
                <div>
                    <p class="font-semibold text-sm">Atención al cliente 24/7</p>
                    <p class="text-xs text-gray-500">Estamos para ayudarte</p>
                </div>
            </div>
            <div class="flex items-center gap-3 bg-white border border-gray-200 rounded-xl p-4">
                <span class="text-purple-700 text-xl">⭐</span>
                <div>
                    <p class="font-semibold text-sm">Pago 100% seguro</p>
                    <p class="text-xs text-gray-500">Sin cargos ocultos</p>
                </div>
            </div>
        </div>


        {{-- TÍTULO --}}
        <p class="flex items-center gap-1 text-purple-700 text-sm mt-6">📍 {{ $tour->ubicacion }}</p>
        <h1 class="text-3xl font-extrabold mt-1">{{ $tour->titulo }}</h1>
        <p class="flex items-center gap-2 text-sm mt-2">
            <span class="text-yellow-400">★★★★★</span>
            <span class="font-semibold">{{ $tour->rating }}</span>
            <span class="text-gray-500">({{ $tour->total_resenas }} reseñas)</span>
            <span class="text-gray-400">|</span>
            <span class="text-gray-500">{{ number_format($tour->total_viajeros) }} viajeros</span>
        </p>


        <p class="text-gray-600 mt-4 leading-relaxed">{{ $tour->descripcion }}</p>


        {{-- INFO RÁPIDA --}}
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-6">
            <div><p class="text-xs text-gray-500">⏱ Duración</p><p class="font-semibold text-sm">{{ $tour->duracion }}</p></div>
            <div><p class="text-xs text-gray-500">🌴 Destino</p><p class="font-semibold text-sm">{{ $tour->destino }}</p></div>
            <div><p class="text-xs text-gray-500">🍽 Comida</p><p class="font-semibold text-sm">{{ $tour->comida }}</p></div>
            <div><p class="text-xs text-gray-500">🧑‍🦱 Guía</p><p class="font-semibold text-sm">{{ $tour->idioma_guia }}</p></div>
            <div><p class="text-xs text-gray-500">🚐 Transporte</p><p class="font-semibold text-sm">{{ $tour->transporte_incluido ? 'Ida y vuelta' : 'No incluido' }}</p></div>
        </div>


        {{-- TABS --}}
        <div class="border-b border-gray-200 mt-8 flex gap-6 text-sm font-medium text-gray-500 overflow-x-auto">
            <button @click="tab='descripcion'" :class="tab==='descripcion' ? 'text-purple-700 border-b-2 border-purple-700' : ''" class="pb-3 whitespace-nowrap">Descripción</button>
            <button @click="tab='incluye'" :class="tab==='incluye' ? 'text-purple-700 border-b-2 border-purple-700' : ''" class="pb-3 whitespace-nowrap">Incluye</button>
            <button @click="tab='no_incluye'" :class="tab==='no_incluye' ? 'text-purple-700 border-b-2 border-purple-700' : ''" class="pb-3 whitespace-nowrap">No incluye</button>
            <button @click="tab='itinerario'" :class="tab==='itinerario' ? 'text-purple-700 border-b-2 border-purple-700' : ''" class="pb-3 whitespace-nowrap">Itinerario</button>
            <button @click="tab='recomendaciones'" :class="tab==='recomendaciones' ? 'text-purple-700 border-b-2 border-purple-700' : ''" class="pb-3 whitespace-nowrap">Recomendaciones</button>
            <button @click="tab='resenas'" :class="tab==='resenas' ? 'text-purple-700 border-b-2 border-purple-700' : ''" class="pb-3 whitespace-nowrap">Reseñas ({{ $tour->total_resenas }})</button>
        </div>


        <div class="py-6">
            <div x-show="tab==='descripcion'" class="space-y-2 text-gray-700">
                @foreach($tour->incluye ?? [] as $item)
                    <p class="flex items-center gap-2">✅ {{ $item }}</p>
                @endforeach
            </div>


            <div x-show="tab==='incluye'" class="space-y-2 text-gray-700">
                @foreach($tour->incluye ?? [] as $item)
                    <p class="flex items-center gap-2">✅ {{ $item }}</p>
                @endforeach
            </div>


            <div x-show="tab==='no_incluye'" class="space-y-2 text-gray-700">
                @foreach($tour->no_incluye ?? [] as $item)
                    <p class="flex items-center gap-2">❌ {{ $item }}</p>
                @endforeach
            </div>


            <div x-show="tab==='itinerario'" class="space-y-2 text-gray-700">
                @foreach($tour->itinerario ?? [] as $item)
                    <p class="flex items-center gap-2">🕐 {{ $item }}</p>
                @endforeach
            </div>


            <div x-show="tab==='recomendaciones'" class="space-y-2 text-gray-700">
                @foreach($tour->recomendaciones ?? [] as $item)
                    <p class="flex items-center gap-2">💡 {{ $item }}</p>
                @endforeach
            </div>


            <div x-show="tab==='resenas'" class="text-gray-500">
                Aún no hay módulo de reseñas conectado — se integrará con CRM Engine.
            </div>
        </div>


        {{-- AYUDA --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="bg-white border border-gray-200 rounded-xl p-4">
                <p class="font-semibold text-sm">¿Tienes dudas?</p>
                <p class="text-xs text-gray-500 mb-3">Escríbenos por WhatsApp y te ayudamos</p>
                <a href="#" class="inline-block border border-green-500 text-green-600 text-xs font-semibold px-3 py-1.5 rounded-lg">💬 Escríbenos por WhatsApp</a>
            </div>
            <div class="bg-white border border-gray-200 rounded-xl p-4">
                <p class="font-semibold text-sm">Mejor precio garantizado</p>
                <p class="text-xs text-gray-500">Sin cargos adicionales</p>
            </div>
            <div class="bg-white border border-gray-200 rounded-xl p-4">
                <p class="font-semibold text-sm">Guías expertos</p>
                <p class="text-xs text-gray-500">Bilingües certificados</p>
            </div>
        </div>


        <div class="bg-orange-50 border border-orange-200 text-orange-700 text-xs rounded-xl p-4 mt-6">
            🛡️ Todo nuestro contenido visual está protegido con marca de agua. La opacidad y visibilidad se configuran desde el panel administrativo.
        </div>
    </div>


    {{-- COLUMNA DERECHA — WIDGET DE RESERVA --}}
    <div class="lg:col-span-1 self-start">
        <div class="bg-white border border-gray-200 rounded-2xl p-6 sticky top-28">


            <p class="text-sm text-gray-500">Desde</p>
            <p class="text-2xl font-extrabold text-purple-700">
                $ {{ number_format($tour->precio_minimo, 0, ',', '.') }} - $ {{ number_format($tour->precio_maximo, 0, ',', '.') }}
                <span class="text-sm font-semibold text-gray-500">COP</span>
            </p>
            <p class="text-xs text-gray-500 mb-4">Por persona</p>


            <p class="font-semibold text-sm mb-2">1. Selecciona tus viajeros</p>


            <div class="flex justify-between items-center mb-3">
                <div class="flex items-center gap-2 text-sm">
                    <span>🧑‍🤝‍🧑</span>
                    <div>
                        <p class="font-medium">Adultos</p>
                        <p class="text-xs text-gray-500">(10 a 99 años)</p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" @click="adultos = Math.max(1, adultos - 1)" class="w-7 h-7 border rounded-md">-</button>
                    <span x-text="adultos" class="w-4 text-center"></span>
                    <button type="button" @click="adultos++" class="w-7 h-7 border rounded-md">+</button>
                </div>
                <span class="text-sm font-semibold" x-text="'$ ' + subtotalAdultos.toLocaleString('es-CO')"></span>
            </div>


            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center gap-2 text-sm">
                    <span>🧒</span>
                    <div>
                        <p class="font-medium">Niños</p>
                        <p class="text-xs text-gray-500">(5 a 9 años)</p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" @click="ninos = Math.max(0, ninos - 1)" class="w-7 h-7 border rounded-md">-</button>
                    <span x-text="ninos" class="w-4 text-center"></span>
                    <button type="button" @click="ninos++" class="w-7 h-7 border rounded-md">+</button>
                </div>
                <span class="text-sm font-semibold" x-text="'$ ' + subtotalNinos.toLocaleString('es-CO')"></span>
            </div>


            <p class="font-semibold text-sm mb-2">2. Fecha del tour</p>
            <input type="date" name="fecha_tour" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-4">


            <p class="font-semibold text-sm mb-2">3. Información adicional (opcional)</p>
            <textarea name="info_adicional" rows="2" placeholder="¿Alguna solicitud especial? (Alergias, celebración, preferencias, etc.)"
                      class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-4"></textarea>


            <p class="font-semibold text-sm mb-2">4. Información de contacto</p>
            <input type="text" name="nombre" placeholder="Ej: Juan Pérez" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3">
            <input type="email" name="correo" placeholder="Ej: juanperez@email.com" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3">


            <div class="grid grid-cols-2 gap-3 mb-3">
                <input type="text" name="telefono" placeholder="Ej: 300 123 4567" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                <select name="pais" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <option>Selecciona tu país</option>
                    <option>Colombia</option>
                    <option>Estados Unidos</option>
                    <option>México</option>
                </select>
            </div>


            <label class="flex items-start gap-2 text-xs text-gray-600 mb-4">
                <input type="checkbox" class="mt-0.5">
                Acepto los <a href="#" class="text-purple-700 underline">Términos y Condiciones</a> y la <a href="#" class="text-purple-700 underline">Política de Privacidad</a>.
            </label>


            <div class="bg-gray-50 rounded-lg p-4 text-sm space-y-1 mb-4">
                <p class="font-semibold mb-2">Resumen de tu reserva</p>
                <div class="flex justify-between"><span>Adultos (<span x-text="adultos"></span> x $<span x-text="precioAdulto.toLocaleString('es-CO')"></span>)</span><span x-text="'$' + subtotalAdultos.toLocaleString('es-CO')"></span></div>
                <div class="flex justify-between"><span>Niños (<span x-text="ninos"></span> x $<span x-text="precioNino.toLocaleString('es-CO')"></span>)</span><span x-text="'$' + subtotalNinos.toLocaleString('es-CO')"></span></div>
                <div class="border-t border-gray-200 my-2"></div>
                <div class="flex justify-between font-semibold"><span>Subtotal</span><span x-text="'$' + total.toLocaleString('es-CO')"></span></div>
            </div>


            <div class="flex justify-between items-center bg-purple-50 rounded-lg p-3 mb-4">
                <span class="text-sm font-semibold text-purple-700">Total a pagar</span>
                <span class="text-lg font-extrabold text-purple-700"><span x-text="'$' + total.toLocaleString('es-CO')"></span> COP</span>
            </div>


            <ul class="text-xs text-gray-600 space-y-1 mb-4">
                <li>✅ Pago 100% seguro</li>
                <li>✅ Reserva rápida y confirmación inmediata</li>
                <li>✅ Cancelación gratis hasta 24 horas antes del tour</li>
            </ul>


            <button type="button" class="w-full bg-purple-700 hover:bg-purple-800 text-white font-semibold py-3 rounded-xl">
                Reservar ahora
            </button>


            <p class="text-xs text-gray-500 text-center mt-2">🔒 Tus datos están protegidos con encriptación SSL</p>


            <p class="text-xs text-gray-500 mt-4 mb-2">Aceptamos</p>
            <div class="flex gap-2 text-xs text-gray-400">
                <span>VISA</span><span>Mastercard</span><span>AMEX</span><span>Diners</span><span>PSE</span>
            </div>
        </div>
    </div>
</div>


@endsection