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

{% block title %}Tableau de bord{% endblock %}

{% block css %}
    <style>
    .piechart-legends ul {
    list-style: none;
    margin-left: 1.5rem;
    padding-left: 0;
    }

    .piechart-legends li {
    margin-bottom: 0.25rem;
    white-space: nowrap;
    }
    .piechart-legends span {
    display: inline-block;
    vertical-align: middle;
    border-radius: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    }
    .piechart-legends-info li {
    margin-bottom: 0.25rem;
    white-space: nowrap;
    }


    .rtl .piechart-legends ul {
    list-style: none;
    margin-left: 0;
    margin-right: 1.5rem;
    padding-right: 0;
    }
    .rtl .piechart-legends span {
    margin-left: 0.5rem;
    margin-right: 0;
    }
    </style>


{% endblock %}

{% block body %}

    <div class="col-xl-4 mt-4 mt-xl-0">
        {{ form_start(form) }}
            {{ form_widget(form) }}
            <div class="text-center pt-3 mt-3 border-bottom mb-4 pb-2">
                <button type="submit" id="submit" class="btn btn-success">Chercher</button>
            </div>
        {{ form_end(form) }}
        <div class="card ccard h-100 overflow-hidden">
            <div class="card-header border-0 bgc-white card-header-sm">
                <h6 class="card-title text-dark-m3 pl-25 pt-15 text-110">
                    <i class="fa fa-tablet-alt" aria-hidden="true"></i> Chiffre d'affaires
                    <br/>
                    <span class="text-85 text-dark-l2">
                            </span>
                </h6>
            </div>

            <div class="card-body p-0 bgc-whit flex-grow-1">
                <div class="d-flex align-items-center justify-content-center flex-wrap h-100">
                    <div class="pos-rel">
                        <div class="position-center text-center text-secondary-d3 mt-n3">
                            <span>Total</span>
                            <div class="mt-n1 text-180 text-secondary-d4 text-600">
                                {{ tabletsChart.total }} €
                            </div>
                        </div>
                        <canvas id="tablets-chart" class="mb-3"
                                style="height: 170px; width: 170px; max-height: 170px; max-width: 170px;"></canvas>
                    </div>
                </div>
            </div>
            <div class="card-footer text-center">
                <!--<a href="#">
                    <button type="button"
                            class="btn btn-outline-blue radius-round btn-bold px-4 py-1 mx-auto">
                        Voir détail
                    </button>
                </a>-->
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript">
        jQuery(function ($) {
            var _animate = !AceApp.Util.isReducedMotion();
            // Traffic Sources piechart
            var tabletsSourceCanvas = document.getElementById('tablets-chart');

            var tabletsSourcePieChart = new Chart(tabletsSourceCanvas, {
                type: 'doughnut',
                data: {
                    datasets: [{
                        label: 'Euros',
                        data: {{ tabletsChart.labelsValues | array2String | raw }},
                        backgroundColor: {{ tabletsChart.colors | array2String | raw }},
                    }],
                    labels: {{ tabletsChart.labels | array2String | raw }}
                },

                options: {
                    responsive: true,

                    cutoutPercentage: 70,
                    legend: {
                        display: false
                    },
                    animation: {
                        animateRotate: true,
                        duration: _animate ? 1000 : false
                    },
                    tooltips: {
                        enabled: true,
                        cornerRadius: 0,
                        bodyFontColor: '#fff',
                        bodyFontSize: 14,
                        fontStyle: 'bold',

                        backgroundColor: 'rgba(34, 34, 34, 0.73)',
                        borderWidth: 0,

                        caretSize: 5,

                        xPadding: 12,
                        yPadding: 12,

                        callbacks: {
                            label: function (tooltipItem, data) {
                                return ' ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ' €'
                            }
                        }
                    },
                    events: ['mousemove', 'click'],
                    onClick: function (event, legendItem) {
                        // TODO A définir
                    }
                }
            })

            // place the legends
            $(tabletsSourceCanvas)
                .parent().after("<div id='tablets-source-legends' class='piechart-legends text-95 text-secondary-d3'>" + tabletsSourcePieChart.generateLegend() + "</div>")



            // infobox's circular progress bar
            $('canvas.infobox-progress-chart').each(function() {
                var color = $(this).css('color')

                new Chart(this.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        datasets: [{
                            data: [$(this).data('percent'), 100 - $(this).data('percent')],
                            backgroundColor: [
                                color,
                                "#e3e5ea"
                            ],
                            hoverBackgroundColor: [
                                color,
                                "#e3e5ea"
                            ],
                            borderWidth: 0
                        }]
                    },

                    options: {
                        responsive: false,
                        cutoutPercentage: 80,
                        legend: {
                            display: false
                        },
                        animation: {
                            duration: _animate ? 500 : false,
                            easing: 'easeInCubic'
                        },
                        tooltips: {
                            enabled: false,
                        }
                    }
                })
            })

        });
    </script>

{% endblock %}