{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/layout.html.twig' %}

{% block content_title  %}{% endblock %}
{% block head_javascript %}
	{{ parent() }}

	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
	
{% endblock head_javascript %}

{% block body_javascript %}
	<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
	 <script src="{{ asset('assets/js/stats/index.js')}}"></script> 

{% endblock body_javascript %}

{% block head_stylesheets %}
	{{ parent() }}
    {# {{ knp_pagination_rel_links(totaldevices) }} #}

{% endblock %}


{% block main %}
				
    
<div>
    <div class="h3 mb-4 fw-bold">Statistiques pour le salon {{salon.name }} pour la période du {{ salon.startedAt |date("d/m/Y")  }} au {{ salon.endedAt |date("d/m/Y")  }} </div>

	<ul class="nav nav-tabs" id="myTab" role="tablist">
		<li class="nav-item" role="presentation">
			<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#map-pane" type="button" role="tab" aria-selected="true">Salon</button>
		</li>
		<li class="nav-item" role="presentation">
			<button class="nav-link"  id="totem" data-bs-toggle="tab" data-bs-target="#totem-pane" type="button" role="tab" aria-selected="false">Consultation par totem</button>
		</li>
        <li class="nav-item" role="presentation">
			<button class="nav-link" data-bs-toggle="tab" data-bs-target="#rubriques-pane" type="button" role="tab" aria-selected="false">Consultation par rubriques</button>
		</li>
        <li class="nav-item" role="presentation">
			<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jours-pane" type="button" role="tab" aria-selected="false">Consultation par jours</button>
		</li>
         <li class="nav-item" role="presentation">
			<button class="nav-link" data-bs-toggle="tab" data-bs-target="#heures-pane" type="button" role="tab" aria-selected="false">Consultation par heures</button>
		</li>
        <li class="nav-item" role="presentation">
			<button class="nav-link" data-bs-toggle="tab" data-bs-target="#exposants-pane" type="button" role="tab" aria-selected="false">Consultation par exposants</button>
		</li>
        <li class="nav-item" role="presentation">
			<button class="nav-link" data-bs-toggle="tab" data-bs-target="#conferences-pane" type="button" role="tab" aria-selected="false">Consultation par conferences</button>
		</li>
        <li class="nav-item" role="presentation">
			<button class="nav-link" data-bs-toggle="tab" data-bs-target="#visiteurs-pane" type="button" role="tab" aria-selected="false">Visiteurs</button>
		</li>
	</ul>

	<div class="tab-content" id="myTabContent">
		
        {#  Salon - map #}
        <div class="tab-pane fade show active" id="map-pane" role="tabpanel" tabindex="0">

            <div class="row mt-4 mb-3">
                <label for="map-file" class="form-label h5 mb-2">Choississez le plan du salon</label>
                 <input id="map-file" class="form-control"  type="file" accept="image/*" onchange="loadFile(event)"> 
            </div>

            <div class="row mb-3 border border-secondary d-flex align-content-center">
                <div class="row col-3 mb-5 mt-5">
                    <div><b>Organisateur : </b>{{ salon.name  }}</div>
                    <div><b>Début du salon : </b>{{ salon.startedAt |date("d/m/Y")  }}</div>
                    <div><b>Fin du salon : </b>{{ salon.endedAt |date("d/m/Y")  }}</div>
                    <div><b>Lieu: </b>{{ salon.pacExpo  }}</div>
                    <div><b>Charte active : </b>{{ salon.chart  }}</div>
                    <div><b>Env: </b>{{ salon.env  }}</div>
                    <div><b>Mode : </b>{{ salon.mode  }}</div>
                    <div><b>Opérateur : </b>{{ salon.operateurapi }}</div>
                    <div><b>Nombre de devices présents dans les stats : </b>{{ totaldevices }}</div>
                </div>

                <div class="d-flex col-9 justify-content-center">
                    <img class="" id="map-img" src="images/planOK.svg" style="max-height : 60vh;">
                </div>				

            </div>
        </div>

        {#  Consultation par totem #}
        <div class="tab-pane fade" id="totem-pane" role="tabpanel" tabindex="0">
                        
            <div class="row mt-4 d-flex">
                <table id="table-totem" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Nom du device</th>
                            <th scope="col">Emplacement sur la carte</th>
                            <th scope="col">Nombre de hits</th>
                            <th scope="col">Visiteurs uniques flashés</th>
                        </tr>
                    </thead>
                    <tbody>
                    
{#                 
                        {% set totalhits = 0 %}
                        {% set totalbadges = 0 %}

                        {% for key,device in deviceslist %}

                            <tr>
                                <td>{{ device.device_id }}</td>
                                <td>{{ device.total_hits }}</td>
                                <td>{{ device.total_badges }}</td>
                            </tr> 

                        {% set totalhits = totalhits + device.total_hits %}
                        {% set totalbadges = totalbadges + device.total_badges %}

                        {% endfor %}  #}

                        {# <tr class="fw-bold h6"> #}
                            {# <td>Total</td>
                            <td>{{ totalhits }}</td>
                            <td>{{ totalbadges }}</td> #}
                        {# </tr>    #}
                    </tbody>

                </table>

                {# pagination #}
                <div class="d-flex justify-content-between h6">
                    {# <div class="mt-1" id="devicesFound">{{ deviceslist | length }} devices trouvés</div> #}
                    <div class="mt-1" id="devicesFound"></div>
                    <div>
                         <select class="form-select h7" id="itemperpage-totem">
                            <option>10</option> 
                            <option>20</option>
                            <option>50</option> 
                            <option>100</option> 
                        </select>
                    </div>
                    <div>
                        <nav>
                            <ul id="pagination-totem" class="pagination">
                            </ul>
                        </nav>
                    </div>
                </div>

                {# <div class="navigation">
                    {{ knp_pagination_render(deviceslist) }}
                </div> #}
            </div>
        
        </div>

         {#  Consultation par rubrique #}
        <div class="tab-pane fade" id="rubriques-pane" role="tabpanel" tabindex="0">

            {# <div class="h3 mt-5">Consultation par rubriques</div>     #}
            <div class="row mt-2 border d-flex">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr class="">
                                <th class=" h6 bg-secondary text-white" scope="col">Rubriques</th>
                                <th class=" h6 bg-secondary text-white" scope="col">Filtres utilisés</th>
                                <th class=" h6 bg-secondary text-white" scope="col">Totem</th>
                                <th class=" h6 bg-secondary text-white" scope="col">Web</th>
                                <th class=" h6 bg-secondary text-white" scope="col">TOTAL</th>                               
                            </tr>
                        </thead>
                           {% set totalhitscolTotem = 0 %}
                           {% set totalhitscolWeb = 0 %}
                           {% set totalhitscolTotal = 0 %}

                        <tbody>
                            <tr>

                                <td class="col-4"><b>CONFERENCES</b> (action dans la rubrique tout confondu)</td>
                                <td class="col-5">origin : conferences</td>
                                {% if devicesByOrigin.conferencesTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByOrigin.conferencesTotem.total %}
                                    <td class="col-1">{{ devicesByOrigin.conferencesTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByOrigin.conferencesWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByOrigin.conferencesWeb.total %}
                                    <td class="col-1">{{ devicesByOrigin.conferencesWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByOrigin.conferencesTotem.total +  devicesByOrigin.conferencesWeb.total }}</td>
                            </tr>
                             <tr>
                                <td class="col-4">EN COURS (clic sur menu du haut)</td>
                                <td class="col-5">origin : encours</td>
                                    {% if devicesByOrigin.encoursTotem is not null %} 
                                    {% set totalhitscolTotem = totalhitscolTotem + devicesByOrigin.encoursTotem.total %}
                                    <td class="col-1">{{ devicesByOrigin.encoursTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByOrigin.encoursWeb is not null %} 
                                    {% set totalhitscolWeb = totalhitscolWeb + devicesByOrigin.encoursWeb.total %}
                                    <td class="col-1">{{ devicesByOrigin.encoursWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByOrigin.encoursTotem.total +  devicesByOrigin.encoursWeb.total }}</td>
                            </tr>
                            <tr>
                                <td class="col-4">Fiche conférence</td>
                                <td class="col-5">actions : conferences-open-search, conferences-send-search, conferences-reset-search, open-popup-conferences</td>
                                    {% if devicesByActions.conferencessearchTotem is not null %} 
                                    {% set totalhitscolTotem = totalhitscolTotem + devicesByActions.conferencessearchTotem.total %}
                                    <td class="col-1">{{ devicesByActions.conferencessearchTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.conferencessearchWeb is not null %} 
                                    {% set totalhitscolWeb = totalhitscolWeb + devicesByActions.conferencessearchWeb.total %}
                                    <td class="col-1">{{ devicesByActions.conferencessearchWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.conferencessearchTotem.total +  devicesByActions.conferencessearchWeb.total }}</td>
                            </tr>

                             <tr>
                                <td class="col-4"><b>EXPOSANTS</b> (action dans la rubrique tout confondu)</td>
                                <td class="col-5">origin : exhibitors</td>
                                {% if devicesByOrigin.exhibitorsTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByOrigin.exhibitorsTotem.total %}
                                    <td class="col-1">{{ devicesByOrigin.exhibitorsTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByOrigin.exhibitorsWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByOrigin.exhibitorsWeb.total %}
                                    <td class="col-1">{{ devicesByOrigin.exhibitorsWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByOrigin.exhibitorsTotem.total +  devicesByOrigin.exhibitorsWeb.total }}</td>
                            </tr>

                             <tr>
                                <td class="col-4">Clic sur exposant</td>
                                <td class="col-5">action : exhibitors-clic-view-exhibitor-map</td>
                                {% if devicesByActions.exhibitorsclicviewexhibitormapTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.exhibitorsclicviewexhibitormapWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorsclicviewexhibitormapTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorsclicviewexhibitormapWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.exhibitorsclicviewexhibitormapWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorsclicviewexhibitormapWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.exhibitorsclicviewexhibitormapTotem.total +  devicesByActions.exhibitorsclicviewexhibitormapWeb.total }}</td>
                            </tr>

                             <tr>
                                <td class="col-4">Clic sur produit</td>
                                <td class="col-5">action : exhibitors-clic-view-product-map</td>
                                {% if devicesByActions.exhibitorsclicviewproductmapTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.exhibitorsclicviewproductmapTotem.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorsclicviewproductmapTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorsclicviewproductmapWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.exhibitorsclicviewproductmapWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorsclicviewproductmapWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.exhibitorsclicviewproductmapTotem.total +  devicesByActions.exhibitorsclicviewproductmapWeb.total }}</td>
                            </tr>

                             <tr>
                                <td class="col-4">Clic liste exposants</td>
                                <td class="col-5">origin : exhibitors, action :  link-to-exhibitors</td>
                                {% if devicesByActions.linktoexhibitorsTotem.exhibitors is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.linktoexhibitorsTotem.exhibitors.total %}
                                    <td class="col-1">{{ devicesByActions.linktoexhibitorsTotem.exhibitors.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.linktoexhibitorsWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.linktoexhibitorsWeb.exhibitors.total %}
                                    <td class="col-1">{{ devicesByActions.linktoexhibitorsWeb.exhibitors.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.linktoexhibitorsTotem.exhibitors.total +  devicesByActions.linktoexhibitorsWeb.exhibitors.total }}</td>
                            </tr>

                             <tr>
                                <td class="col-4">Fiche exposant</td>
                                <td class="col-5">actions : exhibitors-open-search, exhibitors-send-search, exhibitors-reset-search, open-popup-exhibitors</td>
                                    {% if devicesByActions.exhibitorssearchpopupTotem is not null %} 
                                    {% set totalhitscolTotem = totalhitscolTotem + devicesByActions.exhibitorssearchpopupTotem.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorssearchpopupTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorssearchpopupWeb is not null %} 
                                    {% set totalhitscolWeb = totalhitscolWeb + devicesByActions.exhibitorssearchpopupWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorssearchpopupWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.exhibitorssearchpopupTotem.total +  devicesByActions.exhibitorssearchpopupWeb.total }}</td>
                            </tr>

                                <tr>
                                <td class="col-4">Voir la sélection sur le plan</td>
                                <td class="col-5">actions : button-clic-view-list-exhibitors-map</td>
                                    {% if devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapTotem is not null %} 
                                    {% set totalhitscolTotem = totalhitscolTotem + devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapTotem.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapWeb is not null %} 
                                    {% set totalhitscolWeb = totalhitscolWeb + devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapTotem.total +  devicesByActions.exhibitorsbuttonclicviewlistexhibitorsmapWeb.total }}</td>
                            </tr>


                             {# <tr>
                                <td class="col-4">Exposant sur le plan</td>
                                <td class="col-5">actions : exhibitors-clic-view-exhibitor-map</td>
                                    {% if devicesByActions.exhibitorssearchTotem is not null %} 
                                    {% set totalhitscolTotem = totalhitscolTotem + devicesByActions.exhibitorssearchTotem.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorssearchTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorssearchWeb is not null %} 
                                    {% set totalhitscolWeb = totalhitscolWeb + devicesByActions.exhibitorssearchWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorssearchWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.exhibitorssearchTotem.total +  devicesByActions.exhibitorssearchWeb.total }}</td>
                            </tr> #}

                             <tr>
                                <td class="col-4"><b>PLAN</b></td>
                                <td class="col-5">origin : maps</td>
                                {% if devicesByOrigin.mapsTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByOrigin.mapsTotem.total %}
                                    <td class="col-1">{{ devicesByOrigin.mapsTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByOrigin.mapsWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByOrigin.mapsWeb.total %}
                                    <td class="col-1">{{ devicesByOrigin.mapsWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByOrigin.mapsTotem.total +  devicesByOrigin.mapsWeb.total }}</td>
                            </tr>

                       
                            <tr>
                                <td class="col-4">Plan clic sur un stand</td>
                                <td class="col-5">action : maps-click-stand</td>
                                {% if devicesByActions.mapsclicstandTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.mapsclicstandTotem.total %}
                                    <td class="col-1">{{ devicesByActions.mapsclicstandTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.mapsclicstandWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.mapsclicstandWeb.total %}
                                    <td class="col-1">{{ devicesByActions.mapsclicstandWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.mapsclicstandTotem.total +  devicesByActions.mapsclicstandWeb.total }}</td>
                            </tr>

                            <tr>
                                <td class="col-4">Ouverture popup exposants</td>
                                <td class="col-5">action : maps-open-sidepopup</td>
                                {% if devicesByActions.mapsopensidepopupTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.mapsopensidepopupTotem.total %}
                                    <td class="col-1">{{ devicesByActions.mapsopensidepopupTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.mapsopensidepopupWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.mapsopensidepopupWeb.total %}
                                    <td class="col-1">{{ devicesByActions.mapsopensidepopupWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.mapsopensidepopupTotem.total +  devicesByActions.mapsopensidepopupWeb.total }}</td>
                            </tr>


                            <tr>
                                <td class="col-4">Exposants search</td>
                                <td class="col-5">actions :  exhibitors-open-search, exhibitors-send-search, exhibitors-reset-search</td>
                                {% if devicesByActions.exhibitorssearchTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.exhibitorssearchTotem.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorssearchTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorssearchWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.exhibitorssearchWeb.total %}
                                    <td class="col-1">{{ devicesByActions.exhibitorssearchWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">{{ devicesByActions.exhibitorssearchTotem.total +  devicesByActions.exhibitorssearchWeb.total }}</td>
                            </tr>

                            <tr>
                                <td class="col-4">Speakers search</td>
                                <td class="col-5">action :  speakers-send-search</td>
                                {% if devicesByActions.speakerssearchTotem is not null %} 
                                    {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.speakerssearchTotem.total %}
                                    <td class="col-1">{{ devicesByActions.speakerssearchTotem.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                {% if devicesByActions.exhibitorssearchWeb is not null %} 
                                    {% set  totalhitscolWeb  = totalhitscolWeb + devicesByActions.speakerssearchWeb.total %}
                                    <td class="col-1">{{ devicesByActions.speakerssearchWeb.total }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %}                               
                                <td class="col-1">{{ devicesByActions.speakerssearchTotem.total +  devicesByActions.speakerssearchWeb.total }}</td>
                            </tr>

                            <tr>
                                <td class="col-4">Flash Qrcode</td>
                                <td class="col-5">action :  urlAppSalon</td>
                                {% if qrCodes is not null %} 
                                    {# {% set  totalhitscolTotem  =  totalhitscolTotem  + devicesByActions.speakerssearchTotem.total %} #}
                                    <td class="col-1">{{ qrCodes }}</td>
                                {% else %} 
                                    <td class="col-1">0</td>
                                {% endif %} 
                                
                                <td class="col-1">0</td>
                                                               
                                <td class="col-1">{{ qrCodes }}</td>
                            </tr>


                        </tbody>

                    </table>
            </div>
            
        </div>


         {#  Consultation par jours #}
        <div class="tab-pane fade" id="jours-pane" role="tabpanel" tabindex="0">
            {# <div class="h3 mt-5">Consultation par jours</div>     #}

            <div class="row mt-5 border d-flex">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Journée</th>
                            <th scope="col">Nombre de hits</th>
                            <th scope="col">Visiteurs uniques flashés</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        {% for key, devicesByDay in devicesByDays %}
                            <tr>
                                <td>{{ devicesByDay.date }}</td>
                                <td>{{ devicesByDay.total_hits }}</td>
                                <td>{{ devicesByDay.total_badges }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {#  Consultation par heures #}
        <div class="tab-pane fade" id="heures-pane" role="tabpanel" tabindex="0">
            {# <div class="h3 mt-2">Consultation par heures</div>  #}
            <select class="form-select w-25 mt-5" aria-label="Default select example" id="dates">
                    <option selected disabled>Choisir une date</option>
                        {% for devicesByDay in devicesByDays %}	
                            <option value="{{ loop.index0 }}">{{ devicesByDay.date }}</option>
                        {% endfor %}
            </select>
            <div>
                <div id="charts" data-charts="{{ devicesByHours }}"></div>
                <canvas id="myChart" style="max-height : 65vh;"> </canvas>
            </div> 
        </div>

         {#  Consultation par exposants #}
        <div class="tab-pane fade" id="exposants-pane" role="tabpanel" tabindex="0">
            {# <div class="h3 mt-5">Consultation par exposants</div> #}
            <div class="mt-4 fw-bold h6">Liste des exposants pour les Totem et WEB</div>
            
            <div class="row mt-4 border d-flex">
                    <table id="table-exposant" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Nom de l'exposants</th>
                                <th scope="col">Nombre de hits</th>
                                <th scope="col">Visiteurs uniques flashés</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set totalhitsexposants = 0 %}
                            {% set totalhitsbadges = 0 %}

                            {% for key, exposant in exposantslist %}

                                <tr>
                                    <td>{{ exposant.name }}</td>
                                    <td>{{ exposant.total }}</td>
                                    <td>{{ exposant.total_badges }}</td>
                                </tr>

                                {% set totalhitsexposants = totalhitsexposants +  exposant.total %}
                                {% set totalhitsbadges = totalhitsbadges +  exposant.total_badges %}

                            {% endfor %}

                            <tr class="fw-bold h6">
                                <td>Total</td>
                                <td>{{ totalhitsexposants}}</td>
                                <td>{{ totalhitsbadges }}</td>
                            </tr> 
                        </tbody>

                    </table>


                {# pagination #}
                <div class="d-flex justify-content-between h6">
                    <div class="mt-1">{{ exposantslist | length }} exposants trouvés</div>
                    <div>
                         <select class="form-select h7" id="itemperpage-exposant">
                            <option>10</option> 
                            <option>20</option>
                            <option>50</option> 
                            <option>100</option> 
                        </select>
                    </div>
                    <div>
                        <nav>
                            <ul id="pagination-exposant" class="pagination">
                            </ul>
                        </nav>
                    </div>
                </div> 

                    {# <div class="navigation">
                        {{ knp_pagination_render(exposantslist) }}
                    </div> #}
            </div>
        </div>

          {#  Consultation par conferences #}
        <div class="tab-pane fade" id="conferences-pane" role="tabpanel" tabindex="0">
            {# <div class="h3 mt-5">Consultation par conferences</div> #}
            <div class="mt-4 fw-bold h6">Liste des conférences pour les Totem et WEB</div>
            <div class="row mt-4 border d-flex">
                    <table id="table-conference" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Nom de la conférence</th>
                                <th scope="col">Nombre de hits</th>
                                <th scope="col">Visiteurs uniques flashés</th>
                                
                            </tr>
                        </thead>
                        <tbody>

                            {% set totalhitsconferences = 0 %}
                            {% set totalhitsbadges = 0 %}

                            {% for key,conference in conferenceslist %}

                                <tr>
                                    <td>{{ conference.name }}</td>
                                    <td>{{ conference.total_hits }}</td>
                                    <td>{{ conference.total_badges }}</td>
                                </tr>

                                {% set totalhitsconferences = totalhitsconferences +  conference.total_hits %}
                                {% set totalhitsbadges = totalhitsbadges +  conference.total_badges %}

                            {% endfor %}
                            <tr class="fw-bold h6">
                                <td>Total</td>
                                <td>{{ totalhitsconferences }}</td>
                                <td>{{ totalhitsbadges }}</td>
                            </tr> 
                        </tbody>

                    </table>

                    {# pagination #}
                    <div class="d-flex justify-content-between h6">
                        <div class="mt-1">{{ conferenceslist | length }} conferences trouvés</div>
                        <div>
                            <select class="form-select h7" id="itemperpage-conference">
                                <option>10</option> 
                                <option>20</option>
                                <option>50</option> 
                                <option>100</option> 
                            </select>
                        </div>
                        <div>
                            <nav>
                                <ul id="pagination-conference" class="pagination">
                                </ul>
                            </nav>
                        </div>
                    </div> 
                    {# <div class="navigation">
                        {{ knp_pagination_render(conferenceslist) }}
                    </div> #}
            </div>
        </div>

        {# Visiteurs #}         

        <div class="tab-pane fade" id="visiteurs-pane" role="tabpanel" tabindex="0">
              <div class="row mt-5 border d-flex">
                    <table id="table-conference" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Libellé</th>
                                <th scope="col">Total</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>Nombre total de visiteurs</td>
                                <td>{{ visiteurs.total_badges }}</td>
                            </tr>
                            <tr>
                                <td>Nombre total de visites</td>
                                <td>{{ visiteurs.nb_visite }}</td>
                            </tr>
                            <tr>
                                <td>Durée totale des visites</td>
                                <td> {{ visiteurs.duree_total_visite }} </td>
                            </tr>

                            <tr>
                                <td>Durée moyenne d'une visite</td>
                                <td> {{ visiteurs.duree_moy_visite }} </td>
                            </tr>
                            <tr>
                                <td>Moyenne nombre de clic par visite</td>
                                <td>{{ visiteurs.nb_click_moyen }} </td>
                            </tr>

                            <tr>
                                <td>TOP 10 des conférences les plus consultées</td>
                                {% set conferenceStr = "" %}
                                {% for key,conference in conferenceslist|slice(0, 10)  %}
                                        {% set conferenceStr = conferenceStr ~ "\n" ~ conference.name %}
                                {% endfor %}
                                <td>{{ conferenceStr|nl2br }} </td>
                            </tr>

                            <tr>
                                <td>TOP 10 des exposants les plus consultées</td>
                                {% set exposantStr = "" %}
                                {% for key,exposant in exposantslist|slice(0, 10)  %}
                                        {% set exposantStr = exposantStr ~ "\n" ~ exposant.name %}
                                {% endfor %}
                                <td>{{ exposantStr|nl2br }} </td>
                            </tr>
                            

                        </tbody>
                    </table>
             </div> 
        </div> 
    
    </div>
     
</div>
{% endblock %}