@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/clasificacion.css') }}" />
@endsection
@section('content')
    <main class="page-main">

        <div class="uk-container principal">
            <div class="fondo-modelo">
                <div uk-grid>

                    <!-- Columna 1: Usuario -->
                    <div class="uk-width-1-3@m uk-text-center">
                        <div class="avatar-container">
                            <div class="">
                                <img src="{{ $usuario->imagen_url }}"
                                    alt="Foto de Perfil" class="img-avatar">
                            </div>
                            <p class="nombre">{{ $usuario->nombre_completo }}</p>
                            <p class="nivel-actual">Nivel {{ $nivel }}</p>
                            @if($nivel < 10)
                                <p class="subir">+{{ $puntosParaSiguienteNivel }} puntos para subir de nivel</p>
                            @else
                                <p class="subir">¡Nivel máximo alcanzado!</p>
                            @endif
                        </div>
                    </div>

                    <!-- Columna 2: Niveles 1–5 -->
                    <div class="uk-width-1-3@m">
                        <ul class="uk-list uk-list-divider niveles-lista">
                            @for($i = 1; $i <= 5; $i++)
                                <li class="{{ $i == $nivel ? 'activo' : ($i < $nivel ? 'completado' : '') }}">
                                    @if($i <= $nivel)
                                        <span class="numero">{{ $i }}</span>
                                    @else
                                <span class="numero bloqueado"><i class="fas fa-lock"></i></span>
                                    @endif
                                <div>
                                        <strong>Nivel {{ $i }}</strong>
                                        <span>{{ $miembrosPorNivel[$i] ?? 0 }}% de los miembros</span>
                                </div>
                            </li>
                            @endfor
                        </ul>
                    </div>

                    <!-- Columna 3: Niveles 6–10 -->
                    <div class="uk-width-1-3@m">
                        <ul class="uk-list uk-list-divider niveles-lista">
                            @for($i = 6; $i <= 10; $i++)
                                <li class="{{ $i == $nivel ? 'activo' : ($i < $nivel ? 'completado' : '') }}">
                                    @if($i <= $nivel)
                                        <span class="numero">{{ $i }}</span>
                                    @else
                                <span class="numero bloqueado"><i class="fas fa-lock"></i></span>
                                    @endif
                                <div>
                                        <strong>Nivel {{ $i }}</strong>
                                        <span>{{ $miembrosPorNivel[$i] ?? 0 }}% de los miembros</span>
                                </div>
                            </li>
                            @endfor
                        </ul>
                    </div>

                </div>

            </div>

            <div uk-grid class="segunda-parte ">

                <!-- Columna 1: Ranking Diario -->
                <div class="uk-width-1-3@m uk-text-center">
                    <div class="destacado-card ranking-card">
                        <h4 class="titulo_ranking">Tabla de clasificación (Diaria)</h4>
                        <div class="ranking-list" id="ranking-diario">
                            <div class="uk-text-center uk-padding">
                                <div uk-spinner></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Columna 2: Ranking 30 días -->
                <div class="uk-width-1-3@m">
                    <div class="destacado-card ranking-card">
                        <h4 class="titulo_ranking uk-text-center">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>
                </div>

                <!-- Columna 3: Ranking Anual -->
                <div class="uk-width-1-3@m">
                    <div class="destacado-card ranking-card">
                        <h4 class="titulo_ranking uk-text-center">Tabla de clasificación (Anual)</h4>
                        <div class="ranking-list" id="ranking-anual">
                            <div class="uk-text-center uk-padding">
                                <div uk-spinner></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Función para cargar ranking
            function cargarRanking(tipo, elementoId) {
                const elemento = document.getElementById(elementoId);
                
                fetch(`{{ url('/api/comunidad/ranking') }}?tipo=${tipo}`, {
                    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. Por favor, recarga la página.</p></div>';
                    });
            }

            // Cargar los tres rankings
            cargarRanking('diario', 'ranking-diario');
            cargarRanking('30dias', 'ranking-30dias');
            cargarRanking('anual', 'ranking-anual');
        });
    </script>
@endsection