{% extends 'base.html.twig' %}

{% block title %} Analytics | KPI {% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/lib/select2/select2.min.css') }}">
    {% include('comparison/type3/_link.html.twig') %}
{% endblock %}

{% block body %}

    {% include('menu/topNav.html.twig') %}
    {% include('menu/sideNav.html.twig') %}

    <div id="dash-content" class="w-full h-content content-start z-1">

        {% include('menu/tabNav.html.twig') %}

        <div class="w-full h-content">

            <div class="flex flex-wrap mx-8 dark:border-gray-700">
                <ul class="tab-links flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
                    <li class="mr-2">
                        <a href="#tabSeries" class="inline-flex items-center justify-center p-3 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group" aria-current="page">
                            <svg class="active w-4 h-4 mr-2 text-gray-400 group-hover:text-gray-500" aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
                                <path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/>
                            </svg>Séries
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#tabKpi" class="inline-flex items-center justify-center p-3 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 group">
                            <svg class="w-4 h-4 mr-2 text-gray-400 group-hover:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
                                <path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/>
                            </svg>Graphique
                        </a>
                    </li>
                    <li class="mr-2">
                        <a href="#tabTable" class="inline-flex items-center justify-center p-3 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300group">
                            <svg class="w-4 h-4 mr-2 text-gray-400 group-hover:text-gray-500" aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
                                <path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 0v64h64V96H64zm384 0H192v64H448V96zM64 224v64h64V224H64zm384 0H192v64H448V224zM64 352v64h64V352H64zm384 0H192v64H448V352z"/>
                            </svg>Tableau
                        </a>
                    </li>
                </ul>
                <div class="px-2">
                    <div class="w-full">
                        <button id="addSeries" data-tooltip-target="tooltip-addSeries"
                                class="modal-open group inline-flex items-center gap-2 px-4 h-10 rounded-md bg-blue-600 hover:bg-blue-700 transition shadow-sm">
                            <svg class="m-1 ml-2 inline-block text-white align-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512" stroke="currentColor">
                                <style>svg{fill:#ffffff}</style>
                                <path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/>
                            </svg>
                            <span class="text-white my-3 mr-4 p-2 font-bold">Ajouter une série</span>
                        </button>
                        <div id="tooltip-addSeries" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
                            Ajouter une nouvelle série
                            <div class="tooltip-arrow" data-popper-arrow></div>
                        </div>
                    </div>
                </div>
                <div class="px-2">
                    <div class="w-full">
                        <button id="btnResetAll" data-tooltip-target="tooltip-resetAll"
                                class="modal-open group inline-flex items-center gap-2 px-4 h-10 rounded-md bg-blue-600 hover:bg-blue-700 transition shadow-sm">
                            <svg class="m-2 inline-block text-white align-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512" stroke="currentColor">
                                <path d="M256 96c38.4 0 73.7 13.5 101.3 36.1l-32.6 32.6c-4.6 4.6-5.9 11.5-3.5 17.4s8.3 9.9 14.8 9.9H448c8.8 0 16-7.2 16-16V64c0-6.5-3.9-12.3-9.9-14.8s-12.9-1.1-17.4 3.5l-34 34C363.4 52.6 312.1 32 256 32c-10.9 0-21.5 .8-32 2.3V99.2c10.3-2.1 21-3.2 32-3.2zM132.1 154.7l32.6 32.6c4.6 4.6 11.5 5.9 17.4 3.5s9.9-8.3 9.9-14.8V64c0-8.8-7.2-16-16-16H64c-6.5 0-12.3 3.9-14.8 9.9s-1.1 12.9 3.5 17.4l34 34C52.6 148.6 32 199.9 32 256c0 10.9 .8 21.5 2.3 32H99.2c-2.1-10.3-3.2-21-3.2-32c0-38.4 13.5-73.7 36.1-101.3zM477.7 224H412.8c2.1 10.3 3.2 21 3.2 32c0 38.4-13.5 73.7-36.1 101.3l-32.6-32.6c-4.6-4.6-11.5-5.9-17.4-3.5s-9.9 8.3-9.9 14.8V448c0 8.8 7.2 16 16 16H448c6.5 0 12.3-3.9 14.8-9.9s1.1-12.9-3.5-17.4l-34-34C459.4 363.4 480 312.1 480 256c0-10.9-.8-21.5-2.3-32zM256 416c-38.4 0-73.7-13.5-101.3-36.1l32.6-32.6c4.6-4.6 5.9-11.5 3.5-17.4s-8.3-9.9-14.8-9.9H64c-8.8 0-16 7.2-16 16l0 112c0 6.5 3.9 12.3 9.9 14.8s12.9 1.1 17.4-3.5l34-34C148.6 459.4 199.9 480 256 480c10.9 0 21.5-.8 32-2.3V412.8c-10.3 2.1-21 3.2-32 3.2z"/>
                            </svg>
                            <span class="text-white my-3 mr-4 p-2 font-bold">Réinitialiser</span>
                        </button>
                        <div id="tooltip-resetAll" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
                            Réinitialise tous les filtres
                            <div class="tooltip-arrow" data-popper-arrow></div>
                        </div>
                    </div>
                </div>
                <div class="px-2">
                    <div class="w-full">
                        <button id="btnDateAll"
                                data-tooltip-target="tooltip-DateAll"
                                class="modal-open group inline-flex items-center gap-2 px-4 h-10 rounded-md bg-blue-600 hover:bg-blue-700 transition shadow-sm">
                            <svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 448 512" stroke="currentColor" fill="currentColor">
                                <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192h80v56H48V192zm0 104h80v64H48V296zm128 0h96v64H176V296zm144 0h80v64H320V296zm80-48H320V192h80v56zm0 160v40c0 8.8-7.2 16-16 16H320V408h80zm-128 0v56H176V408h96zm-144 0v56H64c-8.8 0-16-7.2-16-16V408h80zM272 248H176V192h96v56z"/>
                            </svg>
                            <span class="text-white font-medium">Même date</span>
                        </button>

                        <div id="tooltip-DateAll"
                             role="tooltip"
                             class="absolute z-10 invisible px-3 py-2 text-sm font-medium text-white bg-gray-800 rounded shadow opacity-0 transition-opacity">
                            La date de la série 1 à toutes les séries
                            <div class="tooltip-arrow" data-popper-arrow></div>
                        </div>
                    </div>
                </div>
                <div class="px-4 flex hidden">
                    <div class="w-full px-2 pt-2">
                        Affichage :
                    </div>
                    <div class="w-full px-6 pt-2">
                        <label>
                            <select id="display" disabled class="form-select w-full">
                                <option value="month" selected>Mois</option>
                            </select>
                        </label>
                    </div>
                </div>

                <div class="px-2">
                    <div class="w-full">
                        <button id="btnCompare"
                                class="modal-open group justify-self-end z-30 inline-block ring-0 sm:inline-block lg:inline-block w-content h-10 rounded-lg bg-gradient-to-r from-orange-500 to-yellow-400 hover:from-orange-600 hover:to-yellow-500 shadow-md transition">
                            <svg class="m-2 inline-block text-white align-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 640 512" stroke="currentColor">
                                <path d="M384 32H512c17.7 0 32 14.3 32 32s-14.3 32-32 32H398.4c-5.2 25.8-22.9 47.1-46.4 57.3V448H512c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 128c-17.7 0-32-14.3-32-32s14.3-32 32-32H288V153.3c-23.5-10.3-41.2-31.6-46.4-57.3H128c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c14.6-19.4 37.8-32 64-32s49.4 12.6 64 32zm55.6 288H584.4L512 195.8 439.6 320zM512 416c-62.9 0-115.2-34-126-78.9c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C627.2 382 574.9 416 512 416zM126.8 195.8L54.4 320H199.3L126.8 195.8zM.9 337.1c-2.6-11 1-22.3 6.7-32.1l95.2-163.2c5-8.6 14.2-13.8 24.1-13.8s19.1 5.3 24.1 13.8l95.2 163.2c5.7 9.8 9.3 21.1 6.7 32.1C242 382 189.7 416 126.8 416S11.7 382 .9 337.1z"/>
                            </svg>
                            <span class="text-white my-3 mr-4 p-2 font-bold">Comparer</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="w-full px-8 py-2">
                <div id="tabSeries" class="tab-content">
                    {% include('comparison/type3/tabSeries.html.twig') %}
                </div>

                <div id="tabKpi" class="tab-content">
                    {% include('comparison/type3/tabKpi.html.twig') %}
                </div>

                <div id="tabTable" class="tab-content">
                    {% include('comparison/type3/tabTable.html.twig') %}
                </div>
            </div>

        </div>

    </div>
    {% include('extra/loadingScreen.html.twig') %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% include('comparison/type3/_script.html.twig') %}
{% endblock %}