{% extends '::base.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}
{% block dashboard %}

<script>
    $(function(){
        $('#content_outmiddle').css('float','center');
        $('#content_outmiddle').css('width','100%');
        $('input').button();
        $('#consolidadoSemanal').css('color','white');
        $('#consolidadoSemanal').addClass('ui-state-focus');
        $('#RHorario, #'+{{semanaAct}}).addClass('ui-state-focus');
        zona = '';
        $('#zona').change(function(){
            
            semana = $('#semana22').val();
            zona = $(this).val();
            $('#cargar').css('display','block');
            
         $('#consultaConsolidadoSemanal').load("{{path('consultaConsolidadoSemanal')}}",{$week :semana, $years : {{years}}, $zona:zona});
           
        });
        
        $('#consultaConsolidadoSemanal').load("{{path('consultaConsolidadoSemanal')}}",{$week : {{semanaAct}}, $years : {{years}}, $zona:$('#zona').val() });
        
        $('.semanasBtn').click(function(){
            semana = parseFloat($(this).attr('id'));
            $('#semana22').val(semana);
            $('.semanasBtn').removeClass('ui-state-focus');
            $('#'+semana).addClass('ui-state-focus');
              $('#cargar').css('display','');
              $('#semanaConsulta').css('display','none');
              zona = $('#zona').val();
        $('#consultaConsolidadoSemanal').load("{{path('consultaConsolidadoSemanal')}}",{$week :semana, $years : {{years}}, $zona:zona});
            
        })
        $('#back').click(function(){
        semana = $('#semana').val();
        if(semana!=0){
        semanaMin = parseInt(semana) -1;
        semanaMax = parseInt(semanaMin) + 4;
        semanaActual = parseInt(semana)+4;
        $('#semana').val(semanaMin);
        $('#semana'+parseInt(semanaActual)).css('display','none');
        $('#semana'+parseInt(semanaMin)).css('display','');
        if(semanaMin==0){
            $('#back').css('display','none')
        }else{
            $('#back').css('display','')
        }
        if(semanaMax < parseInt("{{semanaAct}}")){
            $('#next').css('display','');
            
        }else{
            $('#next').css('display','none');
        }
        $('button').button();
        }
        })
        
        $('#next').click(function(){
        semana = $('#semana').val();
        if(parseInt(semana)+4<= parseInt("{{semanaAct}}")){
        semanaMin = parseInt(semana) +1;
        semanaMax = parseInt(semanaMin) + 4;
        semanaActual = parseInt(semana)+4;
        $('#semana').val(semanaMin);
        $('#semana'+parseInt(semanaMax)).css('display','');
        $('#semana'+parseInt(semana)).css('display','none');
        if(semanaMin==0){
            $('#back').css('display','none')
        }else{
            $('#back').css('display','')
        }
        if(semanaMax < parseInt("{{semanaAct}}")){
            $('#next').css('display','');
            
        }else{
            $('#next').css('display','none');
        }
        $('button').button();
        }
        })
        $('button').button();
})
    </script>
<style>
        #consolidadoSemanal{background: #002561; border: 1px solid #666; padding: 1px 1px 1px 1px;}
	</style>
    <br>
    <table align="center" class="ui-widget ui-widget-content" style="margin:auto;" width="80%">
    <tr class="ui-widget-header ">
        <td colspan="7">Semanas</td>   
    </tr>
    <tr>
        <td style="width : 50px">
                <button id="back"> << </button>
        </td>
        {% set semana = semanaAct -4%}
        {% for i in range(1, semanaAct)%}
            <td id="semana{{i}}" {% if i < semana%}style="display: none"{%endif%}>
                <button class="semanasBtn" id="{{i}}">Semana {{i}}</button>
            </td>
        {% endfor%}
            <td style="width : 50px;">
                <button style="display:none;" id="next"> >> </button>
            </td>
    <input type="hidden" id="semana" value="{{semana}}">
    </tr>
    <tr>
        <td colspan="12" style=" text-align: center;">
            <br>
            <b>Seleccione Zona:</b>
            <select id="zona">
                <option value="CO_BOGOTA">BOGOTA</option>
                <option value="CO_ORIENTE">ORIENTE</option>
                <option value="CO_SUROCCIDENTE">SUROCCIDENTE</option>
            </select>
            <input type="hidden" id="semana22" value="{{semanaAct}}">
        </td>
    </tr>
</table>
        <br>
        <br>
    <div id="consultaConsolidadoSemanal"></div>
<br>


        

{% endblock %}