@extends('layouts.app-layout')

@section('title', 'Evaluaciones de Unidad')

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

        <h1 class="h4 fw-bold mb-4">
            {{ $unidad->nombre_comercial }}
        </h1>

        {{-- GRÁFICO --}}
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-body">
                <div style="height:300px;">
                    <canvas id="graficoUnidad"></canvas>
                </div>
            </div>
        </div>

        {{-- CARDS --}}
        <div class="row">
            @foreach($cards as $card)
                <div class="col-md-4 mb-4">
                    <div class="card shadow-sm border-0">

                        <div class="card-body">

                            <h6 class="fw-bold">
                                {{ $card['evaluacion'] }}
                            </h6>

                            <p class="mb-2">
                                Fecha: {{ $card['fecha'] }}
                            </p>

                            <a href="{{ route('funcionario.resultados.unidad', [$unidad->id, $card['intento_id']]) }}"
                               class="btn btn-sm btn-outline-primary w-100">
                                Ver detalle
                            </a>

                        </div>

                    </div>
                </div>
            @endforeach
            <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>
        document.addEventListener('DOMContentLoaded', function () {

            const data = @json($datosGrafica);

            const datasets = Object.entries(data.datasets).map(([dimension, valores]) => {
                return {
                    label: dimension,
                    data: valores,
                    tension: 0.3,
                    fill: false,
                    pointRadius: 4
                };
            });

            new Chart(document.getElementById('graficoUnidad'), {
                type: 'line',
                data: {
                    labels: data.labels,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            suggestedMax: 5
                        }
                    }
                }
            });

        });
    </script>
@endpush