{# 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; }
        #dispCentro{background: #002561; border: 1px solid #666; padding: 1px 1px 1px 1px;}
.jqplot-point-label
{
    font-size:10px;
    color:#000000;
    background: #cccccc;
}
#content_outmiddle{
    float: center;
    width: 100%;
}
.jqplot-axis, .jqplot-yaxis{
    font-size:14px;
    color: #000000 ;
}
	</style>
	<script>
	$(function() {
            $('#dispCentro').css('color','white');
            $("button").button();
             $('#dispCentro').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');
                    $('#kpiOutageAPARTADO').load('{{path('kpiOutageAPARTADO')}}',{$year:year});
                    $('#kpiOutageARMENIA').load('{{path('kpiOutageARMENIA')}}',{$year:year});
                    $('#kpiOutageBOGOTA').load('{{path('kpiOutageBOGOTA')}}',{$year:year});
                    $('#kpiOutageBUENAVENTURA').load('{{path('kpiOutageBUENAVENTURA')}}',{$year:year});
                    $('#kpiOutageBUGA').load('{{path('kpiOutageBUGA')}}',{$year:year});
                    $('#kpiOutageCALI').load('{{path('kpiOutageCALI')}}',{$year:year});
                    $('#kpiOutageCAUCASIA').load('{{path('kpiOutageCAUCASIA')}}',{$year:year});
                    $('#kpiOutageCHIQUINQUIRA').load('{{path('kpiOutageCHIQUINQUIRA')}}',{$year:year});
                    $('#kpiOutageCUNDINAMARCA').load('{{path('kpiOutageCUNDINAMARCA')}}',{$year:year});
                    $('#kpiOutageDUITAMA').load('{{path('kpiOutageDUITAMA')}}',{$year:year});
                    $('#kpiOutageELBORDO').load('{{path('kpiOutageELBORDO')}}',{$year:year});
                    $('#kpiOutageELGUAMO').load('{{path('kpiOutageELGUAMO')}}',{$year:year});
                    $('#kpiOutageFLORENCIA').load('{{path('kpiOutageFLORENCIA')}}',{$year:year});
                    $('#kpiOutageFUSAGASUGA').load('{{path('kpiOutageFUSAGASUGA')}}',{$year:year});
                    $('#kpiOutageGIRARDOT').load('{{path('kpiOutageGIRARDOT')}}',{$year:year});
                    $('#kpiOutageGRANADA').load('{{path('kpiOutageGRANADA')}}',{$year:year});
                    $('#kpiOutageIBAGUE').load('{{path('kpiOutageIBAGUE')}}',{$year:year});
                    $('#kpiOutageITSMINA').load('{{path('kpiOutageITSMINA')}}',{$year:year});
                    $('#kpiOutageMAGDALENAMEDIO').load('{{path('kpiOutageMAGDALENAMEDIO')}}',{$year:year});
                    $('#kpiOutageMANIZALES').load('{{path('kpiOutageMANIZALES')}}',{$year:year});
                    $('#kpiOutageMARIQUITA').load('{{path('kpiOutageMARIQUITA')}}',{$year:year});
                    $('#kpiOutageMEDELLIN').load('{{path('kpiOutageMEDELLIN')}}',{$year:year});
                    $('#kpiOutageNEIVA').load('{{path('kpiOutageNEIVA')}}',{$year:year});
                    $('#kpiOutagePASTO').load('{{path('kpiOutagePASTO')}}',{$year:year});
                    $('#kpiOutagePEREIRA').load('{{path('kpiOutagePEREIRA')}}',{$year:year});
                    $('#kpiOutagePITALITO').load('{{path('kpiOutagePITALITO')}}',{$year:year});
                    $('#kpiOutagePOPAYAN').load('{{path('kpiOutagePOPAYAN')}}',{$year:year});
                    $('#kpiOutagePUERTO').load('{{path('kpiOutagePUERTO')}}',{$year:year});
                    $('#kpiOutageSANTANDER').load('{{path('kpiOutageSANTANDER')}}',{$year:year});
                    $('#kpiOutageTESALIA').load('{{path('kpiOutageTESALIA')}}',{$year:year});
                    $('#kpiOutageTULUA').load('{{path('kpiOutageTULUA')}}',{$year:year});
                    $('#kpiOutageTUMACO').load('{{path('kpiOutageTUMACO')}}',{$year:year});
                    $('#kpiOutageTUNJA').load('{{path('kpiOutageTUNJA')}}',{$year:year});
                    $('#kpiOutageVILLAVICENCIO').load('{{path('kpiOutageVILLAVICENCIO')}}',{$year:year});
                    $('#kpiOutageYOPAL').load('{{path('kpiOutageYOPAL')}}',{$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's Outage</div>
        <div class="portlet-content">
                <div id="chart1"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart2"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart3"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart4"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart5"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart6"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart7"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart8"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart9"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart10"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart11"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart12"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart13"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart14"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart15"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart16"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart17"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart18"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart19"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart20"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart21"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart22"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart23"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart24"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart25"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart26"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart27"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart28"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart29"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart30"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart31"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart32"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart33"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <div id="chart34"  style="height:300px; margin-top: -300px; margin-left: 51%; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
                <br>
                <div id="chart35"  style="height:300px; width:49%;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>    
</div>
<br>         

</div>
    <div id="kpiOutageAPARTADO">{% render "OutageBundle:Dipscentro:kpiOutageAPARTADO"  %}</div>
    <div id="kpiOutageARMENIA">{% render "OutageBundle:Dipscentro:kpiOutageARMENIA"  %}</div>
    <div id="kpiOutageBOGOTA">{% render "OutageBundle:Dipscentro:kpiOutageBOGOTA"  %}</div>
    <div id="kpiOutageBUENAVENTURA">{% render "OutageBundle:Dipscentro:kpiOutageBUENAVENTURA"  %}</div>
    <div id="kpiOutageBUGA">{% render "OutageBundle:Dipscentro:kpiOutageBUGA"  %}</div>
    <div id="kpiOutageCALI">{% render "OutageBundle:Dipscentro:kpiOutageCALI"  %}</div>
    <div id="kpiOutageCAUCASIA">{% render "OutageBundle:Dipscentro:kpiOutageCAUCASIA"  %}</div>
    <div id="kpiOutageCHIQUINQUIRA">{% render "OutageBundle:Dipscentro:kpiOutageCHIQUINQUIRA"  %}</div>
    <div id="kpiOutageCUNDINAMARCA">{% render "OutageBundle:Dipscentro:kpiOutageCUNDINAMARCA"  %}</div>
    <div id="kpiOutageDUITAMA">{% render "OutageBundle:Dipscentro:kpiOutageDUITAMA"  %}</div>
    <div id="kpiOutageELBORDO">{% render "OutageBundle:Dipscentro:kpiOutageELBORDO"  %}</div>
    <div id="kpiOutageELGUAMO">{% render "OutageBundle:Dipscentro:kpiOutageELGUAMO"  %}</div>
    <div id="kpiOutageFLORENCIA">{% render "OutageBundle:Dipscentro:kpiOutageFLORENCIA"  %}</div>
    <div id="kpiOutageFUSAGASUGA">{% render "OutageBundle:Dipscentro:kpiOutageFUSAGASUGA"  %}</div>
    <div id="kpiOutageGIRARDOT">{% render "OutageBundle:Dipscentro:kpiOutageGIRARDOT"  %}</div>
    <div id="kpiOutageGRANADA">{% render "OutageBundle:Dipscentro:kpiOutageGRANADA"  %}</div>
    <div id="kpiOutageIBAGUE">{% render "OutageBundle:Dipscentro:kpiOutageIBAGUE"  %}</div>
    <div id="kpiOutageITSMINA">{% render "OutageBundle:Dipscentro:kpiOutageITSMINA"  %}</div>
    <div id="kpiOutageMAGDALENAMEDIO">{% render "OutageBundle:Dipscentro:kpiOutageMAGDALENAMEDIO"  %}</div>
    <div id="kpiOutageMANIZALES">{% render "OutageBundle:Dipscentro:kpiOutageMANIZALES"  %}</div>
    <div id="kpiOutageMARIQUITA">{% render "OutageBundle:Dipscentro:kpiOutageMARIQUITA"  %}</div>
    <div id="kpiOutageMEDELLIN">{% render "OutageBundle:Dipscentro:kpiOutageMEDELLIN"  %}</div>
    <div id="kpiOutageNEIVA">{% render "OutageBundle:Dipscentro:kpiOutageNEIVA"  %}</div>
    <div id="kpiOutagePASTO">{% render "OutageBundle:Dipscentro:kpiOutagePASTO"  %}</div>
    <div id="kpiOutagePEREIRA">{% render "OutageBundle:Dipscentro:kpiOutagePEREIRA"  %}</div>
    <div id="kpiOutagePITALITO">{% render "OutageBundle:Dipscentro:kpiOutagePITALITO"  %}</div>
    <div id="kpiOutagePOPAYAN">{% render "OutageBundle:Dipscentro:kpiOutagePOPAYAN"  %}</div>
    <div id="kpiOutagePUERTO">{% render "OutageBundle:Dipscentro:kpiOutagePUERTO"  %}</div>
    <div id="kpiOutageSANTANDER">{% render "OutageBundle:Dipscentro:kpiOutageSANTANDER"  %}</div>
    <div id="kpiOutageTESALIA">{% render "OutageBundle:Dipscentro:kpiOutageTESALIA"  %}</div>
    <div id="kpiOutageTULUA">{% render "OutageBundle:Dipscentro:kpiOutageTULUA"  %}</div>
    <div id="kpiOutageTUMACO">{% render "OutageBundle:Dipscentro:kpiOutageTUMACO"  %}</div>
    <div id="kpiOutageTUNJA">{% render "OutageBundle:Dipscentro:kpiOutageTUNJA"  %}</div>
    <div id="kpiOutageVILLAVICENCIO">{% render "OutageBundle:Dipscentro:kpiOutageVILLAVICENCIO"  %}</div>
    <div id="kpiOutageYOPAL">{% render "OutageBundle:Dipscentro:kpiOutageYOPAL"  %}</div>
        
 <div id="dialog-cargando" title="Espere"><br><center><h2>Cargando...</h2></center></div>
{% endblock %}


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