@extends('comunidad.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/index.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/miembros.css') }}" />
@endsection
@section('content')
    <main class="page-main">

        <div class="uk-container principal">
            <div class="uk-grid uk-child-width-expand@m uk-margin" uk-grid>
                <!-- COLUMNA IZQUIERDA -->
                <div>

                    <!-- Lista de miembros -->
                    <div class="fondo-modelo">
                        <h4 class="titulo_destacado uk-margin-small-bottom">Miembros de la Comunidad</h4>
                        
                        @if($miembros->count() > 0)
                            @foreach($miembros as $miembro)
                                @if($miembro->suscrito)
                        <div class="uk-flex encabezado-card miembros-list">
                                        <img src="{{ $miembro->suscrito->imagen_url }}" alt="{{ $miembro->suscrito->nombre_completo }}" class="logo-mini">
                            <div class="nombre">
                                            <p>{{ $miembro->suscrito->nombre_completo }}</p>
                                            <small>{{ $miembro->suscrito->email_oculto ?? 'Sin email' }}</small>
                                            @if($miembro->ultima_conexion)
                                                <small class="uk-text-muted">Última conexión: {{ \Carbon\Carbon::parse($miembro->ultima_conexion)->diffForHumans() }}</small>
                                            @endif
                            </div>
                        </div>
                                @endif
                            @endforeach

                            <!-- Paginación -->
                            <div class="uk-margin-top">
                                {{ $miembros->links() }}
                            </div>
                        @else
                            <div class="uk-text-center uk-padding">
                                <p class="uk-text-muted">No hay miembros registrados aún.</p>
                            </div>
                        @endif
                    </div>

                </div>

                <!-- COLUMNA DERECHA -->
                <div class="uk-width-1-3@m">
                    <div class="destacado-card ranking-card">
                        <h4 class="titulo_ranking">Tabla de clasificación (30 días)</h4>
                        <div class="ranking-list" id="ranking-30dias">
                            <div class="uk-text-center uk-padding">
                                <div uk-spinner></div>
                            </div>
                        </div>

                        <div class="link-derecho uk-text-center">
                            <a href="{{ url('/comunidad/clasificacion') }}" class="titulo-calificacion">Ver todas las clasificaciones</a>
                            <a href="#" class="uk-button btn-whatsapp uk-margin-small-top">Únete a nuestro canal de Whatsapp</a>
                            <a href="#" class="uk-button btn-telegram uk-margin-small-top">Únete a nuestro canal de Telegram</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Cargar ranking de 30 días
            function cargarRanking30Dias() {
                const elemento = document.getElementById('ranking-30dias');
                
                fetch(`{{ url('/api/comunidad/ranking') }}?tipo=30dias`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error en la respuesta del servidor');
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (!data || data.length === 0) {
                            elemento.innerHTML = '<div class="uk-text-center uk-padding"><p class="uk-text-muted">No hay datos disponibles</p></div>';
                            return;
                        }
                        
                        elemento.innerHTML = data.map(item => {
                            const nombreCompleto = item.suscrito?.nombre_completo || 'Usuario';
                            const imagenUrl = item.suscrito?.imagen_url || '{{ asset("assets/img/aulavirtual/elipse1.png") }}';
                            const puntos = item.total_puntos || 0;
                            const posicion = item.posicion || 0;
                            
                            return `
                                <div class="posicion">
                                    <div class="item-left">
                                        <span class="rank">${posicion}</span>
                                        <img src="${imagenUrl}" class="avatar" alt="${nombreCompleto}" onerror="this.src='{{ asset('assets/img/aulavirtual/elipse1.png') }}'">
                                        <span class="name">${nombreCompleto}</span>
                                    </div>
                                    <div class="score">+${puntos}</div>
                                </div>
                            `;
                        }).join('');
                    })
                    .catch(error => {
                        console.error('Error al cargar ranking:', error);
                        elemento.innerHTML = '<div class="uk-text-center uk-padding"><p class="uk-text-danger">Error al cargar datos.</p></div>';
                    });
            }

            cargarRanking30Dias();
        });
    </script>
@endsection