{% extends 'base.html.twig' %}
{% block title %}SquadForge - Find mates for gaming{% endblock %}

{% block body %}

    <script>
        document.getElementById('authenticationDiv').style.display = "none";
    </script>

    {# hidden indication quelle page #}
    <span id="landingPageBool" style="display:none" hidden></span>


    <section id="section1" class="section">

        {# Page 1a #}
        <div id="lp-page1a" class="globalBannerLandingPage" style="background: url('{{ asset('img/banner.jpg') }}');">
            
            <a href="{{ path('app_home') }}" class="centeredLogo">
                <img src="{{ asset('img/logoSquadForge_v3.png') }}" class="logoPng centeredLogoImg" />
            </a>

            <h2 class="landingPageSlogan">Forge your squad, Rule the game !</h2>

            <div class="lp-statsDiv">
                <div class="lp-leftSection">
                    <div class="lp-p1a-btn-noHover">
                        <span class="lp-usersCountLabel">Utilisateurs</span> 
                        <span class="lp-count">{{ usersCount }}</span>
                    </div>
                    <a href="{{ path('app_allGroupList') }}">
                        <div class="lp-p1a-btn">
                            <span class="lp-usersCountLabel">Teams</span> 
                            <span class="lp-count">{{ teamsCount }}</span>
                        </div>
                    </a>
                    <div class="lp-p1a-btn-noHover">
                        <span class="lp-usersCountLabel">Sessions</span> 
                        <span class="lp-count">{{ sessionsCount }}</span>
                    </div>
                </div>
                
                <div class="lp-teamsCountLine">
                    <a href="{{ path('app_games') }}">
                        <div class="lp-p1a-btn">
                            <span class="lp-teamsCountLabel">Jeux</span>
                            <span class="lp-count">{{ gamesCount }}</span>
                        </div>
                    </a>
                    <a href="{{ path('app_allTopicsGlobal') }}">
                        <div class="lp-p1a-btn">
                            <span class="lp-teamsCountLabel">Topics</span> 
                            <span class="lp-count">{{ topicsCount }}</span>
                        </div>
                    </a>
                    <a href="{{ path('app_allMediasGlobal') }}">
                        <div class="lp-p1a-btn">
                            <span class="lp-teamsCountLabel">Médias</span> 
                            <span class="lp-count">{{ mediasCount }}</span>
                        </div>
                    </a>
                </div>
            </div>

        </div>


        {# Page 1b #}
        <div id="lp-page1b">

            <div class="lp-p1-rightSection">
                {# Conteneur dynamique (form login) #}
                <div id="lp-p1b-div" class="lp-p1b-div" >

                    <p class="lp-p1b-rightSectionTitle">Le <strong>gaming</strong> est meilleur en équipe.<br>Rejoignez-nous pour trouver des <strong>teammates</strong> qui partageront votre passion.</p>

                    <div class="lp-p1b-rightSectionLoginDiv">
                        <div class="lp-p1b-1">
                            <span id="lp-loginBtn" style="font-family:'Julius Sans One', sans-serif; cursor:pointer;">Connexion</span> | <a id="lp-loginTwitchBtn" href="{{ linkTwitchOAuth }}" class="twitchWord">Twitch</a>
                        </div>
                        {# TODO form https://chat.openai.com/share/798e5950-f849-4c0e-91eb-eec2f2c1d929 #}
                        <a id="lp-registerBtn" href="{{ path('app_register')}}" >Inscription</a>
                    </div>

                </div>
            </div>

            {# JS Affichage forms login/signUp dans le header #}
            <script>
                document.getElementById("lp-loginBtn").addEventListener("click", function() {

                    const loginFormContainer = document.getElementById('lp-p1b-div');
                    fetch('/getLoginForm')
                        .then(response => response.text())
                        .then(html => {
                            loginFormContainer.innerHTML = html;
                        })
                        .catch(error => console.error('Error fetching login form:', error));

                    setTimeout(() => {
                        const togglePassword = document.querySelector('#togglePassword');
                        const password = document.querySelector('#inputPassword');

                        togglePassword.addEventListener('click', function (e) {
                            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                            password.setAttribute('type', type);

                            if (type === 'password') {
                            this.classList.remove('fa-eye-slash');
                            this.classList.add('fa-eye');
                            } else {
                                this.classList.remove('fa-eye');
                                this.classList.add('fa-eye-slash');
                            }
                        });

                    }, 300);
                });
            </script>

        </div>

        {# Scroll Btn #}
        <div id="lp-scrollBtn" class="landingPageDownBtn">
            <i class="fa-solid fa-chevron-down lpdownBtn1"></i>
            <i class="fa-solid fa-chevron-down lpdownBtn2"></i>
        </div>

        {# SVG coin haut-droite #}
        <svg class="topRightEdgeSvg">
            <path 
                id="topRightEdgeSvgPath"
                d="M 14 14 L 124 14 L 124 86"
                fill-opacity="0"
                />
        </svg>

        {# Forme coin haut-gauche #}
        <div id="lp-p1-topLeftSquare">
        </div>

    </section>



    {# Page 2 (Twitch et Mockup) #}
    <section id="lp-page2" class="section" style="opacity:1; height:100vh; position:relative;">

        <div class="lp-p2a">

            <div class="lp-p2a-wrapper">
                <div class="lp-p2a-content">
                    <p class="twitchPresentation">Associez votre compte <strong>Twitch</strong> pour partager votre contenu plus facilement (à venir) </p>
                    <a href="{{ linkTwitchOAuth }}" class="twitchLoginBtn">Se connecter avec <span class="twitchWord">Twitch</span></a>
                    {# <span>Token: {{ testToken }}</span> #}
                </div>
            </div>

            {# Twitch logo SVG #}
            <div class="twitchLogoSvgContainer">
                {# Outer et inner logo #}
                <svg class="twitchSvg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
                    <path 
                        id="twitchSvgPath1"
                        d="M 42 84 L 57 48 L 267 48 L 267 186 L 204 252 L 159 252 L 132 282 L 96 282 L 96 252 L 42 252 L 42 84"
                        fill-opacity="0"
                    />
                </svg>
                <svg class="twitchSvg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
                    <path 
                        id="twitchSvgPath2"
                        d="M 38 84 L 38 48 L 267 48 L 267 196 L 214 252 L 159 252 L 129 252 L 102 282 L 102 252 L 37 252 L 38 84"
                        fill-opacity="0"
                    />
                </svg>

                {# logo yeux #}
                <div id="logoTwitchEye1"></div>
                <div id="logoTwitchEye2"></div>
            </div>

        </div>

        {# Partie 1 (50vh) de la page 2 #}
        <div class="lp-p2b">

            <div class="lp-p2-leftSection">
                <img src="{{ asset('img/landingPageMockup3.png') }}" class="lp-p2-leftSectionImg" alt="Aperçu du site sur mobile">
                <i class="fa-solid fa-comments lp-p2-icons lp-p2-leftSection-icon1"></i>
                <i class="fa-solid fa-face-grin-squint-tears lp-p2-icons lp-p2-leftSection-icon2" style="font-size:8em;"></i>
            </div>

            <div class="lp-p2-rightSection">
                <span class="lp-p2-rightSectionTitle">Emmenez SquadForge avec vous !<br>Restez connecté et informé à propos de vos univers favoris. <strong>Partagez</strong> avec vos teammates, publiez votre <strong>contenu</strong>, rejoingez ou créez une <strong>team</strong>, et plus encore !</span>
            </div>

        </div>

        {# Scroll Btn #}
        <div id="lp-scrollBtn2" class="landingPageDownBtn">
            <i class="fa-solid fa-chevron-down lpdownBtn1"></i>
            <i class="fa-solid fa-chevron-down lpdownBtn2"></i>
        </div>

    </section>


    {# Page 3: carousel jeux #}
    {# TODO orderBy nbr de publications #}
    <section id="lp-page3" class="section" aria-labelledby="carousel-heading">
        
        {# Splide container #}
        <div class="splide">

            <h2 id="carousel-heading" class="lp-page3-title">
                <i class="fa-solid fa-down-long choseGameArrow arrowLeft"></i>
                <span class="lp-p3-title">Choisissez un jeu pour filtrer</span>
                <i class="fa-solid fa-down-long choseGameArrow arrowRight"></i>
            </h2>

            <div class="lp-page3-containerMaster">

                <div id="lp-page3-container" class="lp-page3-container splide__track"> 

                    <div class="lp-phone-slpideTrait1"></div>

                    <div class="splide__list">

                        {% set index = 1 %}
                        {% for game in games %}

                            <article title="{{ game.title }}" class="lp-page3-slideContainer splide__slide">

                                <svg class="gameSelectedBracketUp">
                                    <path 
                                        id="gameSelectedBracketUpPath{{ index }}"
                                        class="gameSelectedBracketUpPath" 
                                        d="M 57 82 L 57 58 C 57 53 60 48 66 48 L 67 48 L 266 48 C 274 48 276 51 276 56 L 276 55 L 276 82"
                                        {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                        fill-opacity="0"
                                        />
                                </svg>

                                <div id="lp-page3-slide0{{ index }}" class="lp-gameCard isDesktop" style="background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('{{ asset("img/games/headerBackground/" ~ game.subBanner )}}'); background-size:cover;">
                                    <span id="lp-gameCardTitle{{ index }}" value="{{ game.title }}" class="lp-gameCardTitle">{{ game.title }}</span>
                                </div>

                                <div id="lp-page3-slide0{{ index }}" class="lp-gameCard isMobile" style="background-image: linear-gradient(rgba(0, 0, 255, 0.05), rgba(249, 123, 44, 0.5)),url('{{ asset("img/games/headerBackground/" ~ game.subBannerMobile )}}'); background-size:cover;">
                                    <span id="lp-gameCardTitle{{ index }}" value="{{ game.title }}" class="lp-gameCardTitle">{{ game.title }}</span>
                                </div>

                                {# only Phone: #}
                                <span value="{{ game.title }}" class="lp-gameCardTitlePhone">{{ game.title }}</span>

                                <svg class="gameSelectedBracketDown">
                                    <path 
                                        id="gameSelectedBracketDownPath{{ index }}"
                                        class="gameSelectedBracketDownPath" 
                                        d="M 57 82 L 57 58 C 57 53 60 48 66 48 L 67 48 L 266 48 C 274 48 276 51 276 56 L 276 55 L 276 82"
                                        {# d="M 57 82 L 57 48 L 66 48 L 267 48 L 276 48 L 276 82" (sharp angles) #}
                                        fill-opacity="0"
                                        />
                                </svg>

                            </article>

                            {% set index = index + 1 %}

                        {% endfor %}

                        {# Fausse dernière card (espacement) #}
                        <div class="lp-page3-slideContainer splide__slide" style="opacity:0;">
                            <div class="lp-gameCard" style="cursor:default;">
                                <span  class="lp-gameCardTitle"></span>
                            </div>
                        </div>

                    </div>

                    <div class="lp-phone-slpideTrait2"></div>

                </div>
            </div>
        </div>
            
        {# Scroll Btn #}
        <div id="lp-scrollBtn3" class="landingPageDownBtn" style="display:inline-flex; flex-direction:row; gap:25px; transform: translate(50%, 8%); align-items:center; padding:30px 30px;">
            <span style="opacity:0.8; color:#bcbcbc; font-size:0.9em;">Passer</span>
            <div style="display:inline-flex; flex-direction:column;">
                <i class="fa-solid fa-chevron-down lpdownBtn1"></i>
                <i class="fa-solid fa-chevron-down lpdownBtn2"></i>
            </div>
        </div>

    </section>



    {# Page 4 (Contenus associé au jeu sélectionné) #}
    <section id="lp-page4" class ="lp-page4 section">

        <a id="lp-page4-titleLink">
            <div id="lp-page4-titleDivWrapper" class="lp-page4-titleDivWrapper" style="display:inline-flex;width:100%;justify-content:center;gap:55px;">
                {# title: link gameDetails #}
                    <div id="lp-page4-titleDiv" class="lp-page4-titleDiv">
                        <img id="lp-page4-gameLogo" src=""> 
                        <h2 id="lp-page4-selectedGameTitle"><i class="fa-solid fa-arrow-up" style="margin:0 15px; color:#707070;"></i>Sélectionnez un jeu pour filtrer</h2>
                        <i class="fa-solid fa-arrow-right gameDetailsIcon" id="gameDetailsIcon" style="display:none;"></i>
                    </div>
            </div>
        </a>


        <div id="lp-page4-separator"></div>


        {# Recherche Async #}
        <section class="lp-searchDiv">

            <div class="lp-searchSubDiv">

                <div class="searchContainer" style="margin-top:7px; display:inline-flex; align-items:baseline;">
                    <span id="cleanSearchBtn"><i class="fa-solid fa-xmark"></i></span>
                    <span id="orSpan">Ou</span>
                    <input id="lp-searchText" type="text" pattern="[a-zA-Z0-9\s\-_]*" placeholder="Recherchez...">
                </div>

                <div class="lp-searchFiltersDiv">

                    <span class="lp-filtersLabel">Filtres</span>

                    {# Filtres recherche #}
                    <ul class="lp-filterList" style="display:inline-flex;">
                        <li class="filterIcon">[</li>
                        <li id="gamesFilter" value="true" name="gamesFilter" class="lp-filterBtn" style="background-color: var(--primary-color); color:black;">Jeux</li>
                        <li id="topicsFilter" value="true" name="topicsFilter" class="lp-filterBtn" style="background-color: var(--primary-color); color:black;">Topics</li>
                        <li id="mediasFilter" value="true" name="mediasFilter" class="lp-filterBtn" style="background-color: var(--primary-color); color:black;">Médias</li>
                        <li id="teamsFilter" value="false" name="teamsFilter" class="lp-filterBtn">Teams</li>
                        <li class="filterIcon">]</li>
                    </ul>

                </div>

            </div>

        </section>


        <section id="lp-page4-container" class="lp-page4-container"> 

            {# Cards si recherche input vide #}
            <article class="lp-page4-card lp-page4-cardTeam" id="lp-page4-cardTeams" style="cursor:default;">
                <div id="lp-teamsCardGameSelected" style="display:none;">
                    <h3 class="lp-page4-cardTitle">Teams</h3>
                    <div class="lp-page4-teamsCardContent">
                        <img src="{{ asset('img/teamCardImg.png') }}" class="lp-page4-teamsCardImg" alt="teams card illustration">
                        <a id="lp-page4-cardTeams-seek">
                            <span class="lp-page4-cardTeams-btn">Rejoindre une team</span>
                        </a>
                        <a id="lp-page4-cardTeams-create">
                            <span class="lp-page4-cardTeams-btn">Créer votre team</span>
                        </a>
                    </div>
                </div>
                <div id="lp-teamsCardGameNotSelected">
                    <h3 class="lp-page4-cardTitle">Teams</h3>
                    <div class="lp-page4-teamsCardContent">
                        <img src="{{ asset('img/teamCardImg.png') }}" class="lp-page4-teamsCardImg" alt="teams card illustration">
                        <span class="emptyListMsg">Veuillez commencer par sélectionner un jeu</span>
                    </div>
                </div>
            </article>

            <a href="{{ path('app_allTopicsGlobal') }}" id="lp-page4-cardTopics">
                <article class="lp-page4-card lp-page4-cardTopics">
                    <h3 class="lp-page4-cardTitle">Topics</h3>
                    <img src="{{ asset('img/landingPageTopics_v2.png') }}" class="lp-page4-img" alt="topics card illustration">
                </article>
            </a>

            <a href="{{ path('app_allMediasGlobal') }}" id="lp-page4-cardMedias">
                <article class="lp-page4-card lp-page4-cardMedias">
                    <h3 class="lp-page4-cardTitle">Médias</h3>
                    <img src="{{ asset('img/landingPageMedias_v2.png') }}" class="lp-page4-img" alt="medias card illustration">
                </article>
            </a>

            {# Resultats de la recherche #}
            <div id="searchResultsDiv" style="display:none;">

                <h3 style="text-align:center; margin-top:15px; margin-bottom:7px;">Résultats de recherche</h3>

                <div class="lp-searchTrait"></div>

                <div class="lp-searchResults" style="display: inline-flex; width:100%; justify-content:space-evenly; margin-top:40px;">

                    <section id="lp-searchGamesDiv" class="lp-searchResultDiv">
                        <h4 class="lp-searchResultDivTitle"><a href='{{ path('app_games') }}'>Jeux</a></h4>
                        <ul id="lp-searchResultGamesList" class="lp-searchResultList">
                            {# contenu ajouté ajax #}
                        </ul>
                    </section>

                    <section id="lp-searchTeamsDiv" class="lp-searchResultDiv" style="display:none;">
                        <h4 class="lp-searchResultDivTitle"><a id="lp-searchResultTeamsDivTitle-link">Teams</a></h4>
                        <ul id="lp-searchResultTeamsList" class="lp-searchResultList">
                            {# contenu ajouté ajax #}
                        </ul>
                    </section>

                    <section id="lp-searchTopicsDiv" class="lp-searchResultDiv">
                        <h4 class="lp-searchResultDivTitle"><a id="lp-searchResultTopicsDivTitle-link" href='{{ path('app_allTopicsGlobal') }}'>Topics</a></h4>
                        <ul id="lp-searchResultTopicsList" class="lp-searchResultList">
                            {# contenu ajouté ajax #}
                        </ul>
                    </section>

                    <section id="lp-searchMediasDiv" class="lp-searchResultDiv">
                        <h4 class="lp-searchResultDivTitle"><a id="lp-searchResultMediasDivTitle-link" href='{{ path('app_allMediasGlobal') }}'>Medias</a></h4>
                        <ul id="lp-searchResultMediasList" class="lp-searchResultList">
                            {# contenu ajouté ajax #}
                        </ul>
                    </section>

                </div>
            </div>

            {# Scroll Btn up (to page 3) #}
            {# <div id="lp-scrollBtn4" class="landingPageDownBtn" style="transform: translate(50%, 0) rotate(180deg);">
                <i class="fa-solid fa-chevron-down lpdownBtn1"></i>
                <i class="fa-solid fa-chevron-down lpdownBtn2"></i>
            </div> #}

        </section>

    </section>





    {# AOS.js scroll smooth entres sections #}
    {# DESACTIVÉ conflit scroll portfolio ! #}
    {# DUCOUP opacity des section 0 => 1 #}
    <script>

            AOS.init({
                duration: 800,
                easing: 'ease-in-out', 
                once: true, 
            });

            // Add the "active" class to the currently visible section
            const sections = document.querySelectorAll('.section');
            const options = {
                root: null,
                rootMargin: '0px',
                threshold: 0.5, // Adjust this value based on your preference for when a section is considered active
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        sections.forEach((section) => {
                            section.classList.remove('active');
                        });
                        entry.target.classList.add('active');
                    }
                });
            }, options);

            sections.forEach((section) => {
                observer.observe(section);
            });

            // Custom scrolling behavior
            document.addEventListener('wheel', (e) => {
                e.preventDefault();
                const delta = e.wheelDelta || -e.deltaY || -e.detail;
                const activeSection = document.querySelector('.section.active');
                let targetSection;

                if (activeSection) {
                    if (delta < 0) {
                        targetSection = activeSection.nextElementSibling;
                    } else {
                        targetSection = activeSection.previousElementSibling;
                    }

                    if (targetSection) {
                        targetSection.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            }, { passive: false });

    </script>


    {# Splide JS carousel games #}
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            // Désactivation scroll vertical pour la landingPage (désactivé)
            // var body = document.querySelector('html');
            // body.style.overflowY = 'hidden';

            var isMobile = navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
            || navigator.userAgent.match(/Windows Phone/i);
            
            // Slide Scroll vertical sur mobile pas bonne idee car mess avec le scroll page
            if (isMobile){
               var splide = new Splide( '.splide', {
                    direction : 'ttb',
                    height: '30rem',
                    perPage: 4,
                    pagination: false,
                } );
                splide.mount();
            } else {

                // Si PC: vérifier la width (Si large, on est sur affichage du site sur PC, sinon on est sur l'affichage de l'Iframe portfolio)
                var largeurFenetre = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                if (largeurFenetre < 600) {
                    var splide = new Splide( '.splide', {
                        direction : 'ttb',
                        height: '30rem',
                        perPage: 4,
                        pagination: false,
                    } );
                    splide.mount();
                }
                else {
                    var splide = new Splide( '.splide', {
                        width: '100%',
                        perPage: 6,
                    } );
                    splide.mount();
                }

                // var splide = new Splide( '.splide', {
                //     width: '100%',
                //     perPage: 6,
                // } );
                // splide.mount();
            }
        });
    </script>


    {# Btn Scroll général #}
    <script>
        window.onload = function() {

            document.getElementById('lp-scrollBtn').addEventListener('click', function() {
                const element = document.getElementById("lp-page2");
                element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
            });
            document.getElementById('lp-scrollBtn2').addEventListener('click', function() {
                const element2 = document.getElementById("lp-page3");
                element2.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
            });
            document.getElementById('lp-scrollBtn3').addEventListener('click', function() {
                const element3 = document.getElementById("lp-page4");
                element3.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
            });
            // document.getElementById('lp-scrollBtn4').addEventListener('click', function() {
            //     const element3 = document.getElementById("lp-page3");
            //     element3.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
            // });

            document.getElementById('lp-page4-titleLink').addEventListener('click', gameTitleClick);
            function gameTitleClick() {
                const element5 = document.getElementById("lp-page3");
                element5.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
            }
        
            var gameSelected = false;
            var gameSelectedId = 0;

            // toggle des filtres actifs searchBar (Styles + values pour ajax)
            document.querySelectorAll('.lp-filterBtn').forEach((element) => {
                element.addEventListener('click', function() {
                    console.log('click bouton filtre searchBar');
                    const currentValue = element.getAttribute('value');
                    const newValue = currentValue === 'true' ? 'false' : 'true';
                    element.setAttribute('value', newValue);

                    if(newValue == 'false') {
                        element.style.backgroundColor = "rgba(128, 128, 128, 0.2)";
                        element.style.color = "var(--white)";

                        // Lors toggle filtre: adaptation div results
                        switch (element.getAttribute('name')) {
                            case "gamesFilter":
                                document.getElementById('lp-searchGamesDiv').style.opacity = "0";
                                setTimeout(() => {
                                    document.getElementById('lp-searchGamesDiv').style.display = "none";
                                }, 300);
                                break;

                            case "teamsFilter":
                                document.getElementById('lp-searchTeamsDiv').style.opacity = "0";
                                setTimeout(() => {
                                    document.getElementById('lp-searchTeamsDiv').style.display = "none";
                                }, 300);
                                break;
                        
                            case "topicsFilter":
                                document.getElementById('lp-searchTopicsDiv').style.opacity = "0";
                                setTimeout(() => {
                                    document.getElementById('lp-searchTopicsDiv').style.display = "none";
                                }, 300);
                                break;

                            case "mediasFilter":
                                document.getElementById('lp-searchMediasDiv').style.opacity = "0";
                                setTimeout(() => {
                                    document.getElementById('lp-searchMediasDiv').style.display = "none";
                                }, 300);
                                break;

                            default:
                                break;
                        }
                    }
                    else {
                        element.style.backgroundColor = "var(--primary-color)";
                        element.style.color = "black";

                        // Lors toggle filtre: adaptation div results
                        switch (element.getAttribute('name')) {
                            case "gamesFilter":
                                document.getElementById('lp-searchGamesDiv').style.display = "block";
                                setTimeout(() => {
                                    document.getElementById('lp-searchGamesDiv').style.opacity = "1";
                                }, 300);
                                break;

                            case "teamsFilter":
                                document.getElementById('lp-searchTeamsDiv').style.display = "block";
                                setTimeout(() => {
                                    document.getElementById('lp-searchTeamsDiv').style.opacity = "1";
                                }, 300);
                                break;
                        
                            case "topicsFilter":
                                document.getElementById('lp-searchTopicsDiv').style.display = "block";
                                setTimeout(() => {
                                    document.getElementById('lp-searchTopicsDiv').style.opacity = "1";
                                }, 300);
                                break;

                            case "mediasFilter":
                                document.getElementById('lp-searchMediasDiv').style.display = "block";
                                setTimeout(() => {
                                    document.getElementById('lp-searchMediasDiv').style.opacity = "1";
                                }, 300);
                                break;

                            default:
                                break;
                        }
                    }

                    delayedSearch();
                });
            });

            
            
            // {# OnSelect game: scroll page 4 (détails) + anims #}
            {% set index = 1 %}

            {% for game in games %}
                
                document.getElementById('lp-page3-slide0{{ index }}').addEventListener('click', function() {

                    // Reset SVG brackets et ajout sur gameSelected
                    document.querySelectorAll('.gameSelectedBracketUpPath').forEach(element => {
                        element.style.opacity = "0";
                    });
                    document.querySelectorAll('.gameSelectedBracketDownPath').forEach(element => {
                        element.style.opacity = "0";
                    });

                    document.getElementById('gameSelectedBracketUpPath{{ index }}').style.opacity = "1";
                    document.getElementById('gameSelectedBracketDownPath{{ index }}').style.opacity = "1";

                    document.getElementById('lp-page3-slide0{{ index }}').setAttribute('selected', true);

                    if(gameSelected == false) {
                        gameSelected = !gameSelected;
                    }

                    if(gameSelected) {

                        gameSelectedId = {{ game.id }};
                        console.log(gameSelectedId);

                        // Style header adapté 
                        document.getElementById('lp-page4-separator').style.background = "radial-gradient(circle, {{game.color}} 11%, rgba(44,243,249,0) 70%)";
                        document.getElementById('lp-page4-titleDivWrapper').style.backdropFilter = "blur(4px)";

                        // Btn croix pour supprimer la recherche en cours
                        document.getElementById('cleanSearchBtn').style.display = "block";
                        document.getElementById('cleanSearchBtn').addEventListener('click', function() {
                            document.getElementById('lp-searchText').value = "";
                            // Permet de trigger le 'input' event pour annuler la search
                            var event = new Event('input');
                            document.getElementById('lp-searchText').dispatchEvent(event);
                        })

                        // Liens dynamiques Titres sections search result
                        document.getElementById('lp-searchResultTopicsDivTitle-link').setAttribute('href', '/allTopics/' + gameSelectedId);
                        document.getElementById('lp-searchResultMediasDivTitle-link').setAttribute('href', '/allMedias/' + gameSelectedId);
                        document.getElementById('lp-searchResultTeamsDivTitle-link').setAttribute('href', '/groupList/' + gameSelectedId);
                        
                        // Disparition de la div "jeux"
                        document.getElementById('lp-searchGamesDiv').style.display = "none";

                        // Disparition du Filtre "Game" sur page4 comme gameSelected (& value=false)
                        document.getElementById('gamesFilter').style.display = "none";
                        document.getElementById('gamesFilter').setAttribute('value', 'false');

                        document.getElementById('gameDetailsIcon').style = "block";
                        document.getElementById('orSpan').style.display = "none";
                        document.getElementById('lp-teamsCardGameNotSelected').style.display = "none";

                        var isMobile = navigator.userAgent.match(/Android/i)
                                    || navigator.userAgent.match(/webOS/i)
                                    || navigator.userAgent.match(/iPhone/i)
                                    || navigator.userAgent.match(/iPad/i)
                                    || navigator.userAgent.match(/iPod/i)
                                    || navigator.userAgent.match(/BlackBerry/i)
                                    || navigator.userAgent.match(/Windows Phone/i);
                        
                        if (isMobile){
                            document.getElementById('lp-teamsCardGameSelected').style.display = "inline-flex";
                        }
                        else {
                            var largeurFenetre = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                            if (largeurFenetre < 600) {
                                document.getElementById('lp-teamsCardGameSelected').style.display = "inline-flex";
                            }
                            else {
                                document.getElementById('lp-teamsCardGameSelected').style.display = "block";
                            }
                        }

                        document.getElementById('lp-page4-titleLink').removeEventListener('click', gameTitleClick);

                        document.getElementById('lp-page4-titleDiv').style.opacity = "1";
                        document.getElementById('lp-page4-titleDiv').style.fontStyle = "normal";

                        // BorderColor selon game selected
                        document.querySelectorAll('.lp-page4-card').forEach(element => {
                            element.style.border = "1px solid {{ game.color }};";
                        });

                        // reset Box-shadow + scroll 
                        document.querySelectorAll('.lp-gameCard').forEach(element => {
                            element.classList.remove('lp-gameCard-boxShadow');
                        });

                        // Couleur des btn teamCard (selon jeu)
                        document.querySelectorAll('.lp-page4-cardTeams-btn').forEach(element => {
                            element.style.backgroundColor = "{{ game.color }}";
                        });

                        // Changement backgroundTitle page4
                        document.getElementById('lp-page4').classList.add("lp-gameHeader-fadeOut");
                        setTimeout(() => {
                            document.getElementById('lp-page4').style.backgroundImage = "radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(35,35,35,0.995) 69%), url('/img/games/headerBackground/{{ game.subBanner }}')";
                            document.getElementById('lp-page4').classList.add("lp-gameHeader-fadeIn");
                        }, 500);

                        // Adaptation des liens des cards page4
                        document.getElementById('lp-page4-cardTopics').setAttribute('href', '/allTopics/{{ game.id}}');
                        document.getElementById('lp-page4-cardMedias').setAttribute('href', '/allMedias/{{ game.id}}');
                        document.getElementById('lp-page4-cardTeams-seek').setAttribute('href', '/groupList/{{ game.id}}');
                        document.getElementById('lp-page4-cardTeams-create').setAttribute('href', '/createGroup/{{ game.id}}');
                        document.getElementById('lp-page4-titleLink').setAttribute('href', '/game/{{ game.slug }}');
                        {% if game.showIconSearchPage %}
                            document.getElementById('lp-page4-gameLogo').setAttribute('src', '{{ asset("img/games/tinyLogo/" ~ game.tinyLogo ) }}');
                        {% else %}
                            document.getElementById('lp-page4-gameLogo').setAttribute('src', '');
                        {% endif %}

                        document.getElementById('lp-page4-selectedGameTitle').innerHTML = "<span id='cleanGameSelected'><i class='fa-solid fa-xmark'></i></span> {{ game.title }}";
                        document.getElementById('lp-page4-selectedGameTitle').classList.add("lp-page4-selectedGameTitle");
                        document.getElementById('lp-page4-selectedGameTitle').style.fontSize = "2em";
                        document.getElementById('lp-page4-selectedGameTitle').style.textShadow = "-1px -1px 0 {{ game.color }}, 1px -1px 0 {{ game.color }}, -1px 1px 0 {{ game.color }}, 1px 1px 0 {{ game.color }}";

                        document.getElementById('lp-page3-slide0{{ index }}').classList.add('lp-gameCard-boxShadow');
                        setTimeout(() => {
                            document.getElementById('lp-page4').scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
                        }, 350);


                        // Btn suppression du filtre gameSelected:
                        document.getElementById('cleanGameSelected').addEventListener('click', () => {

                            // Retour Style header neutre
                            document.getElementById('lp-page4-separator').style.background = "radial-gradient(circle, rgba(255,255,255,0.7) 11%, rgba(44,243,249,0) 70%)";
                            document.getElementById('lp-page4-titleDivWrapper').style.backdropFilter = "blur(0px)";

                            // Suppression lien jeu selectionné (TODO: remettre le scroll)
                            document.getElementById('lp-page4-titleLink').setAttribute('href', '');

                            // Evite le click sur le lien de la div parente:
                            event.preventDefault();

                            gameSelectedId = 0;
                            
                            // Réaparition de la div "jeux"
                            document.getElementById('lp-searchGamesDiv').style.display = "none";

                            // Réaparition du Filtre "Game" sur page4 comme !gameSelected (et réactivation par defaut, voir si style suit)
                            document.getElementById('gamesFilter').style.display = "none";
                            document.getElementById('gamesFilter').setAttribute('value', 'true');

                            document.getElementById('gameDetailsIcon').style = "none";
                            document.getElementById('orSpan').style.display = "block";
                            document.getElementById('lp-teamsCardGameSelected').style.display = "none";
                            document.getElementById('lp-teamsCardGameNotSelected').style.display = "block";

                            // BorderColor neutre / gris
                            document.querySelectorAll('.lp-page4-card').forEach(element => {
                                element.style.border = "1px solid #9a9a9a;";
                            });

                            // reset Box-shadow + scroll 
                            document.querySelectorAll('.lp-gameCard').forEach(element => {
                                element.classList.remove('lp-gameCard-boxShadow');
                            });

                            // Couleur des btn teamCard (selon jeu)
                            document.querySelectorAll('.lp-page4-cardTeams-btn').forEach(element => {
                                element.style.backgroundColor = "{{ game.color }}";
                            });

                            // Reset backgroundImg
                            document.getElementById('lp-page4').classList.remove('lp-gameHeader-fadeIn');
                            document.getElementById('lp-page4').classList.add("lp-gameHeader-fadeOut");
                            setTimeout(() => {
                                document.getElementById('lp-page4').style.backgroundImage = "radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(35, 35, 35, 0.996) 69%), url('{{ asset('img/landingPage4.jpg') }}')";
                                document.getElementById('lp-page4').classList.add("lp-gameHeader-fadeIn");
                            }, 400);

                            // Adaptation des liens des cards page4
                            document.getElementById('lp-page4-cardTopics').setAttribute('href', '/allTopicsGlobal');
                            document.getElementById('lp-page4-cardMedias').setAttribute('href', '/allMediasGlobal');
                            document.getElementById('lp-page4-gameLogo').setAttribute('src', '');

                            document.getElementById('lp-page4-selectedGameTitle').innerHTML = "<i class='fa-solid fa-arrow-up' style='margin:0 15px; color:#707070;'></i>Sélectionnez un jeu pour filtrer";
                            document.getElementById('lp-page4-selectedGameTitle').classList.remove("lp-page4-selectedGameTitle");
                            document.getElementById('lp-page4-selectedGameTitle').style.fontSize = "1.7em";
                            document.getElementById('lp-page4-selectedGameTitle').style.opacity = "0.7";
                            document.getElementById('lp-page4-selectedGameTitle').style.fontStyle = "italic";
                            document.getElementById('lp-page4-selectedGameTitle').style.textShadow = "rgba(116, 200, 20, 0) -0px -0px 0px, rgba(116, 200, 20, 0) 0px -0px 0px, rgba(116, 200, 20, 0) -0px 0px 0px, rgba(116, 200, 20, 0) 0px 0px 0px";

                            document.getElementById('lp-page3-slide0{{ index }}').classList.add('lp-gameCard-boxShadow');
                            setTimeout(() => {
                                document.getElementById('lp-page4').scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
                            }, 200);

                            delayedSearch();

                        })

                        delayedSearch();
                    }
                    else {

                        gameSelectedId = 0;

                        document.getElementById('lp-page4-separator').style.background = "radial-gradient(circle, rgba(255,255,255,0.7) 11%, rgba(44,243,249,0) 70%)";
                        document.getElementById('lp-page4-titleDivWrapper').style.backdropFilter = "blur(0px)";

                        // Réaparition de la div "jeux"
                        document.getElementById('lp-searchGamesDiv').style.display = "none";

                        // Réaparition du Filtre "Game" sur page4 comme !gameSelected (et réactivation par defaut, voir si style suit)
                        document.getElementById('gamesFilter').style.display = "none";
                        document.getElementById('gamesFilter').setAttribute('value', 'true');

                        document.getElementById('gameDetailsIcon').style = "none";
                        document.getElementById('orSpan').style.display = "block";
                        document.getElementById('lp-teamsCardGameSelected').style.display = "none";
                        document.getElementById('lp-teamsCardGameNotSelected').style.display = "block";

                        // BorderColor neutre / gris
                        document.querySelectorAll('.lp-page4-card').forEach(element => {
                            element.style.border = "1px solid #9a9a9a;";
                        });

                        // reset Box-shadow + scroll 
                        document.querySelectorAll('.lp-gameCard').forEach(element => {
                            element.classList.remove('lp-gameCard-boxShadow');
                        });

                        // Couleur des btn teamCard (selon jeu)
                        document.querySelectorAll('.lp-page4-cardTeams-btn').forEach(element => {
                            element.style.backgroundColor = "{{ game.color }}";
                        });

                        // Changement backgroundTitle page4
                        document.getElementById('lp-page4').classList.add("lp-gameHeader-fadeOut");
                        setTimeout(() => {
                            document.getElementById('lp-page4').style.backgroundImage = "radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(35,35,35,0.995) 69%), url('/img/games/headerBackground/{{ game.subBanner }}')";
                            document.getElementById('lp-page4').classList.add("lp-gameHeader-fadeIn");
                        }, 500);

                        // Adaptation des liens des cards page4
                        document.getElementById('lp-page4-cardTopics').setAttribute('href', '/allTopicsGlobal');
                        document.getElementById('lp-page4-cardMedias').setAttribute('href', '/allMediasGlobal');
                        document.getElementById('lp-page4-gameLogo').setAttribute('src', '');

                        document.getElementById('lp-page4-selectedGameTitle').innerHTML = "Sélectionnez un jeu pour filtrer";
                        document.getElementById('lp-page4-selectedGameTitle').classList.remove("lp-page4-selectedGameTitle");
                        document.getElementById('lp-page4-selectedGameTitle').style.textShadow = "0px 0px 0 white, 0px 0px 0 white, -0px 0px 0 white, 0px 0px 0 white";

                        document.getElementById('lp-page3-slide0{{ index }}').classList.add('lp-gameCard-boxShadow');
                        setTimeout(() => {
                            document.getElementById('lp-page4').scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
                        }, 200);


                        delayedSearch();
                    }
                
                });
                {% set index = index + 1 %}

            {% endfor %}



            let searchTimer;

            function delayedSearch() {
                // Clear any previously set timer
                clearTimeout(searchTimer);
                // Regex front text input
                var textInput = document.getElementById("lp-searchText").value.replace(/[^a-zA-Z0-9\s-_]/g, '');
                document.getElementById("lp-searchText").value = textInput;

                // array des filtres ("Jeux" disparait si gameSelected)
                var filterArray = {
                    "games" : document.getElementById("gamesFilter").getAttribute("value"),
                    "topics" : document.getElementById("topicsFilter").getAttribute("value"), 
                    "medias" : document.getElementById("mediasFilter").getAttribute("value"), 
                    "teams" : document.getElementById("teamsFilter").getAttribute("value")
                };

                // Array de filtres => param string
                var queryString = new URLSearchParams(filterArray).toString();

                // "Debouncing": ajout d'un delai avant requête
                searchTimer = setTimeout(() => {
                    if(textInput !== "") {
                        fetch('/searchLandingPage/' + textInput + '/' + gameSelectedId + '?' + queryString, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {

                                document.getElementById("lp-page4-cardTeams").style.display = "none";
                                document.getElementById("lp-page4-cardTopics").style.display = "none";
                                document.getElementById("lp-page4-cardMedias").style.display = "none";
                                document.getElementById("searchResultsDiv").style.display = "flex";

                                // *** Affichage des résultats:
                                if(data.topics !== null && data.topics.length > 0) {
                                    let content = "";

                                    data.topics.forEach(element => {
                                        content += "<li title='" + element[0].title + "' class='searchLine' style='border-color:" + element.color + "'><a class='searchLineLink' href='/topicDetail/" + element[0].id + "'><img class='lp-search-gameLogo' src='./img/games/tinyLogo/" + element.tinyLogo + "' alt='logo du jeu " + element.title + "'><span class='ellipsed'>" + element[0].title + "</span></a></li>";
                                    }); 
                                    document.getElementById('lp-searchResultTopicsList').innerHTML = content;
                                } 
                                else {
                                    document.getElementById('lp-searchResultTopicsList').innerHTML = "<span class='emptyListMsg' style='width:100%; display:block;'>Aucun résultat</span>";
                                }

                                if(data.medias !== null && data.medias.length > 0) {
                                    let content = "";

                                    data.medias.forEach(element => {
                                        content += "<li title='" + element[0].title + "' class='searchLine' style='border-color:" + element.color + "'><a class='searchLineLink' href='/mediaDetail/" + element[0].id + "'><img class='lp-search-gameLogo' src='./img/games/tinyLogo/" + element.tinyLogo + "' alt='logo du jeu " + element.title + "'><span class='ellipsed'>" + element[0].title + "</span></a></li>";
                                    }); 
                                    document.getElementById('lp-searchResultMediasList').innerHTML = content;
                                } 
                                else {
                                    document.getElementById('lp-searchResultMediasList').innerHTML = "<span class='emptyListMsg' style='width:100%; display:block;'>Aucun résultat</span>";
                                }

                                if(data.teams !== null && data.teams.length > 0) {
                                    let content = "";

                                    data.teams.forEach(element => {
                                        content += "<li title='" + element[0].title + "' class='searchLine' style='border-color:" + element.color + "'><a class='searchLineLink' href='/groupDetails/" + element[0].id + "'><img class='lp-search-gameLogo' src='./img/games/tinyLogo/" + element.tinyLogo + "' alt='logo du jeu " + element.title + "'><span class='ellipsed'>" + element[0].title + "</span></a></li>";
                                    }); 
                                    document.getElementById('lp-searchResultTeamsList').innerHTML = content;
                                } 
                                else {
                                    document.getElementById('lp-searchResultTeamsList').innerHTML = "<span class='emptyListMsg' style='width:100%; display:block;'>Aucun résultat</span>";
                                }

                                if(data.games !== null && data.games.length > 0) {
                                    let content = "";

                                    data.games.forEach(element => {
                                        content += "<li title='" + element.title + "' class='searchLine' style='border-color:" + element.color + "'><a class='searchLineLink' href='/game/" + element.id + "'><img class='lp-search-gameLogo' src='./img/games/tinyLogo/" + element.tinyLogo + "' alt='logo du jeu " + element.title + "'><span class='ellipsed'>" + element.title + "</span></a></li>";
                                    }); 
                                    document.getElementById('lp-searchResultGamesList').innerHTML = content;
                                } 
                                else {
                                    document.getElementById('lp-searchResultGamesList').innerHTML = "<span class='emptyListMsg' style='width:100%; display:block;'>Aucun résultat</span>";
                                }

                            } else {
                                window.FlashMessage.error('Il y a eu un problème avec le chargment du contenu');
                            }
                        })
                    }
                    else {
                        document.getElementById("searchResultsDiv").style.display = "none";
                        document.getElementById("lp-page4-cardTeams").style.display = "flex";
                        document.getElementById("lp-page4-cardTopics").style.display = "flex";
                        document.getElementById("lp-page4-cardMedias").style.display = "flex";
                    }
                }, 250);
            }

            // Ajax recherche avec filtres (TODO: loading (friction positive))
            document.getElementById("lp-searchText").addEventListener('input', () => {

                delayedSearch();

                if(document.getElementById("lp-searchText").value != "") {
                    document.getElementById("cleanSearchBtn").style.opacity = "1";
                }
                else {
                    document.getElementById("cleanSearchBtn").style.opacity = "0.3";
                }

            }) 

        }

    </script>


{% endblock %}