{% extends 'equipe/_layout.html.twig' %}

{% block title %}Sondages{% endblock %}

{% block page_title %}Sondages{% endblock %}

{% block body %}
    {% if is_granted('ROLE_DIRECTION') %}
        <div class="card mb-5 mb-xl-8">
            <div class="card-header border-0 pt-6">
                <div class="card-title"><h3>Créer un sondage</h3></div>
            </div>
            <div class="card-body pt-0">
                <form method="post" action="{{ path('equipe_sondages_creer') }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('equipe_sondages_creer') }}">
                    <div class="mb-4">
                        <label class="form-label">Question *</label>
                        <input type="text" name="question" required class="form-control">
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Options * (une par ligne, au moins 2)</label>
                        <textarea name="options" required class="form-control"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="form-label">Durée (jours) *</label>
                        <input type="number" name="duree_jours" min="1" required class="form-control" style="max-width: 120px;">
                    </div>
                    <div class="mb-4 form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="visible_parents" value="1" checked id="sondage-visible-parents">
                        <label class="form-check-label" for="sondage-visible-parents">Visible des parents</label>
                        <div class="text-muted fs-8">Décochez pour une question interne à l'équipe uniquement (les parents ne le verront pas).</div>
                    </div>
                    <button type="submit" class="btn btn-primary">Créer</button>
                </form>
            </div>
        </div>
    {% endif %}

    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title"><h3>Sondages</h3></div>
        </div>
        <div class="card-body pt-0">
            {% if lignes is empty %}
                <div class="text-muted">Aucun sondage.</div>
            {% else %}
                <div class="d-flex flex-column gap-4">
                    {% for ligne in lignes %}
                        <div class="border rounded p-4">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h4 class="mb-0">{{ ligne.sondage.question }}</h4>
                                {% if ligne.sondage.visibleParents %}
                                    <span class="badge badge-light-success">Parents</span>
                                {% else %}
                                    <span class="badge badge-light-warning">Interne</span>
                                {% endif %}
                            </div>
                            <div class="text-muted fs-7 mb-2">{{ ligne.sondage.dateCreation|date('d/m/Y H:i') }} - {{ ligne.sondage.auteur.prenom }} {{ ligne.sondage.auteur.nom }}</div>
                            <div class="mb-3">
                                {% if ligne.ouvert %}
                                    <span class="badge badge-light-success">Ouvert jusqu'au {{ ligne.sondage.dateCloture|date('d/m/Y') }}</span>
                                {% else %}
                                    <span class="badge badge-light">Clôturé le {{ ligne.sondage.dateCloture|date('d/m/Y') }}</span>
                                {% endif %}
                            </div>

                            {% if ligne.aVote or not ligne.ouvert %}
                                {% if not ligne.aVote %}
                                    <div class="text-muted fs-7 mb-2">Ce sondage est clôturé.</div>
                                {% endif %}
                                {% set totalVoix = 0 %}
                                {% for resultat in ligne.resultats %}
                                    {% set totalVoix = totalVoix + resultat.voix %}
                                {% endfor %}
                                <div class="mb-3">
                                    {% for resultat in ligne.resultats %}
                                        {% set pourcentage = totalVoix > 0 ? (resultat.voix / totalVoix * 100)|round : 0 %}
                                        <div class="mb-2">
                                            <div class="d-flex justify-content-between fs-7 mb-1">
                                                <span>{{ resultat.option.libelle }}</span>
                                                <span class="text-muted">{{ resultat.voix }} voix ({{ pourcentage }}%)</span>
                                            </div>
                                            <div class="progress" style="height: 8px;">
                                                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ pourcentage }}%;"></div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    <div class="text-muted fs-8 mt-1">{{ totalVoix }} vote{{ totalVoix > 1 ? 's' : '' }} au total</div>
                                </div>
                            {% else %}
                                <form method="post" action="{{ path('equipe_sondages_voter', {id: ligne.sondage.id}) }}" class="mb-3">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('equipe_sondages_voter_' ~ ligne.sondage.id) }}">
                                    <div class="d-flex flex-column gap-2 mb-3">
                                        {% for resultat in ligne.resultats %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="option_id" value="{{ resultat.option.id }}" required id="equipe-option-{{ resultat.option.id }}">
                                                <label class="form-check-label" for="equipe-option-{{ resultat.option.id }}">{{ resultat.option.libelle }}</label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">Voter</button>
                                </form>
                            {% endif %}

                            {% if is_granted('ROLE_DIRECTION') %}
                                <form method="post" action="{{ path('equipe_sondages_date_cloture', {id: ligne.sondage.id}) }}" class="d-flex gap-2 align-items-end">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('equipe_sondages_date_cloture_' ~ ligne.sondage.id) }}">
                                    <div>
                                        <label class="form-label fs-8 mb-1">Nouvelle date de clôture</label>
                                        <input type="date" name="date_cloture" required class="form-control form-control-sm">
                                    </div>
                                    <button type="submit" class="btn btn-light btn-sm">Modifier</button>
                                </form>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}