<div class="row">        
    <div class="box-body" style="text-transform: uppercase;">
        <div class="row">
            <div class="col-md-12" style="text-align:center; padding-bottom: 10px;">
                <h2>{% if PlanesProgramas %}
                        {{ PlanesProgramas.programaCODIGO }} - {{ PlanesProgramas.programaTITULO }} 
                    {% elseif PlanesAcciones %} 
                        {{ PlanesAcciones.accionCODIGO }} - {{ PlanesAcciones.accionTITULO }}
                    {% elseif Actividad %} 
                        {{Actividad.actividadCODIGO}} - {{Actividad.actividadTITULO}}
                    {% endif %}</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="text-align:center; padding-bottom: 1cm;">
                {% if PlanesProgramas %}
                <h5>Estado : <span class="badge bg-green"><strong>{{ PlanesProgramas.estadoProgramaTITULO }}</strong></span></h5>
                {% elseif PlanesAcciones %} 
                <button type="button" class="btn btn-default" onclick="cargarDescripcion('programaID={{PlanesAcciones.programaID}}','tipoPlanID={{TipoPlanID}}')" style="text-transform: uppercase;" >
                    <strong >Programa:</strong> {{ PlanesAcciones.programaTITULO }}
                </button>
                <h5>Responsable : <span class="pull-right"><strong>{{ PlanesAcciones.cargoTITULO }}</strong></span></h5>
                {% elseif Actividad %} 
                <button type="button" class="btn btn-default" onclick="cargarDescripcion('accionID={{Actividad.accionID}}','tipoPlanID={{TipoPlanID}}')" style="text-transform: uppercase;">
                    <strong >Acción:</strong> {{ Actividad.accionTITULO }}
                </button>
                {% endif %}
            </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="{% if PlanesProgramas %} bg-green {% elseif  PlanesAcciones %} bg-aqua {% elseif Actividad %} bg-yellow {% endif %} ">
                        <tr><th  style="text-align:center;">Fecha Inicio</th></tr>
                    </thead>
                    <tbody>
                            <tr><td>
                                {% if PlanesProgramas.programaFCHINICIA %}
                                    {{ PlanesProgramas.programaFCHINICIA }}
                                {% 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;">Fecha Finalización</th></tr>
                    </thead>
                    <tbody> 
                            <tr><td>{% if PlanesProgramas.programaFCHTERMINA %}
                                    {{ PlanesProgramas.programaFCHTERMINA }}
                                {% else %}
                                    No está definida
                                {% endif %}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                    <div class="box {% if PlanesProgramas %} box-success {% elseif  PlanesAcciones %} box-info {% elseif Actividad %} box-warning {% endif %} 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;">
                            <p style="text-align:justify;">
                                {% if PlanesProgramas %}
                                    {{ PlanesProgramas.programaJUSTIFICACION|striptags }}
                                {% elseif PlanesAcciones %}
                                    {{PlanesAcciones.accionJUSTIFICACION|striptags }}
                                {% elseif Actividad %}
                                    {{Actividad.actividadJUSTIFICACION| striptags }}
                                {% endif %}</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="padding-top:2cm;">       
                            <div class="info-box" style="box-shadow: 0 1px 1px rgba(0, 166, 90, 0.3);">
                                <span class="info-box-icon {% if PlanesProgramas %} bg-green {% elseif  PlanesAcciones %} bg-aqua {% elseif Actividad %} bg-yellow {% endif %} "><i class="fa fa-money"></i></span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Presupuestado</span>
                                    <span class="info-box-number">
                                        {% if PlanesProgramas %}
                                             {{ PlanesProgramas.Total.TOTAL }}
                                         {% elseif  PlanesAcciones %}
                                             {{ PlanesAcciones.Total.TOTAL }}
                                         {% elseif  Actividad %}
                                             {{ Actividad.Total.TOTAL }}
                                         {% endif %}
                                       
                                    </span>
                                </div>                
                            </div>
                        </div>
                        <div class="col-md-7">
                            <canvas id="estadisticas" height="130px"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                    <div class="box{% if PlanesProgramas %} box-success {% elseif  PlanesAcciones %} box-info {% elseif Actividad %} box-warning {% endif %} ">
                        <div class="box-header with-border"  style="text-align:center;">
                            <h4 style="text-align:center; font-weight: bold;"> {% if PlanesProgramas.Acciones %}ACCIONES{% elseif  PlanesAcciones %}ACTIVIDADES{% elseif  Actividad %}OPERACIONES{% endif %}</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="">
                        <table  class="table table-bordered table-hover table-responsive">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    {% if not Actividad %}
                                        <th>Título</th>
                                        <th>Justificación</th>
                                    {% else %}
                                        <th>Tipo Operación</th>
                                        <th>Descripción</th>
                                    {% endif %}
                                    {% if (PlanesAcciones or Actividad) %}
                                        <th>Fecha Inicia</th>
                                        <th>Fecha Termina</th>
                                    {% endif %}
                                    <th>Costo</th>
                                    {% if not Actividad %}
                                        <th>Ver</th>
                                    {% endif %}
                                </tr>
                            </thead>
                            <tbody> 
                                {% if PlanesProgramas.Acciones %}
                                    {% for planAccion in PlanesProgramas.Acciones %}
                                    <tr>
                                        <td>
                                            {{ planAccion.accionCODIGO }}
                                        </td>
                                        <td>
                                            {{ planAccion.accionTITULO }}
                                        </td>
                                        <td>
                                            {{ planAccion.accionJUSTIFICACION| striptags[0:50] }}...
                                        </td>
                                        <td>
                                           {{ planAccion.Total.TOTAL }}
                                        </td>
                                        <td >
                                            <a data-skin="skin-blue" class="btn btn-info btn-xs" onclick="cargarDescripcion('accionID={{planAccion.accionID}}','tipoPlanID={{TipoPlanID}}')"><i class="fa fa-eye"></i></a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% elseif  PlanesAcciones %}
                                    {% for planActividad in PlanesAcciones.Actividades %}
                                    <tr>
                                        <td>
                                            {{ planActividad.actividadCODIGO }}
                                        </td>
                                        <td>
                                            {{ planActividad.actividadTITULO }}
                                        </td>
                                        <td>
                                            {{ planActividad.actividadJUSTIFICACION| striptags[0:50] }}...
                                        </td>
                                        <td>
                                            {{ planActividad.actividadFCHINICIAL }}
                                        </td>
                                        <td>
                                            {{ planActividad.actividadFCHFINAL }}
                                        </td>
                                        <td>
                                            {{ planActividad.Total.TOTAL }}
                                        </td>
                                        <td >
                                            <a data-skin="skin-blue" class="btn btn-info btn-xs" onclick="cargarDescripcion('actividadID={{planActividad.actividadID}}','tipoPlanID={{TipoPlanID}}')"><i class="fa fa-eye"></i></a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% elseif  Actividad %}
                                    {% for planOperacion in Actividad.Operaciones %}
                                    <tr>
                                        <td>
                                            {{ planOperacion.planOperacionCODIGO }}
                                        </td>
                                        <td>
                                            {{ planOperacion.tipoOperacionTITULO }}
                                        </td>
                                        <td>
                                            {{ planOperacion.planOperacionDESCRIPCION| striptags[0:50] }}...
                                        </td>
                                        <td>
                                            {{ planOperacion.planOperacionFCHINICIO }}
                                        </td>
                                        <td>
                                            {{ planOperacion.planOperacionFCHFINAL }}
                                        </td>
                                        <td>
                                            {{ planOperacion.planOperacionPRESUPUESTADO }}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% if Actividad %}
            <div class="row">
                <div class="col-md-12">
                        <div class="box box-danger">
                            <div class="box-header with-border"  style="text-align:center;">
                                <h4 style="text-align:center; font-weight: bold;">INGRESOS</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="">
                            <table class="table table-striped table-bordered" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Plan</th>
                                        <th>Clase de Ingreso</th>
                                        <th>Presupuesto</th>
                                        <th>Fecha Proyectada</th>
                                        <th>Usuario Proyectado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for registroIngresoActividades in Actividad.PlanesIngresos  %}
                                    <tr>
                                        <td>{{ registroIngresoActividades.planCODIGO }}</td>
                                        <td>{{ registroIngresoActividades.claseIngresoTITULO }}</td>
                                        <td>{{ registroIngresoActividades.planIngresoPRESUPUESTO }}</td>
                                        <td>{{ registroIngresoActividades.planIngresoFCHPROYECTADO }}</td>
                                        <td>{{ registroIngresoActividades.planIngresoUSRPROYECTADO }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
    
<script type="text/javascript">
    $(document).ready(function () {
        var ctx = document.getElementById("estadisticas").getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Gastado", "Restante"],
            datasets: [{
                 {% if PlanesProgramas %}
                    data: [2000000, {{ PlanesProgramas.Total.TOTAL - 2000000}}],
                 {% elseif  PlanesAcciones %}
                    data: [2000000, {{ PlanesAcciones.Total.TOTAL - 2000000}}],
                 {% elseif  Actividad %}
                    data: [2000000, {{ Actividad.Total.TOTAL  - 2000000}}],
                 {% endif %}
                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 + '%)';
                }
            }
        }
    }
    });
    });
</script>    

