{% extends '::base.html.twig' %}
{% block title %}Excluir Outage{% endblock %}
{% block body %}
        <script>
	$(function() {
            $('#excluOutage').css('color','white');
            $("button").button();
             $('#excluOutage').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();
                    region =$('#region').val();
                    centro =$('#centro').val();
                    if(fechaIni=='' || fechaFin==''){return false;}else{
                    $("#cargar").css('display','block');
                    $("#consultaexcluOutage").load('{{path('consultaexcluOutage')}}',{$fechaIni:fechaIni, $fechaFin : fechaFin, $region : region, $centro : centro})};
                });
	});
	</script>
        <style>        
        #excluOutage{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="800px" style="margin:auto; text-align: left;">
        <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>
            </tr>
            <tr>
                <td>Región</td>
                <td>
                    <select id="region">
                        <option value="">Todas</option>
                        {% for region in regiones%}
                        <option value="{{region.region}}">{{region.region}}</option>
                        {% endfor %}
                    </select>
                </td>
                <td>Centro Mantenimiento</td>
                <td>
                    <select id="centro">
                        <option value="">{{'inbox.all' | trans}}</option>
                        {% for centro in centros%}
                        <option value="{{centro.centro}}">{{centro.centro}}</option>
                        {% endfor %}
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="text-align:center;"><button type="button" id="buscar">{{'inbox.search' | trans}}</button></td>
            </tr>
        </tbody>
    </table>
        <br>
        <div id="consultaexcluOutage"></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%}