@extends('layouts.app')

@section('title', 'Editar Tripulación')

@section('content')
    <div class="container">
        <h5>Editar Colaborador para el Vuelo {{ $vuelo->numero_vuelo }}</h5>
        <form action="{{ route('tripulacion_vuelo.update', $vuelo->id) }}" method="POST" id="update-colaborador-form">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-12 col-md-3 mb-3">
                    <label for="nombre">Nombre</label>
                    <input type="text" class="form-control" id="nombre" name="nombre" value="{{ $colaborador->nombre }}" style="background-color: rgba(220, 214, 239, 0.719);">
                    @error('nombre')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-12 col-md-3 mb-3">
                    <label for="ap_paterno">Apellido Paterno</label>
                    <input type="text" class="form-control" id="ap_paterno" name="ap_paterno" value="{{ $colaborador->ap_paterno }}" style="background-color: rgba(220, 214, 239, 0.719);">
                    @error('ap_paterno')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-12 col-md-3 mb-3">
                    <label for="ap_materno">Apellido Materno</label>
                    <input type="text" class="form-control" id="ap_materno" name="ap_materno" value="{{ $colaborador->ap_materno }}" style="background-color: rgba(220, 214, 239, 0.719);">
                    @error('ap_materno')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="col-12 col-md-3 mb-3">
                    <label for="cargo_vuelo">Cargo en Vuelo</label>
                    <input type="text" class="form-control" id="cargo_vuelo" name="cargo_vuelo" value="{{ $colaborador->appcargo->cargo_vuelo }}" style="background-color: rgba(220, 214, 239, 0.719);">
                    @error('cargo_vuelo')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>
                <input type="hidden" name="colaborador_id" value="{{ $colaborador->id }}">
                <input type="hidden" name="fecha_vuelo" value="{{ $fecha_vuelo }}">
            </div>
            <div class="row">
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        <label for="nuevo_colaborador">Seleccionar nuevo colaborador:</label>
                        <select name="nuevo_colaborador_id" id="nuevo_colaborador" class="form-select">
                            <option value="">Seleccionar colaborador...</option>
                            @if($colaboradores_disponibles->isNotEmpty())
                                @foreach($colaboradores_disponibles as $nuevo_colaborador)
                                    <option value="{{ $nuevo_colaborador->id }}">
                                        {{ $nuevo_colaborador->nombre }} {{ $nuevo_colaborador->ap_paterno }} - {{ $nuevo_colaborador->appcargo->cargo_vuelo }}
                                    </option>
                                @endforeach
                            @else
                                <option disabled>No hay colaboradores disponibles</option>
                            @endif
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="d-flex flex-column flex-md-row justify-content-md-end align-items-stretch gap-2">
                    <div class="d-flex flex-column flex-md-row gap-2" style="flex-shrink: 0;">
                        <button type="submit" class="btn btn-primary mt-2 sm" {{ $colaboradores_disponibles->isEmpty() ? 'disabled' : '' }}>Actualizar Colaborador</button>
                        <a href="{{ route('tripulacion_vuelo.index') }}" class="btn btn-warning mt-2 sm">Cancelar</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script>
        $.ajaxSetup({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
        });
        $(document).on('submit', '#update-colaborador-form', function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();

            var form = $(this);
            var submitBtn = form.find('button[type="submit"]');

            // Evitar doble envío
            if (submitBtn.prop('disabled')) {
                return false;
            }

            submitBtn.prop('disabled', true);

            $.ajax({
                url: form.attr('action'),
                type: 'PUT',
                data: form.serialize(),
                dataType: 'json',
                success: function (response) {
                    Swal.fire({
                        title: '¡Éxito!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(function () {
                        window.location.href = URLs + '/tripulacion_vuelo?tripulacion_actualizada_id=' + response.tripulacion_actualizada_id;
                    });
                },
                error: function (xhr, status, error) {
                    console.error('Error:', xhr.responseText);
                    let errorMessage = 'Hubo un problema al actualizar el colaborador.';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    Swal.fire({
                        title: 'Error',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    submitBtn.prop('disabled', false);
                }
            });

            return false;
        });
    </script>
@endsection