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

{% block style %}
    <style>
        @media screen and (max-width: 1300px) {
            .championName {
                display:none !important;
            }

            .championSlot {
                justify-content: center;
            }

        }

        #content {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            color:white;
        }

        .contentBackgroundDraft {
            background: linear-gradient(#0173A3, #780400);
        }

        #launchButton {
            text-align:center;
            display: flex;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
        }

        #launchButton button {
            background-color: white;
            color: #081B26;
            padding: 20px 40px;
            font-size:15px;
            border: 0;
        }

        #titleScrims {
            display: flex;
            justify-content: center;
        }

        #title {
            width: fit-content;
            background-color: white;
            color: #081B26;
            margin: 0;
            padding: 20px 40px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

        .banPhase {
            background-color:#b93434 !important;
            color:white !important;
        }

        .selectPhase {
            background-color:#7575b7 !important;
            color:white !important;
        }

        #scrimsSession {
            display:flex;
            flex-grow:1;
            flex-direction:column;
        }

        #t-1_SelectedChamp, #t-2_SelectedChamp {
            display:flex;
            place-content: center;
            justify-content: space-between;
        }

        #t-1_SelectedChamp > div, #t-2_SelectedChamp > div {
            width:20%;
        }
        
        #ban-select {
            display:flex;
        }

        #t-1_BansList, #t-2_BansList {
            display:flex;
            justify-content: center;        
        }

        #t-1_BansList > div > div > div, #t-2_BansList  > div > div > div {
            height:80px;      
        }

        #t-1_BansList > div {
            border: solid 2px white;
            border-top: none;
        }

        #t-2_BansList > div {
            border: solid 2px white;
            border-bottom: none;
        }

        #t-1_BansList > div, #t-2_BansList > div {
            display:flex;
        }

        #t-1_BansList img, #t-2_BansList img {
            width:80px;
            filter: sepia(1) hue-rotate(-50deg) saturate(5) brightness(0.8);
        }

        #champSelect {
            display: flex;
            flex-grow: 1;
            align-items:center;
        }

        #listChampion img {
            width:100px;
            margin: 10px;
            border-radius:100px;
            box-sizing: border-box;
        }

        #validateChoice {
            display:none;
            align-content: center;
            text-align: center;
            flex-direction: column;
            flex-grow: 1;
        }

        #buttonValidate {
            display: flex;
            justify-content: center;
        }

        #buttonValidate > p {
            width: fit-content;
            padding: 0px 20px 0px 20px;
            background-color: white;
            color: #081B26;
            font-weight: bold;
            font-size: 20px;
            height:50px;
            align-content: center;
        }

        #buttonValidate > p:hover {
            cursor:pointer;
        }

        .championSlot {
            display: flex;
            border: solid 2px white;
            height: 150px;
        }

        .championSlot p {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            font-size: 30px;
        }

        .championSlot img {
            width:150px;
        }

        .selected {
            border: solid 2px white;
        }

        .alreadySelected {
            filter: grayscale(100%);
        }

        #checkResult {
            display:none;
            flex-direction: column;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
        }

        #phaseTitle {
            margin:0;
        }

        #phaseGame {
            display:none;
            padding: 30px;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
        }

        #validation {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }

        #selection {
            width:200px;
            height:50px;
            align-content: center;
            background-color: #0173A3;
        }

        #currentSelection {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
        }

        #turnOrder {
            background-color: #0173A3;
            padding: 10px 20px 10px 20px;
            font-size: 30px;
            font-weight: bold;
        }

        #listChampion {
            margin: 0 15% 0 15%;
        }

        #endScreen {
            display:none;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
        }

        #textResult {
            display: flex;
            flex-grow: 1;
            flex-direction:column;
            align-items: center;
            font-size: 40px;
            justify-content:center;
        }

        #textResult > p {
            margin:0;
            margin-bottom: 40px;
        }

        #textResult a {
            color: white;
            text-decoration: none;
            background-color: #7575b7;
            padding: 10px 20px;
            font-size: 30px;
        }

        #effiDraftTeam1 {
            background-color: #0173A3;
            border: solid 2px white;
            border-top: none;
            padding: 0 20px;
        }

        #effiDraftTeam2 {
            background-color: #780400;
            border: solid 2px white;
            border-bottom: none;
            padding: 0 20px;
        }

        #newMuInfos {
            display:flex;
            flex-direction:column;
            margin-bottom: 40px;
            background-color: #7575b7;
            padding: 20px;
        }

        #newMuInfos p {
            margin:0;
        }

        #newMuInfos > p {
            font-size: 25px;
            text-align: center;
        }

        #MuInfos {
            display:flex;
            justify-content: center;
            margin-top: 40px;
        }

        #MuInfos > div {
            display:flex;
            margin: 0 20px;
            align-items: center;
            text-align: center;
        }

        #MuInfos > div > p {
            margin: 0 20px;
        }

        #MuInfos img {
            width:100px;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script>

        function startGame(){
            document.getElementById('launchButton').style.display = 'none';
            document.querySelector('nav').style.display = 'none';
            document.querySelector('footer').style.display = 'none';
            document.getElementById('validateChoice').style.display = 'flex';
            document.getElementById('phaseGame').style.display = 'block';
            document.getElementById('phaseTitle').textContent = 'Phase de bannissement';
            document.getElementById('phaseGame').classList.add('banPhase');
            document.getElementById('content').classList.add('contentBackgroundDraft');
            {% for champion in champions %}
                var champDiv = document.getElementById('listChampion');
                champDiv.innerHTML = champDiv.innerHTML + '<img src="{{ asset('img/champions/') }}'+'{{ champion.chmpname }}'+'.jpg" id="{{ champion.chmpname }}" onclick="userSelection('+"'{{ champion.chmpname }}'"+')">';
                listChamp.push('{{ champion.chmpname }}');
            {% endfor %}
        } 
        
        let lastSelection = '';
        let team1Champ = [];
        let team2Champ = [];
        let team1BanChamp = [];
        let team2BanChamp = [];
        let listChamp = [];
        let userTurn = false;
        let banPhase = true;

        function userSelection(id){
            if(!document.getElementById(id).classList.contains('alreadySelected')){
                if(lastSelection != ''){
                    document.getElementById(lastSelection).classList.remove('selected');
                }                   
                document.getElementById('selection').textContent = id;
                document.getElementById(id).classList.add('selected');
                lastSelection = id;
            }
        }

        function selectChamp(){
            if(document.getElementById('selection').textContent != '...'){
                if(!banPhase){
                    team1Champ.push(document.getElementById('selection').textContent);
                    document.getElementById(document.getElementById('selection').textContent).classList.add('alreadySelected');
                    document.getElementById(document.getElementById('selection').textContent).classList.remove('selected');
                    var divId = `t-1_champ${team1Champ.length}`;
                    document.querySelector('#'+divId+' img').src = '{{ asset('img/champions/') }}'+document.getElementById('selection').textContent+'.jpg';
                    document.querySelector('#'+divId+' p').textContent = document.getElementById('selection').textContent;
                    // Remplacer le select par le <p> dans le div correspondant
                    document.getElementById('selection').textContent = '...';
                } else {
                    team1BanChamp.push(document.getElementById('selection').textContent);
                    document.getElementById(document.getElementById('selection').textContent).classList.add('alreadySelected');
                    document.getElementById(document.getElementById('selection').textContent).classList.remove('selected');

                    // Remplacer le select par le <p> dans le div correspondant
                    var divId = `t-1_banchamp${team1BanChamp.length}`;
                    document.querySelector('#'+divId+' img').src = '{{ asset('img/champions/') }}'+document.getElementById('selection').textContent+'.jpg';
                    document.getElementById('selection').textContent = '...';
                }
                checkTurn();
                if(team1Champ.length + team2Champ.length != 10 && !userTurn){
                    opponentTurn();
                }
            }
        }

        function opponentTurn(){

            var selectedChampions = team1Champ.concat(team2Champ);
            selectedChampions = selectedChampions.concat(team1BanChamp);
            selectedChampions = selectedChampions.concat(team2BanChamp);

            if(!banPhase){
                if(team1Champ.length + team2Champ.length == 0 || team1Champ.length + team2Champ.length == 9 || team1BanChamp.length + team2BanChamp.length == 10){
                    var randomIndex = Math.floor(Math.random() * {{ champions|length }});
                    var randomChampion = listChamp[randomIndex];
                    while(selectedChampions.includes(randomChampion)){
                        randomIndex = Math.floor(Math.random() * {{ champions|length }});
                        randomChampion = listChamp[randomIndex];
                    }
                    team2Champ.push(randomChampion);
                    var divId = `t-2_champ${team2Champ.length}`;
                    var champDiv = document.getElementById(divId);
                    document.querySelector('#'+divId+' img').src = '{{ asset('img/champions/') }}'+randomChampion+'.jpg';
                    document.querySelector('#'+divId+' p').textContent = randomChampion;
                    document.getElementById(randomChampion).classList.add('alreadySelected');
                } else {
                    for(let i = 0; i < 2; i++){
                        if(!banPhase){
                            var randomIndex = Math.floor(Math.random() * {{ champions|length }});
                            var randomChampion = listChamp[randomIndex];
                            while(selectedChampions.includes(randomChampion)){
                                randomIndex = Math.floor(Math.random() * {{ champions|length }});
                                randomChampion = listChamp[randomIndex];
                            }
                            team2Champ.push(randomChampion);
                            var divId = `t-2_champ${team2Champ.length}`;
                            var champDiv = document.getElementById(divId);
                            document.querySelector('#'+divId+' img').src = '{{ asset('img/champions/') }}'+randomChampion+'.jpg';
                            document.querySelector('#'+divId+' p').textContent = randomChampion;
                            document.getElementById(randomChampion).classList.add('alreadySelected');
                        } else {
                            var randomIndex = Math.floor(Math.random() * {{ champions|length }});
                            var randomChampion = listChamp[randomIndex];
                            while(selectedChampions.includes(randomChampion)){
                                randomIndex = Math.floor(Math.random() * {{ champions|length }});
                                randomChampion = listChamp[randomIndex];
                            }
                            team2BanChamp.push(randomChampion);
                            var divId = `t-2_banchamp${team2BanChamp.length}`;
                            document.querySelector('#'+divId+' img').src = '{{ asset('img/champions/') }}'+randomChampion+'.jpg';
                            document.getElementById(randomChampion).classList.add('alreadySelected');
                        }
                        checkTurn();
                    }
                }
            } else {
                var randomIndex = Math.floor(Math.random() * {{ champions|length }});
                var randomChampion = listChamp[randomIndex];
                while(selectedChampions.includes(randomChampion)){
                    randomIndex = Math.floor(Math.random() * {{ champions|length }});
                    randomChampion = listChamp[randomIndex];
                }
                team2BanChamp.push(randomChampion);
                var divId = `t-2_banchamp${team2BanChamp.length}`;
                document.querySelector('#'+divId+' img').src = '{{ asset('img/champions/') }}'+randomChampion+'.jpg';
                document.getElementById(randomChampion).classList.add('alreadySelected');
            }
            userTurn = true;
            checkTurn();
        }

        function checkTurn(){
            if(team1Champ.length + team2Champ.length != 10){
                if(banPhase){
                    if(team1BanChamp.length + team2BanChamp.length == 6 || team1BanChamp.length + team2BanChamp.length == 10){
                        banPhase = false;
                        changePhaseTitle();
                    } else {
                        if((team1BanChamp.length + team2BanChamp.length) % 2 == 1){
                            userTurn = false;
                        }
                    }
                } else {
                    if(team1Champ.length + team2Champ.length == 6){
                        banPhase = true;
                        changePhaseTitle();
                    } else {
                        if(team1Champ.length > team2Champ.length){
                            userTurn = false;
                        }
                    }
                }
            } else {
                document.getElementById('validateChoice').style.display = 'none';
                document.getElementById('checkResult').style.display = 'flex';
            }
        }

        function changePhaseTitle(){
            if(document.getElementById('phaseTitle').textContent == 'Phase de bannissement'){
                console.log('select');
                document.getElementById('phaseTitle').textContent = 'Phase de sélection';
                document.getElementById('phaseGame').classList.remove('banPhase');
                document.getElementById('phaseGame').classList.add('selectPhase');
                document.getElementById('turnOrder').textContent = 'Sélectionnez un champion';
            } else {
                console.log('ban');
                document.getElementById('phaseTitle').textContent = 'Phase de bannissement';
                document.getElementById('phaseGame').classList.remove('selectPhase');
                document.getElementById('phaseGame').classList.add('banPhase');
                document.getElementById('turnOrder').textContent = 'Bannissez un champion';
            }
        }

        function checkResults(){
            $.ajax({
                url: "{{ path('scrims_checkResults') }}",
                type: 'POST',
                data: {
                    team1: JSON.stringify(team1Champ),
                    team2: JSON.stringify(team2Champ),
                    team1ban: JSON.stringify(team1BanChamp),
                    team2ban: JSON.stringify(team2BanChamp),
                },
                success: function(response) {
                    showResults(JSON.parse(response));
                },
                error: function(xhr) {
                    $('#response').html('<p>Une erreur est survenue.</p>');
                }
            });
        }

        function showResults(results){
            document.getElementById('endScreen').style.display = 'flex';
            document.getElementById('checkResult').style.display = 'none';
            document.querySelector('#effiDraftTeam1 p').textContent = document.querySelector('#effiDraftTeam1 p').textContent + results[0] + '%';
            document.querySelector('#effiDraftTeam2 p').textContent = document.querySelector('#effiDraftTeam2 p').textContent + (100-results[0]) + '%';
            results[0] > 50 ? document.querySelector('#textResult p').textContent = 'Vous avez remporté la partie !' : document.querySelector('#textResult p').textContent = "L'équipe adverse a remporté la partie.";
            results[1].forEach((element) => {
                console.log(element);
                document.getElementById('MuInfos').innerHTML += `
                    <div>
                        <div>
                            <img src="{{ asset('img/champions/') }}${element['chmp_name1']}.jpg">
                            <p>${element['percentMU']}</p>
                        </div>
                        <p>VS</p>
                        <div>
                            <img src="{{ asset('img/champions/') }}${element['chmp_name2']}.jpg">
                            <p>${100 - element['percentMU']}</p>
                        </div>
                    </div>
                `;            
            });
        }

        function testImage(img) {
            img.onerror = function() {
                img.src = '{{ asset('img/champions/default.jpg') }}';
            };
        }
    </script>
{% endblock %}

