<div class="box box-info" >
    <div class="box-header" style="text-align:center;">
        <h3 class="box-title" style="text-transform:uppercase;">{{Actividad.actividadCODIGO}} - {{Actividad.actividadTITULO}}</h3>
    </div>
    <div class="box-body">
        <div class="row">
            <!--div class="col-md-12"  style="text-align:center;">
                <h3 class="box-title">Justificación:</h3>
                {{Actividad.actividadJUSTIFICACION| striptags}}
            </div-->
            <div class="col-md-12"  style="text-align:center;">
                <div class="col-xs-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="fa fa-map-marker"></i></span>
                        <div class="info-box-content">
                          <span class="info-box-text">Lugar</span>
                          <span class="info-box-number">{{Actividad.actividadLUGAR}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="fa fa-calendar"></i></span>
                        <div class="info-box-content">
                          <span class="info-box-text">Fecha Inicial</span>
                          <span class="info-box-number">{{Actividad.actividadFCHINICIAL}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="fa fa-calendar"></i></span>
                        <div class="info-box-content">
                          <span class="info-box-text">Fecha Final</span>
                          <span class="info-box-number">{{Actividad.actividadFCHFINAL}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12"  style="text-align:center;">
                <div class="col-xs-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="fa fa-money"></i></span>
                        <div class="info-box-content">
                          <span class="info-box-text">Ingresos Esperados</span>
                          <span class="info-box-number">{{Actividad.actividadINGRESOESPERADO}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-blue"><i class="fa fa-user"></i></span>
                        <div class="info-box-content">
                          <span class="info-box-text">Encargado De la Actividad</span>
                          <span class="info-box-number">{{Actividad.actividadENCARGADO}}</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="fa fa-info-circle"></i></span>
                        <div class="info-box-content">
                          <span class="info-box-text">Estado De la Actividad</span>
                          <span class="info-box-number">{{Actividad.estadoOperacionTITULO}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box box-info collapsed-box">
            <div class="box-header with-border"  style="text-align:center;">
              <h3 class="box-title">Acción</h3>
              <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-seccion-accion-{{hash_vista}}"></div>
        </div>
        <div class="box box-info collapsed-box">
            <div class="box-header with-border"  style="text-align:center;">
              <h3 class="box-title">Plan</h3>
              <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-12"  id="div-PlanActividad-{{hash_vista}}"></div>
            </div>
        </div>
        <div class="box box-info collapsed-box">
            <div class="box-header with-border"  style="text-align:center;">
              <h3 class="box-title">Operaciones</h3>
              <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-12" id="div-table-OperacionesActividad-{{hash_vista}}"></div>
            </div>
        </div>
        <div class="box box-info collapsed-box">
            <div class="box-header with-border"  style="text-align:center;">
              <h3 class="box-title">Ingresos</h3>
              <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-12" id="div-IngresosActividad-{{hash_vista}}"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        cargarTablaOperacionesActividad();
        cargarAccionActividad();
        cargarPlanActividad();
        cargarTablIngresosActividad();
    });
    
    function cargarAccionActividad() {
        cargarDivisionSicam('div-seccion-accion-{{hash_vista}}', 'planeador', 'Acciones', 'detallePorActividad', 'accionID={{Actividad.accionID}}');
    }
    
    function cargarAccion(accionID) {
        cargarDivisionSicam('div-seccion-accion-{{hash_vista}}', 'planeador', 'Acciones', 'verDetalles', 'accionID='+accionID);
    }
    
    function cargarPlanActividad() {
        cargarDivisionSicam('div-PlanActividad-{{hash_vista}}', 'planeador', 'Planes', 'tablaDetalleDeLaActividad', 'actividadID={{Actividad.actividadID}}');
    }
    
    function cargarPlan() {
        cargarDivisionSicam('div-PlanActividad-{{hash_vista}}', 'planeador', 'Planes', 'verDetalles', 'actividadID={{Actividad.actividadID}}');
    }
    
    function cargarTablaOperacionesActividad() {
        {% if TipoPlanID is defined %}
            cargarDivisionSicam('div-table-OperacionesActividad-{{hash_vista}}', 'planeador', 'PlanesOperaciones', 'tablaListadoDeLaActividadCreada', 'tipoPlanID={{TipoPlanID}}&actividadID={{Actividad.actividadID}}');
        {% else %}
            cargarDivisionSicam('div-table-OperacionesActividad-{{hash_vista}}', 'planeador', 'PlanesOperaciones', 'tablaListadoDeLaActividadCreada', 'actividadID={{Actividad.actividadID}}');
        {% endif %} 
    }
    
    function cargarOperacion(planOperacionID) {
        cargarDivisionSicam('div-table-OperacionesActividad-{{hash_vista}}', 'planeador', 'PlanesOperaciones', 'verDetalles', 'planOperacionID=' + planOperacionID);
    }
    
    function cargarTablIngresosActividad() {
        cargarDivisionSicam('div-IngresosActividad-{{hash_vista}}', 'planeador', 'RegistroIngresoActividades', 'tablaListadoDeLaActividad', 'actividadID={{Actividad.actividadID}}');
    }
    
    function cargarPlanIngreso(planIngresoID) {
        cargarDivisionSicam('div-IngresosActividad-{{hash_vista}}', 'planeador', 'RegistroIngresoActividades', 'verDetalles', 'planIngresoID=' + planIngresoID);
    }
</script>