{% 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" style="background: url('/img/background_dashboard.jpg') no-repeat right; background-size: 80% 100%; background-color: white !important;">
        <div class="content-body ml-10 " style="display: contents">
            <!-- Dashboard Analytics Start -->
            <div class="row align-items-center h-100">
                <!-- Website Analytics Starts-->
                <div class="col-md-4 col-sm-12 h-80" style="margin-left: 3%">
                    <div class="card box-shadow-0 m-0">
                        <div class="card-header d-flex justify-content-between align-items-center display-3">
                            <h2 style="color: #bebebe;  font-size: 2.0vw;">Mes applications</h2>
                        </div>
                        <div class="card-content">
                            <div class="card-body pb-0 font-size-large">

                                <div id="step7" class="border-bottom w-75 position-relative">
                                    <img alt="icone_agenda" height="70" src="/img/icone_agenda.png">
                                    {% if notification != 0 %}
                                        <div class="badge badge-danger rounded-circle position-absolute zindex-1 " style="padding: 8px; height: 25px; width: 25px; left: 0;">{{ notification }}</div>
                                    {% endif %}
                                    <a class="h5" href="{{ path('dashboard_planning') }}">Mon agenda</a>
                                </div>
                                <div id="step8" class="border-bottom w-75">
                                    <img alt="icone_statistiques" height="70" src="/img/icone_statistiques.png">
                                    <a  class="h5" href="{{ path('dashboard_statistics') }}">Mes statistiques</a>
                                </div>
                                <div id="step9" class="border-bottom w-75">
                                    <img alt="icone_management" height="70" src="/img/icone_management.png">
                                    <a  class="h5" href="{{ path('dashboard_management') }}">Managements</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card box-shadow-0 m-0">
                        <div class="card-header d-flex justify-content-between align-items-center display-3">
                            <h2 style="color: #bebebe; font-size: 2.0vw;">Applications suggérées</h2>
                        </div>
                        <div class="card-content">
                            <div class="card-body pb-0 font-size-large display-3">
                                <div id="step10" class="border-bottom w-75">
                                    <img alt="icone_scenarios" height="70" src="/img/icone_scenarios.png">
                                    <a  class="h5" href="{{ path('dashboard_scenario') }}">Scénarios</a>
                                </div>
                                <div id="step11" class="border-bottom w-75">
                                    <img alt="icone_methode_de_vente" height="70" src="/img/icone_methode_de_vente.png">
                                    <a  class="h5" href="{{ path('dashboard_vente') }}">Méthode de vente</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class=" col-12 col-lg-5 item-progress3" id="step5">
                    <div class="ldBar label-center selector" data-preset="circle"   data-stroke="#1f3066" data-value="0" style="position:relative; background: url('/img/dashboard-loading-bg.png') no-repeat center; background-size: 85% ;width:80%;height:90%;"></div>
                    <!--<span class="navprecsix 270" id="navprecsix">0%</span>-->
                    <script>
                        $(document).ready(function() {
                            $(function() {
                                var bar = new ldBar(".selector");
                                bar.set({{ app.user.pourcentage }});
                            });
                        });
                    </script>
                </div>
            </div>
            <!-- Dashboard Analytics end -->
        </div>
    </div>

{% endblock %}

{% block javascripts %}


{% endblock %}