{% extends 'layout.twig' %}

{% block body %}
<script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/highcharts.js') }}"></script>
<script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/highcharts-more.js') }}"></script>
<script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/modules/solid-gauge.js') }}"></script>
<script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/modules/exporting.js') }}"></script>
<script type="text/javascript" src="{{ baseUrl('ext/highcharts/highcharts/modules/offline-exporting.js') }}"></script>

<div class="contenu clearfix"  id="fournisseurs">
	<h1>
    	{{ 'Analyse fournisseurs' | trad }}
    </h1>
    

    <ul class="nav nav-tabs">
    	<li class="active"><a class="onglet_ephemere" data-toggle="tab">{{ 'Analyse' | trad }}</a></li>
    	<li><a onClick="window.location.href='{{ path('Fournisseur.Incidateur.documents') }}'" class="onglet_ephemere" 
            data-toggle="tab">{{ 'Documents' | trad }}</a></li>
        {% for partenaire in listePartenaire %}
            <li><a onClick="window.location.href='{{ path('Fournisseur.Incidateur.partenaire', {partenaire : partenaire['ID1']}) }}'" 
                class="onglet_ephemere" data-toggle="tab">{{ partenaire['ID1'] }}</a></li>
    	{% endfor %}
        <li><a onClick="window.location.href='{{ path('Fournisseur.Incidateur.evaluations') }}'" class="onglet_ephemere" 
            data-toggle="tab">{{ 'Evaluations' | trad }}</a></li>
	</ul>
    
    <div class="tab-content">
        <div id="indicateur_facture" class="pageIndicateur clearfix">

            <form method="POST" class="formIndicateur">
                <select name="annee" id="annee" class="form-control" style="width:300px;display: inline;margin-right: -31px;"  onchange="this.form.submit();">
                    {% for periode in periodes %}
                    	<option value="{{periode.CODE_PER }}"
                        {% if periode.CODE_PER == annee %}selected{% endif %}>{{ periode.LIBELLE | trad }}</option>
                    {% endfor %}
                </select>
            </form>

            <div class="tab-content clearfixe div4Item">
            	<div class="colonne4">
                    {{ Highcharts(dataHighchart1) }}
                </div>
            	<div class="colonne4">
                    {{ Highcharts(dataHighchart2) }}
                </div>
            	<div class="colonne4">
                    <div class="tuilesIndicateur" style="cursor:pointer" onclick="{{ menu.lien }}">
                        <div class="titreTuile">{{ 'Total CA Fournisseurs' | trad }}</div>
                        <div class="resultTuile texteTuilerouge">{{totalCA |number_format(2, '.', ' ') }} {{ devise }}</div>
                    </div>
                </div>
            	<div class="colonne4 last">
                    <div class="tuilesIndicateur" style="cursor:pointer" onclick="{{ menu.lien }}">
                        <div class="titreTuile">{{ 'Montant moyen CA' | trad }}</div>
                        <div class="resultTuile texteTuilevert">{{moyenCA |number_format(2, '.', ' ') }} {{ devise }}</div>
                    </div>
                </div>
            </div>
            <div class="tab-content" style="margin-top:40px;">
            	<div class="colonne2">
    				{{ Highcharts(dataHighchart3) }}
                </div>
                <div class="colonne2 last">
                    {{ Highcharts(dataHighchart4) }}
                </div>
            </div>
            
        </div>
    </div>
</div>


    

<style>
    .pageIndicateur .div4Item{
        display: flex;
        justify-content: space-between;
        align-items: end;
    }    
</style>
{% endblock %}