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

{% block title %} {% trans %}COSAP - Dashboard CRM{% endtrans %} {% endblock %}

{% block body %}
    {{ parent() }}

    <style type="text/css">

        .table-scroll {
            max-height: 340px;
            overflow-y: scroll;
        }

        .text_element{
            box-shadow: 0px 0px 10px #fff;
            -webkit-animation-name: clignote_text;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
        }
        
        @-webkit-keyframes clignote_text {
            0% {box-shadow: 0px 0px 10px #8ecbdd;}
            50% {box-shadow: 0px 0px 0px #fff;}
            100% {box-shadow: 0px 0px 10px #fff;}
        }

        .element_content{
            box-shadow: 0px 0px 10px #8ecbdd;
            -webkit-animation-name: clignote_action;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
        }
        
        @-webkit-keyframes clignote_action {
            0% {box-shadow: 0px 0px 10px #8ecbdd;}
            50% {box-shadow: 0px 0px 0px #8ecbdd;}
            100% {box-shadow: 0px 0px 10px #0c4a6e;}
        }

        #btn-choix {
            border-radius: 6px;
            height: 30px;
            width: 150px;
        }

        .nav-choix li.nav-item {
            background: #0c4a6e;  
        }

        .nav-choix li a.nav-link.active { 
            background: #8ecbdd; 
            height: 100%;
            width: 100%
        }

        .nav-choix li.active { 
            box-shadow: 0px 0px 10px #8ecbdd;
            height: 100%;
            width: 100%;
            -webkit-animation-name: clignote_choix; 
            -webkit-animation-duration: 2s; 
            -webkit-animation-iteration-count: infinite; 
        }

        @-webkit-keyframes clignote_choix {
            0% {box-shadow: 0px 0px 10px #8ecbdd;}
            50% {box-shadow: 0px 0px 0px #8ecbdd;}
            100% {box-shadow: 0px 0px 10px #0c4a6e;}
        }

        .nav-choix li.nav-item a.nav-link{
            color: #fff;
            font-size: 13px !important;
        }

    </style>

    <section class="row">
        <div class="col-12">
            <div class="card" {% if app.user and is_granted('ROLE_UTILISATEUR_COMMERCIALE') %} style="height:67px;" {% else %} style="height:60px;" {% endif %}>
                <div class="card-body">
                    <div class="bug-list-search">
                        <div class="bug-list-search-content">
                            <div class="sidebar-toggle d-block d-lg-none"><i class="ft-menu font-large-1" style="line-height:0.5"></i></div>
                            <form action="#">
                                <h6 style="font-weight: 500;">
                                    {% trans %}Dashboard CRM{% endtrans %}  

                                    {% if app.user and is_granted('ROLE_UTILISATEUR_COMMERCIALE') %}  

                                        <ul class="nav nav-choix d-inline-flex pull-right">
                                            <li class="nav-item mr-1" id="btn-choix"> <a class="btn btn-sm nav-link" id="link-show-tab1" data-toggle="tab" href="#blocs" aria-controls="blocs" role="tab" aria-selected="false" title="{% trans %}Mes statistiques{% endtrans %}">Mes statistiques</a></li>
                                            <li class="nav-item" id="btn-choix"><a class="btn btn-sm nav-link" id="link-show-tab2" data-toggle="tab" href="#list" aria-controls="list" role="tab" aria-selected="false" title="{% trans %}Statistiques total{% endtrans %}">Statistiques total</a></li>
                                        </ul>       

                                    {% else %}

                                        <span><a class="btn btn-warning btn-sm pull-right" href="{{ path('dashboard_crm_page') }}" title="{% trans %}Actualiser{% endtrans %}"><i class="fa fa-refresh"></i></a></span>
                                    
                                    {% endif %}

                                </h6>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    {% if app.user and is_granted('ROLE_UTILISATEUR_COMMERCIALE') %}

        <div class="row mine_state d-none">

            <div class="col-md-4 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="card-header border-0">
                        <h5 class="primary">Nombre de mes opportunités</h5>
                    </div>

                    <div class="card-content mt-2" {% set percent = mine_opportunity[0]['mine_percent'] %} style="text-align: center;">
                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="180" data-height="180" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#00B5B8" data-knob-icon="icon-plane">
                        <h2 class="grey darken-1 text-bold-400 mt-1">{{mine_opportunity[0]['count_mine_opportunity']}}</h2>
                        <span class="primary"><span class="fa fa-check-circle-o"></span> Opportunitiés </span>
                    </div>

                </div>
            </div>

            <div class="col-md-8 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="border_container" id="container_mine_opportunity"></div>
                </div>
            </div><!-- end classification mes opportunités par statut -->

            <div class="col-md-4 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="border_container" id="container_mine_type_opportunity"></div>
                </div>
            </div><!-- end classification mes opportunités par type d'opportunité  -->

            <div class="col-md-4 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="card-header border-0">
                        <h5 style="color: #8bc34a">Nombre de mes opportunités soumission :</h5>
                        <strong class="text-bold-400" style="color:gray;">{{ mine_opportunity[0]['mine_opportunity_soumission'] }} opportunités</Strong>
                    </div>

                    <div class="card-content mt-3" {% if mine_opportunity[0]['mine_opportunity_soumission'] > 0 %} {% set percent = ((mine_opportunity[0]['mine_opportunity_soumission_concretise'])/(mine_opportunity[0]['mine_opportunity_soumission']))*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="180" data-height="180" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#8bc34a" data-knob-icon="icon-plane">
                        <h3 class="grey darken-1 text-bold-400 mt-1">{{ mine_opportunity[0]['mine_opportunity_soumission_concretise'] }}</h3>
                        <span style="color: #8bc34a"><span class="fa fa-check-circle-o"></span> Opportunitiés soumission concrétisée </span>
                    </div>

                </div>
            </div><!-- end affichage nombre des opportunités soumission concrétisée  -->

            <div class="col-md-4 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="card-header border-0">
                        <h5 class="danger">Nombre de mes opportunités gré à gré :</h5>
                        <strong class="text-bold-400" style="color:gray;">{{ mine_opportunity[0]['mine_opportunity_gre'] }} opportunités</Strong>
                    </div>

                    <div class="card-content mt-3" {% if mine_opportunity[0]['mine_opportunity_gre'] > 0 %} {% set percent = ((mine_opportunity[0]['mine_opportunity_gre_concretise'])/(mine_opportunity[0]['mine_opportunity_gre']))*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="180" data-height="180" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#ff7588" data-knob-icon="icon-plane">
                        <h3 class="grey darken-1 text-bold-400 mt-1">{{ mine_opportunity[0]['mine_opportunity_gre_concretise'] }}</h3>
                        <span class="danger"><span class="fa fa-check-circle-o"></span> Opportunitiés gré à gré concrétisée </span>
                    </div>

                </div>
            </div><!-- end affichage nombre des opportunités gré à gré concrétisée  -->

            <div class="col-md-4 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="border_container" id="container_type_soumission_mine_opportunity"></div>
                </div>
            </div><!-- end classification mes opportunités par type de soumission  -->

            <div class="col-md-8 col-sm-12">
                <div class="card" style="height: 400px;">
                    <div class="border_container" id="container_evolution_mine_result_opportunity_per_year"></div>
                </div>
            </div><!-- end evolution les résultats de mes opportunités par année  -->

            {% if mine_opportunity[0]['mes_clients']|length %}

                <div class="col-md-12 col-sm-12">

                    <div class="card" style="height:400px;">

                        <div class="card-header border-0">
                            <h5 style="color: rgb(124,181,236);">Avancement des opportinutés - Responsable commercial</h5>
                        </div>

                        <div class="card-content">

                            <div id="audience-list-scroll" class="table-responsive m-0 p-1 table-scroll">
                                <table id="recent-orders" class="table table-hover ps-container ps-theme-default">
                                    <thead style="background-color:#D6EEFA">
                                        <tr class="border-double">
                                            <th>{% trans %}Client{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° de mes opportunités total{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° des opportunités concrétisée{% endtrans %}</th>

                                            <th style="width:300px;min-width:300px; text-align:center;">% {% trans %}Pourcentage{% endtrans %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        {% for client in mine_opportunity[0]['mes_clients']|sort((a, b) => b.percent <=> a.percent) %}

                                            <tr> 
                                                <td> 
                                                    <img src="{{ asset('uploads/logo_client/'~client.logo) }}" title="{{ client.abreviation }}" alt="logo client" style="width:40px; height:40px;"/>
                                                    <span class='ml-1' style="text-align:center;"> {{ client.abreviation }} - {{ client.pays }}</span>
                                                </td>
                                                <td style="text-align:center;">{{ client.nb_all_opportunity }}</td>
                                                <td style="text-align:center;">{{ client.nb_concrete_opportunity }}</td>
                                                <td style="text-align:center;" {% set percent = client.percent|round %}>
                                                    {{ percent }}% 

                                                    <div class="progress progress-sm mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar" style="width: {{ percent }}%;background-color: #8ecbdd"></div>
                                                    </div>
                                                </td>
                                            </tr>

                                        {% endfor %}

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

                        </div>

                    </div>

                </div><!-- end affichage mes prospections par client  -->

            {% endif %}

        </div>

    {% endif %}

    <div class="row all_state {% if app.user and is_granted('ROLE_UTILISATEUR_COMMERCIALE') %} d-none {% endif %}">

        <div class="col-12">
            <div class="card" style="minHeight:350px;">
                <div class="col-12">
                    <div class="card" style="minHeight: 330px;display:flex; align-items:center;justify-content:center;">
                        <!--<div class="card-content">-->
                            <div class="my-1 text-center full-width">
                                <div class="card-header pt-0">
                                    <h5 class="primary">Total des opportunités</h5>
                                    <h3 class="font-large-1">{{ count_all_opportunity }}</h3>
                                </div>
                                <div class="full-width row" style="display:flex; justify-content:space-around;">
                                    
                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_concretise/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#00B5B8" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_concretise}}</h3>
                                        <span class="primary"><span class="fa fa-check-circle-o"></span> Opportunitiés concrétisée </span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_forme_soumission/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#8ecbdd" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_forme_soumission}}</h3>
                                        <span style="color: #8ecbdd"><span class="fa fa-check-circle-o"></span> Opportunitiés => Soumission - Consultation </span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_soumission_ami/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#6366f1" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_soumission_ami}}</h3>
                                        <span style="color: #6366f1"><span class="fa fa-check-circle-o"></span> Opportunitiés Présélectionné </span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_non_concretise/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#FF7588" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_non_concretise}}</h3>
                                        <span class="danger"><span class="fa fa-times-circle-o"></span> Opportunitiés non concrétisée </span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_en_instance/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#8bc34a" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_en_instance}}</h3>
                                        <span style="color: #8bc34a"><span class="fa fa-spinner"></span> Opportunitiés en instance </span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_en_cours/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#4B8295" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_en_cours}}</h3>
                                        <span style="color: #4B8295"><span class="ft-refresh-ccw"></span> Opportunitiés en cours de traitement</span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_no_go/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#ea0c0c" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_suspendu}}</h3>
                                        <span style="color: #ea0c0c;"><span class="fa fa-ban"></span> Opportunitiés no Go </span>
                                    </div>

                                    <div class="card-content col-3 my-2" {% if count_all_opportunity > 0 %} {% set percent = (nb_opportunity_suspendu/count_all_opportunity)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                                        <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="130" data-height="130" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#ea0c0c" data-knob-icon="icon-plane">
                                        <h3 class="grey darken-1 text-bold-400 mt-1">{{nb_opportunity_suspendu}}</h3>
                                        <span style="color: #ea0c0c;"><span class="fa fa-ban"></span> Opportunitiés suspendues </span>
                                    </div>

                                </div>
                            </div>
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div><!-- end -->

        <div class="col-md-4 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="border_container" id="container_type_opportunity"></div>
            </div>
        </div><!-- end classification par type d'opportunité  -->

        <div class="col-md-4 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="card-header border-0">
                    <h5 class="primary">Montant d'offre totale</h5>
                </div>

                <div class="col-12 row d-flex justify-content-around pl-3 {% if nb_unity == 0 or nb_unity == 1 %} mt-5 {% else %} mt-3 {% endif %}" style="max-height: 300px !important;" >

                    {% if nb_opportunity_concretise == 0 %}                
                        <div class="col-7 bg-gradient-x-info rounded" style="text-align: center;height: 95px;">
                            <h5 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_offre_total_euro|number_format(0,'',' ') }}
                            {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U01')] }}
                            </h5>
                        </div>
                    {% endif %}
                    
                    {% if montant_offre_total_euro != 0 %}                
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-info rounded" style="text-align: center;height: 100px;">
                            <h5 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_offre_total_euro|number_format(0,'',' ') }}
                            {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U01')] }}
                            </h5>
                        </div>
                    {% endif %}

                    {% if montant_offre_total_fcfa != 0 %} 
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-primary rounded" style="text-align: center;height: 100px;">
                            <h5 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_offre_total_fcfa|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U02')] }}
                            </h5>
                        </div>
                    {% endif %}

                    {% if montant_offre_total_dollars != 0 %} 
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-danger rounded" style="text-align: center;height: 100px;">
                            <h3 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_offre_total_dollars|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U03')] }}
                            </h3>
                        </div>
                    {% endif %}

                    {% if montant_offre_total_tnd != 0 %} 
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-warning rounded" style="text-align: center;height: 100px;">
                            <h3 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_offre_total_tnd|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U04')] }}
                            </h3>
                        </div>
                    {% endif %}

                </div>

            </div>
        </div><!-- end affichage montnat d'offre totale  -->

        <div class="col-md-4 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="card-header border-0">
                    <h5 class="danger">Montant contractualisé totale</h5>
                </div>

                <div class="col-12 row d-flex justify-content-around pl-3 {% if nb_unity == 0 or nb_unity == 1 %} mt-5 {% else %} mt-3 {% endif %}" style="max-height: 300px !important;" >

                    {% if nb_opportunity_concretise == 0 %}                
                        <div class="col-7 bg-gradient-x-danger rounded" style="text-align: center;height: 95px;">
                            <h5 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_concretise_total_euro|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U01')] }}
                            </h5>
                        </div>
                    {% endif %}
                    
                    {% if montant_concretise_total_euro != 0 %}                
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-danger rounded" style="text-align: center;height: 100px;">
                            <h5 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_concretise_total_euro|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U01')] }}
                            </h5>
                        </div>
                    {% endif %}

                    {% if montant_concretise_total_fcfa != 0 %} 
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-warning rounded" style="text-align: center;height: 100px;">
                            <h5 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_concretise_total_fcfa|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U02')] }}
                            </h5>
                        </div>
                    {% endif %}

                    {% if montant_concretise_total_dollars != 0 %} 
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-info rounded" style="text-align: center;height: 100px;">
                            <h3 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_concretise_total_dollars|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U03')] }}
                            </h3>
                        </div>
                    {% endif %}

                    {% if montant_concretise_total_tnd != 0 %} 
                        <div class="col-{% if nb_unity <= 2 %}7{% else %}5{% endif %} bg-gradient-x-primary rounded" style="text-align: center;height: 100px;">
                            <h3 class="font-large-1 mt-2 text_element" style="color: #fff;">{{ montant_concretise_total_tnd|number_format(0,'',' ') }}
                                {{ constant('App\\Entity\\OpportunityCRM::UNITY_ABREVIATION')[constant('App\\Entity\\OpportunityCRM::UNITY_U04')] }}
                            </h3>
                        </div>
                    {% endif %}

                </div>

            </div>
        </div><!-- end affichage montnat contractualisé totale  -->

        <div class="col-md-4 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="border_container" id="container_type_soumission_opportunity"></div>
            </div>
        </div><!-- end classification par type de soumission d'opportunité  -->

        <div class="col-md-4 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="card-header border-0">
                    <h5 style="color: #8bc34a">Nombre total des opportunités soumission :</h5>
                    <strong class="text-bold-400" style="color:gray;">{{ nb_opportunity_soumission }} opportunités</Strong>
                </div>

                <div class="card-content mt-3" {% if nb_opportunity_soumission > 0 %} {% set percent = (nb_opportunity_soumission_concretise/nb_opportunity_soumission)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                    <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="180" data-height="180" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#8bc34a" data-knob-icon="icon-plane">
                    <h3 class="grey darken-1 text-bold-400 mt-1">{{ nb_opportunity_soumission_concretise }}</h3>
                    <span style="color: #8bc34a"><span class="fa fa-check-circle-o"></span> Opportunitiés soumission concrétisée </span>
                </div>

            </div>
        </div><!-- end affichage nombre des opportunités soumission concrétisée  -->

        <div class="col-md-4 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="card-header border-0">
                    <h5 class="danger">Nombre total des opportunités gré à gré :</h5>
                    <strong class="text-bold-400" style="color:gray;">{{ nb_opportunity_gre }} opportunités</Strong>
                </div>

                <div class="card-content mt-3" {% if nb_opportunity_gre > 0 %} {% set percent = (nb_opportunity_gre_concretise/nb_opportunity_gre)*100 %} {% else %} {% set percent = 0 %} {% endif %} style="text-align: center;">
                    <input type="text" value="{{percent|round}}" class="dial knob hide-value responsive angle-offset" data-angleOffset="40" data-thickness=".15" data-linecap="round" data-width="180" data-height="180" data-inputColor="#BABFC7" data-readOnly="true" data-fgColor="#ff7588" data-knob-icon="icon-plane">
                    <h3 class="grey darken-1 text-bold-400 mt-1">{{ nb_opportunity_gre_concretise }}</h3>
                    <span class="danger"><span class="fa fa-check-circle-o"></span> Opportunitiés gré à gré concrétisée </span>
                </div>

            </div>
        </div><!-- end affichage nombre des opportunités gré à gré concrétisée  -->

        <div class="col-md-12 col-sm-12">

            <div class="card" style="height:400px;">

                <div class="card-header border-0">
                    <h5 style="color: rgb(124,181,236);">Avancement des opportinutés - Responsable commercial</h5>
                </div>

                <div class="card-content">

                    {% if not clients|length %}

                        <div class="alert alert-info m-1" role="alert" style="padding:8px;">
                            <i class="icon fa fa-info-circle"></i> <span id="content-message"> {% trans %}Aucun client trouvé{% endtrans %}</span>
                        </div>

                    {% else %}

                        <div id="audience-list-scroll" class="table-responsive m-0 p-1 table-scroll">
                            <table id="recent-orders" class="table table-hover ps-container ps-theme-default">
                                <thead style="background-color:#D6EEFA">
                                    <tr class="border-double">
                                        <th>{% trans %}Client{% endtrans %}</th>

                                        <th style="text-align:center;">{% trans %}Pays{% endtrans %}</th>

                                        <th style="text-align:center;">{% trans %}N° d'opportunité{% endtrans %}</th>

                                        <th style="width:300px;min-width:300px; text-align:center;">% {% trans %}Pourcentage{% endtrans %}</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    {% for client in clients|sort((a, b) => b.percent <=> a.percent) %}

                                        <tr> 
                                            <td> 
                                                <img src="{{ asset('uploads/logo_client/'~client.logo) }}" title="{{ client.abreviation }}" alt="logo client" style="width:40px; height:40px;"/>
                                                <span class='ml-1' style="text-align:center;"> {{ client.name }}</span>
                                            </td>
                                            <td style="text-align:center;">{{ client.pays }}</td>
                                            <td style="text-align:center;">{{ client.nb_opportunity }}</td>
                                            <td style="text-align:center;" {% set percent = client.percent|round %}>
                                                {{ percent }}% 

                                                <div class="progress progress-sm mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
                                                    <div class="progress-bar" style="width: {{ percent }}%;background-color: #8bc34a"></div>
                                                </div>
                                            </td>
                                        </tr>

                                    {% endfor %}

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

                    {% endif %}

                </div>

            </div>

        </div><!-- end affichage prospection par client  -->

        <div class="col-md-6 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="border_container" id="container_evolution_opportunity_per_year"></div>
            </div>
        </div><!-- end evolution des opportunités par année  -->

        <div class="col-md-6 col-sm-12">
            <div class="card" style="height: 400px;">
                <div class="border_container" id="container_evolution_result_opportunity_per_year"></div>
            </div>
        </div><!-- end evolution les résultats des opportunités par année  -->

        {% if app.user and not is_granted('ROLE_UTILISATEUR_COMMERCIALE') %}

            <div class="col-md-6 col-sm-6">
                <div class="card" style="height: 400px;">
                    <div class="border_container" id="container_repartition_opportunity_per_source"></div>
                </div>
            </div><!-- end repartition des opportunités par source  -->

            <div class="col-md-6 col-sm-6">

                <div class="card" style="height:400px;">

                    <div class="card-header border-0">
                        <h5 style="color: rgb(124,181,236);">Réalisation commerciale : SFM</h5>
                    </div>

                    <div class="card-content">

                        {% if not opportunity_by_apporteur_interne|length %}

                            <div class="alert alert-info m-1" role="alert" style="padding:8px;">
                                <i class="icon fa fa-info-circle"></i> <span id="content-message"> {% trans %}Aucune opportunité de source interne trouvée{% endtrans %}</span>
                            </div>

                        {% else %}

                            <div id="audience-list-scroll" class="table-responsive m-0 p-1 table-scroll">
                                <table id="recent-orders" class="table table-hover ps-container ps-theme-default">
                                    <thead style="background-color:#D6EEFA">
                                        <tr class="border-double">
                                            <th>{% trans %}Apporteur d'opportunité{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° d'opportunité{% endtrans %}</th>
                                        
                                            <th style="text-align:center;">{% trans %}N° concrétisée{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° non concrétisée{% endtrans %}</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        {% for apporteur in opportunity_by_apporteur_interne|sort((a, b) => b.count_opportunity <=> a.count_opportunity) %}

                                            <tr> 
                                                <td style="min-width:130px;">
                                                    <span class="avatar avatar-online">
                                                        <img src="{{ asset('uploads/avatars/'~apporteur.path) }}" width="30" height="30" alt="user" />
                                                        <span> {{ apporteur.fullName }}
                                                    </span>
                                                </td>

                                                <td style="text-align:center;">{{ apporteur.count_opportunity }}</td>                                 

                                                <td style="text-align:center;">{{ apporteur.concrete_opportunity }}</td>

                                                <td style="text-align:center;">{{ apporteur.non_concrete_opportunity }}</td>
                                            </tr>

                                        {% endfor %}

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

                        {% endif %}

                    </div>

                </div>

            </div> <!-- end tab prospection par apporteur interne -->

            <div class="col-md-12 col-sm-12">

                <div class="card" style="height:400px;">

                    <div class="card-header border-0">
                        <h5 style="color: #8bc34a;">Réalisation commerciale : Partenaires</h5>
                    </div>

                    <div class="card-content">

                        {% if not opportunity_by_partenaire_externe|length %}

                            <div class="alert alert-info m-1" role="alert" style="padding:8px;">
                                <i class="icon fa fa-info-circle"></i> <span id="content-message"> {% trans %}Aucune opportunité de source externe trouvée{% endtrans %}</span>
                            </div>

                        {% else %}

                            <div id="audience-list-scroll" class="table-responsive m-0 p-1 table-scroll">
                                <table id="recent-orders" class="table table-hover ps-container ps-theme-default">
                                    <thead style="background-color:#90ed7d">
                                        <tr class="border-double">
                                            <th>{% trans %}Partenaire{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}Pays{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° d'opportunité{% endtrans %}</th>

                                            <th style="width:300px;min-width:300px; text-align:center;">% {% trans %}Pourcentage{% endtrans %}</th>                                
                                        
                                            <th style="text-align:center;">{% trans %}N° concrétisée{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° non concrétisée{% endtrans %}</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        {% for partenaire in opportunity_by_partenaire_externe|sort((a, b) => b.count_opportunity <=> a.count_opportunity) %}

                                            <tr> 
                                                <td>{{ partenaire.name }}</td> 

                                                <td style="text-align:center;">{{ partenaire.pays }}</td> 

                                                <td style="text-align:center;">{{ partenaire.count_opportunity }}</td> 
                                                
                                                <td style="text-align:center;" {% set percent = partenaire.percent|round %}>
                                                    {{ percent }}% 

                                                    <div class="progress progress-sm mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar" style="width: {{ percent }}%;background-color: #8bc34a"></div>
                                                    </div>
                                                </td>

                                                <td style="text-align:center;">{{ partenaire.concrete_opportunity }}</td>

                                                <td style="text-align:center;">{{ partenaire.non_concrete_opportunity }}</td>
                                            </tr>

                                        {% endfor %}

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

                        {% endif %}

                    </div>

                </div>

            </div> <!-- end tab prospection par partenaire externe -->

            <div class="col-md-12 col-sm-12">

                <div class="card" style="height:400px;">

                    <div class="card-header border-0">
                        <h5 style="color: rgb(124,181,236);">Prospection par responsable commercial</h5>
                    </div>

                    <div class="card-content">

                        {% if not opportunity_by_responsable|length %}

                            <div class="alert alert-info m-1" role="alert" style="padding:8px;">
                                <i class="icon fa fa-info-circle"></i> <span id="content-message"> {% trans %}Aucun responsable commercial trouvé{% endtrans %}</span>
                            </div>

                        {% else %}

                            <div id="audience-list-scroll" class="table-responsive m-0 p-1 table-scroll">
                                <table id="recent-orders" class="table table-hover ps-container ps-theme-default">
                                    <thead style="background-color:#D6EEFA">
                                        <tr class="border-double">
                                            <th>{% trans %}Responsable commercial{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° d'opportunité totale{% endtrans %}</th>

                                            <th style="width:300px;min-width:300px; text-align:center;">% {% trans %}Pourcentage{% endtrans %}</th>
                                        
                                            <th style="text-align:center;">{% trans %}N° d'opportunité concrétisée{% endtrans %}</th>

                                            <th style="text-align:center;">{% trans %}N° d'opportunité non concrétisée{% endtrans %}</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        {% for responsable in opportunity_by_responsable|sort((a, b) => b.count_opportunity <=> a.count_opportunity) %}

                                            <tr> 
                                                <td style="min-width:300px;">
                                                    <span class="avatar avatar-online">
                                                        <img src="{{ asset('uploads/avatars/'~responsable.path) }}" width="30" height="30" alt="user" />
                                                        <span> {{ responsable.fullName }}
                                                    </span>
                                                </td>

                                                <td style="text-align:center;">{{responsable.count_opportunity }}</td>
                                                
                                                <td style="text-align:center;" {% set percent = responsable.percent|round %}>
                                                    {{ percent }}% 

                                                    <div class="progress progress-sm mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar" style="width: {{ percent }}%;background-color: #8ecbdd"></div>
                                                    </div>
                                                </td>

                                                <td style="text-align:center;">{{responsable.concrete_opportunity }}</td>

                                                <td style="text-align:center;">{{responsable.non_concrete_opportunity }}</td>
                                            </tr>

                                        {% endfor %}

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

                        {% endif %}

                    </div>

                </div>

            </div> <!-- end tab prospection par responsable commercial -->

            <div class="col-md-12 col-sm-12 mb-2">
                <div class="card" style="height: 400px;">
                    <div class="border_container" id="container_repartition_opportunity_per_responable"></div>
                </div>
            </div><!-- end repartition des opportunités par responsable  -->
        {% endif %}

    </div>   

{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script type="text/javascript">

        $(".dial").knob({
            'format' : function (value) {
                return value + '%';
            }
        });

        {% for flash_message in app.session.flashBag.get('success') %}

            toastr.success('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('info') %}

            toastr.info('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('warning') %}

            toastr.warning('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

        {% for flash_message in app.session.flashBag.get('error') %}

            toastr.error('{{ flash_message }}', {positionClass: 'toast-top-center', containerId: 'toast-top-center'});

        {% endfor %}

    </script>

    {{ include('CRM/DashboardCRM/ajax/manage_choix_view.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_classification_opportunity_by_type.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_classification_mine_opportunity_by_type.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_classification_by_type_soumission.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_classification_mine_by_type_soumission.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_evolution_result_opportunity.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_evolution_mine_result_opportunity.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_evolution_type_opportunity.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_mine_opportunity.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_repartation_opportunity_by_source.html.twig') }}

    {{ include('CRM/DashboardCRM/ajax/stat_repartation_opportunity_by_responsable.html.twig') }}

{% endblock %}