@extends('layouts.app-layout')

@section('title', 'Detalle de Evaluación')

@section('content')
    <div class="container py-5">

        <h1 class="h4 fw-bold mb-4">
            Evolución {{ $evaluacion-> id }}
        </h1>

        @forelse($graficoData as $dimension => $puntos)

            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">{{ $dimension }}</h5>

                    <div style="height:300px;">
                        <canvas id="chart-{{ \Illuminate\Support\Str::slug($dimension) }}"></canvas>
                    </div>
                </div>
            </div>

        @empty
            <div class="alert alert-info">
                No hay datos suficientes para mostrar la evolución.
            </div>
        @endforelse

    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const graficoData = @json($graficoData);

            Object.entries(graficoData).forEach(([dimension, puntos]) => {

                const slug = @json(
            collect($graficoData)
                ->keys()
                ->mapWithKeys(fn($d) => [$d => \Illuminate\Support\Str::slug($d)])
        );

                const id = 'chart-' + slug[dimension];

                const canvas = document.getElementById(id);
                if (!canvas) return;

                new Chart(canvas.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: puntos.map(p => p.fecha),
                        datasets: [{
                            label: 'Puntaje promedio',
                            data: puntos.map(p => p.promedio),
                            tension: 0.3,
                            fill: false,
                            pointRadius: 5,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                suggestedMax: 5
                            }
                        }
                    }
                });

            });

        });
    </script>
@endpush