@extends('layouts.app-layout')

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

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

        <h3 class="mb-4">Detalle de Evaluación</h3>

        {{-- 📊 GRÁFICA --}}
        <div class="card shadow-sm mb-4">
            <div class="card-body d-flex justify-content-center">
                <div style="width: 500px; height: 300px;">
                    <canvas id="graficaDimensiones"></canvas>
                </div>
            </div>
        </div>

        {{-- 📂 ACORDEÓN POR DIMENSIÓN --}}
        <div class="accordion mb-4" id="accordionDimensiones">
            @foreach($porDimension as $dimension => $items)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ $loop->index }}">
                        <button class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse{{ $loop->index }}">
                            {{ $dimension }}
                            (Promedio: {{ round($items->avg('valor'),2) }})
                        </button>
                    </h2>

                    <div id="collapse{{ $loop->index }}"
                         class="accordion-collapse collapse"
                         data-bs-parent="#accordionDimensiones">

                        <div class="accordion-body">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>Pregunta</th>
                                    <th>Respuesta</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($items as $respuesta)
                                    <tr>
                                        <td>{{ $respuesta->pregunta->detalle }}</td>
                                        <td>{{ $respuesta->valor }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- 🔙 BOTÓN FINAL --}}
        <div class="text-end">
            <a href="{{ route('funcionario.resultados.unidad.detalles', $unidadId) }}"
               class="btn btn-secondary">
                Ver todas las evaluaciones de esta unidad
            </a>


        </div>
        <div class="text-end">
            <a href="{{ route('funcionario.resultados.index') }}"
               class="btn btn-outline-primary">
                Ver todas las evaluaciones
            </a>

        </div>
    </div>
@endsection

@push('scripts')

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx = document.getElementById('graficaDimensiones');

        const grafica = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($graficaData->pluck('dimension')),
                datasets: [{
                    label: 'Promedio por Dimensión',
                    data: @json($graficaData->pluck('promedio')),
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    </script>
@endpush