<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 10px;">
<h2>{{ PlanesAcciones.accionCODIGO }} - {{ PlanesAcciones.accionTITULO }}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 1cm;">
<button type="button" class="btn btn-default" onclick="cargarDescripcionPrograma_{{hash_padre}}('{{PlanesAcciones.programaID}}','{{TipoPlanID}}')" style="text-transform: uppercase;" >
<strong >Programa:</strong> {{ PlanesAcciones.programaTITULO }}
</button></br></br>
<h5>Responsable : <span class="badge bg-green"><strong>
{% if PlanesAcciones.cargoTITULO %}
{{ PlanesAcciones.cargoTITULO }}
{% else %}
No está definido
{% endif %}</strong></span></h5>
</div>
</div>
<div class="row">
<div class="col-md-2 offset-md-1"></div>
<div class="col-md-4 offset-md-2">
<table class="table table-bordered table-hover table-responsive" style="text-align:center;">
<thead class="bg-green ">
<tr><th style="text-align:center;"><i class="fa fa-calendar"></i> Fecha Inicio</th></tr>
</thead>
<tbody>
<tr><td>
{% if PlanesAcciones.FechaInicio.FECHAINICIO %}
{{ PlanesAcciones.FechaInicio.FECHAINICIO }}
{% else %}
No está definida
{% endif %}</td></tr>
</tbody>
</table>
</div>
<div class="col-md-4 offset-md-2">
<table class="table table-bordered table-hover table-responsive" style="text-align:center;">
<thead class="bg-red">
<tr><th style="text-align:center;"><i class="fa fa-calendar"></i> Fecha Finalización</th></tr>
</thead>
<tbody>
<tr><td>{% if PlanesAcciones.FechaFinal.FECHAFINAL %}
{{ PlanesAcciones.FechaFinal.FECHAFINAL }}
{% else %}
No está definida
{% endif %}</td></tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-success collapsed-box">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">JUSTIFICACIÓN - DESCRIPCIÓN</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none; text-align:justify;">
<p>
{{PlanesAcciones.accionJUSTIFICACION| striptags }}
</p>
<p>
{{PlanesAcciones.accionDESCRIPCION| striptags }}
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-default collapsed-box">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">ESTADÍSTICAS</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none;">
<div class="col-md-5" style="">
<div class="info-box" style="box-shadow: 0 1px 1px rgba(0, 166, 90, 0.3);">
<span class="info-box-icon bg-green "><i class="fa fa-money"></i></span>
<div class="info-box-content">
<span class="info-box-text">Presupuestado</span>
<span class="info-box-number">
$ {{ PlanesAcciones.Total.TOTAL|number_format }}
</span>
</div>
</div>
<div class="info-box" style="box-shadow: 0 1px 1px rgba(0, 166, 90, 0.3);">
<span class="info-box-icon bg-yellow"><i class="fa fa-money"></i></span>
<div class="info-box-content">
<span class="info-box-text">Gastado</span>
<span class="info-box-number">
$ {{ PlanesAcciones.TotalGastado.totalGASTADO|number_format }}
<!--span class="badge bg-aqua">{{ PlanesAcciones.accionEJECUTADO|number_format }}</span-->
</span>
</div>
</div>
<div class="info-box" style="box-shadow: 0 1px 1px rgba(0, 166, 90, 0.3);">
<span class="info-box-icon bg-red"><i class="fa fa-money"></i></span>
<div class="info-box-content">
<span class="info-box-text">Restante</span>
<span class="info-box-number">
$ {{ (PlanesAcciones.Total.TOTAL - PlanesAcciones.TotalGastado.totalGASTADO)|number_format}}
</span>
</div>
</div>
</div>
<div class="col-md-7">
<canvas id="estadisticas-{{hash_vista}}" height="130px"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-default collapsed-box">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">METAS</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="box-body" style="display: none;" id="div-tbl-metas-{{hash_vista}}">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-success">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">ACTIVIDADES</h4>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="box-body" style="" id="div-tbl-actividades-{{hash_vista}}"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var ctx = document.getElementById("estadisticas-{{hash_vista}}").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Gastado", "Restante"],
datasets: [{
data: [{{ PlanesAcciones.TotalGastado.totalGASTADO }}, {{ PlanesAcciones.Total.TOTAL - PlanesAcciones.TotalGastado.totalGASTADO}}],
backgroundColor: [
'rgba(243, 156, 18, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(154, 99, 11, 1)',
'rgba(255,99,132,1)'
],
borderWidth: 2
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipLabel = data.labels[tooltipItem.index];
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
}
}
}
}
});
cargarDivisionSicam("div-tbl-metas-{{hash_vista}}", "planeador", "Metas", "mostrarTablaCompletaPorAccion","accionID={{ PlanesAcciones.accionID }}");
cargarDivisionSicam("div-tbl-actividades-{{hash_vista}}", "planeador", "Actividades", "mostrarTablaCompletaPorAccion","accionID={{ PlanesAcciones.accionID }}&tipoPlanID={{TipoPlanID}}&hash_padre={{hash_padre}}");
});
</script>