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

{% block style %}
    <style>

        @media screen and (max-width: 2100px) {
            #historique {
                padding: 20px 10% !important;
            }
        }

        @media screen and (max-width: 1600px) {
            #historique {
                padding: 20px 5% !important;
            }
        }

        @media screen and (max-width: 1400px) {
            #historique {
                padding: 20px 0% !important;
            }
        }

        @media screen and (max-width: 1300px) {
            #historique {
                padding: 20px 10% !important;
            }

            .resp1300px {
                display:none !important;
            }
        }


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

        #banniere {
            display:flex;
            height:250px;
        }

        #banniere > div:nth-child(1) {
            background-image: url('{{ asset('img/champions/Kryndor.jpg') }}');
            background-position-x: center;
            filter: brightness(0.7);
            background-size: cover;
            width:25%;
        }

        #banniereText {
            display:flex;
            flex-direction:column;
            flex-grow:1;
            align-items: center;
            justify-content: center;
            background-color: #22EAB2;
        }

        #banniereText p:nth-child(1) {
            width: fit-content;
            font-size:50px;
            color:black;
            font-weight:bold;
            margin:0;
            margin-bottom:20px;
            text-align: center;
        }

        #banniereText p:nth-child(2) {
            width: fit-content;
            font-size: 30px;
            color: white;
            margin: 0;
            background-color: #00121C;
            padding: 10px 20px;
            border-radius: 50px;
        }

        #banniereText a {
            width: fit-content;
            background-color: #00121C;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 20px;
        }

        #banniere > div:nth-child(3) {
            filter: brightness(0.7);
            background-image: url('{{ asset('img/champions/Vexar.jpg') }}');
            background-position-x: center;
            background-size: cover;
            width:25%;
        }

        #historique {
            display:flex;
            flex-grow:1;
            flex-direction:column;
            padding: 20px 20%;
        }

        #historique h1 {
            text-align:center;
            margin-bottom:40px;
        }

        #infos {
            background-color: #22EAB2;
            justify-content: space-around;
            color:black;
            font-size: 25px;
            font-weight: bold;
            padding:20px;
        }

        #infos p {
            margin:0;
        }

        .scrimRow {
            background-color:#022538;
            text-align:center;
        }

        .scrimRow img {
            width:100px;
        }

        .scrimRow > div {
            display:flex;
            align-items: center;
            place-content: center;
            text-align:center;
        }
        
        .imgComp {
            display: flex;
            place-content: center;
        }

        .stats {
            flex-grow:1;
        }

        .stats p {
            margin:0 20px;
            font-size:25px;
        }

        .stats p:hover {
            cursor:pointer;
        }

        .rowDate {
            padding:0 20px;
            font-size:20px;
        }

        #showStats {
            display:none;
            position:absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index:1;
            align-items: center;
            justify-content: center;
        }

        #showStats > div {
            background-color:#022538;
            width: fit-content;
            height: fit-content;
        }

        #closeStats {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #00121C;
            height: 100%;
            width: 100px;
            color: white;
            place-content: center;
        }

        #closeStats:hover {
            cursor:pointer;
        }

        #dateStats {
            background-color: #22EAB2;
            color:black;
            position: relative;
        }

        #dateStats {
            padding: 20px;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
        }

        #dateStats p {
            margin:0;
        }

        #team1, #team2 {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #team1pick, #team2pick {
            display:flex;
            border: solid 2px white;
        }

        #team1pick img, #team2pick img {
            width:200px;
        }

        #team1ban, #team2ban {
            border: solid 2px white;
            width: fit-content;
            display: flex;
        }

        #team1ban {
            border-top:none;
        }

        #team2ban {
            border-bottom:none;
        }

        #team1ban img, #team2ban img {
            width:100px;
            filter: sepia(1) hue-rotate(-50deg) saturate(5) brightness(0.8);
        }

        #team1Effi p, #team2Effi p {            
            border: solid 2px white;
            margin: 0;
            padding: 10px;
        }

        #team1Effi p {
            background-color: #0173A3;
            border-top: none;
        }

        #team2Effi p {
            background-color: #780400;
            border-bottom: none;
        }

        #winningMessage {
            text-align: center;
            margin: 40px 0;
            font-size: 30px;
        }

        #hover-message {
            position: absolute;
            display: none;
            padding: 5px 10px;
            background-color: black;
            color: white;
            border-radius: 5px;
            white-space: nowrap; /* Prevents text from wrapping */
            pointer-events: none; /* Ensures the message doesn't interfere with mouse events */
            transform: translate(-50%, -100%); /* Adjusts position relative to the cursor */
            z-index: 1000; /* Ensures the message is above other elements */
        }

    </style>
{% endblock %}

