<div class="row">
<div class="col-md-12" style="text-align:center; padding-bottom: 10px;">
<h2>{{ PlanesProgramas.programaCODIGO }} - {{ PlanesProgramas.programaTITULO }} </h2>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align:center;">
<h5>Estado : <span class="badge bg-aqua"><strong>{{ PlanesProgramas.estadoProgramaTITULO }}</strong></span></h5>
</div>
<div class="col-md-12" style="text-align:center; padding-bottom: 1cm;">
<h5><span class="badge bg-aqua"><strong>{{ PlanesProgramas.cargoTITULO }}</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-aqua">
<tr><th style="text-align:center;"><i class="fa fa-calendar"></i> Fecha Inicio</th></tr>
</thead>
<tbody>
<tr><td>
{% if PlanesProgramas.programaFCHINICIA %}
{{ PlanesProgramas.programaFCHINICIA }}
{% elseif PlanesProgramas.FechaInicio.FECHAINICIO %}
{{ PlanesProgramas.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 PlanesProgramas.programaFCHTERMINA %}
{{ PlanesProgramas.programaFCHTERMINA }}
{% elseif PlanesProgramas.FechaFinal.FECHAFINAL %}
{{ PlanesProgramas.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-info 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>
{{ PlanesProgramas.programaJUSTIFICACION|striptags }}
</p>
<p>
{{ PlanesProgramas.programaDESCRIPCION|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-aqua"><i class="fa fa-money"></i></span>
<div class="info-box-content">
<span class="info-box-text">Presupuestado</span>
<span class="info-box-number">
$ {{ PlanesProgramas.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-green"><i class="fa fa-money"></i></span>
<div class="info-box-content">
<span class="info-box-text">Gastado</span>
<span class="info-box-number">
$ {{ PlanesProgramas.TotalGastado.totalGASTADO|number_format }}
<!--span class="badge bg-aqua">{{ PlanesProgramas.programaPresupuestoEJECUTADO|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">
$ {{ (PlanesProgramas.Total.TOTAL - PlanesProgramas.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;">OBJETIVOS</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;">
<table class="table table-bordered table-hover table-responsive">
<thead>
<tr>
<th>Código</th>
<th>Título</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
{% if PlanesProgramas.Objetivos %}
{% for Objetivo in PlanesProgramas.Objetivos %}
<tr>
<td>
{{ Objetivo.objetivoEstrategicoCODIGO }}
</td>
<td>
{{ Objetivo.objetivoEstrategicoTITULO }}
</td>
<td class="titulo-flotante" title="{{ Objetivo.objetivoEstrategicoDESCRIPCION|striptags }}">
{{ Objetivo.objetivoEstrategicoDESCRIPCION| striptags[0:50] }}...
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</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-info">
<div class="box-header with-border" style="text-align:center;">
<h4 style="text-align:center; font-weight: bold;">ACCIONES</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="">
<div class="row">
<div id="div-tbl-acciones-{{hash_vista}}"></div>
</div>
</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: [{{ PlanesProgramas.TotalGastado.totalGASTADO }}, {{ PlanesProgramas.Total.TOTAL - PlanesProgramas.TotalGastado.totalGASTADO}}],
backgroundColor: [
'rgba(0, 166, 90, 0.2)',
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(0, 127, 69, 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", "mostrarTablaCompletaPorPrograma","programaID={{ PlanesProgramas.programaID }}&tipoPlanID={{TipoPlanID}}");
cargarDivisionSicam("div-tbl-acciones-{{hash_vista}}", "planeador", "Acciones", "mostrarTablaCompletaPorPrograma","programaID={{ PlanesProgramas.programaID }}&tipoPlanID={{TipoPlanID}}&hash_padre={{hash_padre}}");
});
</script>