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

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

{#En tete de la page#}
{% block head %}
    <!-- Script CSS pour DataTables  -->
    <link href="{{ asset("vendor/datatables/dataTables.bootstrap4.min.css") }}" rel="stylesheet">
    
    <!--Script JavaScript pour visualiser une radio-->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
    <!-- OpenSeadragon javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon-fullpage/2.4.2/openseadragon-fullpage.js"></script>

    <!--Quill-->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css" rel="stylesheet">

{% endblock %}

{#Corps de la page#}
{% block body %}
<!-- DataTales Example -->

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Liste des radiographies</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <div class="filter-container">
                <!--Filtre de recherche par format-->
                <div id="choisirFormat">
                    Format : 
                    <!--Parcourir les formats-->
                    {% for format in formats %}
                        <!--Parcourir les valeurs du format-->
                        {% for value in format %}
                            <label><input type="checkbox" name="format" value="{{ value|upper }}" checked> {{ value|upper }}</label>
                        {% endfor %}
                    {% endfor %}
                </div>


                <!--Filtre de recherche par date-->
                <div>
                    <label for="choisirEcart">Période de date :</label>
                    <select id="choisirEcart">
                        <option value="ajd">Aujourd'hui</option>
                        
                        <option value="semaine">Cette semaine</option>
                        <option value="mois">Ce mois</option>
                        <option value="annee">Cette Année</option>
                        <option value="">Tout</option>
                    </select>
                </div>

                <!--Filtre de recherche par modalite -->
                <div id="choisirModalite">
                    Modalité : 
                    {% for modalite in modalites %}
                        {% for value in modalite %}
                            <label><input type="checkbox" name="modalite" value="{{ value|upper }}" checked>{{ value|upper }}</label>
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>

            <table class="table table-bordered display" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <!--Definition des colonnes du tableau-->
                    <tr>
                        <th></th><!--Colonne pour fonction-->
                        <th>Propriétaire / animal</th>  <!--Colonne Proprietaire/Animal-->
                        <th>Modalité</th>               <!--Colonne Modalite-->
                        <th>Format</th>                 <!--Colonne Format-->
                        <th>Date</th>                   <!--Colonne Date-->
                        <th>Heure</th>                  <!--Colonne Heure-->
                        <th>Nbe d'images</th>           <!--Colonne Nbre Images-->
                        <th>Structured Report (SR)</th> <!--SR-->
                        <th></th>       <!--Regarder la radio-->
                        <th></th>       <!--Envoyer un mail-->
                        <!--<th></th>Colonne pour fonction-->

                        <!--Si l'user est createur-->
                        {% if app.user.role == "CREATEUR" %}
                            <th></th><!--Colonne pour fonction-->
                        {% endif %}
                    </tr>
                </thead>
                
                <!--Association des données de la base de donnée et les colonnes du tableau-->
                <tbody>
                    <!--Parcourir les radios-->
                    {% for radio in radios %}
                        <tr>
                            <!--Bouton pour exporter en PDF toutes les radios associés à un proprietaire/animal-->
                            <td><a href="{{ path("importer_tout_en_pdf",{radio_id:radio.id}) }}"><button class="btn"><i class="fas fa-file-export"></i><i class="fas fa-file-export"></i></button></a></td>
                            <td>{{ radio.proprietaireAnimal }}</td><!--Colonne Proprietaire Animal-->
                            <td>{{ radio.modalite }}</td><!--Colonne Modalite-->
                            <td>{{ radio.format }}</td><!--Colonne Format-->
                            <td>{{ radio.dateUpload|date("d/m/Y") }}</td><!--Colonne Date Upload-->
                            <td>{{ radio.heureUpload }}</td><!--Colonne Heure Upload-->

                            <!--Si la radio est au format JPEG ou PNG alors recupérer le nbre d'images de la radio-->
                            {% if radio.format == "JPEG" or radio.format == "PNG"%}
                                <td>{{ radio.lesFichiers|length }}</td><!--Colonne pour afficher le nombre d'images de la radio-->
                            {% elseif radio.format == "DICOM" %}
                                <td>{{ nbFramesDicom[radio.id] }}</td>
                            {% else %}
                                <td></td><!--Colonne Vide-->
                            {% endif %}

                            <!-- SR-->
                            {# Si la radio possede un SR -> alors afficher un champs #}
                            {% if radio.leSR is not null %} 
                                <td><a href="{{ path("telecharger_sr",{"radioid":radio.id,"srid":radio.leSR.id}) }}"><i class="fa fa-sticky-note" aria-hidden="true"></i></a></td>
                                
                            {# Si la radio possede pas un SR -> n'affiche rien just un champs vide #}
                            {% else %}
                                <td></td>
                            {% endif %}
                            <!--FIN-->

                            <td>
                                <!--Definition du menu Deroulant pour le choix d'export du fichier -->
                                <div class="dropdown">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-download" aria-hidden="true"></i>
                                    </button>
                                    <!--Menu deroulant si la radio est au format DICOM -->
                                    {% if radio.format == "DICOM" %}
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="{{ path("telecharger_original",{"id":radio.id}) }}">DICOM (Format Actuel)</a>
                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalGenererPDF" data-id="{{ radio.id }}" data-nomclientanimal="{{ radio.proprietaireAnimal }}">PDF</a>
                                            <a class="dropdown-item" href="{{ path("exporter_radio_en_jpeg",{"id":radio.id}) }}">JPEG</a>
                                        </div>
                                    
                                    <!--Menu deroulant si la radio est au format PDF-->
                                    {% elseif radio.format == "PDF" %}
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalGenererPDF" data-id="{{ radio.id }}">PDF (Format Actuel)</a>
                                            <a class="dropdown-item" href="{{ path("exporter_radio_en_jpeg",{"id":radio.id}) }}">JPEG</a>
                                        </div>
                                    <!--Menu deroulant si la radio est au format JPEG-->
                                    {% else %}
                                        <div class="dropdown-menu">
                                            <!--<a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalGenererPDF" data-id="{{ radio.id }}">PDF{% if radio.format == "PDF" %} (Format Actuel){% endif %}</a>-->
                                            <a class="dropdown-item" href="{{ path("telecharger_original",{"id":radio.id}) }}">{{ radio.format }} (Format Actuel)</a>
                                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#modalGenererPDF" data-id="{{ radio.id }}">PDF</a>
                                        </div>
                                    {% endif %}
                                </div>
                            </td>
                            <!--Bouton pour voir la radio-->
                            <td><a href="#" class="modalLink" data-toggle="modal" data-target="#modalRadio" 
                                data-id="{{ radio.id }}" 
                                data-format="{{ radio.format }}"
                                data-nom-du-pacient="{{ radio.proprietaireAnimal }}"
                                data-les-fichiers="{{ radio.lesFichiers|json_encode() }}"
                                data-clinique-id="{{ radio.laClinique.id }}"
                            >
                            <i class="fa fa-eye" aria-hidden="true"></i></a></td>                            <!--Bouton pour envoyer par mail la radio-->
                            {% if app.user.role == "CREATEUR" %}
                                <td><a href="#" data-toggle="modal" data-target="#envoyerMailClientModal" data-id="{{ radio.id }}" data-format="{{ radio.format }}"><i class="fa fa-envelope" aria-hidden="true"></i></a></td>
                            {% endif %}
                            

                            <!--Si l'user est connecté en tant que CREATEUR alors il a des options en plus-->
                            {% if app.user.role == "CREATEUR" %}
                                <!--Bouton pour modifier infos radios  DESACTIVÉ-->
                                {#
                                
                                <td><a href="{{ path("modifier_radio",{"id":radio.id}) }}"><i class="fa fa-edit" aria-hidden="true"></i></a></td>
                                #}
                                <!--Bouton pour supprimer une radio-->
                                {#
                                <td><a href="{{ path("demande_supp_radio",{"id": radio.id}) }}"><i class="fa fa-trash" aria-hidden="true" style="color:red;"></i></a></td>
                                #}
                            {% endif %}
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

    <!--Modal pour generer un fichier pdf avec des remarques-->
    <div class="modal fade" id="modalGenererPDF" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Générer un PDF</h5>
                    <!--Bouton pour fermer la modal-->
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <!--DIfferentes div pour definir les emplacements des elements créées avec le script javascript-->
                </div>

                <div class="modal-body">

                    <div class="container">
                        <h5 class="modal-title">Les informations du client</h5>
                        <div>
                            <p>Noms</p>
                            <div class="row">
                                <input type="" class="form-control col-sm-12" id="nomclient" placeholder="Nom et prenom du client">
                                <input type="" class="form-control col-sm-12" id="nomanimal" placeholder="Nom de l'animal">
                            </div>
                            <hr>
                            <p>Informations de contact</p>
                            <div class="row">    
                                <input type="" class="form-control col-sm-6" id="adresse" placeholder="Adresse">
                                <input type="" class="form-control col-sm-6" id="ntel" placeholder="Nom du telephone">
                                <input type="email" class="form-control col-sm-6" id="mailpdf" placeholder="E-mail">
                            </div>
                        </div>
                        
                        <hr>
                
                        <h5 class="modal-title">Les remarques</h5>
                        
                        <div id="quillEditor">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <!--Bouton de la modal servant à voir la radio avec la bibliothéque OpenSeaDragon-->
                    <a class="btn btn-primary" id="ouvrirRadio" href="#">
                        Voir la radiographie
                    </a>
                    <!--Bouton pour annuler l'export de la radio-->
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Annuler</button>
                    <!--Bouton permettant de créer le pdf à exporter-->
                    <a class="btn btn-primary" id="btnConfirmerPDF" href="#">
                        Créer
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!--Modal pour envoyer un mail aevc la radio en piéce jointe-->
    <div class="modal fade" id="envoyerMailClientModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><!--Creation de la modal-->
        <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">Envoyer la radiographie par email.</h5>
                    <!--Bouton pour fermer la modal-->
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close" onclick="">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!--Champ mail conteneant l'adresse mail à qui envoyer la radio-->

                    <!--champs pôur le mail centralisé -->
                    <center>    
                        <label for="email" class="form-label">Email</label>
                        <!-- Campo de texto -->
                        <input type="email" class="form-control col-sm-6" id="mailInput" placeholder="Adresse Mail du destinataire">
                        <!--Champ remarques eventuelles à envoyer avec le mail-->
                        <br>
                        <label class="form-label">Remarques à envoyer</label>
                        <div id="quillEditorMail"></div>
                        <br>
                        <!--Champs pour choisir le fichier-->
                        <label class="form-label">Fichier a envoyer</label>
                        Fichier : <select name="Format fichier" id="fichierChosi">
                            <option value="fichierPDF">Fichier PDF</option>
                            <option value="original">Fichier original</option>
                        </select>
                    </center>
                {#
                    <script>

                        //Options de Quill (Bibliothéque d'édition de texte (RTF))
                        var options = {
                            placeholder: 'Inserer des remarques... (Optionnel)',
                            theme: 'snow'
                        };

                        //<!--Creation de l'objet Quill-->
                        var editor = new Quill('#quillEditorMail', options);



                        //<!--Fonction permettant de recuperer le texte ecrit dans l'editeur Quill-->
                        function getRemarquesMail() {
                            if (editor) {
                                var text = encodeURIComponent(editor.root.innerHTML);
                                console.log("Text content:", text);
                                return text;
                            } else {
                                console.log("Editor is not initialized yet.");
                            }
                        }
                    </script>
                #}
                </div>
                <!--Pied de Page de la modal-->
                <div class="modal-footer">
                    <!--Bouton pour annuler l'envoi du mail-->
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Annuler</button>
                    <!--Bouton pour envo-->
                    <a class="btn btn-primary" id="btnEnvoyer" href="#">
                        Envoyer
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div id="baseModalRadio"></div>
{#
    ---------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d---------------------
    <!--Modal permettant de voir la radio-->
    {% for radio in radios %}
        <div class="modal fade" id="myModal{{ radio.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content" style="width:1000px">
                    <!--En tete de la modal-->
                    <div class="modal-header">
                        <!--Element titre de la modal-->
                        <h5 class="modal-title" id="myModalLabel">Radiographie de {{ radio.proprietaireAnimal }}</h5>
                        <!--Bouton pour fermer la modal-->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body bg-dark text-white">
                        <!--Paragraphe affichant le nom du fichier associé-->
                        <p>Nom du fichier : <span id="nomFichierActuel{{ radio.id }}"></span></p>

                        <!--Taille de l'image si le format est JPEG ou PNG-->
                        {% if radio.format == 'JPEG' or radio.format == 'PNG' %}
                        <div id="zoom-container-{{ radio.id }}" style="width: 100%; height: 600px;"></div>
                        <center>      
                            <!--Code permettant de changer d'image de la radio-->                 
                            Image: <div style="display: inline-block;" id="pageActuelle-{{ radio.id }}">1</div> / {{radio.lesFichiers|length}}
                            <br><br>
                            <a class="btn btn-primary" id="previous{{ radio.id }}" href="#"><</a>
                            <a class="btn btn-primary" id="next{{ radio.id }}" href="#">></a>
                        </center>
                        
                        <!--Script pour generer les images à afficher-->
                        <script>
                            
                            //creer la liste des images
                            let images{{ radio.id }} = [
                                //chercher les images (twig)
                                {% for image in radio.lesFichiers %}
                                    "{{ asset('upload/' ~ radio.laClinique.id ~ '/' ~ image) }}",
                                {% endfor %}
                            ];
                            //creer l'index de la page actuelle à 0
                            let currentIndex{{ radio.id }} = 0;

                            //Mettre le bon nom de fichier
                            $('#nomFichierActuel{{ radio.id }}').empty()
                            $('#nomFichierActuel{{ radio.id }}').append(images{{ radio.id }}[currentIndex{{ radio.id }}].split("/").pop());//obtient le nom du fichier et le met direct

                            //creer l'image avec OpenseaDragon
                            let viewer{{ radio.id }} = OpenSeadragon({
                                id: "zoom-container-{{ radio.id }}",
                                prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                                tileSources: {
                                    type: "image",
                                    url: images{{ radio.id }}[currentIndex{{ radio.id }}]
                                },
                                minZoomLevel: 0,
                                maxZoomLevel: 255,
                                visibilityRatio: 0
                            });
                            //Ne s'execute que si le bouton previous est cliqué
                            $('#previous{{ radio.id }}').on('click', function(e) {
                                //si l'index est superieur a 0
                                if (currentIndex{{ radio.id }} > 0) {
                                    //enlever 1 du index
                                    currentIndex{{ radio.id }}--;
                                    
                                    //Mettre le bon nom de fichier
                                    $('#nomFichierActuel{{ radio.id }}').empty();
                                    $('#nomFichierActuel{{ radio.id }}').append(images{{ radio.id }}[currentIndex{{ radio.id }}].split("/").pop());//obtient le nom du fichier et le met direct
                                    
                                    //mettre le bon numero dans la page
                                    $('#pageActuelle-{{ radio.id }}').empty(); //nettoyer la page actuelle
                                    $('#pageActuelle-{{ radio.id }}').append(currentIndex{{ radio.id }}+1); //Mettre le bon numero de page
                                    
                                    //creer une nouvelle image avec OpenSeadragon
                                    $('#zoom-container-{{ radio.id }}').empty();//nettoyer le div du openseadragon
                                    var viewer{{ radio.id }} = OpenSeadragon({//creer un nouveau OpenSeadragon
                                        id: "zoom-container-{{ radio.id }}",
                                        prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                                        tileSources: {
                                            type: "image",
                                            url: images{{ radio.id }}[currentIndex{{ radio.id }}]
                                        },
                                        minZoomLevel: 0,
                                        maxZoomLevel: 255,
                                        visibilityRatio: 0
                                    });
                                }
                            });
                            //Si le bouton suivant est cliqué(next)
                            $('#next{{ radio.id }}').on('click', function(e) {
                                //si l'index est inferieure que la taille de la liste images -1
                                if (currentIndex{{ radio.id }} < images{{ radio.id }}.length - 1) {
                                    //ajouter +1 à index
                                    currentIndex{{ radio.id }}++;

                                    //Mettre le bon nom de fichier
                                    $('#nomFichierActuel{{ radio.id }}').empty();
                                    $('#nomFichierActuel{{ radio.id }}').append(images{{ radio.id }}[currentIndex{{ radio.id }}].split("/").pop());//obtient le nom du fichier et le met direct

                                   //mettre le bon numero dans la page
                                    $('#pageActuelle-{{ radio.id }}').empty(); //nettoyer la page actuelle
                                    $('#pageActuelle-{{ radio.id }}').append(currentIndex{{ radio.id }}+1); //Mettre le bon numero de page
                                    
                                    //creer un nouveau OpenSeadragon
                                    $('#zoom-container-{{ radio.id }}').empty();//nettoyer le div du openseadragon
                                    var viewer{{ radio.id }} = OpenSeadragon({//creer un nouveau OpenSeadragon
                                        id: "zoom-container-{{ radio.id }}",
                                        prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                                        tileSources: {
                                            type: "image",
                                            url: images{{ radio.id }}[currentIndex{{ radio.id }}]
                                        },
                                        minZoomLevel: 0,
                                        maxZoomLevel: 255,
                                        visibilityRatio: 0
                                    });
                                }
                            });
                        </script>
                        <!--Script si le format de la radio est au format DICOM-->
                        {% elseif radio.format == 'DICOM' %}
                        
                            <div id="zoom-container-{{ radio.id }}" style="width: 100%; height: 600px;"></div>
                                <script>

                                    //creer l'image avec OpenseaDragon
                                    let viewer{{ radio.id }} = OpenSeadragon({
                                        id: "zoom-container-{{ radio.id }}",
                                        prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                                        tileSources: {
                                            type: "image",
                                            url: "{{ path('exporter_radio_en_jpeg',{'id':radio.id}) }}"
                                        },
                                        minZoomLevel: 0,
                                        maxZoomLevel: 255,
                                        visibilityRatio: 0
                                    });
                                </script>
                            
                        
                        <!--Si la radio est au format PDF-->
                        {% elseif radio.format == 'PDF' %}
                            <!-- Afficher le contenu spécifique pour les fichiers PDF -->
                            <embed src="{{ asset('upload/' ~ radio.laClinique.id ~ "/" ~ radio.lesFichiers|first) }}" type="application/pdf" width="100%" height="600px" />

                        {% else %}
                            <!-- si c est pas pris en charge -->
                            <p>Ce type de fichier n'est pas pris en charge!</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    ---------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d-------------------------d---------------------    
#}

{% endblock %}
{% block script %}
    <!--Scripts Javascript permettant d'afficher le tableau (DataTables-->
    <script src="{{ asset("vendor/datatables/jquery.dataTables.min.js") }}"></script>
    <script src="{{ asset("vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>


    <!--______________________________________Script pour modal de affichage des images-->
    <script>
    $(document).ready(function(){

        //creer la variable qui va accuillir les images converties a partir du dicom
        let listeImages;
        $(".modalLink").click(function(event){
            
            event.preventDefault();
            //verifier si modal est vide, sinon tout vider
            if (!$("#baseModalRadio").is(':empty')) {
                $("#baseModalRadio").empty();
            }
            //var pour stocker le modal
            var contenuModal;
            
            //attributs de la radio
            var nomDuPacient = $(this).data("nom-du-pacient");
            var id = $(this).data("id");
            var format = $(this).data("format");
            var lesFichiers = $(this).data("les-fichiers"); 
            var cliniqueID = $(this).data("clinique-id");
            
            
            //se for imagem
            if(format == "JPEG" || format == "PNG" || format == "JPG"){
                contenuModal=`<div class="modal fade" id="modalRadio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content" style="width:1000px">
                            <!--En tete de la modal-->
                            <div class="modal-header">
                                <!--Element titre de la modal-->
                                <h5 class="modal-title" id="myModalLabel">Radiographie de ${nomDuPacient}</h5>
                                <!--Bouton pour fermer la modal-->
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body bg-dark text-white">
                                <!--Paragraphe affichant le nom du fichier associé-->
                                <p>Nom du fichier : <span id="nomFichierActuel"></span></p>

                                <div id="zoom-container" style="width: 100%; height: 600px;"></div>
                            
                                <center>      
                                    <!--Code permettant de changer d'image de la radio-->                 
                                    <div style="display: inline-block;" id="pageActuelle">1</div> / <div style="display: inline-block;" id="nPages"></div>
                                    <br><br>
                                    <a class="btn btn-primary" id="previous" href="#"><</a>
                                    <a class="btn btn-primary" id="next" href="#">></a>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>`
                $("#baseModalRadio").html(contenuModal);
                
                //l index
                let index = 0;
                
                //Mettre le bon nom de fichier
                $('#nomFichierActuel').empty();
                $('#nomFichierActuel').append(lesFichiers[index].split("/").pop());//obtient le nom du fichier et le met direct

                //obtenir le numero de pages
                $('#nPages').empty();
                $('#nPages').append(lesFichiers.length);//obtient le nom du fichier et le met direct


                //créer le viewer
                let viewer = OpenSeadragon({
                    id: "zoom-container",
                    prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                    tileSources: {
                        type: "image",
                        url: "../../upload/"+cliniqueID+"/"+lesFichiers[index]
                    },
                    minZoomLevel: 0,
                    maxZoomLevel: 255,
                    visibilityRatio: 0
                });
                
                //Si le bouton suivant est cliqué(next)
                $('#next').on('click', function(e) {
                    //si l'index est inferieure que la taille de la liste images -1
                    if (index < lesFichiers.length - 1) {
                        //ajouter +1 à index
                        index++;

                        //Mettre le bon nom de fichier
                        $('#nomFichierActuel').empty();
                        $('#nomFichierActuel').append(lesFichiers[index].split("/").pop());//obtient le nom du fichier et le met direct

                        //mettre le bon numero dans la page
                        $('#pageActuelle').empty(); //nettoyer la page actuelle
                        $('#pageActuelle').append(index+1); //Mettre le bon numero de page
                        
                        //creer un nouveau OpenSeadragon
                        $('#zoom-container').empty();//nettoyer le div du openseadragon
                        var viewer = OpenSeadragon({//creer un nouveau OpenSeadragon
                            id: "zoom-container",
                            prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                            tileSources: {
                                type: "image",
                                url: "../../upload/"+cliniqueID+"/"+lesFichiers[index]
                            },
                            minZoomLevel: 0,
                            maxZoomLevel: 255,
                            visibilityRatio: 0
                        });
                    }
                });
                //Si le bouton precedent est cliqué(previous)
                $('#previous').on('click', function(e) {
                    //si l'index plus grand que 0
                    if (index > 0) {
                        //enlever -1
                        index--;

                        //Mettre le bon nom de fichier
                        $('#nomFichierActuel').empty();
                        $('#nomFichierActuel').append(lesFichiers[index].split("/").pop());//obtient le nom du fichier et le met direct

                        //mettre le bon numero dans la page
                        $('#pageActuelle').empty(); //nettoyer la page actuelle
                        $('#pageActuelle').append(index+1); //Mettre le bon numero de page
                        
                        //creer un nouveau OpenSeadragon
                        $('#zoom-container').empty();//nettoyer le div du openseadragon
                        var viewer = OpenSeadragon({//creer un nouveau OpenSeadragon
                            id: "zoom-container",
                            prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                            tileSources: {
                                type: "image",
                                url: "../../upload/"+cliniqueID+"/"+lesFichiers[index]
                            },
                            minZoomLevel: 0,
                            maxZoomLevel: 255,
                            visibilityRatio: 0
                        });
                    }
                });
                    
            
            
            //se for dicom
            }else if (format == "DICOM"){
                contenuModal=`<div class="modal fade" id="modalRadio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content" style="width:1000px">
                            <!--En tete de la modal-->
                            <div class="modal-header">
                                <!--Element titre de la modal-->
                                <h5 class="modal-title" id="myModalLabel">Radiographie de ${nomDuPacient}</h5>
                                <!--Bouton pour fermer la modal-->
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body bg-dark text-white">
                                <!--Paragraphe affichant le nom du fichier associé-->
                                <p>Nom du fichier : <span id="nomFichierActuel">En chargement...</span></p>

                                <div id="zoom-container" style="width: 100%; height: 600px;"></div>
                            
                                <center>      
                                    <!--Code permettant de changer d'image de la radio-->                 
                                    <div style="display: inline-block;" id="pageActuelle">1</div> / <div style="display: inline-block;" id="nPages"></div>
                                    <br><br>
                                    <a class="btn btn-primary" id="previous" href="#"><</a>
                                    <a class="btn btn-primary" id="next" href="#">></a>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>`
                $("#baseModalRadio").html(contenuModal);
                let linkImage = "{{ path('get_raw_link',{'radio_id':'PHradioID'}) }}";
                linkImage = linkImage.replace("PHradioID",id);
                console.log(linkImage);
                
                //obtenir les images dans le dicom : 
                fetch(linkImage)
                    .then(response => response.json())
                    .then(data => {
                        //l index
                        let index = 0;
                        //les Images
                        listeImages = data;
                        console.log(listeImages)
                        
                        //Mettre le bon nom de fichier
                        $('#nomFichierActuel').empty();
                        $('#nomFichierActuel').append(listeImages[index].split("/").pop());//obtient le nom du fichier et le met direct

                        //obtenir le numero de pages
                        $('#nPages').empty();
                        $('#nPages').append(listeImages.length);//obtient le nom du fichier et le met direct


                        //créer le viewer
                        let viewer = OpenSeadragon({
                            id: "zoom-container",
                            prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                            tileSources: {
                                type: "image",
                                url: listeImages[index]
                            },
                            minZoomLevel: 0,
                            maxZoomLevel: 255,
                            visibilityRatio: 0
                        });
                        
                        //Si le bouton suivant est cliqué(next)
                        $('#next').on('click', function(e) {
                            //si l'index est inferieure que la taille de la liste images -1
                            if (index < listeImages.length - 1) {
                                //ajouter +1 à index
                                index++;

                                //Mettre le bon nom de fichier
                                $('#nomFichierActuel').empty();
                                $('#nomFichierActuel').append(listeImages[index].split("/").pop());//obtient le nom du fichier et le met direct

                                //mettre le bon numero dans la page
                                $('#pageActuelle').empty(); //nettoyer la page actuelle
                                $('#pageActuelle').append(index+1); //Mettre le bon numero de page
                                
                                //creer un nouveau OpenSeadragon
                                $('#zoom-container').empty();//nettoyer le div du openseadragon
                                var viewer = OpenSeadragon({//creer un nouveau OpenSeadragon
                                    id: "zoom-container",
                                    prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                                    tileSources: {
                                        type: "image",
                                        url: listeImages[index]
                                    },
                                    minZoomLevel: 0,
                                    maxZoomLevel: 255,
                                    visibilityRatio: 0
                                });
                            }
                        });
                        //Si le bouton precedent est cliqué(previous)
                        $('#previous').on('click', function(e) {
                            //si l'index plus grand que 0
                            if (index > 0) {
                                //enlever -1
                                index--;

                                //Mettre le bon nom de fichier
                                $('#nomFichierActuel').empty();
                                $('#nomFichierActuel').append(listeImages[index].split("/").pop());//obtient le nom du fichier et le met direct

                                //mettre le bon numero dans la page
                                $('#pageActuelle').empty(); //nettoyer la page actuelle
                                $('#pageActuelle').append(index+1); //Mettre le bon numero de page
                                
                                //creer un nouveau OpenSeadragon
                                $('#zoom-container').empty();//nettoyer le div du openseadragon
                                var viewer = OpenSeadragon({//creer un nouveau OpenSeadragon
                                    id: "zoom-container",
                                    prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                                    tileSources: {
                                        type: "image",
                                        url: listeImages[index]
                                    },
                                    minZoomLevel: 0,
                                    maxZoomLevel: 255,
                                    visibilityRatio: 0
                                });
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Ocorreu um erro ao obter os dados:', error);
                    });



            
            }   
            else if (format == "PDF"){
                contenuModal=`<div class="modal fade" id="modalRadio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content" style="width:1000px">
                            <!--En tete de la modal-->
                            <div class="modal-header">
                                <!--Element titre de la modal-->
                                <h5 class="modal-title" id="myModalLabel">Radiographie de ${nomDuPacient}</h5>
                                <!--Bouton pour fermer la modal-->
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body bg-dark text-white">
                                <!--Paragraphe affichant le nom du fichier associé-->
                                <p>Nom du fichier : <span id="nomFichierActuel"></span></p>

                                <!-- Afficher le contenu spécifique pour les fichiers PDF -->
                                <embed src="{{ asset('upload/${cliniqueID}/${lesFichiers}') }}" type="application/pdf" width="100%" height="600px" />
                            </div>
                        </div>
                    </div>
                </div>`
                $("#baseModalRadio").html(contenuModal);
            
            
            }else{
                contenuModal = `<div class="modal fade" id="modalRadio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content" style="width:1000px">
                            <!--En tete de la modal-->
                            <div class="modal-header">
                                <!--Element titre de la modal-->
                                <h5 class="modal-title" id="myModalLabel">Radiographie de ${nomDuPacient}</h5>
                                <!--Bouton pour fermer la modal-->
                                <button type="button" class="close" id="closeModalSee" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body bg-dark text-white">
                                <!--Paragraphe affichant le nom du fichier associé-->
                                <p>Nom du fichier : <span id="nomFichierActuel"></span></p>
                                <!-- si c est pas pris en charge -->
                                <p>Ce type de fichier n'est pas pris en charge!</p>
                            </div>
                        </div>
                    </div>
                </div>`
                $("#baseModalRadio").html(contenuModal);
            }
            
            $("#modalRadio").modal("show");
            //LAB ///////////////////////////////////////////////////////////
            /*
            //Quand le modal fermé (listener)
            $(document).on('hidden.bs.modal', '#modalRadio', function () {
                //attendre 0,8 secondes afin que le modal se ferme
                setTimeout(function() {
                    //vider le div afin de kill le modal
                    
                    $("#modalEnAction").empty();
                    console.log("sucesso / test"); 

                    //simulation AJAX
                    if(format==="DICOM"){
                       
                        //requete AJAX
                        $.ajax({
                            url: "{{ path('suprimmer_images') }}", // Substitua pelo URL da sua rota Symfony
                            type: 'POST',
                            data: JSON.stringify(dataToSend),
                            contentType: 'application/json', // Especifica o tipo de conteúdo
                            success: function(response) {
                                console.log('Success:', response);
                            },
                            error: function(xhr, status, error) {
                                console.error('Error:', error);
                            }
                        });
                    }
                               
                }, 800);
            });*/
            // Quand le modal fermé (listener)
            $(document).on('hidden.bs.modal', '#modalRadio', function () {
                // Attendre 0,8 secondes afin que le modal se ferme
                setTimeout(function() {
                    // Vider le div afin de kill le modal
                    $("#modalEnAction").empty();
                    console.log("sucesso / test");


                    // Simuler un AJAX POST
                    // Simulação AJAX POST
                    if (format === "DICOM") {
                        const dataToSend = {
                            listeDImages: listeImages  // Não precisa usar JSON.stringify aqui
                        };

                        $.ajax({
                            url: "{{ path('suprimmer_images') }}",
                            type: 'POST',
                            data: dataToSend,  // Os dados são enviados como um objeto
                            success: function(response) {
                                console.log('Sucesso:', response);
                            },
                            error: function(xhr, status, error) {
                                console.error('Erro:', error);
                            }
                        });
                    

                    

                        
                        /*
                        //Données a envoyer
                        const dataToSend = {
                            listeDImages: listeImages
                        };

                        // Criação do formulário HTML dinâmico
                        var form = $('<form>', {
                            'method': 'POST',
                            'action': '{{ path("suprimmer_images") }}'  // Substitua pela URL da sua rota Symfony
                        });

                        // Adiciona os dados como campos ocultos
                        $.each(dataToSend, function(key, value) {
                            $('<input>', {
                                'type': 'hidden',
                                'name': key,
                                'value': JSON.stringify(value)
                            }).appendTo(form);
                        });

                        // Adiciona o formulário ao corpo do documento e envia
                        form.appendTo('body').submit();
                        */
                    }
                }, 800);
            });


            /*
            //quand le bouton de exit cliqué 
            $("#closeModalSee").click(function(event){
                //attendre 0,8 secondes afin que le modal se ferme
                setTimeout(function() {
                    //vider le div afin de kill le modal
                    $("#modalEnAction").empty();            
                }, 800);
            });
            */
        
        });
        /*
        //verifier si esc à été touché
        $(document).keydown(function(event) {
            if (event.which == 27) {
                //attendre 0,8 secondes afin que le modal se ferme
                setTimeout(function() {
                    //si la modal est vide
                    if ($("#modalEnAction").is(':empty')) {
                        console.log("elle est deja vide");
                    }
                    //sinon le vider
                    else{
                        $("#modalEnAction").empty();
                    }
                }, 800);
            }
        });
*/
    });

    </script>

    <!--_________________________________Code JS pour le modal de generer un PDF-->
    <script>
        //Options de Quill (Bibliothéque d'édition de texte (RTF))
        var options = {
            placeholder: 'Insérer des remarques... (Optionnel)',
            theme: 'snow'
        };

        //Creation de l objet Quill
        var editorPDF = new Quill('#quillEditor', options);



        //Fonction permettant de recuperer le texte ecrit dans l'editeur Quill
        function getDataFromEditor() {
            if (editorPDF) {
                var text = editorPDF.getText();
                //console.log("Text content:", text);
                return text;
            } else {
                ;// console.log("Editor is not initialized yet.");
            }
        }

        //Fonction qui permet de detecter quand le modal est fermé et ainsi supprimer le texte ecris
        $('#modalGenererPDF').on('hidden.bs.modal', function () {
            editorPDF.setText('');
            document.getElementById("nomclient").value = "";
            document.getElementById("nomanimal").value = "";
            document.getElementById("adresse").value = "";
            document.getElementById("ntel").value = "";
            document.getElementById("mailpdf").value = "";
        });
    </script>

    <script>
    //__________________________________________Script de la la modal pour envoyer un mail
        $(document).ready(function() {
            
            //--CREER LE QUILL--//
            //Options de Quill (Bibliothéque d'édition de texte (RTF))
            var options = {
                placeholder: 'Inserer des remarques... (Optionnel)',
                theme: 'snow'
            };

            //<!--Creation de l'objet Quill-->
            var editor = new Quill('#quillEditorMail', options);



            //<!--Fonction permettant de recuperer le texte ecrit dans l'editeur Quill-->
            function getRemarquesMail() {
                if (editor) {
                    var text = encodeURIComponent(editor.root.innerHTML);
                    //console.log("Text content:", text);
                    return text;
                } else {
                    ;// console.log("Editor is not initialized yet.");
                }
            }
            //Attend appui sur le bouton avec l'id envoyerMailClientModal
            $('#envoyerMailClientModal').on('show.bs.modal', function (event) {
                //obtenir le bouton
                var button = $(event.relatedTarget);
                
                //obtenir l'id
                var entityId = button.data('id');

                //ontenir le format
                var format = button.data("format");
                
                //remplacer le placeholder par le format
                $("#formatShowType").text(format);

                //obtenir le texte dans le champs remarques
                //var remarques = document.getElementById("remarquesInput").value;


                //attendre le click du boutton
                $('#btnEnvoyer').on('click', function (e) {
                    //creer le chemin avec des valeurs default
                    var url = "{{ path('mail-au-client', {'id':'PHid' , 'adresseMail':'PHmail' , 'remarques':'PHremarques' , 'formatChoisi' : 'PlaceholderFormatChoisi'}) }}";//{ { pat  h("exporter_radio",{"id":radio.id,"formatDemande":"PDF"}) }}

                    //ontenir l id
                    $('#entityId').text(entityId);
                    //remplacer le Placeholder du id par le vrai id
                    url = url.replace('PHid', entityId);
                    
                    //Obtenir tout le reste
                    var mail = document.getElementById("mailInput").value;
                    var remarquesMail = getRemarquesMail(); //document.getElementById("remarquesMailInput").value;
                    var formatChoisi = $("#fichierChosi").val()

                    //Remplacer les champs
                    url = url.replace('PHmail',encodeURIComponent(mail));
                    url = url.replace('PHremarques',encodeURIComponent(remarquesMail));
                    url = url.replace('PlaceholderFormatChoisi',formatChoisi);
                    console.log(url);

                    //qnd le bouton sera cliquée, renvoyer dans la page url
                    $('#btnEnvoyer').attr('href', url);
                });
            });
            //lors de la fermeture du modal, tout nettoyer
            $('#envoyerMailClientModal').on('hidden.bs.modal', function () {
                //netoyer quill
                editor.setText('');
                //netoyer le msgbox
                document.getElementById("mailInput").value = "";
                
            });
        });
    </script>
    <script>
    //________________________________Modal pour convertir en PDF
        function redirect(url){
            //console.log(url);
            window.location.href = url;
        }
        $(document).ready(function() {
            
            //Attendre que le bouton avec l'id modalGenererPDF soit cliqué
            $('#modalGenererPDF').on('show.bs.modal', function (event) {
                //obtenir le bouton
                var button = $(event.relatedTarget);
                
                //obtenir l'id
                var entityId = button.data('id');
                
                //obtenir le nom du proprietaire et de l'animal
                var nomProprietaireAnimal = button.data('nomclientanimal');
                
                //proprietaire
                document.getElementById("nomclient").value = nomProprietaireAnimal.split("/")[0];
                //animal 
                document.getElementById("nomanimal").value = nomProprietaireAnimal.split("/")[1];

                //
                $('#entityId').text(entityId);
                


                //attendre le click du boutton
                //attendre le click du boutton
                $('#btnConfirmerPDF').on('click', function (e) {
                    //obtenir remarquesInput et le convertir en format HTML
                    var remarques = getDataFromEditor();//document.getElementById("remarquesInput").value;
                    //details du client
                    var nomDuClient = document.getElementById("nomclient").value;
                    var nomDuAnimal = document.getElementById("nomanimal").value;
                    var adresseClient = document.getElementById("adresse").value;
                    var nTelephone = document.getElementById("ntel").value;
                    var mailclient = document.getElementById("mailpdf").value;

                    //creer le path avec des valeures DEFAULT
                    var url = '{{ path("creer_pdf_radio",{"id":"PHid", "remarques":"PHremarques", "nomclient":"placeholderNomClient", "nomanimal":"placeholderNomAnimal", "adresse":"placeholderAdresse", "ntelephone":"placeholderNTelephone", "mailclient":"placeholderMailClient"}) }}';
                    
                    //verifier si tout existe
                    //si non existant, mettre le texte comme nom existant
                    console.log(nomDuClient == "");
                    console.log("v : " + nomDuClient);
                    
                    if(nomDuClient == ""){nomDuClient="non existant";}
                    if(nomDuAnimal == ""){nomDuAnimal="non existant";}
                    if(adresseClient == ""){adresseClient="non existant";}
                    if(nTelephone == ""){nTelephone="non existant";}
                    if(mailclient == ""){mailclient="non existant";}


                    //remplacer le Placeholder du id par le vrai id
                    url = url.replace('PHid', entityId);
                    
                    //remplacer le Placeholder des remarques par les remarques
                    url = url.replace('PHremarques',encodeURIComponent(remarques));
                    //meme pour nom du client
                    url = url.replace('placeholderNomClient', nomDuClient);
                    //nomaninomDuAnimalmal
                    url = url.replace('placeholderNomAnimal', nomDuAnimal);
                    //etc...ß   
                    url = url.replace('placeholderAdresse', adresseClient);

                    url = url.replace('placeholderNTelephone', nTelephone);

                    url = url.replace('placeholderMailClient', mailclient);

                    //qnd le bouton sera cliquée, renvoyer dans la page url
                    redirect(url);
                    
                });


                
                //bouton voir radios cliqué
                $('#ouvrirRadio').on('click', function (e) {
                    var modalId = '#myModal' + entityId;
                    // L'événement déclenché lorsque le modal est fermé
                    $(modalId).on('hidden.bs.modal', function (e) {
                        // Supprimer les styles temporaires lors de la fermeture du modal.
                        $(this).css({
                            'top':''
                        });
                        $("#modalGenererPDF").css({
                            'top':''
                        });
                        // Supprimer les gestionnaires d'événements pour éviter qu'ils ne soient appliqués à nouveau lors du prochain shown.bs.modal
                        $(this).off('hidden.bs.modal');
                    });
                    //Fermer le modal de vue
                    $(modalId).css({
                        'top':'10.5%'
                    });
                    $("#modalGenererPDF").css({
                        'top':'-3%',
                        'transition': 'top 0.2s ease'
                    });

                    // Appelez maintenant la fonction modale jQuery pour afficher le modal
                    $(modalId).modal('show');
                });
            });
        });
    </script>
    <script>

    //________________________________________________________TABLEAU
        //function pour filter par semaine
        function getWeekNumber(date) {
            var onejan = new Date(date.getFullYear(), 0, 1);
            return Math.ceil((((date - onejan) / 86400000) + onejan.getDay() + 1) / 7);
        }
        
        //initialisation du tableau
        $(document).ready(function () {
        var table = $('#dataTable').DataTable({
            //Filtre permettant de definir le nombre de ligne à afficher par page dans le 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'},
        });
        updateEcart();
        $('input[name="format"],input[name="modalite"], #choisirEcart').on("change", function () {
            updateEcart();
        })
        function updateEcart(){
            // Nettoyer tout les filtres
            $.fn.dataTable.ext.search = [];

            // Ajouter les filtres de la checkboxes "Format" cochés
            var selectedFormats = [];
            $('input[name="format"]:checked').each(function() {
                selectedFormats.push($(this).val());
            });
            
            //ajouter les filtres de la checkboxes "Modalites" cochés
            var selectedModalites=[];
            $('input[name="modalite"]:checked').each(function(){
                selectedModalites.push($(this).val());
            })

            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                // format
                var tableColumnFormat = data[3]; // Colonne "Format"
                var tableColumnModalite = data[2]; // Colonne "Modalite"
                var tableColumnDate = new Date(data[4].split("/").reverse().join("/"));
                
                //verifier si contient un des filtres
                var contientFormat = selectedFormats.includes(tableColumnFormat);
                var contientModalite = selectedModalites.includes(tableColumnModalite);
                
                //Periodes
                var selectedEcart = $('#choisirEcart').val();
                
                //verifier les filtres appliqués
                //creer la date de ajd : 
                var dateDAujourdhui = new Date();
                //verifier les filtres appliqués
                switch (selectedEcart) {
                    case '': // si aucun filtre selectioné
                        checkEcart = true
                        break;
                    
                    case 'ajd': // si filtre equivalent aujourd'hui
                        checkEcart = dateDAujourdhui.getDate()==tableColumnDate.getDate() && dateDAujourdhui.getMonth()==tableColumnDate.getMonth() && dateDAujourdhui.getFullYear()==tableColumnDate.getFullYear();
                        break;
                    
                    case 'semaine': // si cette semaine (pour l'instant ne fonctionne pas)
                        checkEcart= getWeekNumber(dateDAujourdhui)==getWeekNumber(tableColumnDate) && dateDAujourdhui.getFullYear()==tableColumnDate.getFullYear();
                        
                        break;
                    
                    case 'mois': // si ce mois
                        checkEcart=dateDAujourdhui.getMonth()==tableColumnDate.getMonth() && dateDAujourdhui.getFullYear()==tableColumnDate.getFullYear();
                        break;
                    
                    case 'annee': // si cette année
                        checkEcart=dateDAujourdhui.getFullYear()==tableColumnDate.getFullYear();
                        break;
                    
                    default:
                        checkEcart = true;
                }

                return contientFormat && selectedModalites.includes(tableColumnModalite) && checkEcart;
            });
            table.draw();
        }
    });


    </script>
{% endblock %}