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

{% set bodyClass = 'maturity_survey form edit' %}
{% set menuItem = 'maturity_survey' %}

{% block title %}{{ 'maturity.survey.title.show'|trans }} - {{ parent() }}{% endblock %}

{% block body_head %}
    <h1>
        {{ 'maturity.survey.title.show'|trans }}
        <small>{{ object.createdAt|date("d/m/Y") }}</small>
    </h1>
{% endblock %}

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'maturity.survey.breadcrumb.list'|trans, 'link': path('maturity_survey_list') },
        { 'name': 'maturity.survey.breadcrumb.show'|trans }
    ] %}
    {% include '_breadcrumb.html.twig' with {'breadcrumb': breadcrumb} %}
{% endblock %}

{% block body %}
    {% set submitValue = submitValue|default('maturity.survey.action.synthese_submit'|trans) %}

    {{ form_start(form) }}
        <div class="row">
            <div class="col-md-12">
                <div class="mb-1">
                    <a href="{{ path('maturity_survey_report', {'id': object.id}) }}" class="btn btn-default">
                        <i aria-hidden="true" class="fa fa-print"></i>
                        {{ 'global.action.print'|trans }}
                    </a>
                </div>
            </div>

            <div class="col-md-6">
                <div class="box box-solid">
                    <div class="box-header with-border"><h3 class="box-title">{{ 'maturity.survey.tab.survey'|trans }}</h3></div>
                    <div class="box-body">
                        {% if object.maturity is empty %}
                            {{ 'global.label.no_data'|trans }}
                        {% else %}
                            {% if object.maturity|length >= 3 %}
                                <canvas id="maturity-radar"></canvas>
                            {% else %}
                                {{ 'reporting.dashboard.label.maturity_referentiel_error'|trans }}
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-aqua">
                    <span class="info-box-icon bg-aqua"><i aria-hidden="true" class="fa fa-chart-line"></i></span>
                    <div class="info-box-content" style="padding-top: 20px">
                        <span class="info-box-text">{{ 'maturity.survey.label.score'|trans }}</span>
                        <span class="info-box-number">{{ object.score/10|round(1) }}</span>
                    </div>
                </div>
            </div>

            {% do form.answerSurveys.setRendered() %}
            {% set showPreco = false %}
            {% for domain in object.referentiel.domains %}
                {% set domainAnswers = form.answerSurveys|filter(as => as.vars.value.answer.question.domain.id == domain.id and as.vars.value.answer.recommendation) %}
                {% if domainAnswers|length > 0 %}
                    {% set showPreco = true %}
                {% endif %}
            {% endfor %}

            {% if showPreco %}
                <div class="col-md-12">
                    <h2>{{ 'maturity.survey.tab.recommendation'|trans }}</h2>
                </div>
                <div class="col-md-12">
                    <div class="row" style="display: flex;flex-wrap: wrap;">
                        {% set colors = ['box-info','box-success','box-primary','box-warning'] %}
                        {% for domain in object.referentiel.domains|sort((a, b) => a.position > b.position) %}
                            {% set domainAnswers = form.answerSurveys|filter(as => as.vars.value.answer.question.domain.id == domain.id and as.vars.value.answer.recommendation) %}
                            {% set colorSection = 0 %}
                            {% if loop.index matches '/^\\d+$/' %}
                                {% set colorSection = (loop.index - 1) % 4 %}
                            {% endif %}
                            {% if domainAnswers|length > 0 %}
                                <div class="col-xs-12 col-md-6">
                                    <div class="box box-solid {{ colors[colorSection] }}">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">{{ domain.name }}</h3>
                                        </div>

                                        {% if is_granted('ROLE_USER') %}

                                            <div class="box-body">
                                                {% for answerSurvey in domainAnswers %}
                                                    <div class="form-group answer-preco">
                                                        <label for="{{ answerSurvey.mesurements.vars.id }}">
                                                            {{ answerSurvey.vars.value.answer.recommendation }}
                                                        </label>
                                                        <div style="display: flex;">
                                                            {{  form_widget(answerSurvey.mesurements) }}
                                                            <button id="{{ answerSurvey.mesurements.vars.id }}_add_button" aria-label="{{ 'registry.mesurement.action.add_mesurement'|trans }}" type="button" class="btn reponse-modal-button" data-toggle="modal" data-target="#mesurement-modal" data-select-id="{{ answerSurvey.mesurements.vars.id }}">
                                                                <span class="fa fa-plus-circle"></span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>

                                        {% else %}

                                            <div class="box-body no-padding">
                                                <table role="presentation" class="table">
                                                    <tbody>
                                                        {% for answerSurvey in domainAnswers %}
                                                            <tr>
                                                                <td><strong>{{ answerSurvey.vars.value.answer.recommendation }}</strong></td>
                                                                <td>
                                                                    {% if answerSurvey.mesurements.vars.data|length > 0 %}
                                                                        <ul class="ps-1">
                                                                            {% for m in answerSurvey.mesurements.vars.data %}
                                                                                <li>
                                                                                    <a href="{{ url('registry_mesurement_show', {id:m.id}) }}">
                                                                                        {{ m.name }}
                                                                                    </a>
                                                                                </li>
                                                                            {% endfor %}
                                                                        </ul>
                                                                    {% else %}
                                                                        <span><i>{{ 'global.label.no_linked_mesurement'|trans }}</i></span>
                                                                    {% endif %}
                                                                </td>
                                                            </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>

                                        {% endif %}

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

            <div class="col-md-12">
                <div class="box box-solid">
                    <div class="box-body text-center">
                        <a href="{{ path('maturity_survey_list') }}" class="btn btn-default">
                            {{ 'global.action.back_to_list'|trans }}
                        </a>
                        {% if showPreco and is_granted('ROLE_USER') %}
                            <input type="submit" class="btn btn-primary" value="{{ submitValue }}">
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {{ form_end(form) }}

    {{ include('Registry/Mesurement/_modal_form.html.twig') }}
{% endblock %}

