@extends('front.principal')
@section('content')
<section class="cabecalho-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h2 class="titulo-padrao">Ranking WLM</h2>
            </div>
        </div>
    </div>
</section>

<section class="conteudo-internas">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 offset-sm-2">
                <!-- START:: LOOP -->
                @php
                   // dd($leaderRankings);
                @endphp
               <div id="leaderboardContainer">
                @foreach ($leaderRankings as $ranking)
                    <div class="hstack">
                        <div class="date {{ $loop->iteration > 3 ? 'noThree' : '' }}">
                            {{ $loop->iteration }}º lugar
                        </div>
                        <div class="desc_evento justify-content-between">
                            {{ $ranking['user'] }}
                            <div class="hstackPoints">
                                <span>{{ $ranking['score'] }}</span>
                                <small>pontos</small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                <script>
                    function updateLeaderboard() {
                        $.ajax({
                            url: "{{ route('quiz.leaderboard') }}", // Rota para buscar os rankings
                            type: "GET",
                            dataType: "json",
                            success: function(response) {
                                let leaderHtml = '';
                                let salesHtml = '';

                                response.leaderRankings.forEach((ranking, index) => {
                                    let rankClass = index > 2 ? 'noThree' : '';

                                    leaderHtml += `
                                        <div class="hstack">
                                            <div class="date ${rankClass}">
                                                ${index + 1}º lugar
                                            </div>
                                            <div class="desc_evento justify-content-between">
                                                ${ranking.user}
                                                <div class="hstackPoints">
                                                    <span>${ranking.score}</span>
                                                    <small>pontos</small>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                });

                                response.salesRankings.forEach((ranking, index) => {
                                    let rankClass = index > 2 ? 'noThree' : '';

                                    salesHtml += `
                                        <div class="hstack">
                                            <div class="date ${rankClass}">
                                                ${index + 1}º lugar
                                            </div>
                                            <div class="desc_evento justify-content-between">
                                                ${ranking.user}
                                                <div class="hstackPoints">
                                                    <span>${ranking.score}</span>
                                                    <small>pontos</small>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                });

                                // Atualiza os containers do ranking na página
                                $("#leaderboardContainer").html(leaderHtml);
                                $("#salesboardContainer").html(salesHtml);
                            },
                            error: function(xhr, status, error) {
                                console.error("Erro ao atualizar ranking:", error);
                            }
                        });
                    }

                    // Atualiza o ranking a cada 5 segundos
                    setInterval(updateLeaderboard, 2000);
                </script>

            </div>
        </div>
    </div>
</section>
@endsection