{# 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; }
        #kpiOutage{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() {
            $('#kpiOutage').css('color','white');
            $("button").button();
             $('#kpiOutage').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('kpiOutageGeneralCON')}}',{$year:year});
                    $('#kpiOutageBO').load('{{path('kpiOutageGeneralExclCON')}}',{$year:year});
                    $('#kpiOutageCUN').load('{{path('kpiOutageBOCON')}}',{$year:year});
                    $('#kpiOutageCA').load('{{path('kpiOutageBOExclCON')}}',{$year:year});
                    $('#kpiOutagePE').load('{{path('kpiOutageOCCON')}}',{$year:year});
                    $('#kpiOutageME').load('{{path('kpiOutageOCExclCON')}}',{$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="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 GENERAL (con exclusiones)</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 BOGOTA-ORIENTE</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 BOGOTA-ORIENTE (con exclusiones)</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;">OCCIDENTE</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;">OCCIDENTE (con exclusiones)</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>
<br>         

</div>
       
    <div id="kpiOutageGeneral">{% render "OutageBundle:kpiOutage:kpiOutageGeneralCON"  %}</div>
    <div id="kpiOutageBO">{% render "OutageBundle:kpiOutage:kpiOutageGeneralExclCON"  %}</div>
    <div id="kpiOutageCUN">{% render "OutageBundle:kpiOutage:kpiOutageBOCON"  %}</div>
    <div id="kpiOutageCA">{% render "OutageBundle:kpiOutage:kpiOutageBOExclCON"  %}</div>
    <div id="kpiOutagePE">{% render "OutageBundle:kpiOutage:kpiOutageOCCON"  %}</div>
    <div id="kpiOutageME">{% render "OutageBundle:kpiOutage:kpiOutageOCExclCON"  %}</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%}