@extends('front.principal')
@section('content')




<section class="conteudo-internas">
    <div class="container">
        <div class="row">
            <h1 class="text-2xl text-center font-bold mb-4">
                Como você avalia <br /> <span class="text-[#00db81] font-extrabold">#Somos WLM 2025?</span>
            </h1>


            <!-- Formulário para avaliar -->
            <form method="POST" action="{{ route('ratings.store') }}" class="mb-6">
                @csrf
                <div class="mb-4">
                    <input type="hidden" name="user_id" value="0" id="user_id" required>
                </div>
                <div class="flex flex-wrap gap-2 justify-center">
                    @for ($i = 0; $i <= 10; $i++)
                        <button type="submit" name="score" value="{{ $i }}"
                            class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600 text-sm md:px-4 md:py-2 md:text-base">
                            {{ $i }}
                        </button>
                    @endfor
                </div>
                @if (session('success'))
                    <p class="text-green-500 mt-2">{{ session('success') }}</p>
                @endif
                @if (session('error'))
                    <p class="text-red-500 mt-2">{{ session('error') }}</p>
                @endif
            </form>

            <!-- Média e Histograma -->
            <h2 class="text-xl text-center font-semibold">Média atual: {{ $average }}</h2>
            <canvas id="histogramChart" class="mt-4"></canvas>

            <script>
                const ctx = document.getElementById('histogramChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                        datasets: [{
                            label: 'Quantidade de Votos',
                            data: @json($voteCounts),
                            backgroundColor: 'rgba(0, 219, 129, 0.8)',
                            borderColor: 'rgba(0, 219, 129, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Quantidade de Votos'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: 'Nota'
                                }
                            }
                        }
                    }
                });
            </script>
        </div>

    </section>



@endsection