{% extends('base.html.twig') %}

{% block body %}
    {% set trans_month_hash = {
        "January": "Janvier",
        "February": "Févrié",
        "March": "Mars",
        "April": "Avril",
        "May": "Mai",
        "June": "Juin",
        "July": "Juillet",
        "August": "Aout",
        "September": "Septembre",
        "October": "Octobre",
        "November": "Novenbre",
        "December": "Décembre"
    }
    %}
    {% set trans_month_hash2 = {
        "Jan": "JAN",
        "Feb": "FEV",
        "Mar": "MAR",
        "Apr": "AVR",
        "Sep": "SEP",
        "Oct": "OCT",
        "Nov": "NOV",
        "Dec": "DEC"
    }
    %}
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="mois" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ "now"|date("Y-W")|replace({'-':'W'})|date("F") }}</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            {% for match in resultat %}
                {% if (loop.index0==0 or resultat[loop.index0-1].date.start|date("m")!=match.date.start|date("m")) %}
                    <a class="dropdown-item" href="#" onclick="mois('{{ match.date.start|date("F") }}')">{{ match.date.start|date("F") }}</a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div style="display:flex;flex-wrap:wrap;">
    <button onclick="prev()">-</button>
    <button class="btn btn-secondary semaine" id="sem_{{ "now"|date("W") }}">{{ "now"|date("Y-W")|replace({"-":"W"})|date("j M") }}-{{ "now"|date("Y-W")|replace({"-":"W"})|date_modify("+6 days")|date("j M") }}</button>
    {% for match in resultat %}
        {% if ((loop.index0==0) or (match.date.start|date("Y-W")!=resultat[loop.index0-1].date.start|date("Y-W"))) %}
            <p style="display:none;" class="btn_{{ match.date.start|date("Y-W")|replace({'-':'W'})|date("F") }}" id="btn_{{ match.date.start|date("W") }}">{{ match.date.start|date("Y-W")|replace({"-":"W"})|date("j M") }}-{{ match.date.start|date("Y-W")|replace({"-":"W"})|date_modify("+6 days")|date("j M") }}</p>
        {% endif %}
    {% endfor %}
    <button onclick="next()">+</button>
    </div>
    <div style="position:relative;">
    {% for match in resultat %}
        {% if (loop.index0==0) and (match.date.start|date("d/m")!="01/01") %}
            <table style="position:absolute;left:0;top:0;display: none;" id="table_{{ match.date.start|date("W") }}" class="{{ match.date.start|date("Y-W")|replace({'-':'W'})|date("F") }}">
        {% elseif ((loop.index0!=0) and ((match.date.start|date("y-W")=="now"|date("y-W"))) and (resultat[loop.index0-1].date.start|date("y-W")!=match.date.start|date("y-W")))%}
            <table class="{{ match.date.start|date("Y-W")|replace({'-':'W'})|date("F") }}" style="position:absolute;left:0;top:0;border:2px solid black;" id="table_{{ match.date.start|date("W") }}">
        {% elseif ((loop.index0!=0) and (resultat[loop.index0-1].date.start|date("y-W")!=match.date.start|date("y-W")) and (match.date.start|date("d/m")!="01/01"))%}
           <table style="position:absolute;left:0;top:0;display:none;border:2px solid black;" class="{{ match.date.start|date("Y-W")|replace({'-':'W'})|date("F") }}" id="table_{{ match.date.start|date("W") }}">
        {% endif %}
        {% if (loop.index0==0) %}
            <tr><td>{{ match.date.start }}</td></tr>
        {% endif %}
        {% if ((loop.index0!=0) and (resultat[loop.index0-1].date.start|date("d")!=match.date.start|date("d"))) %}
            <tr><td>{{ match.date.start }}</td></tr>
        {% endif %}
        <tr><td>{{ match.teams.home.name }}</td><td><img src="{{ match.teams.home.logo }}" width="50"/></td><td>{{ match.scores.home.points }}</td><td>{{ match.scores.visitors.points }}</td><td><img src="{{ match.teams.visitors.logo }}" width="50"/></td><td>{{ match.teams.visitors.name }}</td></tr>
        {% if ((resultat|length!=loop.index0+1) and (resultat[loop.index0+1].date.start|date("y-W")!=match.date.start|date("y-W")) and (resultat[loop.index0+1].date.start|date("d/m")!="01/01")) %}
            </table>
        {% endif %}
        {% if (resultat|length==loop.index0+1) %}
           </table>
        {% endif %}
    {% endfor %}
    </div>
   <script>
       var semaine;
       function next() {
           semaine=parseInt(document.getElementsByClassName("btn btn-secondary semaine")[0].id.replace("sem_",""));
           if (semaine<10)
               $('#table_0'+semaine).hide('slide', { direction: 'left' },1000);
           else
               $('#table_'+semaine).hide('slide', { direction: 'left' },1000);
           if (semaine==52)
               semaine=1;
           else
               semaine++;
           if (semaine<10)
               semaine="0"+semaine;
           console.log(semaine);
           if (document.getElementById("btn_"+semaine).className=="btn_"+document.getElementById("mois").innerHTML) {
               document.getElementsByClassName("btn btn-secondary semaine")[0].innerHTML=document.getElementById("btn_"+semaine).innerHTML;
               document.getElementsByClassName("btn btn-secondary semaine")[0].id="sem_"+semaine;
               $('#table_'+semaine).show('slide', { direction: 'right' },1000);
           }else {
               document.getElementById("mois").innerHTML=document.getElementById("btn_"+semaine).className.replace("btn_","");
               document.getElementsByClassName("btn btn-secondary semaine")[0].innerHTML=document.getElementById("btn_"+semaine).innerHTML;
               document.getElementsByClassName("btn btn-secondary semaine")[0].id="sem_"+semaine;
               $('#table_'+semaine).show('slide', { direction: 'right' },1000);
           }
       }
       function prev() {
           semaine=parseInt(document.getElementsByClassName("btn btn-secondary semaine")[0].id.replace("sem_",""));
           if (semaine<10)
               $('#table_0'+semaine).hide('slide', { direction: 'right' },1000);
           else
               $('#table_'+semaine).hide('slide', { direction: 'right' },1000);
           if (semaine==1)
               semaine=52
           else
               semaine--;
           if (semaine<10)
               semaine="0"+semaine;
           console.log(semaine);
           if (document.getElementById("btn_"+semaine).className=="btn_"+document.getElementById("mois").innerHTML) {
               document.getElementsByClassName("btn btn-secondary semaine")[0].innerHTML=document.getElementById("btn_"+semaine).innerHTML;
               document.getElementsByClassName("btn btn-secondary semaine")[0].id="sem_"+semaine;
               $('#table_'+semaine).show('slide', { direction: 'left' },1000);
           }else {
               document.getElementById("mois").innerHTML=document.getElementById("btn_"+semaine).className.replace("btn_","");
               document.getElementsByClassName("btn btn-secondary semaine")[0].innerHTML=document.getElementById("btn_"+semaine).innerHTML;
               document.getElementsByClassName("btn btn-secondary semaine")[0].id="sem_"+semaine;
               $('#table_'+semaine).show('slide', { direction: 'left' },1000);
           }
       }
       function mois(mois) {
           $('table').hide();
           $('#mois').html(mois);
           document.getElementsByClassName(mois)[0].style.display="block";
           semaine=parseInt(document.getElementsByClassName(mois)[0].id.replace("table_",""));
           document.getElementsByClassName("btn btn-secondary semaine")[0].innerHTML=document.getElementById("btn_"+semaine).innerHTML;
           document.getElementsByClassName("btn btn-secondary semaine")[0].id="sem_"+semaine;
       }
   </script>
{% endblock %}