{% block javascripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    {{ include('Registry/Mesurement/_modal_form_js.html.twig') }}
    <script>
        let colorBlueOpacity = 'rgba(54, 162, 235, 0.5)';
        let colorRedOpacity = 'rgba(255, 99, 132, 0.5)';
        function radarChart(id, labels, serieLabel, data, color, legend=false) {
            let dataset = [];
            data.forEach(function(item, index) {
                dataset.push(
                    {
                        label: serieLabel[index],
                        data: item,
                        backgroundColor: color[index],
                    }
                );
            });

            new Chart($('#' + id), {
                type: 'radar',
                data: {
                    labels: labels.map(l => {
                        l = l.replace('&#039;', "'");
                        return l.substring(0, 25) + (l.length > 25 ? '…' : ''); //.match(/.{1,40}(\s|$)/g)
                    }),
                    datasets: dataset,
                },
                options: {
                    scale: {
                        ticks: {
                            min: 0,
                            max: 5,
                        }
                    },
                    legend: {
                        display: legend,
                    },
                }
            });
        }

        let maturityLabels = [];
        let maturitySerieLabel = [];
        let maturityData = [];

        {% if object.maturity is defined %}
            let tmpData1 = [];
            maturitySerieLabel.push('Actuel');
            {% for position, info in object.maturity|sort((a, b) => a.domain.position >= b.domain.position) %}
                maturityLabels.push('{{ info.domain.name }}');
                tmpData1.push('{{ info.score/10 }}');
            {% endfor %}
            maturityData.push(tmpData1);
        {% endif %}
        {% if previous is defined and previous.maturity is defined %}
            let tmpData2 = [];
            maturitySerieLabel.push('Précédent');
            {% for position, info in previous.maturity|sort((a, b) => a.domain.position >= b.domain.position) %}
                tmpData2.push('{{ info.score/10 }}');
            {% endfor %}
            maturityData.push(tmpData2);
        {% endif %}

        $(document).ready(function() {
            $('#mesurement-modal').on('shown.bs.modal', function (e) {
                const btn = $(e.relatedTarget)
                const mn = $('#mesurement-name');
                const label = btn.parent().parent().find('label')
                if (mn.val() === '') {
                    mn.val(label.text().trim())
                }

                mn.trigger('focus')
            })
            if (maturityData.length > 0) {
                radarChart(
                    'maturity-radar',
                    maturityLabels,
                    maturitySerieLabel,
                    maturityData,
                    [colorBlueOpacity, colorRedOpacity],
                    true
                );
            }
        });
    </script>
{% endblock %}