<div class="box box-info">        
    <div class="box-body" style="text-transform: uppercase;">
        <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-4 offset-md-1"></div>
            <div class="col-md-4" style="text-align:center; padding-bottom: 1cm;">
                <h5>Estado : <span class="pull-right badge bg-aqua"><strong>{{ PlanesProgramas.estadoProgramaTITULO }}</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;">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-green">
                        <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 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;">
                            <p style="text-align:center;">{{ PlanesProgramas.programaJUSTIFICACION }}</p>
                    </div>
                </div>
            </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;">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-2 offset-md-1"></div>
                        <div class="col-md-8 offset-md-4">       
                            <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">$141,510,040</span>
                                </div>                
                            </div>
                        </div>
                        <canvas id="estadisticas" height="130px"></canvas>
                    </div>
                </div>
            </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;">ACCIONES</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 id="tbl-Planeador-PlanesOperaciones{{ hash_form }}" class="table table-bordered table-hover table-responsive">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Título</th>
                                    <th>Justificación</th>
                                    <th>Costo</th>
                                    <th>Ver</th>
                                </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.planOperacionFCHINICIO }}
                                        </td>
                                        <td >
                                            <a data-skin="skin-blue" class="btn btn-info btn-xs" onclick="cargarAccion({{planAccion.accionID}})"><i class="fa fa-eye"></i></a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    
<script>
    $(document).ready(function () {
        var ctx = document.getElementById("estadisticas").getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Gastado", "Restante"],
            datasets: [{
                data: [15000, 5000],
                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>