{% block javascripts %}
    <script>

        let champions = [
            {% for champion in champions %}
                {
                    chmpid: {{ champion.chmpid }},
                    chmpname: '{{ champion.chmpname }}'
                }{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        function getStats(idScrim){
            $.ajax({
                url: "{{ path('scrims_getMoreStatsScrim') }}",
                type: 'POST',
                data: {
                    idScrim: idScrim,
                },
                success: function(response) {
                    showStats(JSON.parse(response));
                },
                error: function(xhr) {
                    $('#response').html('<p>Une erreur est survenue.</p>');
                }
            });
        }

        function showStats(stats){
            document.getElementById('showStats').style.display = 'flex';
            document.getElementById('date').textContent = 'Résumé du '+stats[0]['date'];
            document.getElementById('team1pick').innerHTML = '';
            document.getElementById('team1ban').innerHTML = '';
            document.getElementById('team2pick').innerHTML = '';
            document.getElementById('team2ban').innerHTML = '';
            let listPickTeam1 = [stats[0]['pick_team1_chmp1_id'], stats[0]['pick_team1_chmp2_id'], stats[0]['pick_team1_chmp3_id'], stats[0]['pick_team1_chmp4_id'], stats[0]['pick_team1_chmp5_id']];
            let listBanTeam1 = [stats[0]['ban_team1_chmp1_id'], stats[0]['ban_team1_chmp2_id'], stats[0]['ban_team1_chmp3_id'], stats[0]['ban_team1_chmp4_id'], stats[0]['ban_team1_chmp5_id']];
            let listPickTeam2 = [stats[0]['pick_team2_chmp1_id'], stats[0]['pick_team2_chmp2_id'], stats[0]['pick_team2_chmp3_id'], stats[0]['pick_team2_chmp4_id'], stats[0]['pick_team2_chmp5_id']];
            let listBanTeam2 = [stats[0]['ban_team2_chmp1_id'], stats[0]['ban_team2_chmp2_id'], stats[0]['ban_team2_chmp3_id'], stats[0]['ban_team2_chmp4_id'], stats[0]['ban_team2_chmp5_id']];
            champions.forEach(function(champion) {
                if (listPickTeam1.includes(champion.chmpid)) {
                    document.getElementById('team1pick').innerHTML += '<img src="{{ asset('img/champions/') }}' + champion.chmpname + '.jpg" onmouseover="showChampName(event, '+"'"+ champion.chmpname +"'"+')" onmouseout="hideChampName()">';
                }
            });
            champions.forEach(function(champion) {
                if (listBanTeam1.includes(champion.chmpid)) {
                    document.getElementById('team1ban').innerHTML += '<img src="{{ asset('img/champions/') }}' + champion.chmpname + '.jpg" onmouseover="showChampName(event, '+"'"+ champion.chmpname +"'"+')" onmouseout="hideChampName()">';
                }
            });
            document.querySelector('#team1Effi p').textContent = stats[0]['percentEffiDraftTeam1']+'%';
            if(stats[0]['percentEffiDraftTeam1'] > 50){
                document.querySelector('#winningMessage p').textContent = 'Vous avez remporté la partie !';
            } else {
                document.querySelector('#winningMessage p').textContent = "L'adversaire a remporté la partie.";
            }
            document.querySelector('#team2Effi p').textContent = (100-stats[0]['percentEffiDraftTeam1'])+'%';
            champions.forEach(function(champion) {
                if (listPickTeam2.includes(champion.chmpid)) {
                    document.getElementById('team2pick').innerHTML += '<img src="{{ asset('img/champions/') }}' + champion.chmpname + '.jpg" onmouseover="showChampName(event, '+"'"+ champion.chmpname +"'"+')" onmouseout="hideChampName()">';
                }
            });
            champions.forEach(function(champion) {
                if (listBanTeam2.includes(champion.chmpid)) {
                    document.getElementById('team2ban').innerHTML += '<img src="{{ asset('img/champions/') }}' + champion.chmpname + '.jpg" onmouseover="showChampName(event, '+"'"+ champion.chmpname +"'"+')" onmouseout="hideChampName()">';
                }
            });
        }

        function hideStats(){
            document.getElementById('showStats').style.display = 'none';
        }

        function showChampName(event, message) {
            const messageBox = document.getElementById('hover-message');
            messageBox.textContent = message;
            messageBox.style.display = 'block';
            positionMessageBox(event, messageBox);
        }

        function hideChampName() {
            const messageBox = document.getElementById('hover-message');
            messageBox.style.display = 'none';
        }

        function positionMessageBox(event, messageBox) {
            const x = event.clientX;
            const y = event.clientY;
            messageBox.style.left = x + 'px';
            messageBox.style.top = y + 'px';
        }

        document.addEventListener('mousemove', function(event) {
            const messageBox = document.getElementById('hover-message');
            if (messageBox.style.display === 'block') {
                positionMessageBox(event, messageBox);
            }
        });

    </script>
{% endblock %}

{% block body %}
<div id="content">
    <div id="showStats">
        <div>
            <div id="dateStats">
                <p id="date"></p>
                <p id="closeStats" onclick="hideStats()">X</p>
            </div>
            <div id="infoStats">
                <div id="team1">
                    <div id="team1pick">
                    </div>
                    <div id="team1ban">
                    </div>
                    <div id="team1Effi">
                        <p></p>
                    </div>
                </div>
                <div id="winningMessage">
                    <p></p>
                </div>
                <div id="team2">
                    <div id="team2Effi">
                        <p></p>
                    </div>
                    <div id="team2ban">
                    </div>
                    <div id="team2pick">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="banniere">
        <div></div>
        <div id="banniereText">
            {% if scrimToDo != 0 %}
            <p>Il vous reste {{ scrimToDo }} session{% if scrimToDo > 1 %}s{% endif %} aujourd'hui</p>
            <a href="{{ path('scrims_ongoing') }}">Lancez une session</a>
            {% else %}
            <p>Aucune session restante aujourd'hui</p>
            <p id="tempsRestant"></p>
            <script>
                function updateTimeRemaining() {
                    const now = new Date();
                    const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
                    const timeDiff = tomorrow - now;
                    
                    const hours = Math.floor(timeDiff / (1000 * 60 * 60));
                    const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
                    
                    const formattedTime = `${String(hours).padStart(2, '0')}h${String(minutes).padStart(2, '0')}`;
                    
                    document.getElementById('tempsRestant').textContent = formattedTime+' avant refresh';
                }

                // Initial call to display the time remaining immediately
                updateTimeRemaining();

                // Update the time remaining every minute
                setInterval(updateTimeRemaining, 60000);
            </script>
            {% endif %}
        </div>
        <div></div>
    </div>
    <div id="historique">
        <h1>Historique des scrims</h1>
        <table>
            <thead>
                <tr id="infos">
                    <th>Date</th>
                    <th>Votre composition</th>
                    <th>Résumé</th>
                    <th class="resp1300px">Composition adverse</th>
                </tr>
            </thead>
            <tbody>
                {% if scrims == [] %}
                <tr>
                    <td>Vous n'avez encore participé à aucune session scrim.</td>
                </tr>
                {% else %}
                {% for scrim in scrims %}
                <tr class="scrimRow">
                    <th class="rowDate">
                        <p>{{ scrim.date }}</p>
                    </th>
                    <td class="imgComp">
                        {% for champion in champions %}
                            {% if champion.chmpid == scrim.team1_chmp1_id or champion.chmpid == scrim.team1_chmp2_id or champion.chmpid == scrim.team1_chmp3_id or champion.chmpid == scrim.team1_chmp4_id or champion.chmpid == scrim.team1_chmp5_id%}
                                <img src="{{ asset('img/champions/') }}{{ champion.chmpname }}.jpg" onmouseover="showChampName(event, '{{ champion.chmpname }}')" onmouseout="hideChampName()">
                            {% endif %}
                        {% endfor %}
                    </td>
                    <td class="stats">
                        <p onclick="getStats({{ scrim.id }})">Voir</p>
                    </td>
                    <td class="imgComp resp1300px">
                        {% for champion in champions %}
                            {% if champion.chmpid == scrim.team2_chmp1_id or champion.chmpid == scrim.team2_chmp2_id or champion.chmpid == scrim.team2_chmp3_id or champion.chmpid == scrim.team2_chmp4_id or champion.chmpid == scrim.team2_chmp5_id%}
                                <img src="{{ asset('img/champions/') }}{{ champion.chmpname }}.jpg" onmouseover="showChampName(event, '{{ champion.chmpname }}')" onmouseout="hideChampName()">
                            {% endif %}
                        {% endfor %}
                    </td>
                </tr>
                {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
    <div id="hover-message"></div>
</div>
{% endblock %}