{# templates/superadmin_v2/statistiques/sa_statistiques.html.twig #}
{% extends 'superadmin_v2/superadmin.html.twig' %}

{% block body %}
    {{ render(controller('App\\Controller\\Superadmin\\SaLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    <div class="section__content section__content--p30">
        {{ include('superadmin_v2/layout/sa_debug.html.twig') }}

        <div class="container-fluid">
            <div class="row">

                <div class="col-lg-6">
                    <div class="au-card m-b-30">
                        <div class="au-card-inner">
                            <h3 class="title-2 m-b-40">Demandes de devis</h3>
                            <canvas id="demandesDevisChart"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="au-card m-b-30">
                        <div class="au-card-inner">
                            <h3 class="title-2 m-b-40">Prospections & Réponses</h3>
                            <canvas id="prospectonsChart"></canvas>
                        </div>
                    </div>
                </div>

            </div>

            {{ include('superadmin_v2/layout/sa_footer.html.twig') }}
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    var ddv = document.getElementById('demandesDevisChart').getContext('2d');
    var demandesDevisChart = new Chart(ddv, {
        type: 'pie',
        data: {
            datasets: [{
                data: [{{ chiffres.nbr_demandes_validees }},{{ chiffres.nbr_demandes_en_attente }},{{ chiffres.nbr_demandes_archivees }}],
                backgroundColor: ['rgba(0, 128, 0, 0.3)','rgba(255, 165, 0, 0.3)','rgba(255, 0, 0, 0.3)'],
                label: 'Demandes de devis'
            }],
            labels: ['Validées', 'En attente', 'Archivées']
        },
        options: {
			responsive: true
        }
    });

    var prosp = document.getElementById('prospectonsChart').getContext('2d');
    var prospectonsChart = new Chart(prosp, {
        type: 'bar',
        data: {
            labels: [''],
            datasets: [{
                label: 'Prospections',
                data: [{{ chiffres.nbr_prospections }}],
                backgroundColor: ['rgba(75, 192, 192, 0.2)'],
                borderColor: ['rgba(75, 192, 192, 1)'],
                borderWidth: 1
            },{
                label: 'Prospections vues',
                data: [{{ chiffres.nbr_prospections_vues }}],
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 1
            },{
                label: 'Réponses',
                data: [{{ chiffres.nbr_reponses }}],
                backgroundColor: ['rgba(154, 205, 50, 0.2)'],
                borderColor: ['rgba(154, 205, 50, 1)'],
                borderWidth: 1
            /*},{
                label: 'Commissions TTC',
                data: [{{ chiffres.sum_commissions }}],
                backgroundColor: ['rgba(13, 110, 253, 0.2)'],
                borderColor: ['rgba(13, 110, 253, 1)'],
                borderWidth: 1*/
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    </script>
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
    });
    // ]]>
    </script>
{% endblock %}