{# 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; }
        #outageSectores{background: #002561; border: 1px solid #666; padding: 1px 1px 1px 1px;}
.jqplot-point-label
{
    font-size:14px;
    color: #000000 ;
    background: #cccccc;
}
.jqplot-axis, .jqplot-yaxis{
    font-size:14px;
    color: #000000 ;
}
#content_outmiddle{
    float: center;
    width: 100%;
}
	</style>
	<script>
	$(function() {
            $('#outageSectores').css('color','white');
            $("button").button();
             $('#outageSectores').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');
                    $('#sectoresOutages').load('{{path('sectoresOutages')}}',{$year:year});
                    $('#sectoresOutagesBO').load('{{path('sectoresOutagesBO')}}',{$year:year});
                    $('#sectoresOutagesCU').load('{{path('sectoresOutagesCU')}}',{$year:year});
                    $('#sectoresOutagesCA').load('{{path('sectoresOutagesCA')}}',{$year:year});
                    $('#sectoresOutagesME').load('{{path('sectoresOutagesME')}}',{$year:year});
                    $('#sectoresOutagesPE').load('{{path('sectoresOutagesPE')}}',{$year:year});
                    $('#sectoresOutagesBOYCAS').load('{{path('sectoresOutagesBOYCAS')}}',{$year:year});
                    $('#sectoresOutagesSO').load('{{path('sectoresOutagesSO')}}',{$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 Cortes / 100 Sectores</div>
        <div class="portlet-content">
                <div id="chart1"  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;">KPI Cortes / 100 Sectores BOGOTA</div>
        <div class="portlet-content">
                <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;">KPI Cortes / 100 Sectores CUNDINAMARCA</div>
        <div class="portlet-content">
                <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;">KPI Cortes / 100 Sectores CALI</div>
        <div class="portlet-content">
                <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;">KPI Cortes / 100 Sectores MEDELLIN</div>
        <div class="portlet-content">
                <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;">KPI Cortes / 100 Sectores PEREIRA</div>
        <div class="portlet-content">
                <div id="chart6"  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;">KPI Cortes / 100 Sectores BOY-CAS</div>
        <div class="portlet-content">
                <div id="chart7"  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;">KPI Cortes / 100 Sectores SURORIENTE</div>
        <div class="portlet-content">
                <div id="chart8"  style="height:300px; width:90%; margin: auto;"></div>
		<pre class="code prettyprint brush: js"></pre>
        </div>
    </div>
</div>
<br>         

</div>
    <div id="sectoresOutages">{% render "OutageBundle:Outage:sectoresOutages"  %}</div>
    <div id="sectoresOutagesBO">{% render "OutageBundle:Outage:sectoresOutagesBO"  %}</div>
    <div id="sectoresOutagesCU">{% render "OutageBundle:Outage:sectoresOutagesCU"  %}</div>
    <div id="sectoresOutagesCA">{% render "OutageBundle:Outage:sectoresOutagesCA"  %}</div>
    <div id="sectoresOutagesME">{% render "OutageBundle:Outage:sectoresOutagesME"  %}</div>
    <div id="sectoresOutagesPE">{% render "OutageBundle:Outage:sectoresOutagesPE"  %}</div>
    <div id="sectoresOutagesBOYCAS">{% render "OutageBundle:Outage:sectoresOutagesBOYCAS"  %}</div>
    <div id="sectoresOutagesSO">{% render "OutageBundle:Outage:sectoresOutagesSO"  %}</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%}