@extends('layouts.app')

@section('title', 'Equipaje / Carga')

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h6 class="mb-0">Equipaje / Carga | 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('equipaje-carga.store', ['vuelo_id' => $vuelo->id, 'ruta_vuelo_id' => $ruta_vuelo->id]) }}" method="POST" id="equipajeForm" data-vuelo-id="{{ $vuelo->id }}"
                    data-ruta-id="{{ $ruta_vuelo->id }}">
                    @csrf
                    <div class="row">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered text-center">
                                <thead>
                                    <tr>
                                        <th rowspan="2">Tramo</th>
                                        <th colspan="2">Equipajes</th>
                                        <th colspan="2">Carga</th>
                                    </tr>
                                    <tr>
                                        <th>Cantidad</th>
                                        <th>Kg</th>
                                        <th>Bultos</th>
                                        <th>Kg</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <td><input type="text" class="form-control" name="" value="{{ $vuelo->rutas->first()->destinoLlegada->abreviatura_destino }}" readonly></td>
                                    <td><input type="number" class="form-control" name="cant_equipaje" id="cant_equipaje"></td>
                                    <td><input type="number" class="form-control" name="kilos_equipaje" id="kilos_equipaje"></td>
                                    <td><input type="number" class="form-control" name="cant_carga" id="cant_carga"></td>
                                    <td><input type="number" class="form-control" name="kilos_carga" id="kilos_carga"></td>
                                </tbody>
                            </table>
                        </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>
        $('#equipajeForm').submit(function (event){
            event.preventDefault();
            const vueloId = $(this).data('vuelo-id');
            const rutaId = $(this).data('ruta-id');
            const formData = $(this).serialize();

            $.ajax({
                url: URLs+'/equipaje-carga/' + vueloId + '/' + rutaId,
                type: 'POST',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: response.message || 'Equipaje y carga registrado correctamente',
                        confirmButtonText: 'Aceptar'
                    })
                },
                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