@extends('layouts.app')

@section('title', 'Cartagena Tours & Viajes')

@push('styles')
<style>
    .hero-bg{
        background:linear-gradient(rgba(11,30,60,.55), rgba(11,30,60,.55)),
                   url('{{ asset('images/hero-cartagena.jpg') }}') center center;
        background-size:cover;
    }
</style>
@endpush

@section('content')

{{-- HERO --}}
<section class="hero-bg relative py-16 md:py-20 pb-28 md:pb-32 text-left px-6">
    <div class="max-w-7xl mx-auto text-white">
        <h1 class="text-3xl md:text-4xl font-bold mb-2">Tu Transporte Privado en Cartagena</h1>
        <p class="text-base md:text-lg text-gray-100">Traslados seguros, conductores profesionales y reservas en minutos.</p>
    </div>
</section>

{{-- MOTOR DE RESERVAS --}}
<div class="max-w-7xl mx-auto px-6 -mt-16 md:-mt-20 relative z-10 mb-10"
     x-data="{
        servicio: 'transporte',
        tipoViaje: 'ida',
        origenTexto: '', origenLat: null, origenLng: null, origenSugerencias: [], origenTimer: null,
        destinoTexto: '', destinoLat: null, destinoLng: null, destinoSugerencias: [], destinoTimer: null,

        buscarSugerencias(texto, campo) {
            let timerProp = campo + 'Timer';
            clearTimeout(this[timerProp]);
            if (texto.length < 3) {
                this[campo + 'Sugerencias'] = [];
                return;
            }
            this[timerProp] = setTimeout(() => {
                fetch('{{ route('geo.autocomplete') }}?q=' + encodeURIComponent(texto))
                    .then(r => r.json())
                    .then(data => { this[campo + 'Sugerencias'] = data; });
            }, 400);
        },

        seleccionar(campo, item) {
            this[campo + 'Texto'] = item.nombre;
            this[campo + 'Lat'] = item.lat;
            this[campo + 'Lng'] = item.lng;
            this[campo + 'Sugerencias'] = [];
        }
     }">
    <div class="bg-[#0B1F44] rounded-2xl shadow-2xl p-6 md:p-8">

        <div class="flex gap-8 border-b border-white/10 mb-5 text-sm font-semibold">
            <button type="button" @click="servicio = 'transporte'"
                    :class="servicio === 'transporte' ? 'text-[#F6C343] border-b-2 border-[#F6C343]' : 'text-gray-300'"
                    class="pb-3 flex items-center gap-2">
                🚗 Transporte
            </button>
            <button type="button" @click="servicio = 'porHoras'"
                    :class="servicio === 'porHoras' ? 'text-[#F6C343] border-b-2 border-[#F6C343]' : 'text-gray-300'"
                    class="pb-3 flex items-center gap-2">
                🕐 Por horas
            </button>
            <button type="button" @click="servicio = 'esim'"
                    :class="servicio === 'esim' ? 'text-[#F6C343] border-b-2 border-[#F6C343]' : 'text-gray-300'"
                    class="pb-3 flex items-center gap-2">
                📄 eSIM
            </button>
        </div>

        {{-- ===================== TAB: TRANSPORTE ===================== --}}
        <div x-show="servicio === 'transporte'">

            <div class="flex gap-8 mb-4 text-white text-sm">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="tipo_viaje" value="ida" x-model="tipoViaje" class="accent-[#3b82f6]">
                    Solo ida
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="tipo_viaje" value="ida_vuelta" x-model="tipoViaje" class="accent-[#3b82f6]">
                    Ida y vuelta
                </label>
            </div>

            <form method="POST" action="{{ route('transporte.buscar') }}" class="flex flex-wrap items-end gap-3">
                @csrf
                <input type="hidden" name="tipo_viaje" x-model="tipoViaje">

                <div class="flex-1 min-w-[180px] relative">
                    <label class="block text-xs text-gray-300 mb-1">Origen</label>
                    <input type="text"
                           x-model="origenTexto"
                           @input="buscarSugerencias(origenTexto, 'origen')"
                           placeholder="Aeropuerto, Hotel o Dirección" required autocomplete="off"
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                    <input type="hidden" name="origen" :value="origenTexto">
                    <input type="hidden" name="origen_lat" :value="origenLat">
                    <input type="hidden" name="origen_lng" :value="origenLng">

                    <div x-show="origenSugerencias.length > 0" x-cloak
                         class="absolute z-30 mt-1 w-full bg-white rounded-lg shadow-lg max-h-56 overflow-y-auto">
                        <template x-for="item in origenSugerencias" :key="item.nombre">
                            <button type="button" @click="seleccionar('origen', item)"
                                    class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100 last:border-0">
                                <span x-text="item.nombre"></span>
                            </button>
                        </template>
                    </div>
                </div>

                <div class="flex-1 min-w-[180px] relative">
                    <label class="block text-xs text-gray-300 mb-1">Destino</label>
                    <input type="text"
                           x-model="destinoTexto"
                           @input="buscarSugerencias(destinoTexto, 'destino')"
                           placeholder="¿A dónde vas?" required autocomplete="off"
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                    <input type="hidden" name="destino" :value="destinoTexto">
                    <input type="hidden" name="destino_lat" :value="destinoLat">
                    <input type="hidden" name="destino_lng" :value="destinoLng">

                    <div x-show="destinoSugerencias.length > 0" x-cloak
                         class="absolute z-30 mt-1 w-full bg-white rounded-lg shadow-lg max-h-56 overflow-y-auto">
                        <template x-for="item in destinoSugerencias" :key="item.nombre">
                            <button type="button" @click="seleccionar('destino', item)"
                                    class="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100 last:border-0">
                                <span x-text="item.nombre"></span>
                            </button>
                        </template>
                    </div>
                </div>

                <div class="w-[150px]">
                    <label class="block text-xs text-gray-300 mb-1">Fecha</label>
                    <input type="date" name="fecha_ida" required
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <div x-show="tipoViaje === 'ida_vuelta'" class="w-[150px]">
                    <label class="block text-xs text-gray-300 mb-1">Fecha regreso</label>
                    <input type="date" name="fecha_regreso"
                           :required="tipoViaje === 'ida_vuelta'"
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <div class="w-[130px]">
                    <label class="block text-xs text-gray-300 mb-1">Hora</label>
                    <input type="time" name="hora_ida" required
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <div class="w-[140px]">
                    <label class="block text-xs text-gray-300 mb-1">Pasajeros</label>
                    <select name="pasajeros" required
                            class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                        <option value="">Pasajeros</option>
                        @for ($i = 1; $i <= 40; $i++)
                            <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <button type="submit"
                        class="bg-[#F6C343] hover:bg-[#e0af2e] text-[#0B1F44] font-bold px-8 py-3 rounded-lg text-sm flex items-center gap-2 whitespace-nowrap">
                    🔍 Buscar
                </button>
            </form>
        </div>

        {{-- ===================== TAB: POR HORAS ===================== --}}
        <div x-show="servicio === 'porHoras'">
            <form method="POST" action="#" class="flex flex-wrap items-end gap-3">
                @csrf

                <div class="flex-1 min-w-[220px]">
                    <label class="block text-xs text-gray-300 mb-1">Lugar de recogida</label>
                    <input type="text" name="lugar_recogida" placeholder="Aeropuerto, Hotel o Dirección" required
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <div class="w-[170px]">
                    <label class="block text-xs text-gray-300 mb-1">Duración del recorrido</label>
                    <select name="duracion_horas" required
                            class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                        <option value="">Selecciona</option>
                        @for ($h = 1; $h <= 12; $h++)
                            <option value="{{ $h }}">{{ $h }} hora{{ $h > 1 ? 's' : '' }}</option>
                        @endfor
                    </select>
                </div>

                <div class="w-[150px]">
                    <label class="block text-xs text-gray-300 mb-1">Fecha</label>
                    <input type="date" name="fecha_por_horas" required
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <div class="w-[130px]">
                    <label class="block text-xs text-gray-300 mb-1">Hora</label>
                    <input type="time" name="hora_por_horas" required
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <div class="w-[140px]">
                    <label class="block text-xs text-gray-300 mb-1">Pasajeros</label>
                    <select name="pasajeros_por_horas" required
                            class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                        <option value="">Pasajeros</option>
                        @for ($i = 1; $i <= 40; $i++)
                            <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <button type="submit"
                        class="bg-[#F6C343] hover:bg-[#e0af2e] text-[#0B1F44] font-bold px-8 py-3 rounded-lg text-sm flex items-center gap-2 whitespace-nowrap">
                    🔍 Buscar
                </button>
            </form>
        </div>

        {{-- ===================== TAB: eSIM ===================== --}}
        <div x-show="servicio === 'esim'">
            <form method="POST" action="#" class="flex flex-wrap items-end gap-3">
                @csrf

                <div class="w-[200px]">
                    <label class="block text-xs text-gray-300 mb-1">¿A dónde vas a viajar?</label>
                    <select name="pais_esim" required
                            class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                        <option value="">Selecciona un país</option>
                        <option value="colombia">Colombia</option>
                        <option value="estados_unidos">Estados Unidos</option>
                        <option value="mexico">México</option>
                        <option value="espana">España</option>
                        <option value="otro">Otro</option>
                    </select>
                </div>

                <div class="w-[200px]">
                    <label class="block text-xs text-gray-300 mb-1">Plan de datos</label>
                    <select name="plan_datos" required
                            class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                        <option value="">Selecciona un plan</option>
                        <option value="1gb_5d">1 GB - 5 días</option>
                        <option value="1gb_7d">1 GB - 7 días</option>
                        <option value="2gb_15d">2 GB - 15 días</option>
                        <option value="3gb_30d">3 GB - 30 días</option>
                        <option value="5gb_30d">5 GB - 30 días</option>
                    </select>
                </div>

                <div class="flex-1 min-w-[180px]">
                    <label class="block text-xs text-gray-300 mb-1">Código promocional</label>
                    <input type="text" name="codigo_promocional" placeholder="Opcional"
                           class="w-full px-3 py-3 rounded-lg bg-white/95 text-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-[#F6C343]">
                </div>

                <button type="submit"
                        class="bg-[#F6C343] hover:bg-[#e0af2e] text-[#0B1F44] font-bold px-8 py-3 rounded-lg text-sm flex items-center gap-2 whitespace-nowrap">
                    🔍 Buscar planes
                </button>
            </form>
        </div>
    </div>
</div>

{{-- QUIÉNES SOMOS + TRANSPORTE --}}
@include('partials.transporte-intro')

{{-- BANNER PROMOCIONAL --}}
@include('partials.promo-banner')

{{-- CATEGORÍAS DE TOURS --}}
@include('partials.tour-categories')

{{-- PREGUNTAS FRECUENTES --}}
@include('partials.faq')

@endsection