{% block body %}
<div id="content">
    <div id="scrimsSession">
        <div id="phaseGame">
            <p id="phaseTitle">Bannissez un champion</p>
        </div>
        <div id="team1">
            <div id="t-1_SelectedChamp">
                <div>
                    <div id="t-1_champ1" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-1_champ2" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-1_champ3" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-1_champ4" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-1_champ5" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
            </div>
            <div id="t-1_BansList">
                <div>
                    <div>
                        <div id="t-1_banchamp1">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-1_banchamp2">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-1_banchamp3">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-1_banchamp4">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-1_banchamp5">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="launchButton">
            <button onclick="startGame()">Démarrer votre session</button>
        </div>
        <div id="validateChoice">
            <div id="currentSelection">
                <p id="turnOrder">Bannissez un champion</p>
            </div>
            <div id="champSelect">
                <div id="listChampion"></div>
            </div>
            <div id="validation">
                <p id="selection">...</p>
                <div id="buttonValidate">
                    <p onclick="selectChamp()">✓</p>
                </div>
            </div>
        </div>
        <div id="checkResult">
            <p>La draft est terminée !</p>
            <button onclick="checkResults()">Voir le résultat</button>
        </div>
        <div id="endScreen">
            <div id="effiDraftTeam1">
                <p>% Efficacité Draft : </p>
            </div>
            <div id="textResult">
                <p></p>
                <div id="newMuInfos">
                    <p>Voici les informations que vous avez récolté :</p>
                    <div id="MuInfos"></div>
                </div>
                <a href="{{ path('scrims') }}" >Retour vers Scrims</a>            
            </div>
            <div id="effiDraftTeam2">
                <p>% Efficacité Draft : </p>
            </div>
        </div>
        <div id="team2">        
            <div id="t-2_BansList">
                <div>
                    <div>
                        <div id="t-2_banchamp1">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-2_banchamp2">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-2_banchamp3">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-2_banchamp4">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                    <div>
                        <div id="t-2_banchamp5">
                            <img src="{{ asset('img/champions/default.jpg') }}">
                        </div>
                    </div>
                </div>
            </div>
            <div id="t-2_SelectedChamp">
                <div>
                    <div id="t-2_champ1" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-2_champ2" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-2_champ3" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-2_champ4" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
                <div>
                    <div id="t-2_champ5" class="championSlot">
                        <img src="{{ asset('img/champions/default.jpg') }}">
                        <p class="championName"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}