@extends('layouts.app')

@section('content')
    <div class="p-3 p-md-4 p-lg-5">
        <div>
            <table id="tablaVuelos" class="table table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Precio Público</th>
                        <th>Precio Especial</th>
                        <th>Hora</th>
                        <th>Código</th>
                        <th>Incluye</th>
                        <th>Categoría</th>
                        <th>Unidad</th>
                        <th>Rating</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Datos vía AJAX -->
                </tbody>
            </table>
        </div>

        <!-- Modal de Detalles -->
        <div class="modal fade" id="detalleVueloModal" tabindex="-1" aria-labelledby="detalleVueloModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="detalleVueloModalLabel">Detalles del Vuelo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="detalleVueloContent"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="editarVueloBtn">Editar Vuelo</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Bootstrap JS (necesario para el modal) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- DataTables -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <!-- Toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

    <script>
        let dataTable;
        let vuelosData = [];

        $(document).ready(function() {
            dataTable = $('#tablaVuelos').DataTable({
                ajax: {
                    url: "{{ url('/api/todos-los-vuelos') }}",
                    type: 'GET',
                    dataSrc: function(json) {
                        vuelosData = json;
                        return json;
                    },
                    error: function(xhr, status, error) {
                        console.error('Error en AJAX:', error);
                        toastr.error('Error al cargar los datos. Verifica la conexión con la API.');
                    }
                },
                columns: [{
                        data: 'id_vuelo'
                    },
                    {
                        data: 'nombre_vuelo'
                    },
                    {
                        data: 'precio_publico',
                        render: data => (!data || parseFloat(data) === 0) ? '—' : '$' + parseFloat(data)
                            .toLocaleString('en-US', {
                                minimumFractionDigits: 2
                            })
                    },
                    {
                        data: 'precio_especial',
                        render: data => (!data || parseFloat(data) === 0) ? '—' : '$' + parseFloat(data)
                            .toLocaleString('en-US', {
                                minimumFractionDigits: 2
                            })
                    },
                    {
                        data: 'hora_actividad',
                        render: data => data || '—'
                    },
                    {
                        data: 'codigo',
                        render: data => data || '—'
                    },
                    {
                        data: 'json_incluye',
                        render: function(data) {
                            if (!data) return '—';
                            let items = [];
                            if (typeof data === 'string') {
                                try {
                                    items = JSON.parse(data);
                                } catch (e) {
                                    return 'Error';
                                }
                            } else if (Array.isArray(data)) {
                                items = data;
                            }
                            if (!items.length) return '—';
                            return items.map(item => item.titulo || '').filter(t => t).join(', ');
                        }
                    },
                    {
                        data: 'id_categoria',
                        render: function(data) {
                            const categorias = {
                                1: 'Regular',
                                2: 'Premium',
                                3: 'VIP'
                            };
                            return categorias[data] || data || '—';
                        }
                    },
                    {
                        data: 'id_unidad',
                        render: function(data) {
                            // Mapeo opcional de unidades según tus datos
                            const unidades = {
                                1: 'Individual',
                                2: 'Pareja',
                                3: 'Grupo pequeño',
                                22: 'Cumpleaños',
                                26: 'Grupal',
                                27: 'Privado grupal',
                                29: 'Familiar'
                            };
                            return unidades[data] || data || '—';
                        }
                    },
                    {
                        data: 'raiting_global_number',
                        render: data => (data && data != '0.00') ? data : '—'
                    },
                    {
                        data: 'id_estatus',
                        render: data => data == 1 ? 'Activo' : 'Inactivo'
                    },
                    {
                        data: null,
                        render: function(data) {
                            return `<div>
                                <button class="btn btn-sm btn-outline-primary ver-detalle" data-id="${data.id_vuelo}">Ver</button>
                                <button class="btn btn-sm btn-outline-secondary editar-vuelo" data-id="${data.id_vuelo}">Editar</button>
                                <button class="btn btn-sm btn-outline-danger eliminar-vuelo" data-id="${data.id_vuelo}">Eliminar</button>
                            </div>`;
                        },
                        orderable: false
                    }
                ],
                pageLength: 15,
                responsive: true,
                order: [
                    [0, 'desc']
                ],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-MX.json'
                },
                processing: true,
                deferRender: true
            });

            // Mostrar detalles al hacer clic en la fila (excepto botones)
            $('#tablaVuelos tbody').on('click', 'tr', function(e) {
                if ($(e.target).closest('.btn').length) return;
                const data = dataTable.row(this).data();
                if (data) mostrarDetalles(data);
            });
        });

        function mostrarDetalles(vuelo) {
            const contenido = `
                <p><strong>Código:</strong> ${vuelo.codigo || '—'}</p>
                <p><strong>Hora:</strong> ${vuelo.hora_actividad || '—'}</p>
                <p><strong>Categoría:</strong> ${getCategoriaNombre(vuelo.id_categoria)}</p>
                <p><strong>Unidad:</strong> ${vuelo.id_unidad || '—'}</p>
                <p><strong>Ubicación:</strong> ${vuelo.id_ubicacion || '—'}</p>
                <p><strong>Precio Público:</strong> ${formatPrice(vuelo.precio_publico)}</p>
                <p><strong>Precio Especial:</strong> ${formatPrice(vuelo.precio_especial)}</p>
                <p><strong>Descripción:</strong> ${vuelo.descripcion_corta || 'Sin descripción'}</p>
                <p><strong>Incluye:</strong> ${formatIncluye(vuelo.json_incluye)}</p>
                <p><strong>Rating:</strong> ${vuelo.raiting_global_number || '—'}</p>
                <p><strong>Visibilidad Web:</strong> ${vuelo.visibilidad_pagina_web == 1 ? 'Visible' : 'Oculta'}</p>
                <p><strong>Fecha Alta:</strong> ${formatFecha(vuelo.fecha_alta)}</p>
                <p><strong>Última Modificación:</strong> ${formatFecha(vuelo.fecha_mod)}</p>
            `;
            $('#detalleVueloContent').html(contenido);
            $('#editarVueloBtn').off('click').on('click', function() {
                window.location.href = `{{ url('/vuelos/editar') }}/${vuelo.id_vuelo}`;
            });
            new bootstrap.Modal(document.getElementById('detalleVueloModal')).show();
        }

        function getCategoriaNombre(id) {
            const categorias = {
                1: 'Regular',
                2: 'Premium',
                3: 'VIP'
            };
            return categorias[id] || id || '—';
        }

        function formatPrice(price) {
            if (!price || parseFloat(price) === 0) return '—';
            return '$' + parseFloat(price).toLocaleString('en-US', {
                minimumFractionDigits: 2
            });
        }

        function formatIncluye(data) {
            if (!data) return '—';
            let items = [];
            if (typeof data === 'string') {
                try {
                    items = JSON.parse(data);
                } catch (e) {
                    return 'Error';
                }
            } else if (Array.isArray(data)) {
                items = data;
            }
            if (!items.length) return '—';
            return items.map(item => item.titulo || '').filter(t => t).join(', ');
        }

        function formatFecha(fecha) {
            if (!fecha) return '—';
            return new Date(fecha).toLocaleString('es-MX');
        }

        $(document).on('click', '.ver-detalle', function(e) {
            e.stopPropagation();
            const id = $(this).data('id');
            const vuelo = vuelosData.find(v => v.id_vuelo == id);
            if (vuelo) mostrarDetalles(vuelo);
        });

        $(document).on('click', '.editar-vuelo', function(e) {
            e.stopPropagation();
            const id = $(this).data('id');
            window.location.href = `{{ url('/vuelos/editar') }}/${id}`;
        });

        $(document).on('click', '.eliminar-vuelo', function(e) {
            e.stopPropagation();
            const id = $(this).data('id');
            if (confirm('¿Estás seguro de eliminar este vuelo?')) {
                toastr.warning('Función de eliminación en desarrollo');
                // Aquí puedes agregar la llamada AJAX para eliminar
            }
        });
    </script>
@endpush