{# @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="{{ asset('assets/js/stats/index.js')}}"></script> 

{% endblock body_javascript %}

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

{% endblock %}


{% block main %}
				
    
<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" 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>
	</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>Chart : </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="h3 mt-5">Consultation par totem</div> #}
            
            <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">Nombre de hits</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                    
                        {% for device in deviceslist %}

                            <tr>
                                <td>{{ device[0].deviceid }}</td>
                                <td>{{ device.total }}</td>
                            </tr>

                        {% endfor %}
                        <tr>
                            <td>Total de hits</td>
                            <td>{{ totalhits }}</td>
                        </tr> 
                    </tbody>

                </table>

                {# pagination #}
                <div class="d-flex justify-content-between h6">
                    <div class="mt-1">{{ deviceslist | length }} devices trouvés</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>
                                <th scope="col">Statistique par rubriques</th>
                                <th scope="col">Nombre de hits</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            
                                <tr>
                                    <td>Conférences</td>
                                    {% if devicesByOrigin.conferences is not null %} 
                                        <td>{{ devicesByOrigin.conferences.total }}</td>
                                    {% else %} 
                                        <td>0</td>
                                    {% endif %} 
                                </tr>
                                <tr>
                                    <td>En cours</td>
                                    {% if devicesByOrigin.encours is not null %} 
                                        <td>{{ devicesByOrigin.encours.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                    {% endif %} 
                                </tr>
                                </tr>
                                <tr>
                                    <td>Exposant</td>
                                    {% if devicesByOrigin.exhibitors is not null %} 
                                        <td>{{ devicesByOrigin.exhibitors.total }}</td>
                                    {% else %} 
                                        <td>0</td>
                                    {% endif %} 
                                </tr>
                                <tr>
                                    <td>Plan</td>
                                    {% if devicesByOrigin.map is not null %} 
                                        <td>{{ devicesByOrigin.map.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                    {% endif %} 
                                </tr>
                                <tr>
                                    <td>Plan clik exposants</td>
                                    {% if devicesByActions.mapsclicstand is not null %} 
                                        <td>{{ devicesByActions.mapsclicstand.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                    {% endif %} 
                                </tr>
                                <tr>
                                    <td>Conférences search</td>
                                    {% if devicesByActions.conferencessearch is not null %} 
                                      <td>{{ devicesByActions.conferencessearch.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                    {% endif %}
                                </tr>
                                <tr>
                                    <td>Exposants search</td>
                                      {% if devicesByActions.exhibitorssearch is not null %} 
                                        <td>{{ devicesByActions.exhibitorssearch.total }}</td>
                                      {% else %} 
                                        <td>0</td>
                                      {% endif %}
                                </tr>
                                <tr>
                                    <td>Conférences to plan</td>
                                     {% if devicesByActions.conferencesclicviewmap is not null %} 
                                        <td>{{ devicesByActions.conferencesclicviewmap.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                     {% endif %}
                                </tr>
                                <tr>
                                    <td>click-filter</td>
                                     {% if devicesByActions.clickfilter is not null %} 
                                        <td>{{ devicesByActions.clickfilter.total }}</td>
                                       {% else %} 
                                        <td>0</td>
                                     {% endif %}
                                </tr>
                                <tr>
                                    <td>exhibitors-clic-view-exhibitor-map</td>
                                     {% if devicesByActions.exhibitorsclicviewexhibitormap is not null %} 
                                        <td>{{ devicesByActions.exhibitorsclicviewexhibitormap.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                     {% endif %}
                                </tr>
                                <tr>
                                    <td>link-to-conferences</td>
                                      {% if devicesByActions.linktoconferences is not null %} 
                                        <td>{{ devicesByActions.linktoconferences.total }}</td>
                                      {% else %} 
                                        <td>0</td>
                                     {% endif %}
                                </tr>
                                <tr>
                                    <td>link-to-encours</td>
                                     {% if devicesByActions.linktoencours is not null %} 
                                        <td>{{ devicesByActions.linktoencours.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                     {% endif %}
                                </tr>
                                <tr>
                                    <td>link-to-exhibitors</td>
                                      {% if devicesByActions.linktoexhibitors is not null %} 
                                        <td>{{ devicesByActions.linktoexhibitors.total }}</td>
                                       {% else %} 
                                        <td>0</td>
                                      {% endif %}

                                </tr>
                                <tr>
                                    <td>link-to-maps</td>
                                     {% if devicesByActions.linktomaps is not null %} 
                                        <td>{{ devicesByActions.linktomaps.total }}</td>
                                      {% else %} 
                                        <td>0</td>
                                      {% endif %}
                                </tr>
                                <tr>
                                    <td>open-popup-conferences</td>
                                     {% if devicesByActions.openpopupconferences is not null %} 
                                        <td>{{ devicesByActions.openpopupconferences.total }}</td>
                                     {% else %} 
                                        <td>0</td>
                                      {% endif %}
                                </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>
                            
                        </tr>
                    </thead>
                    <tbody>
                        {% for devicesByDay in devicesByDays %}
                            <tr>
                                <td>{{ devicesByDay.date }}</td>
                                <td>{{ devicesByDay.total }}</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="row mt-5 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>
                                
                            </tr>
                        </thead>
                        <tbody>
                            {% for exposant in exposantslist %}

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

                            {% endfor %}
                            <tr>
                                <td>Total de hits</td>
                                <td>{{ totalhitsexposants }}</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="row mt-5 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>
                                
                            </tr>
                        </thead>
                        <tbody>
                            {% for conference in conferenceslist %}

                                <tr>
                                    <td>{{ conference.name }}</td>
                                    <td>{{ conference.total }}</td>
                                </tr>

                            {% endfor %}
                            <tr>
                                <td>Total de hits</td>
                                <td>{{ totalhitsconferences }}</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>
    
    </div>



    

   

    

     
</div>
{% endblock %}