@extends('layouts.app')

@section('title', 'Colaboradores en Operaciones')

@section('css')
    <style>
        #colaborador 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>Lista de Colaboradores en Operaciones</h4>
        </div>
        <div class="card-body">
            <div class="btn-group mb-3" role="group" aria-label="Filtro de colaboradores">
                <button type="button" class="btn btn-warning btn-sm active" id="btn-todos">Todos</button>
                <button type="button" class="btn btn-success btn-sm" id="btn-activos">Activos</button>
                <button type="button" class="btn btn-danger btn-sm" id="btn-inactivos">Inactivos</button>
            </div>
            <div class="table-responsive">
                <table id="colaborador" class="table table-striped table-bordered">
                    <thead class="table-dark">
                        <tr>
                            <th>Nombre</th>
                            <th>Paterno</th>
                            <th>Materno</th>
                            <th>N° DGAC</th>
                            <th>Cargo</th>
                            <th>Fecha Inactivación</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function(){
            let tabla;
            function cargarTabla(estado = null) {
                // Si la tabla ya existe, destruirla para recrearla con nuevos parámetros
                if (tabla) {
                    tabla.destroy();
                }

                // Construir la URL con el filtro de estado si es necesario
                let ajaxUrl = URLs+'/general';
                if (estado !== null) {
                    ajaxUrl += '?estado=' + estado;
                }

                let options = {
                    responsive: true,
                    autoWidth: false,
                    processing: true,
                    serverSide: true,
                    ajax: ajaxUrl,
                    columns: [
                        { "data": "nombre"},
                        { "data": "ap_paterno"},
                        { "data": "ap_materno"},
                        { "data": "numero_dgac"},
                        { "data": "cargo"},
                        { "data": "fecha_inactivacion" },
                        { "data": "action", "orderable": false, "searchable": false }
                    ],
                    columnDefs: [
                        // La columna de fecha de inactivación (índice 5) solo visible para inactivos
                        { targets: 5, visible: (estado === false) }
                    ],
                    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"
                        }
                    }
                };

                tabla = $('#colaborador').DataTable(options);
            }

            cargarTabla();

            // Manejar clics en los botones de filtrado
            $('#btn-todos').click(function() {
                $(this).addClass('active').siblings().removeClass('active');
                cargarTabla();
            });

            $('#btn-activos').click(function() {
                $(this).addClass('active').siblings().removeClass('active');
                cargarTabla(true);
            });

            $('#btn-inactivos').click(function() {
                $(this).addClass('active').siblings().removeClass('active');
                cargarTabla(false);
            });
        });

        function deleteColaborador(colaboradorId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "No podrás revertir esto!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, desactivarlo!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: URLs+'/general/' + colaboradorId,
                        type: 'DELETE',
                        data: {
                            "_token": $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function(response) {
                            Swal.fire(
                                'Desactivado!',
                                response.success,
                                'success'
                            );
                            // Recarga la tabla manteniendo el filtro actual
                            let $activeButton = $('.btn-group .active');
                            if ($activeButton.attr('id') === 'btn-todos') {
                                $('#colaborador').DataTable().ajax.reload(null, false);
                            } else if ($activeButton.attr('id') === 'btn-activos') {
                                $('#btn-activos').click();
                            } else if ($activeButton.attr('id') === 'btn-inactivos') {
                                $('#btn-inactivos').click();
                            }
                        },
                        error: function(error) {
                            console.log(error);
                            Swal.fire(
                                'Error!',
                                'Algo salió mal al intentar desactivar el registro.',
                                'error'
                            );
                        }
                    });
                }
            });
        };

        function restoreColaborador(colaboradorId) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: "Quieres restaurar este registro?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, restaurarlo!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: URLs+'/general/' + colaboradorId + '/restaurar',
                        type: 'POST',
                        data: {
                            "_token": $('meta[name="csrf-token"]').attr('content'),
                        },
                        success: function(response) {
                            Swal.fire(
                                'Restaurado!',
                                response.success,
                                'success'
                            );
                            // Recarga la tabla manteniendo el filtro actual
                            let $activeButton = $('.btn-group .active');
                            if ($activeButton.attr('id') === 'btn-todos') {
                                $('#colaborador').DataTable().ajax.reload(null, false);
                            } else if ($activeButton.attr('id') === 'btn-activos') {
                                $('#btn-activos').click();
                            } else if ($activeButton.attr('id') === 'btn-inactivos') {
                                $('#btn-inactivos').click();
                            }
                        },
                        error: function(error) {
                            console.log(error);
                            Swal.fire(
                                'Error!',
                                'Algo salió mal al intentar restaurar el registro.',
                                'error'
                            );
                        }
                    });
                }
            });
        };

        /* Codigo para mostrar alerta de confirmación */
        document.addEventListener('DOMContentLoaded', function() {
            // Verifica si hay un mensaje de éxito en la sesión
            @if(session('success'))
                Swal.fire({
                    title: '¡Éxito!',
                    text: '{{ session('success') }}',
                    icon: 'success',
                    confirmButtonText: 'OK'
                });
            @endif
        });
    </script>
@endsection