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

{% block title %}Dashboard{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/pages/dashboard-analytics.min.css">
{% endblock%}

{% block body %}
{% include 'include/menu.html.twig' %}

    <!-- BEGIN: Content-->
    <div class="container-fluid height-75-per">
        <div class="row h-100 w-100 align-items-center">
            <div class="container col-8 h-100 mt-10 mb-10" style="display: contents">
                <div class="row height-5-per  width-80-per  ml-auto mr-auto"></div>
                <div class="row height-60-per width-80-per ml-auto mr-auto">
                    <div class="col-3 col-xl-3 col-lg-3 col-md-3 col-sm-12" style="background: #445a7c">
                        <div class="nav-link align-items-center height-40-per">
                            <div class="text-center nav-link align-items-center">
                                <img class="" src="{{ app.user.picture }}" alt="avatar" height="100" width="100">
                            </div>
                            <div class="text-center nav-link">
                                <p class="user-name" style="color: white; font-size: 1.5em; font-weight: bold">{{ app.user.username }} {{ app.user.lastname }}</p>
                            </div>
                        </div>
                        <div class="nav-link align-items-center height-60-per d-flex">
                            <div class="border-data align-items-center">
                            {% set count = 0 %}
                                <div class="ml-1"> Inscription le : </div>
                                <div class="ml-1"> Totalité du site parcouru : {{ app.user.pourcentage }}%</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-12">

                    </div>
                    <div class="tab-content col-8 col-xl-8 col-lg-8 col-md-8 col-sm-12 align-items-center d-flex" style="background: #445a7c">
                        <div class="tab-pane active w-100 h-100  text-center m-auto" id="trophy">
                            <div class="w-100 height-60-per">
                                <div class="cup-fiche text-center w-100">{{ usersTrophy }}</div>
                            </div>
                            <div class="w-100 height-20-per">
                                <img src="/img/rise_cup{{ usersTrophy }}.png" alt="" style="height: 7vh; width: 10vw" />
                            </div>
                            <div class="w-100 cup-text height-10-per mt-1 text-white">
                                Trophée(s) obtenu(s)
                            </div>
                        </div>
                        <div class="tab-pane w-100 h-100  text-center m-auto" id="fiche">
                            <div class="w-100 height-60-per">
                                <div class="cup-fiche text-center w-100">{{ fichesCompleted }}</div>
                            </div>
                            <div class="w-100 cup-text height-10-per mt-1 text-white">
                                Fiches animées
                            </div>
                        </div>
                        <div class="tab-pane w-100 h-100  text-center m-auto" id="table">
                            <div class="card h-100 bg-transparent" id="carousel-caption">
                                <div class="card-content h-100 bg-black">
                                    <div class="card-body w-100 h-100 p-0 m-0">
                                        <div id="carousel-example-caption" class="carousel slide h-100 w-100 bg-white" data-ride="carousel">
                                            <ol class="carousel-indicators">
                                                {% for key, category in categories %}
                                                    {% if key == 0 %}
                                                        <li data-target="#carousel-example-caption" data-slide-to="{{ key }}" class="active"></li>
                                                    {% else %}
                                                        <li data-target="#carousel-example-caption" data-slide-to="{{ key }}" class=""></li>
                                                    {% endif %}
                                                {% endfor %}
                                            </ol>
                                            <div class="carousel-inner w-100 h-100 rounded-0" role="listbox">
                                                {% for key, category in categories %}
                                                    {% if key == 0 %}
                                                        <div class="carousel-item active w-100 h-100" data-interval="30000" style="background: #445a7c" >
                                                            <div class="card-img-overlay bg-transparent">
                                                                <div class="carousel-caption align-items-center h-100" style="display: grid">
                                                                    <div class="card-header nav-link height-15-per">
                                                                        <h4 class="card-title text-white">{{ category.name }}</h4>
                                                                    </div>
                                                                    <div class="row" style="border-top: #FFFFFF solid; margin: 20px;"></div>
                                                                    {% for subCategory in category.subCategories %}
                                                                        <div class="row">
                                                                            <div class="col-lg-2"></div>
                                                                            <div class="col-lg-6 text-left" style="font-size: 17px;margin-left: 20px">{{ subCategory.name }}</div>
                                                                            <div class="col-lg-3 text-left" style="font-size: 17px;">0/0</div>
                                                                        </div>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    {% else %}
                                                        <div class="carousel-item w-100 h-100" data-interval="30000" style="background: #445a7c" >
                                                            <div class="card-img-overlay bg-transparent">
                                                                <div class="carousel-caption align-items-center h-100" style="display: grid">
                                                                    <div class="card-header nav-link height-15-per">
                                                                        <h4 class="card-title text-white">{{ category.name }}</h4>
                                                                    </div>
                                                                    <div class="row" style="border-top: #FFFFFF solid; margin: 20px;"></div>
                                                                    {% for subCategory in category.subCategories %}
                                                                        <div class="row">
                                                                            <div class="col-lg-2"></div>
                                                                            <div class="col-lg-6 text-left" style="font-size: 17px;margin-left: 20px">{{ subCategory.name }}</div>
                                                                            <div class="col-lg-3 text-left" style="font-size: 17px;">0/0</div>
                                                                        </div>
                                                                    {% endfor %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    {% endif %}

                                                {% endfor %}
                                            </div>
                                            <a class="carousel-control-prev" style="background: #445a7c" href="#carousel-example-caption" role="button" data-slide="prev">
                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                            <a class="carousel-control-next" style="background: #445a7c" href="#carousel-example-caption" role="button" data-slide="next">
                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane w-100 height-70-per  text-center " id="manager">
                            <div class="h-100">
                                <div class="row h-100">
                                    <div class="col h-100">
                                        <div class="card h-100 text-center">
                                            <div class="card-content m-auto">
                                                <div class="card-body py-1">
                                                    <div class="font-weight-bold h5 mb-50">360 Manager</div>
                                                    <div class="mx-auto mb-50">
                                                        <img style="filter: grayscale(100);" alt="card" src="/img/star.png" width="50" height="50">
                                                    </div>
                                                    {% if form is not null %}
                                                        <a href="{{ path('dashboard_360Manager_uid', {uid : form.uid }) }}" class="btn btn-primary white">Voir</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col h-100">
                                        <div class="card text-center h-100">
                                            <div class="card-content m-auto">
                                                <div class="card-body py-1">
                                                    <div class="font-weight-bold h5 mb-50">360 Manager</div>
                                                    <div class="mx-auto mb-50">
                                                        <img alt="card" src="/img/star.png" width="50" height="50">
                                                    </div>
                                                    {% if form is not null %}
                                                        <a href="{{ path('dashboard_360Manager_uid', {uid : form.uid }) }}" class="btn btn-primary white">Voir</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col h-100">
                                        <div class="card h-100 text-center">
                                            <div class="card-content m-auto">
                                                <div class="card-body py-1">
                                                    <div class="font-weight-bold h5 mb-50">360 Manager</div>
                                                    <div class="mx-auto mb-50">
                                                        <img alt="card" src="/img/star.png" width="50" height="50">
                                                        <img alt="card" src="/img/star.png" width="50" height="50">
                                                    </div>
                                                    {% if form is not null %}
                                                        <a href="{{ path('dashboard_360Manager_uid', {uid : form.uid }) }}" class="btn btn-primary white">Voir</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col h-100">
                                        <div class="card h-100 text-center">
                                            <div class="card-content m-auto">
                                                <div class="card-body py-1">
                                                    <div class="font-weight-bold h5 mb-50">360 Manager</div>
                                                    <div class="mx-auto mb-50">
                                                        <img alt="card" src="/img/star.png" width="50" height="50">
                                                        <img alt="card" src="/img/star.png" width="50" height="50">
                                                        <img alt="card" src="/img/star.png" width="50" height="50">
                                                    </div>
                                                    {% if form is not null %}
                                                        <a href="{{ path('dashboard_360Manager_uid', {uid : form.uid }) }}" class="btn btn-primary white">Voir</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="row height-15-per  width-80-per  ml-auto mr-auto">
                    <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 w-100 p-0 m-0" style="background: #445a7c">
                        <div class="container-fluid w-100 h-100 p-0 m-0">
                            <div class="row w-100 h-100 p-0 m-0 nav nav-pills">
                                    <a href="#trophy"  data-toggle="tab" class="nav-item active col-3 col-xl-3 col-lg-3 col-md-3 col-sm-12 border-right  bg-transparent border-0 h-100 w-auto align-items-center d-flex justify-content-center m-auto">
                                        <img src="/img/statistique-cup.png" alt="cup" height="80" width="80"/>
                                    </a>
                                    <a href="#fiche"  data-toggle="tab" class="nav-item col-3 col-xl-3 col-lg-3 col-md-3 col-sm-12 border-right bg-transparent border-0 h-100 w-auto align-items-center d-flex justify-content-center m-auto">
                                        <img src="/img/statistique-fiche.png" alt="cup" height="80" width="80"/>
                                    </a>
                                    <a href="#table" data-toggle="tab" class="nav-item col-3 col-xl-3 col-lg-3 col-md-3 col-sm-12 border-right bg-transparent border-0 h-100 w-auto align-items-center d-flex justify-content-center  m-auto">
                                        <img src="/img/statistique-table.png" alt="cup" height="80" width="80"/>
                                    </a>
                                    <a href="#manager" data-toggle="tab" class="nav-item col-3 col-xl-3 col-lg-3 col-md-3 col-sm-12 border-right  bg-transparent border-0 h-100 w-auto align-items-center d-flex justify-content-center m-auto">
                                        <img src="/img/statistique-360.png" alt="cup" height="60" width="100"/>
                                    </a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row height-5-per  width-80-per  ml-auto mr-auto">
                    <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 w-100 p-0 m-0">
                        <div class="w-100 h-100 pl-0 pr-0 ml-0 mr-0">
                            <div class="row w-100 h-100 p-0 m-0 nav nav-pills">
                                <a href="#trophy"  data-toggle="tab" class="nav-item active col-3 col-xl-3 col-lg-3 col-md-3 col-sm-3 text-center bold p-0 m-0">
                                    Trophée(s) obtenu(s)
                                </a>
                                <a href="#fiche"  data-toggle="tab" class="nav-item col-3 col-xl-3 col-lg-3 col-md-3 col-sm-3 text-center font-weight-bold p-0 m-0">
                                    Fiches animées
                                </a>
                                <a href="#table" data-toggle="tab" class="nav-item col-3 col-xl-3 col-lg-3 col-md-3 col-sm-3 text-center font-weight-bold p-0 m-0">
                                    Tableaux
                                </a>
                                <a href="#manager" data-toggle="tab" class="nav-item col-3 col-xl-3 col-lg-3 col-md-3 col-sm-3 text-center font-weight-bold p-0 m-0">
                                    360 Manager
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('.nav-pills a').click(function (e) {
                var href = $(this).attr('href');
                $('.nav-pills a').removeClass('active');
                $('.nav-pills  a[href="' + href + '"]').closest('a').addClass('active');
                $('.tab-pane').removeClass('active');
                $('.tab-pane'+ href).addClass('active');
            })
        </script>
    </div>

{% endblock %}

{% block javascripts %}


{% endblock %}