@extends('dashboard.app')
@section('content')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <div class="container-fluid">
        <div class="container mt-5">
            <h1 class="mb-4">Dashboard de Avaliações</h1>

            <!-- Métricas -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Total de Avaliações</h5>
                            <p class="card-text fs-3">{{ $totalRatings }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Média Geral</h5>
                            <p class="card-text fs-3">{{ $averageRating }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">IPs Únicos</h5>
                            <p class="card-text fs-3">{{ $uniqueIps }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <h5 class="card-title">Avaliações por IP</h5>
                            <p class="card-text fs-3">{{ $ratingsPerIp }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gráfico de Distribuição -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Distribuição de Notas</h5>
                            <canvas id="voteDistributionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Lista de Avaliações -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Lista de Avaliações</h5>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>User ID</th>
                                            <th>IP Address</th>
                                            <th>Nota</th>
                                            <th>Data</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($allRatings as $rating)
                                            <tr>
                                                <td>{{ $rating->id }}</td>
                                                <td>{{ $rating->user_id }}</td>
                                                <td>{{ $rating->ip_address }}</td>
                                                <td>{{ $rating->score }}</td>
                                                <td>{{ $rating->created_at->format('d/m/Y H:i') }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center">Nenhuma avaliação registrada.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Script para o Gráfico -->
        <script>
            const ctx = document.getElementById('voteDistributionChart').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($voteDistribution),
                        backgroundColor: 'rgba(0, 219, 129, 0.8)', // Verde (#00db81)
                        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>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    </div>
@endsection














{{-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard de Avaliações</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">Dashboard de Avaliações</h1>

        <!-- Métricas -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Total de Avaliações</h5>
                        <p class="card-text fs-3">{{ $totalRatings }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Média Geral</h5>
                        <p class="card-text fs-3">{{ $averageRating }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">IPs Únicos</h5>
                        <p class="card-text fs-3">{{ $uniqueIps }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Avaliações por IP</h5>
                        <p class="card-text fs-3">{{ $ratingsPerIp }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráfico de Distribuição -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Distribuição de Notas</h5>
                        <canvas id="voteDistributionChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lista de Avaliações -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Lista de Avaliações</h5>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>User ID</th>
                                        <th>IP Address</th>
                                        <th>Nota</th>
                                        <th>Data</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($allRatings as $rating)
                                        <tr>
                                            <td>{{ $rating->id }}</td>
                                            <td>{{ $rating->user_id }}</td>
                                            <td>{{ $rating->ip_address }}</td>
                                            <td>{{ $rating->score }}</td>
                                            <td>{{ $rating->created_at->format('d/m/Y H:i') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center">Nenhuma avaliação registrada.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Script para o Gráfico -->
    <script>
        const ctx = document.getElementById('voteDistributionChart').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($voteDistribution),
                    backgroundColor: 'rgba(0, 219, 129, 0.8)', // Verde (#00db81)
                    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>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> --}}