{% extends 'menu.html' %}
{% load static %}

{% block title %} LISTADO DE EMPLEADOS {% endblock %}

{% block body %}

<style>
    /* Bordes personalizados para la tabla */
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dee2e6 !important;
        /* Ajusta el color del borde si es necesario */
        padding: 8px;
        /* Ajusta el padding si es necesario */
        vertical-align: middle;
        /* Alinea el contenido verticalmente */
    }

    /* Si deseas que los bordes sean más gruesos */
    .table-bordered th,
    .table-bordered td {
        border-width: 2px;
        /* Ajusta el grosor del borde */
    }

    #start-index {
        border: none;
        /* Sin borde */
        background: transparent;
        /* Fondo transparente */
        color: #fff;
        /* Texto blanco */
        width: 40px;
        text-align: right;
        /* Centrar el texto */
        font-size: 1rem;
        /* Ajustar el tamaño de la fuente */
        appearance: none;
        /* Para eliminar el estilo predeterminado del input */
    }
</style>

<div class="container-fluid mt-3  content">
    <div class="tab-content p-3" id="myTabContentCentros">
        <div class="d-flex align-items-center justify-content-between mb-3 ">
            <a type="button" class="btn btn-primary custom-button" href="{% url 'nuevo_empleado' %}">Nuevo</a>

            <div class="search-container position-relative d-flex">
                <i class="material-icons search-icon">search</i>
                <input type="text" id="searchInput" class="form-control search-input"
                    placeholder="Buscar por nombre o identidad">

                <!-- El botón que activa el menú -->
                <button type="button" class="btn btn-outline-secondary search-button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <i class="material-icons">filter_list</i>
                </button>

                <!-- El menú desplegable debe estar DENTRO del mismo contenedor -->
                <ul class="dropdown-menu dropdown-large" aria-labelledby="dropdownMenuButton">
                    <div class="d-flex p-3 justify-content-center">
                        <!-- Sección Filtros -->
                        <div class="me-5">
                            <h6 class="dropdown-header"><i class="material-icons">business</i> Empresas</h6>
                            <li><a class="dropdown-item dropdown-filtro" href="#" data-value="gerente">Hermanitos Alvarez Carbajal</a></li>
                            <li><a class="dropdown-item dropdown-filtro" href="#" data-value="departamento">Corporacion Nuevo Amanecer</a></li>
                        </div>
                        <div class="me-5">
                            <h6 class="dropdown-header"><i class="material-icons">filter_alt</i> Filtros</h6>
                            <li><a class="dropdown-item dropdown-filtro" href="#" data-value="mi-equipo">Gerente</a>
                            </li>
                            <li><a class="dropdown-item dropdown-filtro" href="#" data-value="mi-departamento">Jefe</a>
                            </li>
                            <li><a class="dropdown-item dropdown-filtro" href="#"
                                    data-value="recien-contratado">Colaborador</a></li>
                            <li><a class="dropdown-item dropdown-filtro" href="#"
                                    data-value="recien-contratado">Supervisor</a></li>
                            <li><a class="dropdown-item dropdown-filtro" href="#"
                                    data-value="recien-contratado">Coordinador</a></li>
                            <li><a class="dropdown-item dropdown-filtro" href="#" data-value="recien-contratado">Sub
                                    Coordinador</a></li>
                        </div>
                        <div>
                            <h6 class="dropdown-header"><i class="material-icons">star</i> Favoritos</h6>
                        </div>
                    </div>
                </ul>

            </div>


            <span id="empleados-count" style="margin-right: 15px; color: #fff;">
                <input type="text" id="start-index" value="50" min="1"
                    style="width: 80px; text-align: right; border: none; background: transparent;"> / <span
                    id="total-count"></span>
            </span>



            <div style="display: flex;">
                <button id="boton-izquierda"
                    style="border: 1px solid #ddd; background-color: #f9f9f9; padding: 5px 10px; border-radius: 3px 0 0 3px; cursor: pointer; border-right: none;">
                    <i class="material-icons" style="font-size: 16px; color: #888;">chevron_left</i>
                </button>
                <button id="boton-derecha"
                    style="border: 1px solid #ddd; background-color: #f9f9f9; padding: 5px 10px; border-radius: 0 3px 3px 0; cursor: pointer;">
                    <i class="material-icons" style="font-size: 16px; color: #888;">chevron_right</i>
                </button>
            </div>

            <div class="btn-group " role="group" aria-label="View Toggle">
                <!-- Botón para la vista de tarjetas -->
                <button class="btn btn-outline-secondary active" id="cards-tab" data-bs-toggle="tab"
                    data-bs-target="#cards-sec" type="button" role="tab" aria-controls="cards-sec" aria-selected="true">
                    <i class="fas fa-th-large"></i>
                </button>

                <!-- Botón para la vista de tabla -->
                <button class="btn btn-outline-secondary" id="table-tab" data-bs-toggle="tab"
                    data-bs-target="#table-sec" type="button" role="tab" aria-controls="table-sec"
                    aria-selected="false">
                    <i class="fas fa-table"></i>
                </button>

            </div>

        </div>
        <div class="tab-pane mt-4 fade show active" id="cards-sec" role="tabpanel" aria-labelledby="cards-tab">

            <div class="row ">
                <div id="empleados-container" class="row">
                    <!-- Las tarjetas de empleados se cargarán aquí -->
                </div>

            </div>
        </div>
        <div class="tab-pane fade" id="table-sec" role="tabpanel" aria-labelledby="table-tab">
            <div class="card">
                <div class="card-body" style="background-color: #f4f6f9;">
                    <div class="table-responsive">
                        <table id="empleadosTable" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Codigo</th>
                                    <th class="text-center">Identidad</th>
                                    <th class="text-center">Nombre</th>
                                    <th class="text-center">Fecha Ingreso</th>
                                    <th class="text-center">Correo</th>
                                    <th class="text-center">Teléfono</th>
                                    <th class="text-center">Empresa</th>
                                    <th class="text-center">Departamento</th>
                                    <th class="text-center">Area</th>
                                    <th class="text-center">Cargo</th>
                                    <th class="text-center">Gerente</th>
                                    <th class="text-center">Jefe</th>
                                    <th class="text-center">Salario</th>
                                    <!-- <th class="text-center">Aplica Seguro</th> -->
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Cuerpo de la tabla -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Seleccionar el input de búsqueda y el botón de limpieza
        const searchInput = document.getElementById('searchInput');
        const clearButton = document.getElementById('clearButton');

        // Seleccionar todos los elementos del dropdown con la clase .dropdown-filtro
        const items = document.querySelectorAll('.dropdown-filtro');

        // Agregar un evento de click a cada elemento
        items.forEach(function (item) {
            item.addEventListener('click', function (e) {
                // Evitar la acción predeterminada para el enlace "Salir"
                if (item.classList.contains('logout-item')) {
                    return;
                }

                e.preventDefault();  // Evitar el comportamiento por defecto del enlace

                // Eliminar la clase 'selected' de todos los elementos del dropdown
                items.forEach(function (el) {
                    el.classList.remove('selected');
                });

                // Añadir la clase 'selected' al elemento clicado
                item.classList.add('selected');

                // Obtener el texto del elemento clicado
                const selectedText = item.textContent.trim();

                // Limpiar el input y añadir la nueva opción seleccionada
                searchInput.value = selectedText;

                // Mostrar el botón de limpiar
                clearButton.style.visibility = 'visible';
            });
        });

        // Agregar un evento de click al botón de limpiar
        clearButton.addEventListener('click', function () {
            // Limpiar el input
            searchInput.value = '';

            // Ocultar el botón de limpiar
            clearButton.style.visibility = 'hidden';
        });
    });


    window.onload = function () {
        // Obtener el valor de 'userName' desde el input oculto
        var userName = "{{ userName }}";

        // Mostrar una alerta para verificar el valor
        console.log(userName);

        // Verificar si el usuario está vacío
        if (!userName || userName.trim() === '') {
            // Redirigir al usuario al login si no hay un usuario registrado
            window.location.href = 'http://3.230.160.184:81/CWS/';
        }
    };

    $(document).ready(function () {


        $.ajax({
            url: "{% url 'contar_empleados' %}",  // URL de la vista que devuelve el conteo
            type: 'GET',
            success: function (response) {
                var totalEmpleados = response.total_empleados;

                // Obtener el valor actual del input para empleados por página
                var empleadosPorPagina = parseInt($('#start-index').val()) || 50;  // Valor por defecto 20 si no es válido

                // Calcular el final de los empleados mostrados para la página actual
                var endIndex = Math.min(empleadosPorPagina, totalEmpleados);

                // Actualizar el número total en el frontend
                $('#start-index').val(empleadosPorPagina);  // Mostrar el valor inicial en el input
                $('#end-count').text(endIndex);  // Final del rango mostrado
                $('#total-count').text(totalEmpleados);  // Total de empleados
            },
            error: function (error) {
                console.error('Error al obtener el número total de empleados:', error);
            }
        });





        var buttons = "Bfrtlip";

        // Inicializar DataTable
        var empleadosTable = $('#empleadosTable').DataTable({
            autoWidth: true,
            scrollX: true,  // Habilitar scroll horizontal
            scrollY: '60vh',  // Habilitar scroll vertical con una altura específica
            scrollCollapse: true,  // Permitir colapso si hay pocas filas
            pageLength: 50,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excel',
                    text: '<i class="fas fa-file-excel"></i>',
                    titleAttr: 'Excel',
                    className: 'btn btn-success',
                },
                {
                    extend: 'pdf',
                    text: '<i class="fas fa-file-pdf"></i>',
                    titleAttr: 'PDF',
                    className: 'btn btn-danger',
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print"></i>',
                    titleAttr: 'Imprimir',
                    className: 'btn btn-null',
                }
            ],
            language: {
                "processing": "Procesando...",
                "lengthMenu": "Mostrar _MENU_ registros",
                "zeroRecords": "No se encontraron resultados",
                "emptyTable": "Ningún dato disponible en esta tabla",
                "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                "search": "Buscar:",
                "infoThousands": ",",
                "loadingRecords": "Cargando...",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "aria": {
                    "sortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sortDescending": ": Activar para ordenar la columna de manera descendente"
                },
                "buttons": {
                    "copy": "Copiar",
                    "colvis": "Visibilidad"
                }
            }
        });

        // Delegar el evento click en las tarjetas de empleados
        $(document).on('click', '.card-empleado', function () {
            var idEmpleado = $(this).attr('id').split('-')[1];
            if (idEmpleado) {
                // Redirigir a la página de edición del empleado
                window.location.href = `/CWS/modulos/talento/humano/empleados/gestion/${idEmpleado}`;
            }
        });

        $(document).ready(function () {
            // Función común para manejar la búsqueda
            function buscarEmpleados() {
                var searchTerm = $('#searchInput').val().trim();

                if (searchTerm === "") {
                    // Si está vacío, cargar todos los empleados
                    cargarEmpleadosInfo();
                } else {
                    // Si no está vacío, hacer la búsqueda con el término ingresado
                    cargarEmpleadosInfo(searchTerm);
                }
            }

            $('.dropdown-filtro').on('click', function () {
                var rol = $(this).data('value'); // Obtener el valor del rol (Gerente, Jefe, Colaborador)
                buscarEmpleados(rol); // Llamar a la función de búsqueda pasando el rol seleccionado
            });


            // Asociar el evento de presionar "Enter" al input de búsqueda
            $('#searchInput').keypress(function (e) {
                if (e.which === 13) { // 13 es el código ASCII de la tecla "Enter"
                    buscarEmpleados();
                }
            });

            // Evento para detectar cuando el usuario limpia el input manualmente
            $('#searchInput').on('input', function () {
                var searchTerm = $(this).val().trim();

                if (searchTerm === "") {
                    // Si el campo está vacío, cargar todos los empleados automáticamente
                    cargarEmpleadosInfo();
                }
            });
        });



        // Función para generar un color aleatorio
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Función para obtener el color de contraste adecuado
        function getContrastYIQ(hexcolor) {
            hexcolor = hexcolor.replace('#', '');
            const r = parseInt(hexcolor.substr(0, 2), 16);
            const g = parseInt(hexcolor.substr(2, 2), 16);
            const b = parseInt(hexcolor.substr(4, 2), 16);
            const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
            return (yiq >= 128) ? 'black' : 'white';
        }

        let currentPage = 0; // Página actual, empezando desde 0
        let empleadosPorPagina = 50; // Número de empleados por página (por defecto 50)

        // Función para actualizar el rango del input #start-index
        function actualizarStartIndex(totalEmpleadosMostrados) {
            let startIndex = (currentPage * empleadosPorPagina) + 1;  // Índice del primer empleado en la página actual
            let endIndex = startIndex + totalEmpleadosMostrados - 1;  // Índice del último empleado mostrado en la página actual

            // Si el número total de empleados mostrados es menor que el total esperado, ajusta el endIndex
            if (totalEmpleadosMostrados < empleadosPorPagina) {
                endIndex = startIndex + totalEmpleadosMostrados - 1;
            }

            $('#start-index').val(`${startIndex}-${endIndex}`);  // Mostrar el rango en el input
        }

        function cargarEmpleadosInfo(searchTerm = '') {
            // Mostrar el modal de carga mientras se obtienen los datos
            Swal.fire({
                title: '',
                html: '<b>Cargando Datos</b>',
                didOpen: () => {
                    Swal.showLoading();
                },
                allowOutsideClick: false,
                showConfirmButton: false
            });

            // Calcular el desplazamiento basado en la página actual
            let offset = currentPage * empleadosPorPagina;

            // Realizar la solicitud AJAX para obtener los empleados
            $.ajax({
                url: '/CWS/modulos/talento/humano/empleados/gestion/obtener_info_empleado/',
                type: 'GET',
                data: { search: searchTerm, offset: offset, limite: empleadosPorPagina },  // Enviar el límite y el offset
                success: function (response) {
                    // Cerrar el modal de carga
                   
                    Swal.close();

                    var empleadosContainer = $('#empleados-container');
                    empleadosContainer.empty(); // Limpiar el contenedor antes de agregar los datos

                    // Verificar si se han encontrado empleados
                    if (response.status === 'success' && response.data.length > 0) {
                        response.data.forEach(function (empleado) {
                            var estadoIcono;
                            switch (empleado.estado) {
                                case 1:
                                    estadoIcono = '<i class="fas fa-circle text-success"></i>';
                                    break;
                                case 2:
                                    estadoIcono = '<i class="fas fa-circle text-danger"></i>';
                                    break;
                                default:
                                    estadoIcono = '<i class="fas fa-circle text-secondary"></i>';
                                    break;
                            }

                            var empleadoImagen;
                            if (empleado.imagen) {
                                empleadoImagen = `<img src="/media/${empleado.imagen}" class="img-thumbnail" alt="${empleado.nombre_completo}" style="width: 50px; height: 50px;">`;
                            } else {
                                var initial = empleado.nombre_completo.charAt(0).toUpperCase();
                                var bgColor = getRandomColor();  // Generar color aleatorio
                                var textColor = getContrastYIQ(bgColor);  // Obtener el color de texto adecuado
                                empleadoImagen = `
                        <div class="d-flex justify-content-center align-items-center"
                            style="width: 50px; height: 50px; font-size: 1.5rem; border-radius: 5px; background-color: ${bgColor}; color: ${textColor};">
                            ${initial}
                        </div>`;
                            }

                            var tarjetaEmpleado = `
                        <div class="col-md-6 col-lg-3 mb-3">
                            <div class="card card-empleado" id="empleado-${empleado.id_empleado}">
                                <div class="card-body d-flex align-items-center">
                                    <div class="me-3">
                                        ${empleadoImagen}
                                    </div>
                                    <div class="flex-grow-1">
                                        <p class="mb-1">
                                            <strong style="font-size: 0.8rem;">${empleado.nombre_completo}</strong> <span style="font-size: 0.75rem; color: #555;">(${empleado.AbreviaturaEmpresa})</span>
                                        </p>
                                        <p class="card-text mb-1" style="font-size: 0.75rem;">
                                            <i class="fas fa-user"></i> ${empleado.rol_empleado}
                                            
                                        </p>
                                        <p class="card-text mb-1" style="font-size: 0.75rem;"><i class="fas fa-envelope"></i> ${empleado.correo}</p>
                                        <p class="card-text mb-1" style="font-size: 0.75rem;"><i class="fas fa-phone"></i> ${empleado.telefono}</p>
                                    </div>
                                    <div class="ms-auto">
                                        ${estadoIcono}
                                    </div>
                                </div>
                            </div>
                        </div>`;

                            empleadosContainer.append(tarjetaEmpleado);
                        });

                        // Actualizar el índice de inicio después de cargar los empleados
                        actualizarStartIndex(response.data.length);  // Pasar el número de empleados mostrados
                    } else {
                        Swal.fire({
                            icon: 'info',
                            title: 'Sin empleados',
                            text: 'No se encontraron empleados que coincidan con tu búsqueda.',
                            confirmButtonText: 'Aceptar'
                        });

                    }
                },
                error: function (response) {
                    // Cerrar el modal de carga en caso de error
                    Swal.close();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error en la solicitud',
                        text: 'Error en la solicitud: ' + response.responseText,
                    });
                }
            });
        }

        // Función para cambiar de página
        function cambiarPagina(direccion) {
            currentPage += direccion;
            if (currentPage < 0) {
                currentPage = 0; // No permitir que la página sea menor a 0
            }
            cargarEmpleadosInfo(); // Recargar los datos con la nueva página
        }

        // Asignar eventos a los botones de paginación
        $('#boton-izquierda').on('click', function () {
            cambiarPagina(-1); // Retroceder una página
        });

        $('#boton-derecha').on('click', function () {
            cambiarPagina(1); // Avanzar una página
        });


        function cargarTablaEmpleados(searchTerm = '') {
            $.ajax({
                url: "{% url 'obtener_empleados_info' %}",
                type: 'GET',
                data: { search: searchTerm },
                success: function (response) {
                    if (response.status === 'success') {
                        empleadosTable.clear(); // Limpiar la tabla antes de agregar nuevos datos

                        response.data.forEach(function (empleado) {
                            empleadosTable.row.add([
                                empleado['#'],                 // Columna 1: #
                                empleado['Codigo'],            // Columna 2: Codigo
                                empleado['Identidad'],         // Columna 3: Identidad
                                empleado['Nombre'],            // Columna 4: Nombre
                                empleado['Fecha Ingreso'],     // Columna 5: Fecha Ingreso
                                empleado['Correo'],            // Columna 6: Correo
                                empleado['Teléfono'],          // Columna 7: Teléfono
                                empleado['Empresa'],          // Columna 7: Teléfono
                                empleado['Grupo'],             // Columna 8: Departamento (ahora Grupo)
                                empleado['Sub Grupo'],         // Columna 9: Area (ahora Sub Grupo)
                                empleado['Cargo'],             // Columna 10: Cargo
                                empleado['Gerente'],           // Columna 11: Gerente
                                empleado['Jefe'],              // Columna 12: Jefe
                                empleado['Salario'],           // Columna 14: Salario
                                /* empleado['Aplica Seguro'] ? 'Sí' : 'No'  // Columna 15: Aplica Seguro */
                            ]);
                        });

                        empleadosTable.draw(); // Dibujar la tabla con los nuevos datos
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al obtener los datos de los empleados: ' + response.error,
                        });
                    }
                },
                error: function (response) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error en la solicitud',
                        text: 'Error en la solicitud: ' + response.responseText,
                    });
                }
            });
        }

        // Inicialmente carga todos los empleados
        cargarEmpleadosInfo();
        cargarTablaEmpleados();
        /* cargarBitacora(); */

        $('#table-tab').on('click', function () {

            $('#table-sec').addClass('show active');
            $('#cards-sec').removeClass('show active');
            $(this).addClass('active');
            $('#cards-tab').removeClass('active');

            cargarTablaEmpleados();
        });

        $('#cards-tab').on('click', function () {
            $('#cards-sec').addClass('show active');
            $('#table-sec').removeClass('show active');
            $(this).addClass('active');
            $('#table-tab').removeClass('active');

            cargarEmpleadosInfo();
        });

        /*  $('#bitacora-tab').on('click', function () {
             $('#bitacora-sec').addClass('show active');    // Mostrar la tabla de bitácora
             $('#table-sec, #cards-sec').removeClass('show active');  // Ocultar las otras secciones
             $(this).addClass('active');                 // Activar el botón de bitácora
             $('#table-tab, #cards-tab').removeClass('active');  // Desactivar los otros botones
 
             cargarBitacora();  // Cargar los datos de la bitácora (si es necesario)
         }); */


    });
</script>
{% endblock %}