{% extends '::base.html.twig' %}
{% block title %}Outage{% endblock %}
{% block body %}
        <script>
	$(function() {
            $('#outageTotal').css('color','white');
            $("button").button();
             $('#outageTotal').addClass('ui-state-focus');
            $.datepicker.setDefaults($.datepicker.regional[ "" ])
		var dates = $( "#fechaIni, #fechaFin" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 1,
			onSelect: function( selectedDate ) {
				var option = this.id == "fechaIni" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" ),
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});
                $( "#fechaIni, #fechaFin" ).datepicker($.datepicker.regional["es"]);
                $( "#fechaIni, #fechaFin" ).datepicker( "option", "dateFormat", "yy-mm-dd" ); 
                $("#buscar").click(function(){
                    fechaIni = $("#fechaIni").val();
                    fechaFin =$('#fechaFin').val();
                    if(fechaIni=='' || fechaFin==''){return false;}else{
                    $("#cargar").css('display','block');
                    $("#consultaOutage").load('{{path('consultaOutage')}}',{$fechaIni:fechaIni, $fechaFin : fechaFin})};
                });
	});
	</script>
        <style>        
        #outageTotal{background: #002561; border: 1px solid #666; padding: 1px 1px 1px 1px;}
        #content_outmiddle{
            float: center;
            width: 100%;
        }
        </style>
<div class="contenido">
    <br>
    <table class="ui-widget ui-widget-content" width="600px" style="margin:auto;">
        <tbody>
            <tr>
                <td>{{'monitor.etiqueta.fechaI' | trans}}</td>
                <td><input type="text" id="fechaIni" name="fechaIni"></td>            
                <td>{{'monitor.etiqueta.fechaF' | trans}}</td>
                <td><input type="text" id="fechaFin" name="fechaFin"></td>
                <td><button type="button" id="buscar">{{'inbox.search' | trans}}</button></td>
            </tr>
        </tbody>
    </table>
        <br>
        <div id="consultaOutage"></div><br>
    <div id="cargar" style="display:none; width: 80px; height: 80px;"></div>
</div>
{% endblock%}


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