{# 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">

                <table class="table table-borderless table-striped table-earning">
                    <tbody>
                        <tr>
                            <td>
                                <div class="row form-group fg-m-bottom" style="margin-top:6px;">
                                    <div class="col col-md-2 spa-col-label fg-m-bottom">
                                        <label for="c_annee" class="form-control-label spa-label">Année</label>
                                    </div>
                                    <div class="col-12 col-md-2 fg-m-bottom">
                                        <select class="form-control" id="c_annee" onchange="window.location.href='{{ path('superadmin_chiffres_annuels') }}{{ getLinkFilter('annee') }}' + $(this).val();">
                                            {% for y in annees %}
                                            <option value="{{ y }}"{% if year == y %} selected{% endif %}>{{ y }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-2 fg-m-bottom"></div>
                                    <div class="col col-md-2 spa-col-label fg-m-bottom">
                                        <label for="c_taux" class="form-control-label spa-label">Taux</label>
                                    </div>
                                    <div class="col-12 col-md-2 fg-m-bottom">
                                        <select class="form-control" id="c_taux" onchange="window.location.href='{{ path('superadmin_chiffres_annuels') }}{{ getLinkFilter('taux') }}' + $(this).val();">
                                            {% for t in taux_cfg %}
                                            <option value="{{ t }}"{% if taux == t %} selected{% endif %}>{{ t }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <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 & Réponses // Mensuel {{ year }}</h3>
                            <canvas id="demandesDevisReponsesChart"></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">Demandes & Réponses // Annuel</h3>
                            <canvas id="demandesDevisReponsesAnnuelChart"></canvas>
                        </div>
                    </div>
                    <!--div class="au-card m-b-30">
                        <div class="au-card-inner">
                            <h3 class="title-2 m-b-40">Réponses</h3>
                            <canvas id="reponsesChart"></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">Nombre de paiements // Mensuel {{ year }}</h3>
                            <canvas id="paiementsMensuelChart"></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">Nombre de paiements // Annuel</h3>
                            <canvas id="paiementsAnnuelChart"></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">Paiements & Consommations // Mensuel {{ year }}</h3>
                            <canvas id="consommationsMensuelChart"></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">Paiements & Consommations // Annuel</h3>
                            <canvas id="consommationsAnnuelChart"></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">Commissions à {{ taux }}% // Mensuel {{ year }}</h3>
                            <canvas id="commissionsMensuelChart"></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">Commissions à {{ taux }}% // Annuel</h3>
                            <canvas id="commissionsAnnuelChart"></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">CA généré par la plateforme // Mensuel {{ year }}</h3>
                            <canvas id="caMensuelChart"></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">CA généré par la plateforme // Annuel</h3>
                            <canvas id="caAnnuelChart"></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 par Email // Mensuel {{ year }}</h3>
                            <canvas id="prospectonsMensuelChart"></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 par Email // Annuel</h3>
                            <canvas id="prospectonsAnnuelChart"></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 par SMS // Mensuel {{ year }}</h3>
                            <canvas id="smsMensuelChart"></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 par SMS // Annuel</h3>
                            <canvas id="smsAnnuelChart"></canvas>
                        </div>
                    </div>
                </div>

            </div>

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

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    var rep = document.getElementById('demandesDevisReponsesChart').getContext('2d');
    var demandesDevisReponsesChart = new Chart(rep, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Demandes de devis Validées',
                data: [{% for row in chiffres %}{{ row.nbr_demandes_validees }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(54, 162, 235, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(54, 162, 235, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Réponses',
                data: [{% for row in chiffres %}{{ row.nbr_reponses }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(0, 128, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(0, 128, 0, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('demandesDevisReponsesAnnuelChart').getContext('2d');
    var demandesDevisReponsesAnnuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Demandes de devis Validées',
                data: [{% for row in chiffres_ca %}{{ row.nbr_demandes_validees }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(54, 162, 235, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(54, 162, 235, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Réponses',
                data: [{% for row in chiffres_ca %}{{ row.nbr_reponses }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(0, 128, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(0, 128, 0, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var rep = document.getElementById('paiementsMensuelChart').getContext('2d');
    var paiementsMensuelChart = new Chart(rep, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Total',
                data: [{% for row in chiffres %}{{ row.nbr_paiements }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(255, 0, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(255, 0, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Par artisan',
                data: [{% for row in chiffres %}{{ row.nbr_paiements_par_artisan }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(0, 128, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(0, 128, 0, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var rep = document.getElementById('paiementsAnnuelChart').getContext('2d');
    var paiementsAnnuelChart = new Chart(rep, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Total',
                data: [{% for row in chiffres_ca %}{{ row.nbr_paiements }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(255, 0, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(255, 0, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Par artisan',
                data: [{% for row in chiffres_ca %}{{ row.nbr_paiements_par_artisan }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(0, 128, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(0, 128, 0, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('consommationsMensuelChart').getContext('2d');
    var consommationsMensuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Paiements',
                data: [{% for row in chiffres %}{{ row.sum_paiement }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(255, 165, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(255, 165, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Consommations',
                data: [{% for row in chiffres %}{{ row.sum_commissions }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(13, 110, 253, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(13, 110, 253, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('consommationsAnnuelChart').getContext('2d');
    var consommationsAnnuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Paiements',
                data: [{% for row in chiffres_ca %}{{ row.sum_paiement }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(255, 165, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(255, 165, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Consommations',
                data: [{% for row in chiffres_ca %}{{ row.sum_commissions }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(13, 110, 253, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(13, 110, 253, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('commissionsMensuelChart').getContext('2d');
    var commissionsMensuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Réel',
                data: [{% for row in chiffres %}{{ row.commissions_percent_reel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(192, 80, 78, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(196, 141, 140, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Potentiel',
                data: [{% for row in chiffres %}{{ row.commissions_percent_potentiel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(155, 187, 88, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(170, 189, 134, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('commissionsAnnuelChart').getContext('2d');
    var commissionsAnnuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Réel',
                data: [{% for row in chiffres_ca %}{{ row.commissions_percent_reel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(192, 80, 78, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(196, 141, 140, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Potentiel',
                data: [{% for row in chiffres_ca %}{{ row.commissions_percent_potentiel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(155, 187, 88, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(170, 189, 134, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('caMensuelChart').getContext('2d');
    var caMensuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Réel',
                data: [{% for row in chiffres %}{{ row.ca_reel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(255, 165, 0, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(255, 165, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Potentiel',
                data: [{% for row in chiffres %}{{ row.ca_potentiel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(79, 130, 189, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(127, 156, 190, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var pay = document.getElementById('caAnnuelChart').getContext('2d');
    var caAnnuelChart = new Chart(pay, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Réel',
                data: [{% for row in chiffres_ca %}{{ row.ca_reel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(255, 165, 0, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(255, 165, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Potentiel',
                data: [{% for row in chiffres_ca %}{{ row.ca_potentiel }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(79, 130, 189, 0.6)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(127, 156, 190, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var prosp = document.getElementById('prospectonsMensuelChart').getContext('2d');
    var prospectonsMensuelChart = new Chart(prosp, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Envoyées',
                data: [{% for row in chiffres %}{{ row.nbr_prospections }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(255, 0, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(255, 0, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Vues',
                data: [{% for row in chiffres %}{{ row.nbr_prospections_vues }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(54, 162, 235, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(54, 162, 235, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var prosp = document.getElementById('prospectonsAnnuelChart').getContext('2d');
    var prospectonsAnnuelChart = new Chart(prosp, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Envoyées',
                data: [{% for row in chiffres_ca %}{{ row.nbr_prospections }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(255, 0, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(255, 0, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Vues',
                data: [{% for row in chiffres_ca %}{{ row.nbr_prospections_vues }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(54, 162, 235, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(54, 162, 235, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var sms = document.getElementById('smsMensuelChart').getContext('2d');
    var smsMensuelChart = new Chart(sms, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres %}'{{ row.month }}',{% endfor %}],
            datasets: [{
                label: 'Envoyés',
                data: [{% for row in chiffres %}{{ row.nbr_prospections_sms }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(0, 128, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(0, 128, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Ouverts',
                data: [{% for row in chiffres %}{{ row.nbr_prospections_sms_ouverts }},{% endfor %}],
                backgroundColor: [{% for row in chiffres %}'rgba(255, 215, 0, 0.4)',{% endfor %}],
                borderColor: [{% for row in chiffres %}'rgba(255, 215, 0, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var sms = document.getElementById('smsAnnuelChart').getContext('2d');
    var smsAnnuelChart = new Chart(sms, {
        type: 'bar',
        data: {
            labels: [{% for row in chiffres_ca %}'{{ row.year }}',{% endfor %}],
            datasets: [{
                label: 'Envoyés',
                data: [{% for row in chiffres_ca %}{{ row.nbr_prospections_sms }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(0, 128, 0, 0.2)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(0, 128, 0, 1)',{% endfor %}],
                borderWidth: 1
            },{
                label: 'Ouverts',
                data: [{% for row in chiffres_ca %}{{ row.nbr_prospections_sms_ouverts }},{% endfor %}],
                backgroundColor: [{% for row in chiffres_ca %}'rgba(255, 215, 0, 0.4)',{% endfor %}],
                borderColor: [{% for row in chiffres_ca %}'rgba(255, 215, 0, 1)',{% endfor %}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    </script>
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
    });
    // ]]>
    </script>
{% endblock %}