@extends('layouts.app')

@section('title', 'Personalización')

@section('css')
    <style>
        #tabla-boeing thead,
        #tabla-dash thead,
        #tabla-cabina thead {
            background-color: #343a40;
            color: white;
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between">
            <h4>Personalizar Lista de Colaboradores</h4>
        </div>
        <div class="card-body">
            <ul class="nav nav-tabs" id="equipoTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="boeing-tab" data-bs-toggle="tab"
                            data-bs-target="#boeing" type="button" role="tab">
                        <i class="fas fa-plane me-1"></i> Boeing B737
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="dash-tab" data-bs-toggle="tab"
                            data-bs-target="#dash" type="button" role="tab">
                        <i class="fas fa-plane me-1"></i> Dash
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="cabina-tab" data-bs-toggle="tab"
                            data-bs-target="#cabina" type="button" role="tab">
                        <i class="fas fa-users me-1"></i> Jefes y Tripulantes de Cabina
                    </button>
                </li>
            </ul>
            <div class="tab-content mt-3">
                <!-- Boeing Tab -->
                <div class="tab-pane fade show active" id="boeing" role="tabpanel">
                    <div class="table-responsive">
                        <table id="tabla-boeing" class="table table-striped table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>Nombre</th>
                                    <th>Ap. Paterno</th>
                                    <th>Ap. Materno</th>
                                    <th>Cargo</th>
                                    <th>N° Orden</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($colaboradoresB737 as $index => $colaborador)
                                    <tr>
                                        <td>{{ $colaborador->nombre }}</td>
                                        <td>{{ $colaborador->ap_paterno }}</td>
                                        <td>{{ $colaborador->ap_materno }}</td>
                                        <td>
                                            <span class="badge bg-primary">{{ $colaborador->cargo_vuelo }}</span>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control orden-input"
                                                value="{{ $colaborador->orden_personalizado ?? '' }}"
                                                data-id="{{ $colaborador->id }}" min="1" style="width: 80px;">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <button class="btn btn-success mt-2" onclick="guardarOrden('boeing')">
                            <i class="fas fa-save me-1"></i> Guardar Orden Boeing
                        </button>
                    </div>
                </div>

                <!-- Dash Tab -->
                <div class="tab-pane fade" id="dash" role="tabpanel">
                    <div class="table-responsive">
                        <table id="tabla-dash" class="table table-striped table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>Nombre</th>
                                    <th>Ap. Paterno</th>
                                    <th>Ap. Materno</th>
                                    <th>Cargo</th>
                                    <th>N° Orden</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($colaboradoresQ400 as $index => $colaborador)
                                    <tr>
                                        <td>{{ $colaborador->nombre }}</td>
                                        <td>{{ $colaborador->ap_paterno }}</td>
                                        <td>{{ $colaborador->ap_materno }}</td>
                                        <td>
                                            <span class="badge bg-primary">{{ $colaborador->cargo_vuelo }}</span>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control orden-input"
                                                value="{{ $colaborador->orden_personalizado ?? '' }}"
                                                data-id="{{ $colaborador->id }}" min="1" style="width: 80px;">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <button class="btn btn-success mt-2" onclick="guardarOrden('dash')">
                            <i class="fas fa-save me-1"></i> Guardar Orden Dash
                        </button>
                    </div>
                </div>

                <!-- Cabina Tab -->
                <div class="tab-pane fade" id="cabina" role="tabpanel">
                    <div class="table-responsive">
                        <table id="tabla-cabina" class="table table-striped table-bordered">
                            <thead class="table-dark">
                                <tr>
                                    <th>Nombre</th>
                                    <th>Ap. Paterno</th>
                                    <th>Ap. Materno</th>
                                    <th>Cargo</th>
                                    <th>N° Orden</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tripulantes as $index => $colaborador)
                                    <tr>
                                        <td>{{ $colaborador->nombre }}</td>
                                        <td>{{ $colaborador->ap_paterno }}</td>
                                        <td>{{ $colaborador->ap_materno }}</td>
                                        <td>
                                            <span class="badge bg-primary">{{ $colaborador->cargo_vuelo }}</span>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control orden-input"
                                                value="{{ $colaborador->orden_personalizado ?? '' }}"
                                                data-id="{{ $colaborador->id }}" min="1" style="width: 80px;">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <button class="btn btn-success mt-2" onclick="guardarOrden('cabina')">
                            <i class="fas fa-save me-1"></i> Guardar Orden Cabina
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            $('#tabla-boeing').DataTable({
                "language": {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado - disculpa",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No se encuentran registros",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                },
                "pageLength": 10,
                "order": []
            });
        });

        // Inicializar DataTable cuando se cambie de tab
        $('[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            const target = $(e.target).data('bs-target');
            if (target === '#dash' && !$.fn.DataTable.isDataTable('#tabla-dash')) {
                $('#tabla-dash').DataTable({
                    "language": {
                        "lengthMenu": "Mostrar _MENU_ registros por página",
                        "zeroRecords": "Nada encontrado - disculpa",
                        "info": "Mostrando la página _PAGE_ de _PAGES_",
                        "infoEmpty": "No se encuentran registros",
                        "infoFiltered": "(filtrado de _MAX_ registros totales)",
                        "search": "Buscar:",
                        "paginate": {
                            'next': "Siguiente",
                            'previous': "Anterior"
                        }
                    },
                    "pageLength": 10,
                    "order": []
                });
            }
            if (target === '#cabina' && !$.fn.DataTable.isDataTable('#tabla-cabina')) {
                $('#tabla-cabina').DataTable({
                    "language": {
                        "lengthMenu": "Mostrar _MENU_ registros por página",
                        "zeroRecords": "Nada encontrado - disculpa",
                        "info": "Mostrando la página _PAGE_ de _PAGES_",
                        "infoEmpty": "No se encuentran registros",
                        "infoFiltered": "(filtrado de _MAX_ registros totales)",
                        "search": "Buscar:",
                        "paginate": {
                            'next': "Siguiente",
                            'previous': "Anterior"
                        }
                    },
                    "pageLength": 10,
                    "order": []
                });
            }
        });

        function guardarOrden(equipo) {
            const table = $(`#tabla-${equipo}`).DataTable();
            const allRows = table.rows().nodes();
            const colaboradores = [];
            // Validar que todos tengan un número
            let hayVacios = false;
            $(allRows).each(function() {
                const input = $(this).find('.orden-input')[0];
                if (!input.value || input.value === '') {
                    hayVacios = true;
                } else {
                    colaboradores.push({
                        id: parseInt(input.dataset.id),
                        orden: parseInt(input.value)
                    });
                }
            });
            if (hayVacios) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Campos vacíos',
                    text: 'Por favor, llena todos los campos de orden antes de guardar.'
                });
                return;
            }
            // Enviar datos
            fetch('/actualizar-orden', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    colaboradores: colaboradores,
                    equipo: equipo
                })
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Éxito!',
                        text: data.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error de conexión',
                    text: 'No se pudo conectar con el servidor'
                });
            });
        }

        //Funcion para validad input sin letras y negativos
        document.addEventListener('input', function(e) {
            if (e.target.classList.contains('orden-input')) {
                let valor = e.target.value;
                // Remover todo lo que no sean números
                valor = valor.replace(/[^0-9]/g, '');
                // Si el valor es 0, lo dejamos vacío
                if (valor === '0') {
                    valor = '';
                }
                e.target.value = valor;
            }
        });
    </script>
@endsection