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

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

{% block head %}
    <!-- CSS pour le tableau de données (DataTables) -->
    <link href="{{ asset("vendor/datatables/dataTables.bootstrap4.min.css") }}" rel="stylesheet">

{% endblock %}

{% 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 clinique</th>{# Colonne Nom Clinique #}
                        <th>Adresse</th>{# Colonne Adresse #}
                        <th>Code Postal</th>{# Colonne Code Postal #}
                        <th>Ville</th>{# Colonne Ville #}
                        <th>Téléphone</th>{# Colonne Telephone #}
                        <td>N° de utilisateurs</td>{# Colonne Nombre Utilisateurs #}
                        <td>N° de radios</td>{# Colonne Nombres Radios #}
                        <th>Format</th>{# Colonne Formats #}
                        <th>Modalité</th>{# Colonne Modalite #}
                        <td>Espace occupé (Mo)</td>{# Colonne Taille Fichiers #}
                        <th></th>{# Colonne Pour fonction #}
                        <th></th>{# Colonne Pour fonction #}
                        <th></th>{# Colonne Pour fonction #}
                    </tr>
                </thead>

                {# Corps du Tableau #}
                <tbody>
                {# Association colonnes du tableau et les données de la base de données #}
                    {% for clinique in lesCliniques %}
                    <tr>
                        <td>{{ clinique.id }}</td>{# Colonne ID #} 
                        <td>{{ clinique.nomClinique }}</td>{# Colonne Nom Clinique #}
                        <td>{{ clinique.adresse }}</td>{# Colonne Adresse #}
                        <td>{{ clinique.codePostal }}</td>{# Colonne Code Postal #}
                        <td>{{ clinique.ville }}</td>{# Colonne Ville #}
                        <td>{{ clinique.telephone }}</td>{# Colonne Telephone #}
                        <td>{{ clinique.users|length }}</td>{# Colonne Nombre Users #}
                        <td>{{ clinique.lesFichiers|length }}</td>{# Colonne Nombre Radios #}
                        <td>
                            {# Colonne Formats #}
                            <div style="display: flex;">
                                {# Bouton pour ajouter un format à la clinique #}
                                <a href="{{ path("associer_format_clinique",{"id":clinique.id}) }}" style="padding-top:7%"><i class="fa fa-plus" aria-hidden="true"></i></a>
                                {# Bouton pour afficher le menu deroulant #}
                                {% if clinique.lesFormatsClinique is not empty %}
                                    <div class="dropdown">
                                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                            Formats
                                        </button>
                                        {# Menu deroulant #}
                                        <div class="dropdown-menu">
                                            {% for formatClinique in clinique.lesFormatsClinique %}
                                                <span class="dropdown-item">{{ formatClinique.format.nomFormat }}&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#desassocierFormat" data-id="{{ formatClinique.id }}"><i class="fa fa-times" aria-hidden="true" style="font-size: 15px; color:red;"></i></a></span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </td>
                        {# Fermeture Colonne Formats #}
                        <td>
                        {# Colonne Modalites #}
                            <div style="display: flex;">
                                {# Bouton pour ajouter une modalite à la clinique #}
                                <a href="{{ path("associer_modalite_clinique",{"id":clinique.id}) }}" style="padding-top:7%"><i class="fa fa-plus" aria-hidden="true"></i></a>
                                {# Bouton pour afficher le menu deroulant #}
                                {% if clinique.lesModalitesClinique is not empty %}
                                    <div class="dropdown">
                                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                            Modalites
                                        </button>
                                        {# Menu deroulant #}
                                        <div class="dropdown-menu" style="display: fixed;">
                                            {% for modaliteClinique in clinique.lesModalitesClinique %}
                                                <span class="dropdown-item">{{ modaliteClinique.modalites.nomModalite }}&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" data-toggle="modal" data-target="#desassocierModalite" data-id="{{ modaliteClinique.id }}"><i class="fa fa-times" aria-hidden="true" style="font-size: 18px; color:red;"></i></a></span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        {# Fermeture Colonne Modalite #}
                        </td>
                        <td>{{ clinique.tailleFichier }}</td>{# Colonne Taille Fichier #} 
                        <td><a href="{{ path("modifier_clinique",{id:clinique.id}) }}"><i class="fa fa-edit" aria-hidden="true"></i></a></td>{# Bouton pour modifier la clinique #} 
                        <td><a href="{{ path("creer_compte_client",{id:clinique.id}) }}"><i class="fa fa-user-plus" aria-hidden="true" ></i></a></td>{# Bouton pour creer un compte viewer ou createur à cette clinique #} 
                        <td><a href="{{ path("suprimmer_clinique",{id:clinique.id}) }}"><i class="fa fa-trash" aria-hidden="true" style="color:red"></i></a></td>{# Bouton pour demander la suppression d'une clinique #} 
                    </tr> 
                    {% endfor %}
                </tbody>
            {# Fermeture du tableau #} 
            </table>
        </div>
    </div>
    </div>
    {# Debut Modal Desassocier Format #} 
    <div class="modal fade" id="desassocierFormat" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                {# Element Titre de la Modal #} 
                    <h5 class="modal-title" id="exampleModalLabel">Désassocier le format de la clinique</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>
                <div class="modal-body">
                {# Corps de la modal #} 
                    Voulez vous réellement désassocier ce format de cette clinique ? 
                </div>
                <div class="modal-footer">
                    {# Bouton pour annuler la desassociation du format #} 
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Non</button>
                    {# Bouton pour confirmer la desassociation  du format #} 
                    <a class="btn btn-danger" id="btnDesassocierFormat" href="#">
                        Oui
                    </a>
                </div>
            </div>
        </div>
    </div>
   
   {# Modal pour desassocier une modalite d'une clinique #} 
    <div class="modal fade" id="desassocierModalite" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    {# Element Titre de la modal #} 
                    <h5 class="modal-title" id="exampleModalLabel">Désassocier la modalité de la clinique</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>
                {# Corps de la modal #} 
                <div class="modal-body">
                    Voulez vous réellement désassocier cette modalité de cette clinique ?
                </div>
                {# Pied de page de la modal #} 
                <div class="modal-footer">
                    {# Bouton pour annuler la desassociation de la modalite #} 
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Non</button>
                    {# Bouton pour confirmer la desassociation  de la modalite #} 
                    <a class="btn btn-danger" id="btnDesassocierModalite" href="#">
                        Oui
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
    //Script de la Modal pour desassocier la modalite de la clinique
        $(document).ready(function() {
            
            $('#desassocierModalite').on('show.bs.modal', function (event) {
                //Declaration du bouton
                var button = $(event.relatedTarget);
                
                //Declaration de EntityId et affectation de l'id de l'association de la modalité clinique
                var entityId = button.data('id');
                
                //Code Jquery
                $('#entityId').text(entityId);
                
                //creation de l'URL avec des valeurs par default
                var url = "{{ path('desassocier_modalite_clinique', {'id': 'placeholder'}) }}";
                
                //remplacer le Placeholder par l'id
                url = url.replace('placeholder', entityId);

                //Attend l'action sur le bouton
                $('#btnDesassocierModalite').on('click', function (e) {
                    //Renvoie Vers l'url
                    $('#btnDesassocierModalite').attr('href', url);
                });
            });
        });
    </script>

    <script>
    //Script de la Modal pour desassocier le format de la clinique
        $(document).ready(function() {
            
            $('#desassocierFormat').on('show.bs.modal', function (event) {
                //Declaration du bouton
                var button = $(event.relatedTarget);

                 //Declaration de EntityId et affectation de l'id de l'association de format clinique
                var entityId = button.data('id');
                
                //Code Jquery
                $('#entityId').text(entityId);
                
                //creer le path avec des valeures DEFAULT
                var url = "{{ path('desassocier_format_clinique', {'id': 'placeholder'}) }}";
                
                //remplacer le Placeholder par l'id
                url = url.replace('placeholder', entityId);

                //Attend l'action sur le bouton
                $('#btnDesassocierFormat').on('click', function (e) {
                    //Renvoie Vers l'url
                    $('#btnDesassocierFormat').attr('href', url);
                });
            });
        });
    </script>
    
    {% endblock %}
     {# Bloc Script de la page #} 
    {% block script %}
        <!-- Code javascript pour faire fonction la bibliothéque DataTables -->
        <script src="{{ asset("vendor/datatables/jquery.dataTables.min.js") }}"></script>
        <script src="{{ asset("vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>

        <script>
            //Initialisation du tableau
            $(document).ready(function () {
                var table = $('#dataTable').DataTable({
                    //Definition n'ombre d'entrées par page dans le tableau
                    lengthMenu: [[10,25,50,-1],[10,25,50,"Tout"]],
                    //Definition de la lanque du tableau
                    language:{
                        url:'//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json',
                    }
                })
            });

        </script>
    {% endblock %}