{% extends 'base.html.twig' %}
{% block title %}Bilan des abonnements{% endblock %}
{% block body %}
    <section class="container">
         {% include 'utils/file.ariane.html.twig' %} 

    		<h4>Bilan des abonnements</h4>
            <hr />
            <br/>
            <p>Veuillez trouver ci-dessous le bilan des abonnements aux newsletters de l'église à ce jour.</p>
            <p>Il y a au total <b>{{ abonnInfos.total }}</b> d'adresse(s) mail(s) dans l'annuaire de l'église.</p>
            
            <br>
            <table>
                <thead>
                    <tr style="border:1px solid #CCC;background-color:#00c1b0;color:#FFF;">
                        <td style="min-width:150px;"></td>
                        <td style="min-width:100px;padding:5px;">Commentaire</td>
                    </tr>
                </thead>
                <tbody>
                    <tr style="border:1px solid #CCC;background-color:#ececec">
                        <td style="min-width:150px;padding:5px;">Personnes abonnées</td>
                        <td style="min-width:100px;padding:5px;border-left:1px solid #CCC;">
                            <ul>
                                <li>Nombre : <b>{{ abonnInfos.nbAbonne }} </b> </li>
                                <li>Proportion : <b>{{ abonnInfos.PartDesSouscrits }} %</b> </li>
                            </ul>
                        </td>
                    </tr>

                    <tr style="border:1px solid #CCC;">
                        <td style="min-width:150px;padding:5px;">Personnes desinscrites</td>
                        <td style="min-width:100px;padding:5px;border-left:1px solid #CCC;">
                            <ul>
                                <li>Nombre : <b>{{ abonnInfos.nbDesabonne }} </b> </li>
                                <li>Proportion : <b>{{ abonnInfos.PartDesDesabonnes }} %</b> </li>
                                <li>Bilan des 3 derniers mois : 
                                    <ul>
                                        <li>Nombre : <b>{{ abonnInfos.lastDesAbonne }} </b> </li>
                                        <li>Proportion : <b>{{ abonnInfos.partLastDesabonn }} %</b> </li>
                                    <ul>
                                </li>
                            </ul>
                        </td>
                    </tr>

                    <tr style="border:1px solid #CCC;background-color:#ececec">
                        <td style="min-width:150px;padding:5px;">Personnes n'ayant pas répondu au mail de consentement</td>
                        <td style="min-width:100px;padding:5px;border-left:1px solid #CCC;">
                            <ul>
                                <li>Nombre : <b>{{ abonnInfos.nbPasDeRetour }} </b> </li>
                                <li>Proportion : <b>{{ abonnInfos.PartNonConsentement }} %</b> </li>
                            </ul>
                        </td>
                    </tr>

                </tbody>
            </table>
            <br><br /><br />

            {% if abonnInfos.listeLastDesabonn|length > 0  %}
                <strong> Liste des dernières désinscriptions (3 derniers mois) </strong> <br /><br />
                <table style="border:1px solid #444;width:100%">
                    <thead>
                        <tr style="border:1px solid #444;width:100%;background-color:#00c1b0;color:#FFF;">
                            <th scope="col" style="padding:5px 10px;">Nom</th>
                            <th scope="col" style="padding:5px 10px;">Adresse mail</th>
                            <th scope="col" style="padding:5px 10px;">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for obj in abonnInfos.listeLastDesabonn %}
                            <tr style="border:1px solid #444;width:100%">
                                <td style="padding:5px 10px;" >{{ obj.personne.prenom }} {{ obj.personne.nom }} </td>
                                <td style="padding:5px 10px;">{{ obj.email  }}</td>
                                <td style="padding:5px 10px;"> {{ obj.desabonnedate.date }} </td>
                            </tr>
                        {% endfor %}                             
                    </tbody>
                </table>
                <br /><br /><br /><br />
            {% endif %} 
            

            {% if abonnInfos.listeNeverAnswers|length > 0  %}
                <strong> Liste des adresses n'ayant pas répondu à l'appel au consentement </strong><br /><br />
                <table style="border:1px solid #444;width:100%">
                    <thead>
                        <tr style="border:1px solid #444;width:100%;background-color:#00c1b0;color:#FFF;">
                            <th scope="col" style="padding:5px 10px;">Nom</th>
                            <th scope="col" style="padding:5px 10px;">Adresse mail</th>
                            <th scope="col" style="padding:5px 10px;">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for obj in abonnInfos.listeNeverAnswers %}
                            <tr style="border:1px solid #444;width:100%">
                                <td style="padding:5px 10px;" >{{ obj.personne.prenom }} {{ obj.personne.nom }} </td>
                                <td style="padding:5px 10px;">{{ obj.email  }}</td>
                                <td style="padding:5px 10px;"> 
                                    {% if obj.daterelance %}
                                        {{ obj.daterelance.date }} 
                                    {% endif %} 
                                </td>
                            </tr>
                        {% endfor %}                             
                    </tbody>
                </table>
                <br>
            {% endif %} 
            
            <br />
            <hr/>

            <div class="d-flex justify-content-between">
                <a href="/diffusion/liste" class="btn btn-secondary"><i class="bi bi-x-lg"></i> Retour</a>

                <div class="d-flex justify-content-end">
                    <div style="margin-right:20px">
                        <label>Liste à diffuser le bilan</label>
                        <select id="listeDiffusion" class="form-control mr-5">
                            {% for obj in liste %}
                                <option value="{{ obj.code }}"> {{ obj.nom }} </option>
                            {% endfor %}                         
                        </select>
                    </div>
                    <button class="btn btn-sm btn-danger mr-5" id="sendBilan"> Envoyer le bilan</button>
                </div>              
            </div>
            <br/>
    </section>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $( document ).ready(function() {
            
            $("#sendBilan").click(function(event){
                event.preventDefault();
                var code = $("#listeDiffusion").val();   
                window.location.replace("/suivi/envoi/suivi/abonnement/" + code);      
            });
        });
    </script>
{% endblock %}