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

{% block style %}
    <style>
        #content {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            color:white;
        }

        #content > h1, #launchButton {
            text-align:center;
        }

        #scrimsSession {
            display:none;
            justify-content: center;
        }

        #team1, #team2 {
            margin-left:40px;
            margin-right:40px;
        }

        #t-1_SelectedChamp > div, #t-2_SelectedChamp > div {
            height:150px;
        }

        #validateChoice {
            width: 20%;
            align-content: center;
            text-align: center;
        }

        .championSlot img {
            width:100px;
        }

    </style>
{% endblock %}

{% block javascripts %}
    <script>
        function startGame(){
            document.getElementById('launchButton').style.display = 'none';
            document.getElementById('scrimsSession').style.display = 'flex';
        }
        
        let team1Champ = [];
        let team2Champ = [];
        let currentTeam = 'team1';
        let index = 1;

        function selectChamp(){

            var selectElement = document.getElementById('champ');
            var imgElement = document.createElement('img');
            var selectedChampions = team1Champ.concat(team2Champ);

            imgElement.src = '{{ asset('img/champions/') }}'+document.getElementById('champ').value+'.jpg';

            if(currentTeam == 'team1'){
                team1Champ.push(document.getElementById('champ').value);
                var divId = `t-1_champ${team1Champ.length}`;
            } else {
                team2Champ.push(document.getElementById('champ').value);
                var divId = `t-2_champ${team2Champ.length}`;
            }

            // Remplacer le select par le <p> dans le div correspondant
            var champDiv = document.getElementById(divId);
            champDiv.innerHTML = '';
            champDiv.appendChild(imgElement);

            // Mettre à jour les options du select pour l'autre équipe
            index++;
            if(index == 2){
                index = 0;
                currentTeam == 'team1' ? currentTeam = 'team2' : currentTeam = 'team1';
            }
            if(team1Champ.length + team2Champ.length != 10){
                updateSelectOptions();
            }
        }

        function updateSelectOptions() {
            console.log('Team 1 :'+team1Champ);
            console.log('Team 2 :'+team2Champ);
            var selectedChampions = team1Champ.concat(team2Champ);

            // Générer un nouveau select avec les options disponibles
            var newSelect = document.createElement('select');
            newSelect.setAttribute('id', 'champ');
            {% for champion in champions %}
                console.log('{{ champion.chmpname }}');
                if(!selectedChampions.includes('{{ champion.chmpname }}')){
                    var option = document.createElement('option');
                    option.value = '{{ champion.chmpname }}';
                    option.innerText = '{{ champion.chmpname }}';
                    newSelect.appendChild(option);
                }
            {% endfor %}

            if (currentTeam == 'team1') {
                var nextDivId = `t-1_champ${team1Champ.length + 1}`;
            } else {
                var nextDivId = `t-2_champ${team2Champ.length + 1}`;
            }
            var nextDiv = document.getElementById(nextDivId);
            nextDiv.innerHTML = '';
            nextDiv.appendChild(newSelect);
        }
    </script>
{% endblock %}

{% block body %}
<div id="content">
    <h1>Scrims</h1>
    <div id="launchButton">
        <p onclick="startGame()">Démarrer votre session</p>
    </div>
    <div id="scrimsSession">
        <div id="team1">
            <div id="t-1_BansList">
                <p>Bans :</p>
            </div>
            <div id="t-1_SelectedChamp">
                <div>
                    <label for="champ">Champion n°1</label>
                    <div id="t-1_champ1" class="championSlot">
                        <select name="champ" id="champ">
                            {% for champion in champions %}
                                <option value="{{ champion.chmpname }}">{{ champion.chmpname }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div>
                    <label for="champ">Champion n°2</label>
                    <div id="t-1_champ2" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°3</label>
                    <div id="t-1_champ3" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°4</label>
                    <div id="t-1_champ4" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°5</label>
                    <div id="t-1_champ5" class="championSlot"></div>
                </div>
            </div>
        </div>
        <div id="validateChoice">
            <p onclick="selectChamp()">Valider</p>
        </div>
        <div id="team2">
            <div id="t-2_BansList">
                <p>Bans :</p>
            </div>
            <div id="t-2_SelectedChamp">
                <div>
                    <label for="champ">Champion n°1</label>
                    <div id="t-2_champ1" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°2</label>
                    <div id="t-2_champ2" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°3</label>
                    <div id="t-2_champ3" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°4</label>
                    <div id="t-2_champ4" class="championSlot"></div>
                </div>
                <div>
                    <label for="champ">Champion n°5</label>
                    <div id="t-2_champ5" class="championSlot"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}