{% extends("Championnat/championnat.html.twig") %}

{% block championnat %}
<style>
   #classement td,#classement th {
     width:30px;
     text-align:center;
   }
   #small-nav { height: 30px;margin:auto;padding:0px; }
   #small-nav a { font-size:8px;height:30px; }
</style>
<div class="col-md-12 row">
<div class="col-md-6 text-center">
    <div class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" type="button" id="button_round" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ current_round }}</button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     {% for match in resultat %}
         {% if (loop.index0==0 or resultat[loop.index0-1].league.round!=match.league.round) %}
            <a class="dropdown-item" href="#" onclick="calendrier('{{ match.league.round }}')">{{ match.league.round }}</a>
	 {% endif %}
     {% endfor %}
     </div>
    </div>
    </br></br>
    <nav id="small-nav" class="navbar navbar-expand-lg navbar-light" style="width:146px;background-color: orange;min-height: 20px;">
        <div class="collapse navbar-collapse" id="navbarSupportedContent" style="padding:0px;">
            <ul class="navbar-nav mr-auto" style="">
                <li class="nav-item active" style="">
                    <a style="background-color: orange;padding-top: 5px;padding-bottom: 0px;" onclick="this.style.borderBottom='3px solid black';$('#current_round').css('border','0px');$([id='{{ current_round }}']).hide('slide', { direction: 'right' }, 500);" id="prev_round" class="nav-link" href="#">Dernier résultats</a>
                </li>
                <li class="nav-item">
                    <a style="background-color: orange;padding-top: 5px;border-bottom:3px solid black;padding-bottom: 0px;" onclick="this.style.borderBottom='3px solid black';$('#prev_round').css('border','0px');document.getElementById('{{ prev_round }}').style.display='none';document.getElementById('{{ current_round }}').style.display='block';" class="nav-link" id="current_round" href="#">Prochain match</a>
                </li>
            </ul>
        </div>
    </nav></br>
    {% set trans_day_hash = {
        "Monday": "Lundi",
        "Tuesday": "Mardi",
        "Wednesday": "Mercredi",
        "Thursday": "Jeudi",
        "Friday": "Vendredi",
        "Saturday": "Samedi",
        "Sunday": "Dimanche"
    }
    %}
    {% 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"
    }
    %}
    <div id="calendrier">
	{% for match in resultat %}
	{% if (loop.index0!=0) %}
		{% if ((match.league.round!=resultat[loop.index0-1].league.round) and (match.league.round==current_round)) %}
			<table id="{{ match.league.round }}" style="margin-right:auto;margin-left:auto;">
		{% elseif (match.league.round!=resultat[loop.index0-1].league.round) %}
			<table id="{{ match.league.round }}" style="margin-right:auto;margin-left:auto;display:none;">
		{% endif %}
	{% else %}
		{% if (match.league.round==current_round) %}
			<table id="{{ match.league.round }}" style="margin-right:auto;margin-left:auto;">
		{% else %}
			<table id="{{ match.league.round }}" style="margin-right:auto;margin-left:auto;display:none;">
		{% endif %}
	{% endif %}
	{% if ((loop.index0==0) or (match.fixture.date|date("m/d/Y")!=resultat[loop.index0-1].fixture.date|date("m/d/Y"))) %} 
	  <tr><th colspan="6">{{ trans_day_hash[match.fixture.date|date("l")] }} {{ match.fixture.date|date("d") }} {{ trans_month_hash[match.fixture.date|date("F")] }} {{ match.fixture.date|date("Y") }}</th></tr>
	{% endif %}
	{% if match.fixture.status.long=="Match Finished" %}
		<tr><td>{{ match.fixture.date|date("H:i") }}</td><td style="text-align:right;">{{ match.teams.home.name }}</td><td class="text-center"><img src="{{ match.teams.home.logo }}" width="20"/></td><td class="text-center">{{ match.goals.home }}</td><td class="text-center">-</td><td class="text-center">{{ match.goals.away }}</td><td class="text-center"><img src="{{ match.teams.away.logo }}" width="20"/></td><td style="text-align:left;">{{ match.teams.away.name }}</td></tr>
	{% else %}
		<tr><td>{{ match.fixture.date|date("H:i") }}</td><td style="text-align:right;">{{ match.teams.home.name }}</td><td class="text-center"><img src="{{ match.teams.home.logo }}" width="20"/></td><td class="text-center">-</td><td class="text-center"><img src="{{ match.teams.away.logo }}" width="20"/></td><td style="text-align:left;">{{ match.teams.away.name }}</td></tr>
	{% endif %}
    {% endfor %}
    </table>
    </div>
</div>
<div class="col-md-6">
   <table id="classement" style="margin-right:auto;margin-left:auto;">
     <tr><th colspan="3" style="width:auto;text-align:left;padding-left:7px;">Equipe</th><th>MJ</th><th>G</th><th>N</th><th>P</th><th>BP</th><th>BC</th><th>DB</th><th>Pts</th></tr>
   {% for equipe in classement %}
	  {% for equipe2 in equipe %}
		 <tr><td style="width:auto;">{{ loop.index }}</td><td style="width:40px;"><img src="{{ equipe2.team.logo }}" width="30"/></td><td style="width:auto;text-align:left;">{{ equipe2.team.name }}</td><td>{{ equipe2.all.played }}</td><td>{{ equipe2.all.win }}</td><td>{{ equipe2.all.draw }}</td><td>{{ equipe2.all.lose }}</td><td>{{ equipe2.all.goals.for }}</td><td>{{ equipe2.all.goals.against }}</td><td>{{ equipe2.goalsDiff }}</td><td>{{ equipe2.points }}</td></tr>
	  {% endfor %}
   {% endfor %}
</div>
</div>

<script>
   function calendrier(round) {
	 document.getElementById(""+$('#button_round').html()).style.display="none";
	 document.getElementById(""+round).style.display="block";
	 $('#button_round').html(round);
   }
</script>
{% endblock %}