Sindbad~EG File Manager

@extends('adminlte::page')

@section('title', $asignacion->evaluacion)

@section('content') 

	<style>
		fieldset {
		  border: 1px solid #1177d1;
		  border-radius: 10px;
		  padding: 10px;
		}
		legend {
		  padding: 10px;
		  width: 50%;
		}
		@media print{
			.imprimir * {
				display:block;
			}
		    .toPrint{
		    	display:block; border:0; width:100%; min-height:500px
		    }
		    .no-print, .no-print *{
        		display: none !important;
    		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<div class="imprimir">
    	<h1 style="color: #1177d1;">{{ $asignacion->evaluacion }}</h1>
    	<p style="color: #6c757d;"><b>Evaluado: </b>{{ $asignacion->evaluado }}</p>
    	<p style="color: #6c757d;"><b>Fecha de evaluación: </b>{{date("d/m/Y - h:i:s", strtotime($asignacion->fecha_evaluacion))}}</p>
    	<hr>
		@foreach($competencias as $com)
			<div class="card">
				<div class="card-body">
					<fieldset>
			    		<legend style="color: #1177d1;">{{ $com->com_nom }}</legend>
			    		
			    		@livewire('cargarinterrogantes', ['competenciaid' => $com->id,'asignacionid' => $asignacion->id,"tipo" => "mostrar"])

			    	</fieldset><br>
			    </div>
			</div>
		@endforeach

		<div class="row">
			<div class="col-md-12">
				<canvas id="myChart" width="200"></canvas>
			</div>
		</div>
	</div>
	@include('admin.formulario.print')
	<div class="card">
		<div class="card-body">
			<center><button class="btn btn-info no-print" onclick="imprimir()"><i class="fas fa-print"></i> Imprimir informe</button> | <a href="{{ url('/admin/evaluado/formulario/ver/pdf/'.$asignacion->id) }}"> <!--<button class="btn btn-success no-print"><i class="fas fa-print"></i> Imprimir informe avanzado</button>--></a><center>
		</div>
	</div>
@stop

@section('adminlte_js')
	<script>
    	var nombres = <?php echo $nombres; ?>;
    	var estadisticas = <?php echo $estadisticas; ?>;
	    var barChartData = {
	        labels: nombres,
	        datasets: [{
	            label: 'Porcentajes de competencias',
	            backgroundColor: [
	                'rgba(255, 99, 132, 0.2)',
	                'rgba(54, 162, 235, 0.2)',
	                'rgba(255, 206, 86, 0.2)',
	                'rgba(75, 192, 192, 0.2)',
	                'rgba(153, 102, 255, 0.2)',
	                'rgba(255, 159, 64, 0.2)',
	                'rgba(255, 99, 132, 0.2)',
	                'rgba(54, 162, 235, 0.2)',
	                'rgba(255, 206, 86, 0.2)',
	                'rgba(75, 192, 192, 0.2)',
	                'rgba(153, 102, 255, 0.2)',
	                'rgba(255, 159, 64, 0.2)'
	            ],
	            data: estadisticas
	        }]
	    };

	    window.onload = function() {
	        var ctx = document.getElementById("myChart").getContext("2d");
	        window.myBar = new Chart(ctx, {
	            type: 'horizontalBar',
	            data: barChartData,
	            options: {
	                elements: {
	                    rectangle: {
	                        borderWidth: 2,
	                        borderColor: [
				                'rgba(255, 99, 132, 1)',
				                'rgba(54, 162, 235, 1)',
				                'rgba(255, 206, 86, 1)',
				                'rgba(75, 192, 192, 1)',
				                'rgba(153, 102, 255, 1)',
				                'rgba(255, 159, 64, 1)',
				                'rgba(255, 99, 132, 1)',
				                'rgba(54, 162, 235, 1)',
				                'rgba(255, 206, 86, 1)',
				                'rgba(75, 192, 192, 1)',
				                'rgba(153, 102, 255, 1)',
				                'rgba(255, 159, 64, 1)'
				            ],
	                        borderSkipped: 'bottom'
	                    }
	                },
	                responsive: true,
	                title: {
	                    display: true,
	                    text: 'Porcentajes de competencias'
	                }
	            }
	        });


	    };
	</script>
	
	<script>
        function imprimir(){
            var mode = 'iframe'; //popup
            var close = mode == "popup";
            var options = { mode : mode, popClose : close, popHt: 400,popWd: 600,popX: 700,popY: 500};
            $("#factura").printArea( options );
        }
    </script> 
@stop