398 lines
20 KiB
PHP
398 lines
20 KiB
PHP
@extends('template.layout')
|
|
|
|
@push('css')
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
|
|
@endpush
|
|
|
|
@section('content')
|
|
@php
|
|
$vuelo = $datosVuelo['vuelo'] ?? null;
|
|
$categoria = $datosVuelo['categoria'] ?? null;
|
|
$imagenesGaleria = collect($datosVuelo['imagenes'] ?? [])
|
|
->pluck('ruta_imagen_vuelo')
|
|
->toArray();
|
|
$incluye = $datosVuelo['incluye'] ?? [];
|
|
|
|
if (empty($imagenesGaleria)) {
|
|
$imagenesGaleria = ['https://placehold.co/1200x800/2563eb/white?text=Vuelo'];
|
|
}
|
|
|
|
$precioActual = $vuelo['precio_especial'] ?? ($vuelo['precio_publico'] ?? 0);
|
|
$precioOriginal = $vuelo['precio_publico'] ?? 0;
|
|
$tieneDescuento = $precioActual < $precioOriginal;
|
|
$descuentoPorcentaje = $tieneDescuento ? round((1 - $precioActual / $precioOriginal) * 100) : 0;
|
|
@endphp
|
|
|
|
@if ($vuelo)
|
|
<article class="flight-details" data-flight-id="{{ $vuelo['id_vuelo'] }}">
|
|
<div class="container">
|
|
<div class="details-grid">
|
|
|
|
<!-- CONTENIDO PRINCIPAL -->
|
|
<div class="main-card">
|
|
<div class="card-body">
|
|
|
|
<!-- HEADER -->
|
|
<header class="flight-header">
|
|
<div class="flight-title">
|
|
<h1>{{ $vuelo['nombre_vuelo'] }}</h1>
|
|
<p class="subtitle">{{ $vuelo['descripcion_corta'] }}</p>
|
|
@if (!empty($vuelo['highlighted_text_flight_es']))
|
|
<span class="badge"
|
|
style="background: {{ $vuelo['highlighted_background_color_badge_flight_es'] ?? '#2563eb' }}">
|
|
<i class="fas fa-star"></i>
|
|
{{ $vuelo['highlighted_text_flight_es'] }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="price-box">
|
|
@if ($tieneDescuento)
|
|
<div class="price-badge">-{{ $descuentoPorcentaje }}%</div>
|
|
<div class="price-old">${{ number_format($precioOriginal, 0, ',', '.') }}</div>
|
|
@endif
|
|
<div class="price-current">${{ number_format($precioActual, 0, ',', '.') }}</div>
|
|
<div class="price-label">por persona</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- META INFO -->
|
|
<div class="meta-info">
|
|
<div class="meta-item">
|
|
<i class="fas fa-tag" aria-hidden="true"></i>
|
|
<span>{{ $categoria['nombre'] ?? 'Aventura' }}</span>
|
|
</div>
|
|
|
|
<div class="meta-item">
|
|
<i class="far fa-clock" aria-hidden="true"></i>
|
|
<span>{{ \Carbon\Carbon::parse($vuelo['hora_actividad'] ?? '06:30')->format('g:i A') }}</span>
|
|
</div>
|
|
|
|
<div class="rating"
|
|
aria-label="Calificación: {{ number_format($vuelo['raiting_global_number'] ?? 0, 1) }} estrellas">
|
|
<div class="stars">
|
|
@php $rating = round($vuelo['raiting_global_number'] ?? 0); @endphp
|
|
@for ($i = 1; $i <= 5; $i++)
|
|
@if ($i <= $rating)
|
|
<i class="fas fa-star" aria-hidden="true"></i>
|
|
@elseif($i - 0.5 <= $rating)
|
|
<i class="fas fa-star-half-alt" aria-hidden="true"></i>
|
|
@else
|
|
<i class="far fa-star" aria-hidden="true"></i>
|
|
@endif
|
|
@endfor
|
|
</div>
|
|
<span
|
|
class="rating-value">{{ number_format($vuelo['raiting_global_number'] ?? 0, 1) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GALERÍA -->
|
|
<div class="gallery-section">
|
|
<div class="swiper main-swiper">
|
|
<div class="swiper-wrapper">
|
|
@foreach ($imagenesGaleria as $index => $img)
|
|
<div class="swiper-slide">
|
|
<img src="{{ $img }}"
|
|
alt="Imagen {{ $index + 1 }} de {{ $vuelo['nombre_vuelo'] }}"
|
|
loading="{{ $index === 0 ? 'eager' : 'lazy' }}">
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="swiper-button-next" aria-label="Siguiente imagen"></div>
|
|
<div class="swiper-button-prev" aria-label="Imagen anterior"></div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
@if (count($imagenesGaleria) > 1)
|
|
<div class="swiper thumbs-swiper">
|
|
<div class="swiper-wrapper">
|
|
@foreach ($imagenesGaleria as $index => $img)
|
|
<div class="swiper-slide">
|
|
<img src="{{ $img }}" alt="Miniatura {{ $index + 1 }}">
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- DESCRIPCIÓN -->
|
|
@if (!empty($vuelo['descripcion_corta']))
|
|
<section class="section">
|
|
<h2 class="section-title">Descripción</h2>
|
|
<div class="description">
|
|
<p>{{ $vuelo['descripcion_corta'] }}</p>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
@if (!empty($vuelo['descripcion_larga']))
|
|
<section class="section">
|
|
<h2 class="section-title">Detalles del viaje</h2>
|
|
<div class="description">
|
|
<p>{{ $vuelo['descripcion_larga'] }}</p>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- INCLUYE -->
|
|
@if (!empty($incluye))
|
|
<section class="section">
|
|
<h3 class="section-subtitle">
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
¿Qué incluye?
|
|
</h3>
|
|
|
|
<ul class="includes-list">
|
|
@foreach ($incluye as $item)
|
|
<li>
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
<span>{{ $item['titulo_item'] }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</section>
|
|
@endif
|
|
|
|
<!-- NOTA DESTACADA -->
|
|
@if (!empty($vuelo['highlighted_icon_text_flight_es']))
|
|
<div class="note" role="note">
|
|
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
<span>{{ $vuelo['highlighted_icon_text_flight_es'] }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar">
|
|
<!-- FORMULARIO DE COTIZACIÓN -->
|
|
<div class="sidebar-card" hidden>
|
|
<h3 class="card-title">
|
|
<i class="fas fa-calculator" aria-hidden="true"></i>
|
|
Cotizar viaje
|
|
</h3>
|
|
|
|
<form id="cotizacionForm" class="quote-form" method="POST" novalidate>
|
|
@csrf
|
|
|
|
<input type="hidden" name="id_vuelo" value="{{ $vuelo['id_vuelo'] }}">
|
|
<input type="hidden" name="nombre_vuelo" value="{{ $vuelo['nombre_vuelo'] }}">
|
|
<input type="hidden" name="slug" value="{{ $vuelo['enlace_permanente'] }}">
|
|
|
|
<div class="form-group">
|
|
<label for="nombre">
|
|
<i class="fas fa-user" aria-hidden="true"></i>
|
|
Nombre completo *
|
|
</label>
|
|
<input type="text" id="nombre" name="nombre" class="form-control"
|
|
placeholder="Ej: Juan Pérez" required aria-required="true">
|
|
<div class="error-message" id="nombre-error"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">
|
|
<i class="fas fa-envelope" aria-hidden="true"></i>
|
|
Correo electrónico *
|
|
</label>
|
|
<input type="email" id="email" name="email" class="form-control"
|
|
placeholder="ejemplo@correo.com" required aria-required="true">
|
|
<div class="error-message" id="email-error"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="telefono">
|
|
<i class="fas fa-phone" aria-hidden="true"></i>
|
|
Teléfono *
|
|
</label>
|
|
<input type="tel" id="telefono" name="telefono" class="form-control" required
|
|
aria-required="true">
|
|
<div class="error-message" id="telefono-error"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="pasajeros">
|
|
<i class="fas fa-users" aria-hidden="true"></i>
|
|
Número de pasajeros
|
|
</label>
|
|
<select id="pasajeros" name="pasajeros" class="form-control">
|
|
@for ($i = 1; $i <= 10; $i++)
|
|
<option value="{{ $i }}" {{ $i == 1 ? 'selected' : '' }}>
|
|
{{ $i }} {{ $i == 1 ? 'pasajero' : 'pasajeros' }}
|
|
</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="fecha">
|
|
<i class="fas fa-calendar-alt" aria-hidden="true"></i>
|
|
Fecha del viaje *
|
|
</label>
|
|
<input type="text" id="fecha" name="fecha" class="form-control"
|
|
placeholder="Selecciona una fecha" required aria-required="true">
|
|
<div class="error-message" id="fecha-error"></div>
|
|
</div>
|
|
|
|
<button type="submit" id="submitCotizacion" class="btn-primary">
|
|
<span>Solicitar cotización</span>
|
|
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- RESERVA DIRECTA -->
|
|
<div class="sidebar-card">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-ticket-alt active" aria-hidden="true"></i>
|
|
Reserva inmediata
|
|
</h3>
|
|
|
|
<a href="{{ route('reservar.vuelo.ahora', ['slug' => $vuelo['enlace_permanente']]) }}"
|
|
class="btn-secondary">
|
|
<i class="fas fa-calendar-check" aria-hidden="true"></i>
|
|
Reservar ahora
|
|
</a>
|
|
<p class="info-text">Sin comisiones, pago seguro</p>
|
|
</div>
|
|
|
|
<!-- INFORMACIÓN ÚTIL -->
|
|
<div class="sidebar-card">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
Información útil
|
|
</h3>
|
|
|
|
<ul class="info-list">
|
|
<li>
|
|
<i class="fas fa-clock" aria-hidden="true"></i>
|
|
<span>Llegar 30 minutos antes</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-tshirt" aria-hidden="true"></i>
|
|
<span>Ropa y calzado cómodo</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-camera" aria-hidden="true"></i>
|
|
<span>No olvides tu cámara</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-sun" aria-hidden="true"></i>
|
|
<span>Protector solar recomendado</span>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-water" aria-hidden="true"></i>
|
|
<span>Lleva agua suficiente</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- COMPARTIR -->
|
|
<div class="sidebar-card share-card">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-share-alt" aria-hidden="true"></i>
|
|
Compartir
|
|
</h3>
|
|
<div class="share-buttons">
|
|
<button class="share-btn facebook" data-share="facebook"
|
|
aria-label="Compartir en Facebook">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</button>
|
|
<button class="share-btn twitter" data-share="twitter" aria-label="Compartir en Twitter">
|
|
<i class="fab fa-twitter"></i>
|
|
</button>
|
|
<button class="share-btn whatsapp" data-share="whatsapp"
|
|
aria-label="Compartir en WhatsApp">
|
|
<i class="fab fa-whatsapp"></i>
|
|
</button>
|
|
<button class="share-btn copy" data-share="copy" aria-label="Copiar enlace">
|
|
<i class="fas fa-link"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@else
|
|
<div class="container">
|
|
<div class="alert alert-warning" role="alert">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>Vuelo no encontrado</h3>
|
|
<p>Lo sentimos, el vuelo que buscas no está disponible.</p>
|
|
<a href="{{ url('/') }}" class="btn-primary">Volver al inicio</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endsection
|
|
|
|
@push('js')
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.min.js"></script>
|
|
<script src="{{ asset('assets/js/vuelo-seleccionado.js') }}"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Inicializar Swiper
|
|
const mainSwiper = new Swiper('.main-swiper', {
|
|
loop: true,
|
|
spaceBetween: 0,
|
|
slidesPerView: 1,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
});
|
|
|
|
// Inicializar thumbs swiper si existe
|
|
const thumbsSwiperEl = document.querySelector('.thumbs-swiper');
|
|
if (thumbsSwiperEl) {
|
|
const thumbsSwiper = new Swiper('.thumbs-swiper', {
|
|
loop: false,
|
|
spaceBetween: 10,
|
|
slidesPerView: 'auto',
|
|
freeMode: true,
|
|
watchSlidesProgress: true,
|
|
});
|
|
mainSwiper.controller.control = thumbsSwiper;
|
|
}
|
|
|
|
// Inicializar Flatpickr
|
|
flatpickr("#fecha", {
|
|
minDate: "today",
|
|
dateFormat: "Y-m-d",
|
|
altInput: true,
|
|
altFormat: "j F, Y",
|
|
locale: "es",
|
|
disableMobile: true,
|
|
onChange: function(selectedDates, dateStr, instance) {
|
|
const errorDiv = document.getElementById('fecha-error');
|
|
if (errorDiv) {
|
|
errorDiv.classList.remove('show');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|