@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