@extends('layouts.app-layout')

@section('title', 'Mis Resultados')

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

        <h2 class="mb-4">Mis Resultados</h2>

        {{-- ===================== --}}
        {{--  GRÁFICO COMPARATIVO --}}
        {{-- ===================== --}}
        <div class="card shadow-sm mb-5">
            <div class="card-body">
                <h4 class="mb-3">
                    Evolución por Dimensión (Comparativa entre intentos)
                </h4>

                {{-- Checkboxes --}}
                <div class="mb-3">
                    <strong>Seleccionar intentos:</strong>

                    @foreach($intentos as $intento)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input intento-checkbox"
                                   type="checkbox"
                                   value="{{ $intento->id }}"
                                   id="checkIntento{{ $intento->id }}"
                                   checked>
                            <label class="form-check-label" for="checkIntento{{ $intento->id }}">
                                Intento {{ $loop->iteration }}
                            </label>
                        </div>
                    @endforeach
                </div>

                <div style="height:400px;">
                    <canvas id="graficoComparativo"></canvas>
                </div>
            </div>
        </div>


        {{-- ===================== --}}
        {{--   LISTADO INTENTOS   --}}
        {{-- ===================== --}}
        @foreach($intentos as $intentoId => $respuestas)

            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>Intento {{ $intentoId }}</strong>

                    <button class="btn btn-sm btn-outline-secondary"
                            data-bs-toggle="collapse"
                            data-bs-target="#detalleIntento{{ $loop->index }}">
                        Ver gráfico
                    </button>
                </div>

                <div class="collapse mt-3" id="detalleIntento{{ $loop->index }}">
                    <div class="card card-body">

                        {{-- BOTÓN VER RESPUESTAS --}}
                        <div class="mb-3 text-end">
                            <a href="{{ route('contacto.respuestas.detalle', $intento->evaluacion_id) }}"
                               class="btn btn-outline-primary btn-sm">
                                Ver respuestas
                            </a>
                        </div>


                        <div style="height:350px;">
                            <canvas id="graficoIntento{{ $loop->index }}"></canvas>
                        </div>

                    </div>
                </div>
            </div>

        @endforeach


    </div>


    {{-- ===================== --}}
    {{--       SCRIPTS        --}}
    {{-- ===================== --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

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

            const dimensiones = {!! json_encode($dimensiones) !!};
            const datosIntentos = {!! json_encode($datosComparativos) !!};

            const ctx = document.getElementById('graficoComparativo');
            let grafico;

            function crearDatasets() {

                let datasets = [];

                document.querySelectorAll('.intento-checkbox:checked').forEach((checkbox, index) => {

                    const intentoId = checkbox.value;
                    const intento = datosIntentos[intentoId];

                    if (!intento) return;

                    datasets.push({
                        label: 'Intento ' + (index + 1),
                        data: intento,
                        fill: false,
                        tension: 0.3
                    });
                });

                return datasets;
            }

            function actualizarGrafico() {

                if (grafico) {
                    grafico.destroy();
                }

                grafico = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: dimensiones,
                        datasets: crearDatasets()
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 4
                            }
                        }
                    }
                });
            }

            actualizarGrafico();

            document.querySelectorAll('.intento-checkbox').forEach(cb => {
                cb.addEventListener('change', actualizarGrafico);
            });


            {{-- ========================= --}}
                {{--  GRÁFICOS POR INTENTO    --}}
                {{-- ========================= --}}
                @foreach($intentos as $intento)
            (function () {

                const ctxIntento = document.getElementById('graficoIntento{{ $loop->index }}');

                if (!ctxIntento) return;

                new Chart(ctxIntento, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode(array_keys($intento->promedios_por_dimension)) !!},
                        datasets: [{
                            label: 'Promedio por Dimensión',
                            data: {!! json_encode(array_values($intento->promedios_por_dimension)) !!},
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 4
                            }
                        }
                    }
                });

            })();
            @endforeach

        });
    </script>

@endsection