{#Integration du fichier base.html.twig#}
{% extends 'base.html.twig'%}

{#Bloc titre de la page#}
{% block title %}
    Liste des modalités
{% endblock %}

{% block head %}
    <!-- Script JavaScript et Css pour 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">
                {#Definition des colonnes du tableau#}
                <thead>
                    <tr>
                        <th>ID</th>{#Colonne ID#}
                        <th>Nom de la Modalité</th>{#Colonne Nom MOdalite#}
                        <th>Cliniques autorisées</th>{#Colonne Clinique Autorisés#}
                        <th></th>
                    </tr>
                </thead>

                {#Association des données de la base de donnée avec les colonnes du tableau#}
                <tbody>
                    {#Parcourir les modalites#}
                    {% for modalite in modalites %}
                    <tr>    
                        <td>{{ modalite.id }}</td>{#Colonne Modalite ID#}
                        <td>{{ modalite.nomModalite }}</td>{#Colonne Nom Modalite#}
                        <td>{{ modalite.lesCliniquesModalites|length }}</td>{#Colonne Nombre Clinique Modalite Autorise#}
                        {#Colonne + Bouton pour supprimer une modalite#}
                        <td><a href="#" data-toggle="modal" data-target="#myModal{{ modalite.id }}"><i class="fa fa-trash" aria-hidden="true" style="color:red;"></id></a></td>
                    </tr> 
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
    {#Parcourir les modalites#}
    {% for modalite in modalites %}
    {#Modal pour confirmer la suppression de la modalite#}
    <div class="modal fade" id="myModal{{ modalite.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#}
                    {#Elemnt 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>
                        {#Element paragraphe pour affiche le nom de la modalite à supprimer#}
                        <p>Voulez-vous réelement supprimer la modalité {{modalite.nomModalite}}</p>
                        {#Element paragraphe pour montrer nombre de clinique utilisant cette modalite#}
                        <p>{{ modalite.lesCliniquesModalites|length }} cliniques l'utilisent</p>
                        <br>
                    </center>
                <div class="modal-footer">{#Pied de Page de la Modalite#}
                    {#Bouton pour annuler la suppression de la modalite#}
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Annuler</button>
                    {#Bouton pour confirmer la suppresion de la modalite #}
                    <a class="btn btn-primary" href="{{ path("supp_modalite",{"id":modalite.id}) }}">Suprimmer</a>
                </div>
            </div>
        </div>
        {#Fermeture de la modal#}
    </div>

    {% endfor %}
    {% endblock %}

    {#Bloc Script Javascript de la Page#}
    {% block script %}
        <!-- Script Javascript pour DataTables et Bootstrap -->
        <script src="{{ asset("vendor/datatables/jquery.dataTables.min.js") }}"></script>
        <script src="{{ asset("vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>

        <!-- Script pour filtre le s données du tableau -->
        <script>
            //initialisation le tableau
            $(document).ready(function () {
            var table = $('#dataTable').DataTable({
                //Filtre par nombre lignes du tableau par page
                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 %}