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

{% set bodyClass = 'reporting_dashboard' %}
{% set menuItem = 'reporting_dashboard' %}

{% block body_head %}
    <h1>
        {{ 'reporting.dashboard.title'|trans }}
        <small>{{ app.user.collectivity }}</small>
    </h1>
{% endblock %}

{% block breadcrumb %}
    {% set breadcrumb = [] %}
    {% include '_breadcrumb.html.twig' with {'breadcrumb': breadcrumb} %}
{% endblock %}

{% block body %}
    <div class="tdb">
        <div class="row">
            {# LEFT #}
            <div class="col-md-6">
                <div class="row">
                    {# DETAIL : CONTRACTOR #}
                    <div class="col-md-6">
                        <div class="box box-solid">
                            <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.registry_contractors'|trans }}</h3></div>
                            <div class="box-body">
                                {% if 0 == data.contractor.all %}
                                    <p class="no-margin">{{ 'global.label.no_data'|trans }}</p>
                                {% else %}
                                    <div class="col-sm-6 col-sm-offset-0 col-xs-4 col-xs-offset-1 text-center">
                                        <canvas id="contractor-clauses" width="400" height="400"></canvas>
                                        <p>{{ 'registry.contractor.label.contractual_clauses_verified'|trans }}</p>
                                    </div>
                                    <div class="col-sm-6 col-sm-offset-0 col-xs-4 col-xs-offset-1 text-center">
                                        <canvas id="contractor-adopted-security-features" width="400" height="400"></canvas>
                                        <p>{{ 'registry.contractor.list.adopted_security_features'|trans }}</p>
                                    </div>
                                    <div class="col-sm-6 col-sm-offset-0 col-xs-4 col-xs-offset-1 text-center">
                                        <canvas id="contractor-maintains-treatment-register" width="400" height="400"></canvas>
                                        <p>{{ 'registry.contractor.list.maintains_treatment_register'|trans }}</p>
                                    </div>
                                    <div class="col-sm-6 col-sm-offset-0 col-xs-4 col-xs-offset-1 text-center">
                                        <canvas id="contractor-sending-data-outside-eu" width="400" height="400"></canvas>
                                        <p>{{ 'registry.contractor.list.sending_data_outside_eu'|trans }}</p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        {# REQUEST #}
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3>{{ data.request.value.status.toProcess }}</h3>
                                <p>{{ 'reporting.dashboard.label.requests_to_do'|trans }}</p>
                            </div>
                            <div class="icon">
                                <i aria-hidden="true" class="fa fa-users"></i>
                            </div>
                            <a href="{{ path('registry_request_list') }}" class="small-box-footer" aria-label="{{ 'reporting.dashboard.action.read_more_requests'|trans }}">
                                {{ 'reporting.dashboard.action.read_more'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                            </a>
                        </div>
                        <div class="box box-solid">
                            <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.registry_requests'|trans }}</h3></div>
                            <div class="box-body">
                                {% if 0 == data.request.value.all %}
                                    <p class="no-margin">{{ 'global.label.no_data'|trans }}</p>
                                {% else %}
                                    <div class="col-sm-6 col-sm-offset-0 col-xs-4 col-xs-offset-1 text-center" style="padding-left: 0; padding-right: 0;">
                                        <canvas id="request-type" width="500" height="500"></canvas>
                                        <p>{{ 'reporting.dashboard.label.requests_type'|trans }}</p>
                                    </div>
                                    <div class="col-sm-6 col-sm-offset-0 col-xs-4 col-xs-offset-1 text-center" style="padding-left: 0; padding-right: 0;">
                                        <canvas id="request-status" width="500" height="500"></canvas>
                                        <p>{{ 'reporting.dashboard.label.requests_state'|trans }}</p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        {# DETAIL : MATURITY #}
                        <div class="box box-solid">
                            <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.maturity_survey'|trans }}</h3></div>
                            <div class="box-body select-width">
                                {% if data.maturity is empty %}
                                    <p class="no-margin">{{ 'global.label.no_data'|trans }}</p>
                                {% else %}
                                    <select class="selectpicker" id="referentiel-chooser">
                                        {% for ref in referentiels %}
                                            <option value="{{ ref.id }}" {% if ref.id == selected_ref.id %}selected{% endif %}>{{ ref.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div style="margin-top: 1em">
                                        {% if data.maturity.new is defined and data.maturity.new.data is defined and data.maturity.new.data|length >= 3 %}
                                            <canvas id="maturity-radar"></canvas>
                                        {% else %}
                                            {{ 'reporting.dashboard.label.maturity_referentiel_error'|trans }}
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>

                        {# DETAIL : TREATMENTS #}
                        <div class="box box-solid">
                            <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.security_measures'|trans }}</h3></div>
                            <div class="box-body">
                                {% if 0 == data.treatment.value.numeric %}
                                    <p class="no-margin">{{ 'global.label.no_data'|trans }}</p>
                                {% else %}
                                    <canvas id="treatment-bar"></canvas>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% if app.user.collectivity.hasModuleConformiteTraitement == true or
                    app.user.collectivity.hasModuleConformiteOrganisation == true %}
                    <div class="row">
                        <div class="col-md-12">
                            {# DETAIL : CONFORMITE TRAITEMENT #}
                            {% if app.user.collectivity.hasModuleConformiteTraitement == true %}
                                <div class="box box-solid">
                                    <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.conformite_traitements'|trans }}</h3></div>
                                    <div class="box-body">
                                        {% if data.conformiteTraitement.data is empty %}
                                            <p class="no-margin">{{ 'global.label.no_data'|trans }}</p>
                                        {% else %}
                                            <canvas id="conformiteTraitement-pie"></canvas>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>

            {# RIGHT #}
            <div class="col-md-6">
                <div class="row">
                    {# AIPD #}
                    <div class="col-sm-6 col-xs-12">
                        {% if app.user.collectivity.hasModuleConformiteTraitement == true %}
                            <div class="small-box bg-light-blue">
                                <div class="inner">
                                    <h3>{{ data.aipd.toDo }}</h3>
                                    <p>{{ 'reporting.dashboard.label.aipd_to_do'|trans }}</p>
                                </div>
                                <div class="icon">
                                    <i aria-hidden="true" class="fa fa-magnifying-glass-chart"></i>
                                </div>
                                <a href="{{ path('registry_conformite_traitement_list') }}" class="small-box-footer" aria-label="{{ 'reporting.dashboard.action.read_more_aipd'|trans }}">
                                    {{ 'reporting.dashboard.action.read_more'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        {% endif %}
                    </div>

                    {# Action to realize #}
                    <div class="col-sm-6 col-xs-12">
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3>{{ data.mesurement.value.planified }}</h3>
                                <p>{{ 'reporting.dashboard.label.planified_action'|trans }}</p>
                            </div>
                            <div class="icon">
                                <i aria-hidden="true" class="fa fa-crosshairs"></i>
                            </div>
                            <a href="{{ path('registry_mesurement_action_plan') }}" class="small-box-footer" aria-label="{{ 'reporting.dashboard.action.read_more_action_plan'|trans }}">
                                {{ 'reporting.dashboard.action.read_more'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    {# VIOLATION #}
                    <div class="col-sm-6 col-xs-12">
                        <div class="small-box bg-red">
                            <div class="inner">
                                <h3>{{ data.violation.value.all }}</h3>
                                <p>{{ 'reporting.dashboard.label.violation_to_do'|trans }}</p>
                            </div>
                            <div class="icon">
                                <i aria-hidden="true" class="fa fa-exclamation-circle"></i>
                            </div>
                            <a href="{{ path('registry_violation_list') }}" class="small-box-footer" aria-label="{{ 'reporting.dashboard.action.read_more_violation'|trans }}">
                                {{ 'reporting.dashboard.action.read_more'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div>

                    {# MESUREMENT : applied #}
                    <div class="col-sm-6 col-xs-12">
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>{{ data.mesurement.value.applied }}</h3>
                                <p>{{ 'reporting.dashboard.label.action_done'|trans }}</p>
                            </div>
                            <div class="icon">
                                <i aria-hidden="true" class="fa fa-adjust"></i>
                            </div>
                            <a href="{{ path('registry_mesurement_list') }}" class="small-box-footer" aria-label="{{ 'reporting.dashboard.action.read_more_mesurements'|trans }}">
                                {{ 'reporting.dashboard.action.read_more'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-warning">
                            <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.registry_action_plan'|trans }} <small>{{ app_user_dashboard_action_plan_limit }} {{ 'reporting.dashboard.tab.registry_action_plan_subtitle'|trans }}</small></h3></div>
                            <div class="box-body">
                                <table class="table table-striped table-bordered">
                                    <caption class="sr-only">{{ 'reporting.dashboard.tab.registry_action_plan'|trans }} {{ app_user_dashboard_action_plan_limit }} {{ 'reporting.dashboard.tab.registry_action_plan_subtitle'|trans }}</caption>
                                    <thead>
                                        <tr>
                                            <th scope="col">{{ 'registry.mesurement.label.name'|trans }}</th>
                                            <th scope="col">{{ 'registry.mesurement.label.planification_date'|trans }}</th>
                                            <th scope="col">{{ 'registry.mesurement.label.priority'|trans }}</th>
                                            <th scope="col">{{ 'registry.mesurement.label.manager'|trans }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% if not actions|length %}
                                            <tr>
                                                <td colspan="4" style="text-align: center">
                                                    {{ 'global.label.no_data'|trans }}
                                                </td>
                                            </tr>
                                        {% endif %}
                                        {% for action in actions %}
                                            <tr>
                                                <th scope="row"><a href="/actions-de-protection/visualiser/{{ action.id }}" >{{ action.name }}</a></th>
                                                <td>{{ action.planificationDate|date('d/m/Y') }}</td>
                                                <td>
                                                    {% set key = action.priority %}
                                                    {% if key is not null %}
                                                        {% if key is same as ('low') %}
                                                            <span class="badge bg-blue">{{ dictionary('registry_mesurement_priority')[key] }}</span>
                                                        {% elseif key is same as ('normal') %}
                                                            <span class="badge bg-yellow">{{ dictionary('registry_mesurement_priority')[key] }}</span>
                                                        {% elseif key is same as ('high') %}
                                                            <span class="badge bg-red">{{ dictionary('registry_mesurement_priority')[key] }}</span>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                                <td>{{ action.manager }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    {% if app.user.collectivity.hasModuleConformiteOrganisation == true %}
                        <div class="col-md-12">
                            {# DETAIL : CONFORMITE ORGANISATION #}
                            <div class="box box-solid">
                                <div class="box-header with-border"><h3 class="box-title">{{ 'reporting.dashboard.tab.conformite_structure'|trans }}</h3></div>
                                {% if data.conformiteOrganisation is empty %}
                                    <div class="box-body">
                                        <p class="no-margin">{{ 'global.label.no_data'|trans }}</p>
                                    </div>
                                {% else %}
                                    <div class="box-body no-padding">
                                        <table class="table table-striped">
                                            <caption class="sr-only">{{ 'reporting.dashboard.tab.conformite_structure'|trans }}</caption>
                                            <thead>
                                                <tr>
                                                    <th scope="col">{{ 'registry.conformite_organisation.list.processus'|trans }}</th>
                                                    <th scope="col">{{ 'reporting.dashboard.label.progress'|trans }}</th>
                                                    <th style="width: 40px" scope="col">{{ 'registry.conformite_organisation.list.conformite'|trans }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for conformite in data.conformiteOrganisation %}
                                                    {% set score = (conformite['conformite'] / 5 * 100) %}
                                                    {% if score < 50 %}
                                                        {% set color = 'red' %}

                                                    {% elseif score < 70 %}
                                                        {% set color = 'yellow' %}
                                                    {% else %}
                                                        {% set color = 'green' %}
                                                    {% endif %}
                                                    <tr>
                                                        <th scope="row">{{ conformite['processus'] }}</th>
                                                        <td aria-label="{{ score }}%">
                                                            <div class="progress progress-xs" aria-hidden="true">
                                                                <div class="progress-bar progress-bar-{{ color }}" style="width: {{ score }}%"></div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span style="min-width: 100%" class="badge bg-{{ color }}">{{ score }}%</span>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# JOURNALISATION #}
        <div class="row">
            <div class="col-md-12">
                <div class="box box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">{{ 'reporting.dashboard.tab.reporting_journalisation'|trans }} <small>{{ app_user_dashboard_journalisation_limit }} {{ 'reporting.dashboard.tab.reporting_journalisation_subtitle'|trans }}</small></h3>
                    </div>
                    <div class="box-body no-padding">
                        <table class="table">
                            <caption class="sr-only">{{ 'reporting.dashboard.tab.reporting_journalisation'|trans }} {{ 'reporting.dashboard.tab.reporting_journalisation_subtitle'|trans }}</caption>
                            <thead>
                                <tr>
                                    <th scope="col">{{ 'reporting.journalisation.list.user_name'|trans }}</th>
                                    <th scope="col">{{ 'reporting.journalisation.list.email'|trans }}</th>
                                    <th scope="col">{{ 'reporting.journalisation.list.date'|trans }}</th>
                                    <th scope="col">{{ 'reporting.journalisation.list.subject'|trans }}</th>
                                    <th scope="col">{{ 'reporting.journalisation.list.action'|trans }}</th>
                                    <th scope="col">{{ 'reporting.journalisation.list.action_name'|trans }}</th>
                                    <th scope="col">{{ 'reporting.journalisation.list.link'|trans }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for logJournal in data.logJournal %}
                                    {% set logJournalLink = getLogJournalLink(logJournal) %}
                                    <tr>
                                        <td>{{ logJournal.userFullName }}</td>
                                        <td>{{ logJournal.userEmail }}</td>
                                        <td>{{ logJournal.date|date('d/m/Y') }}</td>
                                        <td>{{ logJournal.subjectType ? logJournal.subjectType|dictionary('reporting_log_journal_subject') : '' }}</td>
                                        <td>{{ logJournal.action ? logJournal.action|dictionary('reporting_log_journal_action') : '' }}</td>
                                        <th scope="row">{{ logJournal.subjectName }}</th>
                                        <td>
                                            {% if logJournal.isDeleted %}
                                                {{ logJournalLink }}
                                            {% elseif logJournalLink is not null %}
                                                <a href="{{ logJournalLink }}">{{ 'reporting.journalisation.list.link'|trans }}</a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% 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>

    {# DEFINE DATA #}
    <script>
        let labelYes = '{{ 'global.label.yes'|trans }}';
        let labelNo = '{{ 'global.label.no'|trans }}';

        let colorBlue = 'rgba(54, 162, 235, 1)';
        let colorBlueOpacity = 'rgba(54, 162, 235, 0.5)';
        let colorGreen = ' rgba(48, 183, 44, 1)';
        let colorGreenOpacity = ' rgba(48, 183, 44, 0.5)';
        let colorPurple = 'rgba(153, 51, 204, 1)';
        let colorPurpleOpacity = 'rgba(153, 51, 204, 0.5)';
        let colorRed = 'rgba(255, 99, 132, 1)';
        let colorRedOpacity = 'rgba(255, 99, 132, 0.5)';
        let colorTeal = 'rgba(0, 105, 92, 1)';
        let colorTealOpacity = 'rgba(0, 105, 92, 0.5)';
        let colorOrange = 'rgb(255, 136, 0, 1)';
        let colorOrangeOpacity = 'rgb(255, 136, 0, 0.5)';

        let labelYesNo = [labelYes, labelNo];

        // CONTRACTOR
        let contractorClausesData = [{{ data.contractor.clauses.yes }}, {{ data.contractor.clauses.no }}];
        let contractorAdoptedSecurityFeaturesData = [{{ data.contractor.adoptedSecurityFeatures.yes }}, {{ data.contractor.adoptedSecurityFeatures.no }}];
        let contractorMaintainsTreatmentRegisterData = [{{ data.contractor.maintainsTreatmentRegister.yes }}, {{ data.contractor.maintainsTreatmentRegister.no }}];
        let contractorSendingDataOutsideEuData = [{{ data.contractor.sendingDataOutsideEu.yes }}, {{ data.contractor.sendingDataOutsideEu.no }}];

        // MESUREMENT
        let mesurementStatusData = [{{ data.mesurement.value.applied }}, {{ data.mesurement.value.planified }}, {{ data.mesurement.value.notApplied }}];

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

        {% if data.maturity.new is defined %}
            let tmpData1 = [];
            maturitySerieLabel.push('{{ data.maturity.new.name }}');
            {% for position, info in data.maturity.new.data %}
                maturityLabels.push('{{ info.name }}');
                tmpData1.push('{{ info.score }}');
            {% endfor %}
            maturityData.push(tmpData1);
        {% endif %}
        {% if data.maturity.old is defined %}
            let tmpData2 = [];
            maturitySerieLabel.push('{{ data.maturity.old.name }}');
            {% for position, info in data.maturity.old.data %}
                tmpData2.push('{{ info.score }}');
            {% endfor %}
            maturityData.push(tmpData2);
        {% endif %}

        // REQUEST
        let requestTypeLabel = [
            'Rectifier des données',
            'Supprimer des données',
            'Retirer le consentement',
            'Accéder à des données',
            'Portabilité des données',
            'Limiter le traitement',
            'S\'opposer au traitement',
            'Autre',
        ];

        let requestTypeData = [
          {{ data.request.value.type.correct }},
          {{ data.request.value.type.delete }},
          {{ data.request.value.type.withdrawConsent }},
          {{ data.request.value.type.access }},
          {{ data.request.value.type.dataPortability }},
          {{ data.request.value.type.limitTreatment }},
          {{ data.request.value.type.oppositeTreatment }},
          {{ data.request.value.type.other }},
        ];

        let requestStatusLabel = [
            'Traitée et clôturée',
            'À traiter',
            'Demande refusée',
        ];
        let requestStatusData = [
          {{ data.request.value.status.processed }},
          {{ data.request.value.status.toProcess }},
          {{ data.request.value.status.denied }}
        ];

        // TREATMENT
        let treatmentLabels = [
            'Contrôle d\'accès',
            'Traçabilité',
            'Sauvegarde',
            'Mises à jour',
        ];
        let treatmentDatasetYes = [];
        let treatmentDatasetNo = [];
        {% for key, item in data.treatment.value.data %}
            {% set yesItem = attribute(item, 'yes') %}
            {% set noItem = attribute(item, 'no') %}
            {% if yesItem > 0 or noItem > 0  %}
            treatmentDatasetYes.push('{{ attribute(item, 'yes') }}');
            treatmentDatasetNo.push('{{ attribute(item, 'no') }}');
            {% endif %}
        {% endfor %}

        // CONFORMITE TRAITEMENT
        let conformiteTraitementLabels = {{ data.conformiteTraitement.labels|json_encode|raw }};
        let conformiteTraitementData = [];
        {% if data.conformiteTraitement.data %}
            conformiteTraitementData = {{ data.conformiteTraitement.data|json_encode|raw }};
        {% endif %}
        let conformiteTraitementColors = {{ data.conformiteTraitement.colors|json_encode|raw }};
    </script>

    {# USE DATA & DEFINE GRAPH #}
    {{ encore_entry_script_tags('js/dashboard') }}

    <script>
        $(document).ready(function() {
            $('body').on('change', '#referentiel-chooser', function() {
                window.location.href = "{{ app.request.pathinfo }}?referentiel=" + $(this).val();
            })
        })
    </script>
{% endblock %}