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

{% block title %}Notifications{% endblock %}
{% block meta_description %}
    Liste de vos notifications
{% endblock %}

{% block body %} 

    <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 navActive" style="padding:0;">
                    <div class="navNotifDiv">
                        <i class="fa-solid fa-bell notifBell"></i>
                        {# Bulle newNotifCount si > 0 #}
                        {% 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">Notifications</h2>

        {# Ajax Boutons clean/"vues" ajax #}
        <script type="text/javascript" src="{{ asset('js/notifsBtn.js') }}"></script>


        {% if notifs|length > 0 %}

            <section class="notifListButtons" id="notifListButtons">

                {% if theresNotSeen %}
                    {# // Ajax bouton: passer toutes les notifs en "vue" #}
                    <a id="allSeenLink" href="{{ path('app_notifsAllSeen') }}">
                        <i class="fa-solid fa-eye"></i>
                    </a>
                {% endif %}

                {# // Ajax bouton: suppr toutes les notifs #}
                <a id="deleteAllLink" href="{{ path('app_cleanNotifsUser') }}">
                    <i class="fa-solid fa-xmark cleanNotifsBtn"></i>
                </a>

            </section>


        {% else %}
            
            <p class="emptyListMsg" style="margin: 50px auto;">Aucune notifications</p>
        
        {% endif %}

        
        
        {# Liste des notifs #}
        <section class="notifsContainer">

            {# Le link delete dans le link notif mess-up le link global #}
            {% set index = 0 %}
            {% for notif in notifs %}

                <div id="notifCardLine{{ index }}" class="notifCardLine">

                    <span id="notifId{{index}}" style="display:none;" hidden>{{notif.id}}</span>

                    <a class="notifCard" href="{{ notif.link }}">
                        <article>
                            <div style="display:inline-flex;width:100%; justify-content:space-between;">
                                <p style="margin-bottom:0;margin-right:12px;">
                                    {# State clicked de la notif #}
                                    {% if not notif.clicked %}
                                        <i class='fa-solid fa-circle unclickedNotifSpot'></i>
                                    {% endif %}
                                    <span id="notifText">{{ notif.text|raw }}</span>
                                </p>
                            </div>
                            <span class="notifCardPublishDate ">{{ time_diff(notif.dateCreation) }}</span>
                        </article>
                    </a>
                    
                    <span id="deleteSingleNotif{{ index }}" class="deleteSingleNotif">
                        <i class="fa-solid fa-xmark"></i>
                    </span>

                    <script>
                        document.getElementById('deleteSingleNotif{{ index }}').addEventListener("click", function() {

                            const notifId = document.getElementById('notifId{{ index }}').innerText;

                            fetch('/deleteNotif/' + notifId, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                            }})
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    // window.FlashMessage.success(data.newState);    
                                    let notif = document.getElementById('notifCardLine{{ index }}');
                                    notif.classList.add("fadeOut");
                                    setTimeout(() => {
                                        notif.remove();
                                    }, 500);
                                    
                                    window.FlashMessage.success("Notification supprimée");                                                
                                } else {
                                    window.FlashMessage.error('Une erreur s\'est produite');
                                }
                            });
                        })


                    </script>

                    {% set index = index + 1 %}

                </div>

            {% endfor %}

        </section>

    </main>

{% endblock %}