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

{% block title %}360 Manager{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="/apexcharts-bundle/dist/apexcharts.css">
{% 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"><!-- Dashboard Analytics Start -->
            <section id="dashboard-360Manager">
                <div class="container-fluid">
                    <div class="d-flex justify-content-between">
                        <h3 style="color: #a52570;" class="font-weight-bold">360 Manager du {{ form.created | date('d-m-Y') }} de {{ form.user.lastname}} {{ form.user.username}} </h3>
                    </div>
                    <h5>Vue d'ensemble</h5>
                    <div class="row">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                        <div id="chart"></div>
                                    <script>
                                        var options = {

                                            chart: {
                                                toolbar: {
                                                    show : false,
                                                },
                                                height: 500,
                                                margin: [0,0,0,0],
                                                spacingTop: 0,
                                                spacingBottom: 0,
                                                spacingLeft: 0,
                                                spacingRight: 0,
                                                type: 'radar',

                                            },
                                            plotOptions: {
                                                radar: {
                                                    size: 180,
                                                }},
                                            yaxis: {
                                                min: 0,
                                                max: 10
                                            },
                                            series: [{
                                                name: 'Moyenne',
                                                data: [
                                                    {% for category in categories %}
                                                    "{{ calculateAverageCategory(form.uid, category.id) }}",
                                                    {% endfor %}
                                                ],
                                            }],
                                            labels: [
                                                {% for category in categories %}
                                                "{{ category.name }}",
                                                {% endfor %}
                                            ],
                                            dataLabels: {
                                                style : {
                                                    fontSize : '20px',
                                                    fontFamily: "IBM Plex Sans",
                                                    colors: [
                                                        {% for category in categories %}
                                                        "{{ category.color }}",
                                                        {% endfor %}
                                                    ],
                                                    fontStyle: "bold"
                                                }
                                            },
                                            markers: {
                                                size: 5,
                                                hover: {
                                                    size: 10
                                                }
                                            }
                                        };
                                        var chart = new ApexCharts(
                                            document.querySelector("#chart"),
                                            options
                                        );

                                        chart.render();

                                    </script>

                                </div>

                            </div>
                            <br>
                            <h5>Vue détailée</h5>
                            <div class="row">
                                {% for category in categories %}
                                    <div class="col-6 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                        <div class="table-responsive">
                                            <table class="table">
                                                <thead style="background-color: {{ category.color }} !important;">
                                                <tr>
                                                    <th class="white border-bottom-0" style="width: 80%;">{{ category.name }}</th>
                                                    <th class="white border-bottom-0" style="width: 10%;">Moyenne</th>
                                                    <th class="white border-bottom-0" style="width: 10%;">Nombre</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {% for question in category.formQuestions %}
                                                    <tr>
                                                        <td style="width: 80%;">{{ question.question }}</td>
                                                        <td class="text-center" style="width: 10%;">{{ calculateAverageNote(form.uid, question.id, category.id) }}</td>
                                                        <td class="text-center" style="width: 10%;">{{ calculateCountNote(form.uid, question.id, category.id) }}</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>

                                            </table>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

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