@extends('layouts.app')

@section('title', 'Reporte Buses')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-0">
                <i class="fas fa-bus me-2"></i>
                Control de Buses
            </h2>
            <p class="text-muted">Reporte y gestión de buses de tráfico</p>
        </div>
    </div>

    <!-- Card de Filtros -->
    <div class="card mb-3">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Filtros</h5>
        </div>
        <div class="card-body">
            <form id="filtros-form">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="filtro_fecha_desde" class="form-label">Fecha Desde</label>
                        <input type="date" class="form-control" id="filtro_fecha_desde" name="fecha_desde">
                    </div>
                    <div class="col-md-3">
                        <label for="filtro_fecha_hasta" class="form-label">Fecha Hasta</label>
                        <input type="date" class="form-control" id="filtro_fecha_hasta" name="fecha_hasta">
                    </div>
                    <div class="col-md-2">
                        <label for="filtro_vuelo" class="form-label">N° Vuelo</label>
                        <input type="text" class="form-control" id="filtro_vuelo" name="vuelo" placeholder="Ej: 2P101">
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="button" class="btn btn-primary me-2" id="btn-filtrar">
                            <i class="fas fa-search me-1"></i>Filtrar
                        </button>
                        <button type="button" class="btn btn-secondary" id="btn-limpiar">
                            <i class="fas fa-eraser me-1"></i>Limpiar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Card de Tabla -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-table me-2"></i>Registros</h5>
            @can('reportes.buses.exportarExcel')
                <button class="btn btn-success btn-sm" id="btn-exportar">
                    <i class="fas fa-file-excel me-1"></i>Exportar Excel
                </button>
            @endcan
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="tabla-buses" class="table table-hover table-sm" style="width:100%">
                    <thead>
                        <tr>
                            <th>N° Vuelo</th>
                            <th>ETD/ATA</th>
                            <th>Fecha</th>
                            <th>Avión en Toma</th>
                            <th>Cant. Paxs</th>
                            <th>Sol. Bus Trip.</th>
                            <th>N° Bus</th>
                            <th>Sol. Bus Pax</th>
                            <th>Bus 1</th>
                            <th>N° Bus</th>
                            <th>Bus 2</th>
                            <th>N° Bus</th>
                            <th>Bus 3</th>
                            <th>N° Bus</th>
                            <th>Bus 4</th>
                            <th>N° Bus</th>
                            <th>Bus 5</th>
                            <th>N° Bus</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Editar Buses -->
    <div class="modal fade" id="modalEditarBuses" tabindex="-1" aria-labelledby="modalEditarBusesLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditarBusesLabel">Editar Números de Bus</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <strong>Vuelo:</strong> <span id="infoVuelo"></span><br>
                        <strong>Fecha:</strong> <span id="infoFecha"></span>
                    </div>
                    <hr>
                    <form id="formEditarBuses">
                        <div id="listaBuses">
                            <!-- Los buses se cargarán aquí dinámicamente -->
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnGuardarEdicion">Guardar Cambios</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            const tabla = $('#tabla-buses').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("reportes.buses.data") }}',
                    data: function(d) {
                        d.fecha_desde = $('#filtro_fecha_desde').val();
                        d.fecha_hasta = $('#filtro_fecha_hasta').val();
                        d.vuelo = $('#filtro_vuelo').val();
                        d.ruta = $('#filtro_ruta').val();
                    }
                },
                columns: [
                    { data: 'numero_vuelo', name: 'numero_vuelo' },
                    { data: 'hora_salida', name: 'hora_salida' },
                    { data: 'fecha', name: 'fecha' },
                    { data: 'hora_avion_toma', name: 'hora_avion_toma' },
                    { data: 'cant_pasajeros', name: 'cant_pasajeros' },
                    { data: 'bus_tripulacion_hora', name: 'bus_tripulacion_hora' },
                    { data: 'bus_tripulacion_numero', name: 'bus_tripulacion_numero' },
                    { data: 'bus_pasajeros_hora', name: 'bus_pasajeros_hora' },
                    { data: 'bus_1_hora', name: 'bus_1_hora' },
                    { data: 'bus_1_numero', name: 'bus_1_numero' },
                    { data: 'bus_2_hora', name: 'bus_2_hora' },
                    { data: 'bus_2_numero', name: 'bus_2_numero' },
                    { data: 'bus_3_hora', name: 'bus_3_hora' },
                    { data: 'bus_3_numero', name: 'bus_3_numero' },
                    { data: 'bus_4_hora', name: 'bus_4_hora' },
                    { data: 'bus_4_numero', name: 'bus_4_numero' },
                    { data: 'bus_5_hora', name: 'bus_5_hora' },
                    { data: 'bus_5_numero', name: 'bus_5_numero' },
                    { data: 'acciones', name: 'acciones', orderable: false, searchable: false }
                ],
                language: {
                    processing: "Cargando registros, por favor espere...",
                    loadingRecords: "Cargando registros, por favor espere...",
                    lengthMenu: "Mostrar _MENU_ registros por página",
                    info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
                    infoEmpty:      "Mostrando 0 registros",
                    emptyTable: "No se encuentran registros",
                    zeroRecords: "No se encontraron vuelos que coincidan con los filtros",
                    infoFiltered: "(filtrado de _MAX_ registros totales)",
                    search: "Buscar:",
                    paginate: {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                }
            });
            // Evento filtrar
            $('#btn-filtrar').on('click', function() {
                tabla.ajax.reload();
            });
            // Evento limpiar
            $('#btn-limpiar').on('click', function() {
                $('#filtros-form')[0].reset();
                tabla.ajax.reload();
            });
            // Evento abrir modal editar
            $(document).on('click', '.btn-editar-buses', function() {
                const vuelo_id = $(this).data('vuelo-id');
                const ruta_vuelo_id = $(this).data('ruta-vuelo-id');
                const fecha_vuelo = $(this).data('fecha-vuelo');
                const numero_vuelo = $(this).data('numero-vuelo');
                // Mostrar info del vuelo en el modal
                $('#infoVuelo').text(numero_vuelo);
                $('#infoFecha').text(fecha_vuelo);
                $.ajax({
                    url: `/reportes/buses/${vuelo_id}/${ruta_vuelo_id}/${fecha_vuelo}/editar`,
                    method: 'GET',
                    success: function(response) {
                        if(response.success) {
                            cargarBusesEnModal(response.buses);
                            $('#modalEditarBuses').modal('show');
                        }
                    },
                    error: function() {
                        Swal.fire('Error', 'No se pudieron cargar los datos', 'error');
                    }
                });
            });
            function cargarBusesEnModal(buses) {
                let html = '';
                buses.forEach(function(bus) {
                    const nombreBus = obtenerNombreBus(bus.vuelo_estado_gestion.estado_gestion.codigo_gestion);
                    html += `
                        <div class="mb-3 row">
                            <label class="col-sm-5 col-form-label">${nombreBus}</label>
                            <div class="col-sm-7">
                                <input type="text"
                                    class="form-control input-numero-bus"
                                    data-bus-id="${bus.id}"
                                    value="${bus.numero_bus || ''}"
                                    placeholder="Ej: B-001">
                            </div>
                        </div>
                    `;
                });
                $('#listaBuses').html(html);
            }

            function obtenerNombreBus(codigoGestion) {
                const nombres = {
                    'BUS_SL_TP': 'Bus Tripulación',
                    'BUS_1': 'Bus 1',
                    'BUS_2': 'Bus 2',
                    'BUS_3': 'Bus 3',
                    'BUS_4': 'Bus 4',
                    'BUS_5': 'Bus Adicional'
                };
                return nombres[codigoGestion] || codigoGestion;
            }

            // Evento guardar cambios
            $('#btnGuardarEdicion').on('click', function() {
                const busesActualizados = [];
                $('.input-numero-bus').each(function() {
                    busesActualizados.push({
                        id: $(this).data('bus-id'),
                        numero_bus: $(this).val().trim()
                    });
                });
                $('#modalEditarBuses').modal('hide')
                // Confirmar antes de guardar
                setTimeout(function() {
                    Swal.fire({
                        title: '¿Guardar cambios?',
                        text: 'Se actualizarán los números de bus',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Sí, guardar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            guardarCambiosBuses(busesActualizados);
                            $('##tabla-buses').DataTable().ajax.reload(null, false);
                        } else {
                            // Si cancela, volver a abrir el modal
                            $('#modalEditarBuses').modal('show');
                        }
                    });
                }, 300);
            });

            function guardarCambiosBuses(buses) {
                $.ajax({
                    url: '/reportes/buses/actualizar',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        buses: buses
                    },
                    success: function(response) {
                        if(response.success) {
                            Swal.fire('Éxito', response.message, 'success');
                            $('#modalEditarBuses').modal('hide');
                            tabla.ajax.reload(null, false);
                        }
                    },
                    error: function(xhr) {
                        const mensaje = xhr.responseJSON?.message || 'Error al actualizar los buses';
                        Swal.fire('Error', mensaje, 'error');
                    }
                });
            }

            // Evento para exportar a Excel
            $('#btn-exportar').on('click', function() {
                // Obtener los valores de los filtros actuales
                let fechaDesde = $('#filtro_fecha_desde').val();
                let fechaHasta = $('#filtro_fecha_hasta').val();
                let numeroVuelo = $('#filtro_vuelo').val();
                let ruta = $('#ruta').val();
                // Construir la URL con los parámetros
                let url = "{{ route('reportes.buses.exportar') }}";
                let params = [];
                if (fechaDesde) params.push('fecha_desde=' + fechaDesde);
                if (fechaHasta) params.push('fecha_hasta=' + fechaHasta);
                if (numeroVuelo) params.push('vuelo=' + numeroVuelo);
                if (ruta) params.push('ruta=' + ruta);
                if (params.length > 0) {
                    url += '?' + params.join('&');
                }
                // Abrir en nueva ventana para descargar
                window.open(url, '_blank');
            });
        });
    </script>
@endsection