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

{% block title %}{{ parent() }} - Classement buteurs {{ app.request.attributes.get('championnat')|replace({'#':"'",'-':' '}) }}{% endblock %}

{% block championnat %}
<h2 class="text-center">Classement buteurs</h2></br>
<div class="flex2">
    <table class="table table-sm table-striped w-auto" style="max-height:400px;overflow:auto;display:block;">
	<th class="text-center">#</th>
	<th colspan="2"><div style="display:flex;"><p style="margin-top:4px;margin-right:3px;">Joueur</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre_alphabet('croissant');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre_alphabet('decroissant');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">PD</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','PD');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','PD');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">DR</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','DR');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','DR');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">DG</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','DG');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','DG');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">Int</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','Int');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','Int');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">FC</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','FC');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','FC');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">FS</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','FS');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','FS');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">CJ</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','CJ');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','CJ');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">CR</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','CR');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','CR');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">Pen</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','Pen');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','Pen');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">Min</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','Min');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','MIN');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
        <th class="text-center"><div style="display:flex;margin-right:5px;"><p style="margin-top:4px;margin-right:3px;">Buts</p><div style="position:relative;"><img class="ordre" src="/icon.png" style="width:15px;height:15px;position:absolute;top:0px;left:0px;" onclick="ordre('croissant','Buts');this.src='http://77.148.37.160/icon2.png'"/><img class="ordre" src="/icon.png" onclick="ordre('decroissant','Buts');this.src='http://77.148.37.160/icon2.png';" style="width:15px;height:15px;position:absolute;top:15px;left:0px;transform:rotate(180deg);"/></div></div></th>
	{% for buteur in resultat %}
		<tr id="tr{{ loop.index0 }}">
    		<td class="text-center">{{ loop.index }}</td>
    		<td class="text-center"><img src="{{ buteur.player.photo }}" width="50"/></td>
		<td>{{ buteur.player.name }}</br>{{ buteur.statistics[0].team.name }}</td>
		<td id="td{{ loop.index0 }}_assists" class="PD text-center">{{ buteur.statistics[0].goals.assists }}</td>
		<td class="DR text-center">{{ buteur.statistics[0].dribbles.success }}</td>
		<td class="DG text-center">{{ buteur.statistics[0].duels.won }}</td>
		<td class="Int text-center">{{ buteur.statistics[0].tackles.interceptions }}</td>
		<td class="FS text-center">{{ buteur.statistics[0].fouls.drawn }}</td>
		<td class="FC">{{ buteur.statistics[0].fouls.committed }}</td>
		<td class="CJ text-center">{{ buteur.statistics[0].cards.yellow }}</td>
		<td class="CR text-center">{{ buteur.statistics[0].cards.red }}</td>
		<td class="Pen text-center">{{ buteur.statistics[0].penalty.scored }}</td>
		<td class="Min text-center">{{ buteur.statistics[0].games.minutes }}</td>
		<td class="Buts text-center">{{ buteur.statistics[0].goals.total }}</td>
            </tr>
	{% endfor %}
</table>
</div>
<div class="text-center">
<p>PD : Passes décisive</p>
<p>DR : Drible réussit</p>
<p>DG : Duel gagnés</p>
<p>Int : Interceptions</p>
<p>FS : fautes subisent</p>
<p>FC ; fautes commisent</p>
</div>
<script>
    var t;
    var tr_select;
    var c;
    var tr;
    function ordre(ordre,label) {
        tr = document.getElementsByTagName("tr");
        for (var d = 1; d < tr.length; d++) {
            t=false;
            tr_select = tr[d];
            for (var e = d; e >= 1; e--) {
                if (ordre=="decroissant") {
                    if (parseInt(tr[d].getElementsByClassName(label)[0].innerHTML) >= parseInt(tr[e].getElementsByClassName(label)[0].innerHTML)) {
                        t = true;
                        c = e;
                    }
                }else {
                    if (parseInt(tr[d].getElementsByClassName(label)[0].innerHTML) <= parseInt(tr[e].getElementsByClassName(label)[0].innerHTML)) {
                        t = true;
                        c = e;
                    }
                }
            }
            if (t==true)
                tr[c].before(tr_select);
        }
        for (var k = 1; k < tr.length; k++) {
            tr[k].getElementsByTagName("td")[0].innerHTML = k;
        }
        $(".ordre").each(function () {
            this.src="http://77.148.37.160/icon.png";
        })
    }
    var chaine;
    var num_lettre;
    var chaine2;
    var num_lettre2;
    function ordre_alphabet(ordre) {
        tr = document.getElementsByTagName("tr");
        for (var d = 1; d < tr.length; d++) {
            t=false;
            tr_select=tr[d];
            chaine = tr[d].getElementsByTagName("td")[2].innerHTML;
            num_lettre = chaine[0].charCodeAt(0);
            console.log(num_lettre);
            for (var e = d; e >= 1; e--) {
                if (ordre == "croissant") {
                    chaine2 = tr[e].getElementsByTagName("td")[2].innerHTML;
                    num_lettre2 = chaine2[0].charCodeAt(0);
                    if (num_lettre <= num_lettre2) {
                        t = true;
                        c = e;
                    }
                }else {
                    chaine2 = tr[e].getElementsByTagName("td")[2].innerHTML;
                    num_lettre2 = chaine2[0].charCodeAt(0);
                    if (num_lettre >= num_lettre2) {
                        t = true;
                        c = e;
                    }
                }
                if (t==true)
                    tr[c].before(tr_select);
            }
        }
        for (var k = 1; k < tr.length; k++) {
            tr[k].getElementsByTagName("td")[0].innerHTML = k;
        }
        $(".ordre").each(function () {
            this.src="http://77.148.37.160/icon.png";
        })
    }
</script>
{% endblock %}