@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/reglas.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>
                    <div>
                        <h4 class="titulo_destacado">Reglas de la Comunidad Docente AUGE</h4>
                    </div>

                    <!-- Post de usuario -->
                    <div class="fondo-modelo">
                        <!-- PARA QUÉ ES -->
                        <div class="borde-izquierdo permitido">
                            <div class="uk-width-expand ">
                                <h4>✅ PARA QUÉ ES LA COMUNIDAD</h4>
                                <ul class="uk-list uk-margin-remove-top">
                                    <li><strong>🟢 Aprender cosas nuevas</strong><br>
                                        Haz preguntas que ayuden a todos a crecer.
                                    </li>
                                    <li><strong>🟢 Ayudar a los demás</strong><br>
                                        Responde, comparte materiales y apoya a tus colegas.
                                    </li>
                                    <li><strong>🟢 Inspirar a otros</strong><br>
                                        Publica tus resultados, estrategias o experiencias que motiven a la comunidad.
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="fondo-modelo">
                        <!-- PARA QUÉ ES -->
                        <div class="borde-izquierdo prohibido">
                            <div class="uk-width-expand">
                                <h4>❌ PARA QUÉ NO ES LA COMUNIDAD</h4>
                                <ul class="uk-list uk-margin-remove-top ">
                                    <li><strong>🔴 Quejarse </strong><br>
                                        Los problemas deben reportarse en Soporte, no aquí.
                                    </li>
                                    <li><strong>🔴 Promocionar productos o servicios </strong><br>
                                        Está prohibido publicar links de terceros o hacer spam.
                                    </li>
                                    <li><strong>🔴 Fomentar conflictos </strong><br>
                                        No se permite lenguaje ofensivo ni faltas de
                                        respeto.
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="fondo-modelo">
                        <!-- REGLAS CLAVE -->
                        <div class="borde-izquierdo reglas">
                            <div class="uk-width-expand">
                                <h4>📘 REGLAS CLAVE</h4>
                                <ul class="uk-list uk-margin-remove-top">
                                    <li><strong>🔵 Respeto y actitud positiva → </strong> Cuida tus palabras y mantén el
                                        ambiente constructivo.</li>
                                    <li><strong>🔵 Colaboración activa </strong> → Comparte contenido útil y de valor.</li>
                                    <li><strong>🔵 Cuidado con la información </strong> → No publiques datos personales
                                        tuyos ni de terceros.</li>
                                    <li><strong>🔵 Uso responsable </strong> → Este espacio es académico y profesional.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="fondo-modelo">
                        <!-- CONSECUENCIAS -->
                        <div class="borde-izquierdo consecuencias">
                            <div class="uk-width-expand">
                                <h4>⚠️ CONSECUENCIAS</h4>
                                <ul class="uk-list uk-margin-remove-top">
                                    <li><strong>🟡 Aviso </strong> → Se notificará en caso de incumplir normas leves.</li>
                                    <li><strong>🟡 Suspensión temporal </strong> → Se restringirá el acceso a la comunidad
                                        por un tiempo determinado.</li>
                                    <li><strong>🟡 Expulsión inmediata </strong> → Por faltas graves o reincidencia, sin
                                        previo aviso.</li>
                                    <li><strong>🟡 Bloqueo de participación </strong> → Se desactivará la opción de comentar
                                        o publicar hasta regularizar la situación.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <br>



                </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