{# src/Ericsson/IndicadoresBundle/Resources/views/Hello/index.html.twig #}
 {% extends '::base.html.twig' %}
{% block title %}KPI's Outage{% endblock %}
{% block body %}

<style>
	.column { width: 100%; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
        #OutageTiempo{background: #002561; border: 1px solid #666; padding: 1px 1px 1px 1px;}
.jqplot-point-label
{
    font-size:10px;
    color:#000000;
}
#content_outmiddle{
    float: center;
    width: 100%;
}
.jqplot-axis, .jqplot-yaxis{
    font-size:14px;
    color: #000000 ;
}
	</style>
	<script>
	$(function() {
            $('#OutageTiempo').css('color','white');
            $("button").button();
             $('#OutageTiempo').addClass('ui-state-focus');
            $( "#dialog-cargando" ).dialog({
                autoOpen: false,
                modal: true,
                resizable:false
            });  

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header" ).click(function() {
			$( this ).toggleClass( "ui-icon-plusthick" ).toggleClass( "ui-icon-minusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});
                 $('#year').change(function(){
                    year = $('#year').val();
                    $("#dialog-cargando" ).dialog('open');
                    $('#kpiOutageGeneralT').load('{{path('kpiOutageGeneralT')}}',{$year:year});
                    $('#kpiOutageGeneralTExclu').load('{{path('kpiOutageGeneralTExclu')}}',{$year:year});
                    $('#kpiOutageBOTiempoCON').load('{{path('kpiOutageBOTiempoCON')}}',{$year:year});
                    $('#kpiOutageBOTiempoExcluCON').load('{{path('kpiOutageBOTiempoExcluCON')}}',{$year:year});
                    $('#kpiOutageOCTiempoCON').load('{{path('kpiOutageOCTiempoCON')}}',{$year:year});
                    $('#kpiOutageOCTiempoExcluCON').load('{{path('kpiOutageOCTiempoExcluCON')}}',{$year:year});
  
                })   
	});
	</script>

<div class="contenido">
        <br>
        <br>
        <table style="margin:auto" align="center" class="selecMes">
                <tr>
                    <td>Seleccione Año: </td>
                    <td>
                        <select id="year">
                                    <option value="{{"now" | date("Y") - 1}}">{{"now" | date("Y") - 1}}</option>
                                    <option selected="selected" value="{{"now" | date("Y")}}">{{"now" | date("Y")}}</option>
                        </select> 
                    </td>
                </tr>

            </table>

              
<div class="column">  
    <div class="portlet">
        <div class="portlet-header" style="text-align:left;">KPI General</div>
        <div class="portlet-content">
            <div id="dataGeneral" style="text-align:center"></div>
                <div id="chart11"  style="height:400px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>  
    <div class="portlet">
        <div class="portlet-header" style="text-align:left;">KPI General (con Exclusiones)</div>
        <div class="portlet-content">
            <div id="dataGeneral2" style="text-align:center"></div>
                <div id="chart2"  style="height:300px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>
    <div class="portlet">
        <div class="portlet-header" style="text-align:left;">BOGOTA-ORIENTE</div>
        <div class="portlet-content">
            <div id="dataGeneral3" style="text-align:center"></div>
                <div id="chart3"  style="height:300px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>
    <div class="portlet">
        <div class="portlet-header" style="text-align:left;">BOGOTA-ORIENTE (con exclusiones)</div>
        <div class="portlet-content">
            <div id="dataGeneral4" style="text-align:center"></div>
                <div id="chart4"  style="height:300px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>
    <div class="portlet">
        <div class="portlet-header" style="text-align:left;">OCCIDENTE</div>
        <div class="portlet-content">
            <div id="dataGeneral5" style="text-align:center"></div>
                <div id="chart5"  style="height:300px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>
    <div class="portlet">
        <div class="portlet-header" style="text-align:left;">OCCIDENTE(con exclusiones)</div>
        <div class="portlet-content">
            <div id="dataGeneral6" style="text-align:center"></div>
                <div id="chart6"  style="height:300px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>
</div>
<br>         

</div>
    <div id="kpiOutageGeneralT">{% render "OutageBundle:OutageTiempo:kpiOutageGeneralT"  %}</div>
    <div id="kpiOutageGeneralTExclu">{% render "OutageBundle:kpiOutage:kpiOutageGeneralTExcluCon"  %}</div>
    <div id="kpiOutageBOTiempoCON">{% render "OutageBundle:kpiOutage:kpiOutageBOTiempoCON"  %}</div>
    <div id="kpiOutageBOTiempoExcluCON">{% render "OutageBundle:kpiOutage:kpiOutageBOTiempoExcluCON"  %}</div>
    <div id="kpiOutageOCTiempoCON">{% render "OutageBundle:kpiOutage:kpiOutageOCTiempoCON"  %}</div>
    <div id="kpiOutageOCTiempoExcluCON">{% render "OutageBundle:kpiOutage:kpiOutageOCTiempoExcluCON"  %}</div>
        
 <div id="dialog-cargando" title="Espere"><br><center><h2>Cargando...</h2></center></div>
{% endblock %}


    {% block menuTop%}
        {% render "PortalBundle:Default:menuTopOutageCon"  %}
    {%endblock%}
    {% block menuleft %}
    {%endblock%}
    
    {% block menuRight %}
    {%endblock%}