{# Ajout fichier base.html.twig #}
{% extends 'base.html.twig'%}

{# Titre de la page #}
{% block title %}
    Liste des formats
{% endblock %}

{% block head %}
    <!-- Script JS et CSs pour afficher le tableau (DataTables) -->
    <link href="{{ asset("vendor/datatables/dataTables.bootstrap4.min.css") }}" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs4/jq-3.7.0/dt-1.13.8/b-2.4.2/sp-2.2.0/datatables.js"></script>
{% endblock %}

{# Corps de la page #}
{% block body %}

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Liste d'utilisateurs</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                {# Definiton des colonnes du tableau #}
                <thead>
                    <tr>
                        <th>ID</th>{# Colonne ID #}
                        <th>Nom du format</th>{# Colonne Nom Format #}
                        <th>Cliniques autorisées</th>{# Colonne Cliniques Autorisés #}
                        <th></th>
                    </tr>
                </thead>
                
                {# Association des données de la base de donnée avec les colonnes du tableau #}
                <tbody>
                    {# Parcoure les formats #}
                    {% for format in formats %}
                    <tr>    
                        <td>{{ format.id }}</td>{# Colonne ID Format #}
                        <td>{{ format.nomFormat }}</td>{# Colonne Non Format #}
                        <td>{{ format.lesCliniquesFormat|length }}</td>{# Colonne Nombre FormatsAutorisés #}
                        <!--Ajouter modal-->
                        {# Colonne Suppression de formats #}
                        <td><a href="#" data-toggle="modal" data-target="#myModal{{ format.id }}"><i class="fa fa-trash" aria-hidden="true" style="color:red;"></id></a></td>
                    </tr> 
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
    {# Parcourir les formats #}
    {% for format in formats %}

    {# Modal pour confirmer la suppression du format #}
    <div class="modal fade" id="myModal{{ format.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">{# En tete de la modal #}
                    {# Element titre de la modal #}
                    <h5 class="modal-title" id="exampleModalLabel">Supprimer la modalité.</h5>
                    {# Bouton pour fermer la modal #}
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                    <center>
                        <br>
                        {# Paragraphe de la modal #}
                        <p>Voulez-vous réelement supprimer le format {{format.nomFormat}}</p>
                        {# Affichage nombre clinique qui utilisent ce format #}
                        <p>{{ format.lesCliniquesFormat|length }} cliniques l'utilisent</p>
                        <br>
                    </center>
                    {# Pied de page de la modal #}
                <div class="modal-footer">
                    {# Bouton pour annuler la suppresion de la modal #}
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Annuler</button>
                    {# Bouton pour confirmer la suppresion de la modal #}
                    <a class="btn btn-primary" href="{{ path("supp_format",{"id":format.id}) }}">Suprimmer</a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    {% endblock %}


    {# Block Script Javascript de la page #}
    {% block script %}
        <!-- Script Javascript du tableau (DataTables) -->
        <script src="{{ asset("vendor/datatables/jquery.dataTables.min.js") }}"></script>
        <script src="{{ asset("vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>


        <!-- Script pour filter les données du tableau -->
        <script>
            //initialisation le tableau
            $(document).ready(function () {
            var table = $('#dataTable').DataTable({
                // Filtrer choix nombre ligne par page du tableau
                lengthMenu: [[10,25,50,-1],[10,25,50,"Tout"]],
                //Langue du tableau (Francais)
                language:{
                    url:'//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json',
                }
            })
                table.draw();
            });

        </script>
    {% endblock %}