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

{% block title %}Statistiques Fiches{% endblock %}

{% block body %}
    <script src="/apexcharts-bundle/dist/apexcharts.js"></script>

    <div class="wrapper">
        {% include 'include/side_menu.html.twig' %}

        <div id="content" class="content">
            {% include 'include/top_menu.html.twig' %}
            <div class="content-wrapper">
                <div class="content-body">
                    <div class="d-flex justify-content-between">
                        <h3>Détails de la fiche : {{ fiche.name }}</h3>
                    </div>
                    <div class="row mt-3">
                        <div class="col-6">
                            <div id="detailsFicheChart"></div>

                            <script>
                                var e="#5A8DEE", t="#39DA8A", o="#FF5B5C", a="#FDAC41", r="#00CFDD", s="#E2ECFF", i="#ffeed9", l="#828D99";
                                var options = {
                                    chart: {
                                        type: 'donut',
                                        width: 400
                                    },
                                    dataLabels: {
                                        enabled: !1
                                    },
                                    series: [44, 55, 12, 20],
                                    stroke: {
                                        width: 0,
                                        lineCap: "round"
                                    },
                                    colors:[t, e, a, o],
                                    labels:["Très Bien", "Bien", "Satisfait", "Déçu"],
                                    plotOptions: {
                                        pie: {
                                            donut: {
                                                labels: {
                                                    show:!0, name: {
                                                        show: !0, fontSize: "15px", colors: "#596778", offsetY: 20, fontFamily: "IBM Plex Sans"
                                                    }
                                                    , value: {
                                                        show:!0, fontSize:"26px", fontFamily:"Rubik", color:"#475f7b", offsetY:-20, formatter:function(e) {
                                                            return e
                                                        }
                                                    }
                                                    , total: {
                                                        show:!0, label:"Notes", color:l, formatter:function(e) {
                                                            return e.globals.seriesTotals.reduce(function(e, t) {
                                                                    return e+t
                                                                }
                                                                , 0)
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    legend : {
                                        show: false
                                    }
                                };
                                var chart = new ApexCharts(
                                    document.querySelector("#detailsFicheChart"),
                                    options
                                );

                                chart.render();

                            </script>
                        </div>
                        <div class="col-6">

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

        </div>
    </div>
{% endblock %}