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

{% block title %}Profil utilisateur{% endblock %}
{% block meta_description %}
    Votre espace personnel
{% endblock %}

{% block body %} 

    <script>
        document.getElementById('profilBtnNav').style.backgroundColor = "var(--primary-color)";
        document.getElementById('profilBtnNav').style.color = "black";
    </script>

    
    <header class="globalBanner" style="background: url('{{ asset('img/banner1.jpg') }}' )">

        <div style="display:inline-flex;">
            <a href="{{ path('app_home') }}"><img src="{{ asset('img/logoSquadForge_v3.png') }}" class="logoPng" id="logoPng" alt='bearded dwarf forging a sword above "SquadForge" title' /></a>
            <a id="logoShrinkTxt" href="{{ path('app_home') }}">SQUADFORGE</a>
        </div>
        
        <nav id="navLine" class="navLine">
            <span id="closeBurgerMobile"><i class="fa-solid fa-xmark"></i></span>
            <a href="{{ path('app_home') }}" class="homeNav"><i class="fa-solid fa-house"></i></a>
            <a href="{{ path('app_games') }}" class="gamesNav caps">jeux</a>
            {% if app.user %}
                <a href="{{ path('app_userGroups') }}" class="teamsNav caps">teams</a>
                <a href="{{ path('app_showNotifsList') }}" class="notifsNav" style="padding:0;">
                    <div class="navNotifDiv">
                        <i class="fa-solid fa-bell notifBell"></i>
                        {% if userNotifCount > 0 %}
                            <span class="newNotifBubbleCount bubleNotif" id="newNotifBubbleCount">{{ userNotifCount }}</span>
                        {% endif %}
                    </div>
                </a>
            {% endif %}
            {% if "ROLE_MODO" in app.user.roles %}
            
                <a href="{{ path('app_moderationDashboard') }}" id="modoNav" class="modoNav">
                    <div class="modoNavSubDiv">
                        <span>Modération</span>
                        {% if modoNotifValidationCount > 0 %}
                            <span class="newNotifBubbleCount bubleModo1">{{ modoNotifValidationCount }}</span>
                        {% endif %}
                        {% if modoNotifReportCount > 0 %}
                            <span class="newNotifBubbleCount bubleModo2">{{ modoNotifReportCount }}</span>
                        {% endif %}
                    </div>
                </a>

                <script>
                    // Ajout d'espace libre sur l'onglet Nav "Modération" si bulles (car bulles absolutes)
                    var paddingRightOnglet = 0;
                    if({{modoNotifValidationCount}} > 0) {
                        paddingRightOnglet += 17;
                    }
                    if({{modoNotifReportCount}} > 0) {
                        paddingRightOnglet += 17;
                    }
                    document.getElementById('modoNav').style.paddingRight = paddingRightOnglet + "px";
                </script>

            {% endif %}

            {# Profil + deco #}
            <div id="profilBurgerMobile">
                {% if app.user %}
                    <a href="{{ path('app_user') }}" class="profil" id="profilBtnNav"><i class="fa-solid fa-user profilIcon"></i>  {{ app.user.pseudo|capitalize }}</a>
                    <a href="{{ path('app_logout') }}" class="decoBtn"><i class="fa-solid fa-power-off decoBtnMobile"></i></a>
                {% else %}
                    <a href="{{ path('app_login') }}" class="profil" id="loginBtnNav" style="border-right:2px solid #80808061">Connexion</a>
                    <a href="{{ path('app_register') }}" class="profil" id="registerBtnNav" style="border-bottom-left-radius:0px;">S'inscrire</a>
                {% endif %}
            </div>

        </nav>

        {# Show menu Burger (mobile) #}
        <span id="showBurgerMenu"><i class="fa-solid fa-bars"></i></span>

    </header>
    
    {# HeaderSouligne + Bandeau avertissement muted #}
    {% if app.user and app.user.muted and time_diff_future(app.user.endDateStatus) != false %}
        <div class="headerUnderline"></div>
        <div class="mutedBanner">  
            <span><i class="fa-solid fa-circle-exclamation mutedBannerIcon"></i>Vous êtes actuellement réduit au silence <span class="muteEndDate">( fin dans <span class="strongNbr">{{ time_diff_future(app.user.endDateStatus) }}</span> )</span></span>
        </div>
    {% else %}
        <div class="headerUnderline marginBottomHeaderLine"></div>
    {% endif %}



    <main class="main">

        <h2 class="pageTitle">Profil</h2>

        <section class="sectionHomeContainer inlineFlex profilSection1">

            <div class="profilSection1a">
                <div class="blinkingSectionTitle">
                    <div class="homeFavGamesTitle modoTitle1" style="background-color:var(--primary-color);"></div>
                    <h3 class="homeSubTitle noMarginBottom">Infos</h3>
                </div>

                <div class="lp-page3-containerMaster" style="padding-left:35px;">
                    <p>Pseudo: <span style="font-family:'K2D';">{{ user.pseudo|capitalize }}</span></p>
                    <p>Email: <span style="font-family:'K2D';">{{ user.email }}</span></p>

                    <p style="line-height:32px;">Rôle:
                        {% if "ROLE_USER" in userRole %}
                            <span class="roleUserData roleUser">Utilisateur</span>
                        {% endif %}
                        {% if "ROLE_MODO" in userRole %}
                            <a href="{{ path('app_moderationDashboard') }}" class="roleUserData roleElite">Modérateur <i class="fa-solid fa-square-up-right"></i></a>
                        {% endif %}
                        {% if "ROLE_ADMIN" in userRole %}
                            <a href="{{ path('admin') }}" class="roleUserData roleElite">Administrateur <i class="fa-solid fa-square-up-right"></i></a>
                        {% endif %}
                    </p>

                    <dialog class="modalDialog" id="deleteAccountModal">
                        <p>Êtes-vous sûr de vouloir supprimer votre compte ?</p>
                        <a class="confirmModal" href="{{ path('app_deleteSelfAccount') }}">Oui</a>
                        <span class="cancelModal" onclick="deleteAccountModal.close()">Annuler</span>
                    </dialog>

                    {% if not user.isVerified %}
                    <p style="color:red;">Votre email est toujours en attente de validation, vérifiez votre boîte mail pour pouvoir profiter de toutes les fonctionalités</p>
                    {% endif %}

                    {# Toggle Lecture automatique des Gifs #}
                    {% if app.user.autoPlayGifs %}
                        {% set checked = "checked" %}
                        {% set value = "true" %}
                    {% else %}
                        {% set checked = "" %}
                        {% set value = "false" %}
                    {% endif %}
                    
                    <div style="display:inline-flex; width:100%;">
                        <p style="margin-right:10px;">Lecture automatique des Gifs: </p>
                        <form id="toggleAutoplayForm" action="{{ path('app_toggleAutoplayGifs') }}" method="post">
                            <label class="toggleAutoPlay">
                                <input type="checkbox" value="{{ value }}" {{ checked }} name="autoPlay" id="autoPlay">
                                <span class="slider"></span>
                            </label>
                        </form>
                    </div>

                    {# Suppression de compte (+modal comfirmation): (privacy: garde donnéees 2 mois) #}
                    <span id="deleteSelfAccount" onclick="deleteAccountModal.showModal()">Supprimer le compte</span>

                </div>
            </div>

            <div class="profilSection1b">
                <span id="showPasswordChangeForm">Changer de mot de passe</span>
                <div style="width:75%; margin:0 auto;">
                    <form action="{{ path('app_changePassword') }}" method="post" id="changePasswordForm" class="notDisplayed">
                        <label for="oldPass">Entrez votre ancien mot de passe:</label>
                        <div style="position:relative;">
                            <input name="oldPass" type="password" id="oldPass" class="form-control changePassInput" disabled>
                            <i class="far fa-eye togglePasswordProfil" id="togglePassword" style="cursor: pointer;"></i>
                        </div>
                        <label for="newPass1">Entrez le nouveau mot de passe:</label>
                        <div>
                            <input name="newPass1" type="password" id="newPass1" class="form-control changePassInput" disabled>
                            <div id="passwordFloatingBublle" class="passwordFloatingBublle">   
                                <span>Le mot de passe doit respecter:</span>
                                <ul style="margin-bottom:5px;">
                                    <li>- Au moins 10 caractères</li>
                                    <li>- Au moins 1 majuscule</li>
                                    <li>- Au moins 1 minuscule</li>
                                    <li>- Au mons 1 chiffre</li>
                                    <li>- Au moins 1 caractère spécial</li>
                                    <li>- Les mots de passe doivent correspondre</li>
                                </ul>
                            </div>
                        </div>
                        <label for="newPass2">Confirmer le nouveau mot de passe:</label>
                        <input name="newPass2" type="password" class="form-control changePassInput" disabled>

                        <input type="submit" value="Mettre à jour" class="btn btn-primary">
                    </form>
                </div>
            </div>

            {# Bouton activation form changement mdp #}
            <script>
                document.getElementById('showPasswordChangeForm').addEventListener('click', function() {

                    document.getElementById('changePasswordForm').classList.toggle('notDisplayed');

                    const changePassInputs = document.getElementsByClassName('changePassInput');
                    Array.from(changePassInputs).forEach(element => {
                        if(element.disabled) {
                            element.disabled = false;
                        }
                        else {
                            element.disabled = true;
                        }
                    });

                    document.getElementById('changePasswordForm').classList.toggle('opacityNul');

                })
            </script>


            {# Btn hide/show mot de passe #}
            <script>
                const togglePassword = document.querySelector('#togglePassword');
                const password = document.querySelector('#oldPass');

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

                    // this.classList.toggle('fa-eye-slash');
                    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');
                    }
                });

                password.addEventListener('focus', function () {
                    togglePassword.style.color = 'black'; 
                });
                // Add a blur event listener to reset the style when the input loses focus
                password.addEventListener('blur', function () {
                    togglePassword.style.color = ''; // Reset the color
                });
            </script>


            {# Bulle infos onFocus nouveau mot de passe (critères) #}
            <script>
                document.getElementById('newPass1').addEventListener('focusin', function() {
                    document.getElementById('passwordFloatingBublle').classList.toggle('showFloatingBuble');
                })
                document.getElementById('newPass1').addEventListener('focusout', function() {
                    document.getElementById('passwordFloatingBublle').classList.toggle('showFloatingBuble');
                })
            </script>

        </section>

        {# Asynch app_toggleAutoplayGifs (Erreur JS promise #}
        <script>
            document.getElementById('toggleAutoplayForm').addEventListener('change', function(event) {
                
                event.preventDefault(); // Empêche la soumission normale du formulaire

                const value = document.getElementById('autoPlay').getAttribute('value');
                fetch('/toggleAutoplayGifs', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }

                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.FlashMessage.success("Les clips se lancent désormais automatiquement");
                    } else {
                        window.FlashMessage.error('Une erreur est survenue, réessayez plus tard');
                    }
                });
            });

        </script>
        

        <section class="sectionHomeContainer">

            <div class="blinkingSectionTitle">
                <a href="{{ path('app_allTopicsUser') }}" style="display:block; width:fit-content;">
                    <div class="homeFavGamesTitle modoTitle2" style="background-color:var(--primary-color);"></div>
                    <h3 class="homeSubTitle noMarginBottom">Topics publiés <span class="gameListCount">({{ userTopicsCount }})</span></h3>
                </a>
            </div>

            <div class="listContainer topicList marginTop lp-page3-containerMaster" style="margin-top:20px; margin-bottom:20px;">
            
                {% set index = 0 %}

                {% for topic in userTopics %}

                    <a href="{{ path('app_topicDetail', {'slug': topic.slug}) }}">
                        <article class="topicCard" style="border-bottom: 4px solid {{ topic.game.color }}">
                            <img class="tinyLogo" src="{{ asset('img/games/tinyLogo/' ~ topic.game.tinyLogo) }}" alt="logo du jeu {{ topic.game.title }}" />
                            <span class="topicTitle">{{ topic.title|capitalize }}</span>
                            <div class="topicCardSubInfos">
                            
                                {% if topic.validated == "validated" %}
                                    <span class="userTopicStatus topicStatusValidated"><i class="fa-solid fa-check"></i> Validé</span>
                                {% elseif topic.validated == "refused" %}
                                    <span class="userTopicStatus topicStatusRefused"><i class="fa-solid fa-ban"></i> Refusé</span>
                                {% elseif topic.validated == "waiting" %}
                                    <span class="userTopicStatus topicStatusWaiting"><i class="fa-regular fa-hourglass"></i> En attente</span>
                                {% endif %}
                                
                                {# <span class="topicCardPublishDate">{{ time_diff(topic.publishDate) }}</span> #}
                                {% if topic.topicPostsCount == 0 %}
                                    <span class="topicSubMsgCount" style="opacity:0.5;">{{ topic.topicPostsCount }} <i class="fa-solid fa-message msgIconColor" style="color:#1da8b7d4;"></i></span>
                                {% else %}
                                    <span class="topicSubMsgCount">{{ topic.topicPostsCount }} <i class="fa-solid fa-message msgIconColor" style="color:#1da8b7d4;"></i></span>
                                {% endif %}

                                <div id="deleteSelfTopicDiv{{index}}" class="deleteSelfTopicDiv" title="Supprimer le topic"><i class="fa-solid fa-trash deleteSelfTopicIcon"></i></div>
                            
                            </div>
                        </article>
                    </a>


                    <dialog class="modalDialog" id="confirmDeleteSelfTopicModal{{index}}">
                        <p style="font-size:1.3em;">Êtes-vous sûr de vouloir supprimer ce topic ? <br>Tout les commentaires associés seront également supprimés</p>

                        <a href="{{ path('app_deleteSelfTopic',{'idTopic':topic.id}) }}" class="confirmModal">Supprimer</a>
                        <span id="cancelDeleteSelfTopic{{index}}" class="cancelModal" onclick="confirmDeleteSelfTopicModal{{index}}.close()">Annuler</span>                            
                    </dialog>

                    <script>
                        document.getElementById('deleteSelfTopicDiv{{index}}').addEventListener('click', function() {
                            // Evite le click sur le lien de la div parente:
                            event.preventDefault();
                            // Modal confirmation
                            document.getElementById('confirmDeleteSelfTopicModal{{index}}').showModal();
                        })
                    </script>

                    {% set index = index + 1 %}

                {% endfor %}

                <span class="seeAllRedirect">
                    <a href="{{ path('app_allTopicsUser') }}">Tout voir  <i class="fa-solid fa-chevron-right"></i></a>
                </span>

            </div>

        </section>

        

        <section class="sectionHomeContainer">

            <div class="blinkingSectionTitle">
                <a href="{{ path('app_allMediasUser') }}" style="display:block; width:fit-content;">
                    <div class="homeFavGamesTitle modoTitle3" style="background-color:var(--primary-color);"></div>
                    <h3 class="homeSubTitle noMarginBottom">Médias publiés <span class="gameListCount">({{ userMediasCount }})</span></h3>
                </a>
            </div>

            <div class="masonry-grid lp-page3-containerMaster">
            
                {% set index = 0 %}

                {% for media in userMedias %}

                    <div class="grid-item" style="height:fit-content;">

                        {# TODO: ici check si type = Img ou Gif pour savoir si Gifffer ou pas #}
                        {% if app.user.autoPlayGifs %}
                        <a href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                        {% endif %}

                            <article class="mediaCard" style="background-color:{{ media.game.color }};">

                                {% if not app.user.autoPlayGifs %}
                                <a href="{{ path('app_mediaDetail', {'slug': media.slug}) }}">
                                {% endif %}
                                    <div class="mediaCardHeader" title="{{ media.title|capitalize }}" style="border-bottom: 3px solid {{ media.game.color }}">
                                        <div class="tinyLogoDiv">
                                            <img class="tinyLogoMedia" src="{{ asset('img/games/tinyLogo/' ~ media.game.tinyLogo) }}" alt="logo du jeu {{ media.game.title }}" />
                                        </div>
                                        <span class="mediaTitle">{{ media.title|capitalize }}</span>
                                        <div id="deleteSelfMediaDiv{{index}}" class="deleteSelfMediaDiv" title="Supprimer le média"><i class="fa-solid fa-trash deleteSelfMediaIcon"></i></div>
                                    </div>
                                {% if not app.user.autoPlayGifs %}
                                </a>
                                {% endif %}

                                {# Gif autoplay=false si paramètre user #}
                                {% if not app.user.autoPlayGifs %}
                                    <img data-gifffer="{{ asset("img/uploads/" ~ media.url) }}" data-gifffer-alt="media" class="mediaImg" />
                                {% else %}
                                    <img src="{{ asset("img/uploads/" ~ media.url) }}" alt="media" class="mediaImg" />
                                {% endif %}

                            </article>

                        {% if app.user.autoPlayGifs %}
                        </a>
                        {% endif %}


                        {% if media.validated == "validated" %}

                            {# Upvote/downvote média + score + nbrPosts #}
                            <div class="mediaCardStatsDiv">

                                {# Upvote/downvote média + score + nbrPosts #}
                                {# Pas opti: bloucle sur tous les likes du post pour savoir si liké (boucle dans boucle) #}
                                {% set liked = "" %}
                                
                                {% if app.user %}

                                    {% for upvote in media.UserUpvote %}

                                        {% if upvote == app.user %}
                                            {% set liked = "upBtnLiked" %}
                                        {% endif %}

                                    {% endfor %}
                                {% endif %}

                                <div class="inline mediaSubLikeDiv" mediaId={{ media.id }}>
                                    <span id="countLikesMedia{{ media.id }}" value="{{ media.upvoteCount }}"> {{ media.upvoteCount }} </span>
                                    <i mediaId={{ media.id }} class="likeMedia fa-regular fa-circle-up {{ liked }}"></i>
                                </div>
                            
                                {% if media.mediaPostsCount == 0 %}
                                    <a href="{{ path('app_mediaDetail', {'slug':media.slug}) }}" class="mediaSubPostsDiv">
                                        <div class="inline" style="opacity:0.7;">
                                            {{ media.mediaPostsCount }} 
                                            <i class="fa-solid fa-message msgIconColor msgIconColorGreyed"></i>
                                        </div>
                                    </a>
                                {% else %}
                                    <a href="{{ path('app_mediaDetail', {'slug':media.slug}) }}" class="mediaSubPostsDiv">
                                        <div class="inline">
                                            {{ media.mediaPostsCount }} 
                                            <i class="fa-solid fa-message msgIconColor"></i>
                                        </div>
                                    </a>
                                {% endif %}

                            </div>

                        {% elseif media.validated == "waiting" %}
                            
                            <p class="waitingMediaLabel"><i class="fa-solid fa-hourglass"></i> En attente...</p>

                        {% elseif media.validated == "refused" %}

                            <p class="refusedMediaLabel"><i class="fa-solid fa-ban"></i> Refusé</p>

                        {% endif %}

                    </div>


                    <dialog class="modalDialog" id="confirmDeleteSelfMediaModal{{index}}">
                        <p style="font-size:1.3em;">Êtes-vous sûr de vouloir supprimer ce média ? <br>Tout les commentaires associés seront également supprimés</p>

                        <a href="{{ path('app_deleteSelfMedia',{'idMedia':media.id}) }}" class="confirmModal">Supprimer</a>
                        <span id="cancelDeleteSelfMedia{{index}}" class="cancelModal" onclick="confirmDeleteSelfMediaModal{{index}}.close()">Annuler</span>                            
                    </dialog>


                    <script>
                        document.getElementById('deleteSelfMediaDiv{{index}}').addEventListener('click', function() {
                            // Evite le click sur le lien de la div parente:
                            event.preventDefault();
                            // Modal confirmation
                            document.getElementById('confirmDeleteSelfMediaModal{{index}}').showModal();
                        })
                    </script>


                    {% set index = index + 1 %}

                {% endfor %}


                <script>
                    document.getElementsByClassName('profilIcon')[0].style.color = "black";
                </script>

                
                {# Masonry JS Medias (permet de rendre responsive entre autre) #}
                <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
                {# imagesLoaded JS #}
                <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>

                <script>
                    $(document).ready(function() {
                        var $gridItems = $('.grid-item');
                        
                        $gridItems.imagesLoaded(function() {
                            setTimeout(function() {
                                console.log('imagesLoaded');
                                $('.masonry-grid').masonry({
                                    itemSelector: '.grid-item',
                                    columnWidth: '.grid-item',
                                    gutter: 15, // Adjust the gutter size as needed
                                });
                            }, 500) 
                        });
                    });
                </script>

            </div>

            <span class="seeAllRedirect">
                <a href="{{ path('app_allMediasUser') }}">Tout voir  <i class="fa-solid fa-chevron-right"></i></a>
            </span>

        </section>

    </main>

{% endblock %}