@extends('layouts.app')

@section('title', ' Registrar Bitácora')

@section('content')
    <div class="card">
        <div class="card-header text-center">
            <h5>FLIGHT TECNICAL REPORT</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped text-center">
                    <tbody>
                        <td>LOG PAGE: </td>
                        <td>MODEL: {{ $vuelo->aeronave->nombre }}</td>
                        <td>REG N°: {{ $vuelo->aeronave->numero_cola }}</td>
                        <td>FLIGHT N°: {{ $vuelo->numero_vuelo }}</td>
                        <td>DATE: {{ \Carbon\Carbon::parse($fechaVuelo)->format('d-m-Y') ?? 'No disponible' }}</td>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <form id="bitacoraForm" action="{{ route('bitacora-vuelo.store') }}" method="POST">
        @csrf
        <div class="row mt-2">
            <div class="col-sm">
                <!-- Seccion OPERATION DATA -->
                <div class="card">
                    <div class="card-header text-center">
                        <h5>OPERATIONS DATA</h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center" >
                            <input type="hidden" name="vuelo_id" value="{{ $vuelo->id }}">
                            <input type="hidden" name="fecha_vuelo" value="{{ $fechaVuelo }}">
                            <input type="hidden" name="ruta_vuelo_id" value="{{ $ruta->id }}">
                            <div class="col-md-2">
                                <label for="punto_partida">FROM</label>
                                <input class="form-control" type="text" id="punto_partida" name="punto_partida" maxlength="5" size="5">
                            </div>
                            <div class="col-md-2">
                                <label for="punto_llegada">TO</label>
                                <input class="form-control" type="text"  value="" id="punto_llegada" name="punto_llegada" maxlength="5" size="5">
                            </div>
                            <div class="col-md-2">
                                <label for="pax">PAX QTY</label>
                                <input class="form-control" type="number"  value="" id="pax" name="pax" oninput="this.value = this.value.slice(0, 3)">
                            </div>
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 class="card-title text-center">DEPARTURE</h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <label for="hora_block_partida">BLOCK</label>
                                            <input class="form-control" type="text" id="hora_block_partida" name="hora_block_partida">
                                        </div>
                                        <div class="col-6">
                                            <label for="hora_vuelo_partida">FLIGHT</label>
                                            <input class="form-control" type="text"  value="" id="hora_vuelo_partida" name="hora_vuelo_partida">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                    <h5 class="card-title text-center">ARRIVAL</h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <label for="hora_vuelo_llegada">FLIGHT</label>
                                            <input class="form-control" type="text" id="hora_vuelo_llegada" name="hora_vuelo_llegada">
                                        </div>
                                        <div class="col-6">
                                            <label for="hora_block_llegada">BLOCK</label>
                                            <input class="form-control" type="text"  value="" id="hora_block_llegada" name="hora_block_llegada">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title text-center">TIMES</h5>
                                    <div class="row">
                                        <div class="col">
                                            <label for="tiempo_noche">NIGHT</label>
                                            <input class="form-control" type="text"  value="" id="tiempo_noche" name="tiempo_noche">
                                        </div>
                                        <div class="col">
                                            <label for="nivel">LEVEL</label>
                                            <input class="form-control" type="number"  value="" id="nivel" name="nivel">
                                        </div>
                                        <div class="col">
                                            <label for="operaciones_to">TO</label>
                                            <input class="form-control" type="text"  value="" id="operaciones_to" name="operaciones_to">
                                        </div>
                                        <div class="col">
                                            <label for="operaciones_ld">LD</label>
                                            <input class="form-control" type="text"  value="" id="operaciones_ld" name="operaciones_ld">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="row">
                                    <div class="col">
                                        <label for="operaciones_tow">T.O.W</label>
                                        <input class="form-control" type="text"  value="" id="operaciones_tow" name="operaciones_tow">
                                    </div>
                                    <div class="col">
                                        <label for="aterrizaje">LANDING</label>
                                        <input class="form-control" type="text"  value="" id="aterrizaje" name="aterrizaje">
                                    </div>
                                    <div class="col">
                                        <label for="combustible_viaje">TRIP FUEL</label>
                                        <input class="form-control" type="text"  value="" id="combustible_viaje" name="combustible_viaje">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Seccion Services -->
                <div class="card mt-2">
                    <div class="card-body">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="text-center">SERVICES</h5>
                            <button class="btn btn-link text-decoration-none p-0 expand-icon" type="button"  data-bs-toggle="collapse" data-bs-target="#collapseService" aria-expanded="true" aria-controls="collapseService">
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse show" id="collapseService">
                            <div class="row">
                                <div class="col">
                                    <label for="estacion">STA</label>
                                    <input class="form-control" type="text"  value="" id="estacion" name="estacion">
                                </div>
                                <div class="col-md-4">
                                    <label for="encargado_servicio">BY</label>
                                    <input class="form-control" type="text"  value="" id="encargado_servicio" name="encargado_servicio">
                                </div>
                                <div class="col">
                                    <label for="aceite_uno">ENG1</label>
                                    <input class="form-control" type="number"  value="" id="aceite_uno" name="aceite_uno">
                                </div>
                                <div class="col">
                                    <label for="aceite_dos">ENG2</label>
                                    <input class="form-control" type="number"  value="" id="aceite_dos" name="aceite_dos">
                                </div>
                                <div class="col">
                                    <label for="generador_uno">GD ENG1</label>
                                    <input class="form-control" type="number"  value="" id="generador_uno" name="generador_uno">
                                </div>
                                <div class="col">
                                    <label for="generador_dos">GD ENG2</label>
                                    <input class="form-control" type="number"  value="" id="generador_dos" name="generador_dos">
                                </div>
                                <div class="col">
                                    <label for="aceite_apu">APU</label>
                                    <input class="form-control" type="number"  value="" id="aceite_apu" name="aceite_apu">
                                </div>
                                <div class="col">
                                    <label for="servicio_skyd">KY</label>
                                    <input class="form-control" type="number"  value="" id="servicio_skyd" name="servicio_skyd">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Seccion FLIGHT REFUEL Remarks -->
                <div class="card mt-2">
                    <div class="card-body">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="text-center">FLIGHT REFUEL REMARKS</h5>
                            <button class="btn btn-link text-decoration-none p-0 expand-icon" type="button"  data-bs-toggle="collapse" data-bs-target="#collapseRefuel" aria-expanded="true" aria-controls="collapseRefuel">
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse show" id="collapseRefuel">
                            <div class="row">
                                <div class="col-md-2">
                                    <label for="numero_voucher">VOUCHER</label>
                                    <input class="form-control" type="text"  value="" id="numero_voucher" name="numero_voucher">
                                </div>
                                <div class="col">
                                    <label for="ultimo_remanente">LAST REMMAIN</label>
                                    <input class="form-control" type="text"  value="" id="ultimo_remanente" name="ultimo_remanente">
                                </div>
                                <div class="col">
                                    <label for="cantidad_galones">QTY(Gls)</label>
                                    <input class="form-control" type="text"  value="" id="cantidad_galones" name="cantidad_galones">
                                </div>
                                <div class="col">
                                    <label for="total_combustible">TOTAL FUEL</label>
                                    <input class="form-control" type="text"  value="" id="total_combustible" name="total_combustible">
                                </div>
                                <div class="col">
                                    <label for="estacion_recarga">STA</label>
                                    <input class="form-control" type="text"  value="" id="estacion_recarga" name="estacion_recarga">
                                </div>
                                <div class="col">
                                    <label for="encargado_recarga">REFUEL BY</label>
                                    <input class="form-control" type="text"  value="" id="encargado_recarga" name="encargado_recarga">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Seccion PILOT REPORTS -->
                <div class="card mt-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="text-center">PILOT REPORTS / MAINTENANCE REPORTS</h5>
                                <button class="btn btn-link text-decoration-none p-0 expand-icon" type="button"  data-bs-toggle="collapse" data-bs-target="#collapseReports" aria-expanded="true" aria-controls="collapseReports">
                                    <i class="fa-solid fa-chevron-down"></i>
                                </button>
                            </div>
                            <div class="collapse show" id="collapseReports">
                                <div class="row">
                                    <div class="col">
                                        <label for="numero_reporte">N°</label>
                                        <input class="form-control" type="text"  value="" id="numero_reporte" name="numero_reporte">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="descripcion_reporte">REPORT</label>
                                        <input class="form-control" type="text"  value="" id="descripcion_reporte" name="descripcion_reporte">
                                    </div>
                                    <div class="col">
                                        <label for="encargado_reporte">BY</label>
                                        <input class="form-control" type="text"  value="" id="encargado_reporte" name="encargado_reporte">
                                    </div>
                                    <div class="col">
                                        <label for="numero_licencia">N° LIC</label>
                                        <input class="form-control" type="text"  value="" id="numero_licencia" name="numero_licencia">
                                    </div>
                                    <div class="col">
                                        <label for="firma_reporte">SIGN</label>
                                        <input class="form-control" type="text"  value="" id="firma_reporte" name="firma_reporte">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Seccion ACTION TAKEN -->
                <div class="card mt-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="text-center">ACTION TAKEN</h5>
                                <button class="btn btn-link text-decoration-none p-0 expand-icon" type="button"  data-bs-toggle="collapse" data-bs-target="#collapseAction" aria-expanded="true" aria-controls="collapsActions">
                                    <i class="fa-solid fa-chevron-down"></i>
                                </button>
                            </div>
                            <div class="collapse show" id="collapseAction">
                                <div class="row">
                                    <div class="col">
                                        <label for="numero_accion_tomada">N°</label>
                                        <input class="form-control" type="text"  value="" id="numero_accion_tomada" name="numero_accion_tomada">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="descripcion_accion_tomada">ACTION</label>
                                        <input class="form-control" type="text"  value="" id="descripcion_accion_tomada" name="descripcion_accion_tomada">
                                    </div>
                                    <div class="col">
                                        <label for="ata_accion_tomada">ATA</label>
                                        <input class="form-control" type="number"  value="" id="ata_accion_tomada" name="ata_accion_tomada">
                                    </div>
                                    <div class="col">
                                        <label for="numero_licencia">N° LIC</label>
                                        <input class="form-control" type="text"  value="" id="numero_licencia_accion" name="numero_licencia">
                                    </div>
                                    <div class="col">
                                        <label for="firma_accion_tomada">SIGN</label>
                                        <input class="form-control" type="text"  value="" id="firma_accion_tomada" name="firma_accion_tomada">
                                    </div>
                                    <div class="col">
                                        <label for="numero_ri_accion">N° RII</label>
                                        <input class="form-control" type="number"  value="" id="numero_ri_accion" name="numero_ri_accion">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Seccion PAYLOAD -->
                <div class="card mt-2">
                    <div class="card-body">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="text-center">PAYLOAD</h5>
                            <button class="btn btn-link text-decoration-none p-0 expand-icon" type="button"  data-bs-toggle="collapse" data-bs-target="#collapsePayload" aria-expanded="true" aria-controls="collapsePayload">
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="collapse show" id="collapsePayload">
                            <div class="row">
                                <div class="col-md-2">
                                    <label for="carga_permitido">ALLOWED</label>
                                    <input class="form-control" type="text"  value="" id="carga_permitido" name="carga_permitido">
                                </div>
                                <div class="col">
                                    <label for="carga_abordo">ONBOARD</label>
                                    <input class="form-control" type="number"  value="" id="carga_abordo" name="carga_abordo">
                                </div>
                                <div class="col">
                                    <label for="subcarga">UNDERLOAD</label>
                                    <input class="form-control" type="number"  value="" id="subcarga" name="subcarga">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mt-2">
            <div class="card-body">
                <div class="row">
                    <div class="col mt-2 d-flex justify-content-end">
                        <div>
                            <button type="submit" class="btn btn-primary mt-2">Registrar</button>
                            <a href="{{ route('control_bitacoras.index') }}" class="btn btn-warning mt-2">Cancelar</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('js')
    {{-- Verificar si hay un mensaje de éxito en la sesión --}}
    <script>
        document.getElementById('bitacoraForm').addEventListener('submit', function (event) {
            event.preventDefault(); // Evitar el envío del formulario por defecto

            const form = this;
            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Error al guardar la bitácora.');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // Mostrar alerta de éxito
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: data.message,
                        confirmButtonText: 'OK'
                    }).then(() => {
                        // Redirigir al índice después de presionar "OK"
                        window.location.href = data.redirect_url;
                    });
                } else {
                    // Mostrar alerta de error
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message
                    });
                }
            })
            .catch(error => {
                // Mostrar alerta de error si ocurre un problema inesperado
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.message
                });
            });
        });
    </script>

    {{-- Evento para expandir y colapsar el card de la tripulación --}}
    <script>
        document.addEventListener('click', function(e) {
            if (e.target.matches('.expand-icon, .expand-icon *')) {
                const icon = e.target.closest('.expand-icon').querySelector('i');
                icon.classList.toggle('fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
            }
        });
    </script>
@endsection