<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">Detalles de la Operación - <b> {{PlanesOperaciones.planOperacionCODIGO}} </b></h3>
        <div class="box-tools pull-right">
            {{ boton("cerrar", null, "cerrarDetallesPlanesOperacionesPlaneador()")}}
        </div>            
    </div>        
    <div class="box-body">
        <div class="row">
            <div class="col-md-7" style="padding-bottom: 1cm;">
                <div class="panel panel-info">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <h5>Tipo de Plan:
                                    <strong>
                                        {% if PlanesOperaciones.tipoPlanTITULO %} 
                                            {{ PlanesOperaciones.tipoPlanTITULO }}
                                        {% else %}
                                            No está definido
                                        {% endif %}
                                    </strong>
                                </h5>
                                <h5>Programa :
                                    <strong>
                                        {% if PlanesOperaciones.programaTITULO %} 
                                            {{ PlanesOperaciones.programaTITULO }}
                                        {% else %}
                                            No está definida
                                        {% endif %}
                                    </strong>
                                </h5>
                                <h5>Acción :
                                    <strong>
                                        {% if PlanesOperaciones.accionTITULO %} 
                                            {{ PlanesOperaciones.accionTITULO }}
                                        {% else %}
                                            No está definida
                                        {% endif %}
                                    </strong>
                                </h5>
                                <h5>Actividad :
                                    <strong>
                                        {% if PlanesOperaciones.actividadTITULO %} 
                                            {{ PlanesOperaciones.actividadTITULO }}
                                        {% else %}
                                            No está definida
                                        {% endif %}
                                    </strong>
                                </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h5>Operación Predefinida :
                                    <strong>
                                        {% if PlanesOperaciones.operacionPredefinidaTITULO %} 
                                            {{ PlanesOperaciones.operacionPredefinidaTITULO }}
                                        {% else %}
                                            No está definida
                                        {% endif %}
                                    </strong>
                                </h5>
                                <h5><b>Descripción:</b></h5>
                                <p style="text-align:justify;">{{PlanesOperaciones.planOperacionDESCRIPCION| striptags }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-5" style="padding-bottom: 1cm;">
                <div class="panel panel-info">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-xs-6">
                                    <table class="table table-bordered table-hover table-responsive"  style="text-align:center;">
                                        <thead  class="bg-yellow">
                                            <tr><th  style="text-align:center;"><i class="fa fa-calendar"></i> Fecha Inicio</th></tr>
                                        </thead>
                                        <tbody>
                                                <tr><td>
                                                    {% if PlanesOperaciones.planOperacionFCHINICIO %}
                                                        {{ PlanesOperaciones.planOperacionFCHINICIO }}
                                                    {%else%}
                                                        No está definida
                                                    {% endif %}</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-xs-6">
                                    <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 PlanesOperaciones.planOperacionFCHFINAL %}
                                                        {{ PlanesOperaciones.planOperacionFCHFINAL }}
                                                    {%else%}
                                                        No está definida
                                                    {% endif %}</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="col-xs-4">     
                                    <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-money"></i> Presupuesto</th></tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                    <td>
                                                        {% if PlanesOperaciones.planOperacionPRESUPUESTADO %}
                                                             $ {{ PlanesOperaciones.planOperacionPRESUPUESTADO|number_format }}
                                                        {%else%}
                                                            No está definido
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-xs-4"> 
                                    <table class="table table-bordered table-hover table-responsive"  style="text-align:center;">
                                        <thead  class="bg-yellow">
                                            <tr><th  style="text-align:center;"><i class="fa fa-money"></i> Gastado</th></tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                    <td>
                                                         $ {{ PlanesOperaciones.TotalGastado.TOTAL|number_format }}
                                                    </td>
                                                </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-xs-4"> 
                                    <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-money"></i> Restante</th></tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                    <td>
                                                        $ {{ (PlanesOperaciones.planOperacionPRESUPUESTADO -  PlanesOperaciones.TotalGastado.TOTAL)|number_format}}
                                                    </td>
                                                </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <h5>Estado: <span class="badge bg-aqua">
                                        <strong>
                                            {% if PlanesOperaciones.estadoOperacionTITULO %} 
                                                {{ PlanesOperaciones.estadoOperacionTITULO }}
                                            {% else %}
                                                No está definido
                                            {% endif %}
                                        </strong>
                                    </span>
                                </h5>
                                <h5>Tipo de Operación:
                                    <strong>
                                        {% if PlanesOperaciones.tipoOperacionTITULO %} 
                                            {{ PlanesOperaciones.tipoOperacionTITULO }}
                                        {% else %}
                                            No está definido
                                        {% endif %}
                                    </strong>
                                </h5>
                                <h5>Clase de Operación:
                                    <strong>
                                        {% if PlanesOperaciones.claseOperacionTITULO %} 
                                            {{ PlanesOperaciones.claseOperacionTITULO }}
                                        {% else %}
                                            No está definido
                                    {% endif %}
                                    </strong>
                                </h5>
                                <h5>Prioridad:
                                    <strong>
                                        {% if PlanesOperaciones.prioridadTITULO %} 
                                            {{ PlanesOperaciones.prioridadTITULO }}
                                        {% else %}
                                            No está definida
                                        {% endif %}
                                    </strong>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">REVISIÓN TÉCNICA</div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-12" style="padding-top:15px;padding-bottom:15px;">
                                <button class="btn btn-default pull-left" onclick="cargarComentariosRevisionTecnica()"> <i class="fa fa-refresh" aria-hidden="true"></i> Recargar Comentarios</button>
                                <div class="col-xs-4 pull-right">
                                    <h5> Estado : <span class="badge bg-blue">
                                            <strong>
                                                {% if PlanesOperaciones.planOperacionESTADOREVISIONTECNICA %} 
                                                    {{ PlanesOperaciones.planOperacionESTADOREVISIONTECNICA }}
                                                {% else %}
                                                    No está definido
                                                {% endif %}
                                            </strong>
                                        </span>
                                    </h5>
                                </div>
                            </div>
                        </div>
                        <div id="div-seccion-tecnica-{{hash_vista}}"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">REVISIÓN FINANCIERA</div>
                    <div class="panel-body">
                        <div class="row" style="text-align:center;">
                            <div class="col-xs-4">
                                <h5>Tipo de Gasto : <span class="badge bg-red">
                                        <strong>
                                            {% if PlanesOperaciones.tipoGastoTITULO %} 
                                                {{ PlanesOperaciones.tipoGastoTITULO }}
                                            {% else %}
                                                No está definida
                                            {% endif %}
                                        </strong>
                                    </span>
                                </h5>
                            </div>
                            <div class="col-xs-4">
                                <h5>Rubro: <span class="badge bg-green">
                                        <strong>
                                            {% if PlanesOperaciones.rubroTITULO %} 
                                                {{ PlanesOperaciones.rubroTITULO }}
                                            {% else %}
                                                No está definido
                                            {% endif %}
                                        </strong>
                                    </span>
                                </h5>
                            </div>
                            <div class="col-xs-4">
                                <h5> Centro de Costos : <span class="badge bg-blue">
                                        <strong>
                                            {% if PlanesOperaciones.centroCostosTITULO %} 
                                                {{ PlanesOperaciones.centroCostosTITULO }}
                                            {% else %}
                                                No está definido
                                            {% endif %}
                                        </strong>
                                    </span>
                                </h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12" style="padding-top:15px;padding-bottom:15px;">
                                <button class="btn btn-default pull-left" onclick="cargarComentariosRevisionFinanciera()"><i class="fa fa-refresh" aria-hidden="true"></i> Recargar Comentarios</button>
                                <div class="col-xs-4 pull-right">
                                    <h5> Estado : <span class="badge bg-blue">
                                            <strong>
                                                {% if PlanesOperaciones.planOperacionESTADOREVISIONFINANCIERA %} 
                                                    {{ PlanesOperaciones.planOperacionESTADOREVISIONFINANCIERA }}
                                                {% else %}
                                                    No está definido
                                                {% endif %}
                                            </strong>
                                        </span>
                                    </h5>
                                </div>
                            </div>
                        </div>
                        <div id="div-seccion-financiera-{{hash_vista}}"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                    <div class="box box-warning collapsed-box">
                        <div class="box-header with-border"  style="text-align:center;">
                            <h4 style="text-align:center; font-weight: bold;">FUNCIÓN DE LEY {% if PlanesOperaciones.camaraFuncionCODIGO %} - {{PlanesOperaciones.camaraFuncionCODIGO}} {% endif %}</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>
                                {{PlanesOperaciones.camaraFuncionTITULO| striptags }}
                            </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    
    $(document).ready(function () {
        cargarComentariosRevisionTecnica();
        cargarComentariosRevisionFinanciera(); 
    });
    function cerrarDetallesPlanesOperacionesPlaneador() {
        cerrarTabContenedor("frm-Planeador-PlanesOperaciones-{{hash_vista}}");
    }
    
    function cargarComentariosRevisionTecnica(){
        cargarDivisionSicam('div-seccion-tecnica-{{hash_vista}}', 'planeador', 'RevisionTecnicaOperaciones', 'verComentarios', 'planOperacionID={{PlanesOperaciones.planOperacionID}}');
    }
    
    function cargarComentariosRevisionFinanciera(){
        cargarDivisionSicam('div-seccion-financiera-{{hash_vista}}', 'planeador', 'RevisionFinancieraOperaciones', 'verComentarios', 'planOperacionID={{PlanesOperaciones.planOperacionID}}');
    }
</script>    
   
