@extends('layouts.app')

@section('title', 'Estadistica por Usuario')

@section('content')
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12">
                <h2>Estadísticas de Usuarios</h2>
            </div>
        </div>

        {{-- Filtro de Fechas --}}
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form id="formFiltroFechas" class="row g-3">
                            <div class="col-md-4">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio" required>
                            </div>
                            <div class="col-md-4">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="date" class="form-control" id="fecha_fin" name="fecha_fin" required>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Buscar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Cards con DataTables --}}
        <div class="row">
            {{-- Card Izquierdo: Conexiones por Usuario --}}
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Conexiones por Usuario del Periodo</h5>
                    </div>
                    <div class="card-body">
                        <table id="tablaConexiones" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Cantidad</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Card Derecho: Último Login --}}
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Último Login por Periodo del Usuario</h5>
                    </div>
                    <div class="card-body">
                        <table id="tablaUltimoLogin" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Fecha Último Login</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Detalle de Conexiones -->
    <div class="modal fade" id="modalDetalleConexiones" tabindex="-1" aria-labelledby="modalDetalleConexionesLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <!-- Header del Modal -->
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="modalDetalleConexionesLabel">
                        <i class="fa-solid fa-chart-line me-2"></i>
                        Detalle de Conexiones
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Body del Modal -->
                <div class="modal-body">
                    <!-- Información del Usuario -->
                    <div class="alert alert-info border-0 mb-4" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fa-solid fa-circle-user fs-3 me-3"></i>
                            <div>
                                <h6 class="mb-0">Usuario: <span id="nombreUsuarioDetalle" class="fw-bold"></span></h6>
                                <small class="text-muted">Período: <span id="periodoDetalle"></span></small>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de Detalles -->
                    <div class="table-responsive">
                        <table id="tablaDetalleConexiones" class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th><i class="fa-regular fa-calendar me-1"></i> Fecha</th>
                                    <th class="text-center"><i class="fa-solid fa-user-check me-1"></i> Logins</th>
                                    <th class="text-center"><i class="fa-solid fa-user-clock me-1"></i> Tiempo (min)</th>
                                </tr>
                            </thead>
                            <tbody id="bodyDetalleConexiones">
                                <!-- Se llenará dinámicamente -->
                            </tbody>
                            <tfoot class="table-light">
                                <tr class="fw-bold">
                                    <td>TOTAL</td>
                                    <td class="text-center" id="totalLogins">0</td>
                                    <td class="text-center" id="totalMinutos">0</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <!-- Mensaje de carga -->
                    <div id="loadingDetalle" class="text-center py-5 d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                        <p class="mt-3 text-muted">Cargando datos...</p>
                    </div>

                    <!-- Mensaje sin datos -->
                    <div id="sinDatosDetalle" class="text-center py-5 d-none">
                        <i class="fa-solid fa-database fs-1 text-muted"></i>
                        <p class="mt-3 text-muted">No hay datos para mostrar</p>
                    </div>
                </div>

                <!-- Footer del Modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                        <i class="ti ti-x me-1"></i>
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Detalle de Cursos -->
    <div class="modal fade" id="modalDetalleCursos" tabindex="-1" aria-labelledby="modalDetalleCursosLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <!-- Header del Modal -->
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="modalDetalleCursosLabel">
                        <i class="fa-solid fa-book-open me-1"></i>
                        Detalle de Cursos
                    </h5>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-success btn-sm" id="btnExportarCursos">
                            <i class="fa-solid fa-file-excel me-1"></i> Exportar a Excel
                        </button>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>

                <!-- Body del Modal -->
                <div class="modal-body">
                    <!-- Información del Usuario -->
                    <div class="alert alert-info border-0 mb-4" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fa-regular fa-circle-user fs-3 me-3"></i>
                            <div>
                                <h6 class="mb-0">Usuario: <span id="nombreUsuarioCursos" class="fw-bold"></span></h6>
                                <small class="text-muted">Cursos asignados y progreso</small>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de Cursos -->
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Curso</th>
                                    <th class="text-center">Duración Total</th>
                                    <th class="text-center">Tiempo Consumido</th>
                                    <th class="text-center">Tiempo Restante</th>
                                    <th class="text-center">Progreso</th>
                                    <th class="text-center">Accesos</th>
                                </tr>
                            </thead>
                            <tbody id="bodyDetalleCursos">
                            </tbody>
                        </table>
                    </div>

                    <!-- Mensaje de carga -->
                    <div id="loadingCursos" class="text-center py-5 d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Cargando...</span>
                        </div>
                        <p class="mt-3 text-muted">Cargando cursos...</p>
                    </div>

                    <!-- Mensaje sin datos -->
                    <div id="sinDatosCursos" class="text-center py-5 d-none">
                        <i class="ti ti-book-off fs-1 text-muted"></i>
                        <p class="mt-3 text-muted">Este usuario no tiene cursos asignados</p>
                    </div>
                </div>

                <!-- Footer del Modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
                        <i class="fa-regular fa-circle-xmark"></i>
                        Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            let tablaConexiones, tablaUltimoLogin;
            // Inicializar DataTables vacías
            tablaConexiones = $('#tablaConexiones').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"
                    }
                },
                data: [],
                columns: [
                    { data: 'usuario' },
                    { data: 'cantidad' },
                    {
                        data: null,
                        render: function(data, type, row) {
                            return `
                                <button class="btn btn-sm btn-info btn-detalles me-1"
                                        data-id="${row.id_usuario}"
                                        data-bs-toggle="tooltip"
                                        title="Ver conexiones">
                                    <i class="fa-solid fa-chart-line"></i>
                                </button>
                                <button class="btn btn-sm btn-primary btn-ver-cursos"
                                        data-id="${row.id_usuario}"
                                        data-nombre="${row.usuario}"
                                        data-bs-toggle="tooltip"
                                        title="Ver progreso de cursos">
                                    <i class="fa-solid fa-book-open"></i>
                                </button>
                            `;
                        }
                    }
                ]
            });

            $(document).on('draw.dt', function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            });

            tablaUltimoLogin = $('#tablaUltimoLogin').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"
                    }
                },
                data: [],
                columns: [
                    { data: 'usuario' },
                    { data: 'ultimo_login' }
                ]
            });

            // Manejar el formulario de búsqueda
            $('#formFiltroFechas').on('submit', function(e) {
                e.preventDefault();
                const fechaInicio = $('#fecha_inicio').val();
                const fechaFin = $('#fecha_fin').val();
                if (!fechaInicio || !fechaFin) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Atención',
                        text: 'Por favor, selecciona ambas fechas'
                    });
                    return;
                }
                cargarEstadisticas(fechaInicio, fechaFin);
            });

            function cargarEstadisticas(fechaInicio, fechaFin) {
                $.ajax({
                    url: URLs + '/estadisticas/conexiones-por-usuario',
                    method: 'GET',
                    data: {
                        fecha_inicio: fechaInicio,
                        fecha_fin: fechaFin
                    },
                    success: function(response) {
                        tablaConexiones.clear().rows.add(response.data).draw();
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al cargar las conexiones'
                        });
                    }
                });

                // Cargar último login
                $.ajax({
                    url: URLs + '/estadisticas/ultimo-login',
                    method: 'GET',
                    data: { fecha_inicio: fechaInicio, fecha_fin: fechaFin },
                    success: function(response) {
                        tablaUltimoLogin.clear().rows.add(response.data).draw();
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al cargar los últimos logins'
                        });
                    }
                });
            }
        });
        let usuarioSeleccionado = {};
        $(document).on('click', '.btn-detalles', function() {
            const idUsuario = $(this).data('id');
            const nombreUsuario = $(this).closest('tr').find('td:first').text();
            usuarioSeleccionado = {
                id: idUsuario,
                nombre: nombreUsuario
            };
            cargarDetalleConexiones(idUsuario);
        });
        function cargarDetalleConexiones(idUsuario) {
            // Mostrar el modal
            $('#modalDetalleConexiones').modal('show');
            // Actualizar información del usuario en el modal
            $('#nombreUsuarioDetalle').text(usuarioSeleccionado.nombre);
            $('#periodoDetalle').text($('#fecha_inicio').val() + ' al ' + $('#fecha_fin').val());
            // Mostrar loading y ocultar tabla/mensajes
            $('#loadingDetalle').removeClass('d-none');
            $('#tablaDetalleConexiones').addClass('d-none');
            $('#sinDatosDetalle').addClass('d-none');
            // Hacer petición AJAX
            $.ajax({
                url: '{{ route("estadisticas.detalle-conexiones-usuario") }}',
                method: 'GET',
                data: {
                    id_usuario: idUsuario,
                    fecha_inicio: $('#fecha_inicio').val(),
                    fecha_fin: $('#fecha_fin').val()
                },
                success: function(response) {
                    // Ocultar loading
                    $('#loadingDetalle').addClass('d-none');

                    if (response.data && response.data.length > 0) {
                        // Mostrar tabla
                        $('#tablaDetalleConexiones').removeClass('d-none');

                        // Llenar tabla
                        llenarTablaDetalle(response.data);
                    } else {
                        // Mostrar mensaje sin datos
                        $('#sinDatosDetalle').removeClass('d-none');
                    }
                },
                error: function(xhr) {
                    $('#loadingDetalle').addClass('d-none');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudieron cargar los detalles'
                    });
                }
            });
        }

        function llenarTablaDetalle(datos) {
            let html = '';
            let totalLogins = 0;
            let totalMinutos = 0;
            datos.forEach(function(registro) {
                totalLogins += registro.cantidad_logins;
                totalMinutos += registro.minutos;
                html += `
                    <tr>
                        <td>
                            <span class="badge bg-label-primary">
                                ${registro.fecha}
                            </span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-label-success rounded-pill">
                                ${registro.cantidad_logins}
                            </span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-label-info rounded-pill">
                                ${registro.minutos} min
                            </span>
                        </td>
                    </tr>
                `;
            });
            $('#bodyDetalleConexiones').html(html);
            $('#totalLogins').text(totalLogins);
            $('#totalMinutos').text(totalMinutos + ' min');
        }

        $(document).on('click', '.btn-ver-cursos', function() {
            const idUsuario = $(this).data('id');
            const nombreUsuario = $(this).data('nombre');

            // Actualizar nombre en el modal
            $('#nombreUsuarioCursos').text(nombreUsuario);
            $('#btnExportarCursos').data('id-usuario', idUsuario);

            // Mostrar loading y ocultar tabla
            $('#loadingCursos').removeClass('d-none');
            $('#bodyDetalleCursos').closest('.table-responsive').addClass('d-none');
            $('#sinDatosCursos').addClass('d-none');

            // Abrir modal
            $('#modalDetalleCursos').modal('show');

            // Hacer petición AJAX
            $.ajax({
                url: '/estadisticas/detalle-cursos-usuario',
                method: 'GET',
                data: {
                    id_usuario: idUsuario
                },
                success: function(response) {
                    // Ocultar loading
                    $('#loadingCursos').addClass('d-none');

                    if (response.data && response.data.length > 0) {
                        // Mostrar tabla y llenar datos
                        $('#bodyDetalleCursos').closest('.table-responsive').removeClass('d-none');
                        llenarTablaCursos(response.data);
                    } else {
                        // Mostrar mensaje sin datos
                        $('#sinDatosCursos').removeClass('d-none');
                    }
                },
                error: function() {
                    $('#loadingCursos').addClass('d-none');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudo cargar la información de cursos'
                    });
                }
            });
        });

        // Evento para exportar progreso de cursos a Excel
        $(document).on('click', '#btnExportarCursos', function() {
            const idUsuario = $(this).data('id-usuario');
            if (!idUsuario) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'No se pudo identificar el usuario'
                });
                return;
            }
            // Construir la URL de descarga
            const urlDescarga = URLs + '/estadisticas/exportar-progreso-cursos/' + idUsuario;
            // Abrir en nueva ventana para descargar
            window.open(urlDescarga, '_blank');
            Swal.fire({
                icon: 'success',
                title: 'Descargando...',
                text: 'Tu archivo Excel se está descargando',
                timer: 2000,
                showConfirmButton: false
            });
        });

        // Función para llenar la tabla de cursos
        function llenarTablaCursos(cursos) {
            let html = '';

            cursos.forEach(function(curso) {
                // Formatear tiempos
                const duracionTotal = formatearMinutos(curso.duracion_total_minutos);
                const tiempoConsumido = formatearMinutos(curso.tiempo_consumido_minutos);
                const tiempoRestante = formatearMinutos(curso.tiempo_restante_minutos);

                // Color del badge según progreso
                let badgeClass = 'bg-danger';
                if (curso.progreso_porcentaje >= 75) {
                    badgeClass = 'bg-success';
                } else if (curso.progreso_porcentaje >= 50) {
                    badgeClass = 'bg-warning';
                } else if (curso.progreso_porcentaje >= 25) {
                    badgeClass = 'bg-info';
                }

                html += `
                    <tr>
                        <td>${curso.curso}</td>
                        <td class="text-center">
                            <span class="badge bg-label-primary">${duracionTotal}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-label-success">${tiempoConsumido}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-label-warning">${tiempoRestante}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge ${badgeClass}">${curso.progreso_porcentaje}%</span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-label-info">${curso.total_accesos}</span>
                        </td>
                    </tr>
                `;
            });

            $('#bodyDetalleCursos').html(html);
        }

        // Función auxiliar para formatear minutos a formato legible
        function formatearMinutos(minutos) {
            if (minutos < 60) {
                return Math.round(minutos) + ' min';
            } else {
                const horas = Math.floor(minutos / 60);
                const mins = Math.round(minutos % 60);
                return horas + 'h ' + mins + 'min';
            }
        }
    </script>
@endsection