{% extends 'base.html.twig' %}
{% block body %}
    <div id="wrapper">
        <div id="container" class="container">

            <div class="row">
                <h1>Historique</h1>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="sells">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <h2>
                                    <i class="fa fa-users"></i>
                                    <span class="chiffre key-figure">
                                        {{ allSellings  }}
                                    </span>
                                    Clients
                                </h2>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <h2>
                                    <i class="fa fa-euro"></i>
                                    <span class="chiffre  key-figure">
                                        {{ chiffreAffaires }}
                                    </span>
                                    Chiffre d'affaires

                                </h2>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <h2>
                                    <i class="fa fa-shopping-cart"></i>
                                    <span class="chiffre key-figure">
                                        {% if allSellings %}
                                            {{ (chiffreAffaires / (allSellings))|round }}
                                        {% else %}
                                            ?
                                        {% endif %}

                                    </span>
                                    € panier moyen

                                </h2>
                            </div>
                        </div>


                        <div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 ">
                    <h2>Exporter toutes vos données</h2>
                    <a class="btn btn-success" href="{{ path('export_all') }}">
                        <i class="fa fa-file-excel-o fa-3x"></i>
                        en format csv
                    </a
                    ><a class="btn btn-success" href="{{ path('export_all_json') }}">
                        <i class="fa fa-file-code-o fa-3x"></i>
                         en JSON
                    </a>

                </div>
            </div>
            <hr>
            <h2 class="text-center">Statistiques de ventes </h2>
            <div id="chartContainer" style="display: inline-block; height: 300px; width: 49%;"></div>
            <div id="chartContainerChiffreAffaire" style="display: inline-block; height: 300px; width: 49%;"></div>
            <h2> {{ statisticsFestivals |length }} Festival
                {% if  statisticsFestivals |length >1 %}
                    s
                {% endif %}</h2>
            <div id="chartContainerstatisticsFestivals"
                    style="display: inline-block; height: 300px; width: 100%;"></div>


        </div>
        <hr>

        <div id="last-sellings">
            <div class="row">
                <div class="col-xs-12">


                    <div class="table">
                        <div class="row-fluid">
                            <div class="col-xs-12">
                                <h2>
                                    {{ recentSells |length }} Dernières ventes
                                </h2>
                            </div>
                        </div>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <td>n°</td>
                                <td>date</td>
                                <td>commentaire</td>
                                <td>produits</td>
                                <td>montant</td>
                                <td>Actions</td>

                            </tr>
                            </thead>
                            <tbody>
                             {% for vente in recentSells %}

                            <tr>
                                <td> {{ vente.id }}</td>
                                <td> {{ vente.date |date('Y-m-d H:i:s') }}</td>
                                <td>
                                {# {{ vente.comment }} #}
                                
                                </td>
                                <td class="text-right">
                                    {% if vente.products |length >1 %}
                                    <strong>
                                        {{ vente.products |length }}
                                    </strong> produits

                                    {% else %}
                                        {% if vente.products and vente.products.0 is defined %}

                                        {{ vente.products.0.name }}
                                        {% endif %}
                                    {% endif %}

                                </td>
                                <td class="text-right">
                                    {{ vente.sum }}
                                </td>
                                <td>
                                    <a href="{{ path('app_selling_delete',{id: vente.id }) }}"
                                            class="btn btn-warning pull-right">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>    {% endfor %}
                            </tbody>
                        </table>


                    </div>
                </div>
            </div>

        </div>


        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <script>

            var dataPoints = [
                {% for pair in statisticsSoldProducts %}
                {
                    label: "{{ pair.name }}",
                    x: {{ pair.count }},
                    y: {{ pair.count }}
                },
                {% endfor %}
            ];
            var dataPointsChiffreAffaire = [
                {% for pair in statisticsSoldProducts %}
                {
                    label: "{{ pair.name }}",
                    x: {{ pair.value }},
                    y: {{ pair.value }}
                },
                {% endfor %}
            ];
            var dataPointsFestivals = [
                {% for pair in statisticsFestivals %}
                {
                    label: "{{ pair.name }} {{ pair.date|date('Y-m-d') }} , {{ pair.chiffreAffaire }} €",
                    y: {{ pair.chiffreAffaire }} ,
                    countClients : "{{ pair.clients_count }} clients"
                },
                {% endfor %}
            ];
            console.log(dataPointsFestivals);
            var chartFestival = new CanvasJS.Chart("chartContainerstatisticsFestivals", {
                title:{
                    text: "Chiffre d'affaire par festival"
                },
                animationEnabled: true,
                data: [
                    {
                        // Change type to "doughnut", "line", "splineArea", etc.
                        type: "column",
                        dataPoints: dataPointsFestivals
                    }
                ]
            });
            console.log('dataPointsFestivals', dataPointsFestivals);
            chartFestival.render();
            var chart = new CanvasJS.Chart("chartContainer", {
                title:{
                    text: "Volume de produits vendus"
                },
                animationEnabled: true,
                data: [
                    {
                        // Change type to "doughnut", "line", "splineArea", etc.
                        type: "pie",
                        dataPoints: dataPoints
                    }
                ]
            });
            chart.render();
            var chartContainerChiffreAffaire = new CanvasJS.Chart("chartContainerChiffreAffaire", {
                title:{
                    text: "Valeur en euros des produits vendus"
                },
                animationEnabled: true,
                data: [
                    {
                        // Change type to "doughnut", "line", "splineArea", etc.
                        type: "pie",
                        dataPoints: dataPointsChiffreAffaire
                    }
                ]
            });
            chartContainerChiffreAffaire.render();
        </script>

    </div>
{% endblock %}