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



{%block body%}
<h2>Projets</h2>
<ul id="tabProjects" class="nav nav-tabs">
    <li class="me-5">
        <a href="{{ path('app_user_project_submit') }}" class="btn btn-success">Ajouter</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#" data-status="A Voter"">A Voter</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-status="Brouillon">Brouillon</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-status="Voté">Voté</a>
    </li>
    <li class="nav-item ms-auto">
        <a class="nav-link" href="#" data-status="Archivé">Archivé</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-success nav-tome" href="#">Mes Projets</a>
    </li>  
</ul>

<div id="containerdraft" data-status="Brouillon" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
<h3 style="width:100%">Brouillon</h3>
</div>
<div id="containervoted" data-status="A Voter" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
<h3 style="width:100%">A Voter</h3>
</div>
<div id="containertovote" data-status="Voté" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
<h3 style="width:100%">Voté</h3>
</div>
<div id="containerarchived" data-status="Archivé" class='containerStatus d-flex flex-wrap mt-3' style='justify-content: left'>
<h3 style="width:100%">Archivé</h3>
</div>

<div style="display:none">
    {% for project in projects %}
        {% if is_granted('VIEW', project) %}
            <div class='card cardProject' data-status="{{project.status}}" data-tome="{{is_granted('TOME', project)}}" style='width:300px; margin-right:10px;'>
                <div class='card-header d-flex justify-content-between align-items-center'>
                    <h5>{{project.title}}</h5>

                    <div>
                        <a href="{{ path("app_user_project_view",{id:project.id}) }}" class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></a>
                    </div>                
                </div>
                <div class='card-body'>
                    {{project.summary|nl2br}}

                    {% if project.status=="Voté" or project.status=="Archivé" %}            
                        <small>
                        <hr>
                        <div class="row">
                            <div class="col-xs-6">
                                {% for option in project.options %}
                                    {{ option.title|title }} = {{ option.nbVote }}<br>
                                {% endfor %}
                            </div>
                            <div class="col-xs-6">
                                Votes Blancs = {{ project.nbVoteWhite }}<br>
                                Votes Nuls = {{ project.nbVoteNull }}
                            </div>
                        </div>
                    
                        <hr>
                        <strong>Résultat = </strong><br>    
                        {{ project.resultVote|nl2br }}  
                        </small>
                    {% endif %} 
                </div>

                <div class='card-footer' style="line-height:14px">
                    <small><em>
                    {% if project.dueDate %}
                        <b>A Voter pour le</b> = {{ project.dueDate|date("d/m/Y") }}<br>
                    {% endif %}
                    <b>Nature</b> = {{ project.nature }}<br>
                    <b>Propriétaires</b> = 
                    {%for user in project.users%}
                        {{loop.first ? user.username : ' - '~user.username}}
                    {%endfor%}
                    </em></small>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>
{%endblock%}

{% block localscript %}
<script>
    $(document).ready(function() {
        // Cacher tous les containers sauf celui actif au chargement
        let initialStatus = $('.nav-link.active').data('status');
        $('.containerStatus').removeClass("d-flex");
        $('.containerStatus').hide();

        $('.cardProject').each(function () {
            const $card = $(this);
            const status = $card.data('status');
            const $container = $('.containerStatus[data-status="' + status + '"]')

            if ($container.length) {
                $container.append($card);
            }
        });

        console.log(initialStatus);
        $('.containerStatus[data-status="' + initialStatus + '"]').addClass("d-flex");

        $('#tabProjects .nav-link').on('click', function (e) {
            e.preventDefault();

            // Gère les onglets actifs
            $('.nav-link').removeClass('active');
            $(this).addClass('active');

            if ($(this).hasClass('nav-tome')) {
                // On masque tt les cardProject
                $(".cardProject").hide();

                // On affiche que les cardProject avec tome
                $(".cardProject[data-tome='1']").show();

                $('.containerStatus').each(function () {
                    const $container = $(this);
                    const hasTome = $container.find('.cardProject[data-tome="1"]').length > 0;

                    if (hasTome) {
                        $container.addClass('d-flex').show();
                    } else {
                        $container.removeClass('d-flex').hide();
                    }
                });                
            }
            else {
                // On affiche tt les cardProject
                $(".cardProject").show();

                // Récupère le data-status sélectionné
                let status = $(this).data('status');

                // Cache tous les containers, puis affiche celui correspondant au data-status
                $('.containerStatus').removeClass('d-flex').hide();
                $('.containerStatus[data-status="' + status + '"]').addClass("d-flex").show();
            }
        });
  }); 
</script>
{% endblock %}