@extends('layouts.app')

@section('title', 'Pasajeros Pre-Embarque')

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h6 class="mb-0">Pasajeros Pre-Tráfico | Vuelo SRU{{ $vuelo->numero_vuelo }} | {{ $vuelo->rutas->first()->destinoPartida->abreviatura_destino}} -> {{ $vuelo->rutas->first()->destinoLlegada->abreviatura_destino }}</h6>
        </div>
        <div class="card-body">
            <div class="container">
                <form action="{{ route('control-preembarque.store', ['vuelo_id' => $vuelo->id, 'ruta_vuelo_id' => $ruta_vuelo->id]) }}" method="POST" id="preEmbarqueForm" data-vuelo-id="{{ $vuelo->id }}"
                    data-ruta-id="{{ $ruta_vuelo->id }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Tramo</label>
                                <input type="text" class="form-control" name="" value="{{ $vuelo->rutas->first()->destinoLlegada->abreviatura_destino }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>ADT</label>
                                <input type="number" class="form-control" name="cant_adulto" id="cant_adulto">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>CNN</label>
                                <input type="number" class="form-control" name="cant_nino" id="cant_nino">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>INF</label>
                                <input type="number" class="form-control" name="cant_infante" id="cant_infante">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>TOTAL</label>
                                <input type="number" class="form-control" name="cant_total" id="cant_total" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <button type="submit" class="btn btn-danger sm" id="submitForm">Guardar</button>
                                <a href="{{ route('control_vuelos.index') }}" class="btn btn-warning sm">Regresar</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('input', function () {
            const adulto  = parseInt(document.getElementById('cant_adulto').value) || 0;
            const nino    = parseInt(document.getElementById('cant_nino').value) || 0;
            const infante = parseInt(document.getElementById('cant_infante').value) || 0;
            const total   = adulto + nino + infante;
            document.getElementById('cant_total').value = total;
        });

        // Evento para enviar el formulario de pre-embarque
        $('#preEmbarqueForm').submit(function (event){
            event.preventDefault();
            const vueloId = $(this).data('vuelo-id');
            const rutaId = $(this).data('ruta-id');
            const formData = $(this).serialize();

            $.ajax({
                url: URLs+'/control-preembarque/' + vueloId + '/' + rutaId,
                type: 'POST',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message || 'Cantidad de Pre-embarque registrado correctamente',
                        confirmButtonText: 'Aceptar'
                    }).then(function() {
                        window.location.href = URLs + '/control_vuelos';
                    });
                },
                error: function (xhr, status, error) {
                    // Maneja los errores
                    const errors = xhr.responseJSON?.errors;
                    let errorMessage = 'Ocurrió un error al guardar los datos.';
                    if (errors) {
                        errorMessage = '';
                        for (const key in errors) {
                            errorMessage += `${errors[key][0]}\n`;
                        }
                    }
                    Swal.fire({
                        icon: 'error',
                        title: '¡Error!',
                        text: errorMessage,
                        confirmButtonText: 'Aceptar'
                    });
                }
            });
        });
    </script>
@endsection