<div>
    <div class="row">
        <div class="col-md-12">
            <h2>Estadisticas de {{$evaluado->name}}</h2><hr>
        </div>
        <div class="col-md-12 table-responsive">
            <table class="table table-bordered">
		        <thead style="text-align: center;">
		            <tr>
		                <th class="bg-danger">No Realizado</th>
		                <th class="bg-warning">En Proceso</th>
		                <th class="bg-success">Realizado</th>
		                <th class="bg-light">Suspendido</th>
		            </tr>
		        </thead>
		        <tbody>
                    <tr>
                        <td class="text-center">{{$noRealizado}} {{$noRealizado == 1 ? 'objetivo' : 'objetivos'}}</td>
                        <td class="text-center">{{$enProceso}} {{$enProceso == 1 ? 'objetivo' : 'objetivos'}}</td>
                        <td class="text-center">{{$realizado}} {{$realizado == 1 ? 'objetivo' : 'objetivos'}}</td>
                        <td class="text-center">{{$suspendido}} {{$suspendido == 1 ? 'objetivo' : 'objetivos'}}</td>
                    </tr>
		        </tbody>
		    </table>
        </div>
        <div class="col-md-6">
            <canvas id="pie-chart" width="800" height="450"></canvas>
        </div>
        <div class="col-md-6">
            <canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
        </div>
    </div>
    

    @section('js')
        <script>
            new Chart(document.getElementById("pie-chart"), {
                type: 'pie',
                data: {
                labels: ["No Realizado", "En Proceso", "Realizado", "Suspendido"],
                datasets: [{
                    label: "Objetivos",
                    backgroundColor: ["#dc3545", "#ffc107","#28a745","#6c757d"],
                    data: [{{$noRealizado}},{{$enProceso}},{{$realizado}},{{$suspendido}}]
                }]
                },
                options: {
                title: {
                    display: true,
                    text: ''
                }
                }
            });
        </script>
        <script>
            new Chart(document.getElementById("bar-chart-horizontal"), {
                type: 'horizontalBar',
                data: {
                labels: ["No Realizado", "En Proceso", "Realizado", "Suspendido"],
                datasets: [
                    {
                    label: "Objetivos",
                    backgroundColor: ["#dc3545", "#ffc107","#28a745","#6c757d"],
                    data: [{{$noRealizado}},{{$enProceso}},{{$realizado}},{{$suspendido}}]
                    }
                ]
                },
                options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: ''
                }
                }
            });
        </script>
    @stop
</div>