{# 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; }
        #outage{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() {
            $('#outage').css('color','white');
            $("button").button();
             $('#outage').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');
                    $('#kpiOutageGeneral').load('{{path('kpiOutageGeneral')}}',{$year:year});
                    $('#kpiOutageBO').load('{{path('kpiOutageBO')}}',{$year:year});
                    $('#kpiOutageCUN').load('{{path('kpiOutageCUN')}}',{$year:year});
                    $('#kpiOutageCA').load('{{path('kpiOutageCA')}}',{$year:year});
                    $('#kpiOutagePE').load('{{path('kpiOutagePE')}}',{$year:year});
                    $('#kpiOutageME').load('{{path('kpiOutageME')}}',{$year:year});
                    $('#kpiOutageSO').load('{{path('kpiOutageSO')}}',{$year:year});
                    $('#kpiOutageBOYCAS').load('{{path('kpiOutageBOYCAS')}}',{$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="chart11"  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</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;">CUNDINAMARCA</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;">CALI</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;">PEREIRA</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;">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;">SURORIENTE</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;">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>
<br>         

</div>
    <div id="kpiOutageGeneral">{% render "OutageBundle:Default:kpiOutageGeneral"  %}</div>
    <div id="kpiOutageBO">{% render "OutageBundle:Default:kpiOutageBO"  %}</div>
    <div id="kpiOutageCUN">{% render "OutageBundle:Default:kpiOutageCUN"  %}</div>
    <div id="kpiOutageCA">{% render "OutageBundle:Default:kpiOutageCA"  %}</div>
    <div id="kpiOutagePE">{% render "OutageBundle:Default:kpiOutagePE"  %}</div>
    <div id="kpiOutageME">{% render "OutageBundle:Default:kpiOutageME"  %}</div>
    <div id="kpiOutageSO">{% render "OutageBundle:Default:kpiOutageSO"  %}</div>
    <div id="kpiOutageBOYCAS">{% render "OutageBundle:Default:kpiOutageBOYCAS"  %}</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%}