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

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

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

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

{% block body %}
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i aria-hidden="true" class="fa fa-crosshairs"></i></span>

                <div class="info-box-content">
                    <p class="no-margin">
                        <span>{{ 'reporting.dashboard.label.planified_action_average'|trans }}</span>
                        <span class="info-box-number">{{ data.mesurementByCollectivity.average|number_format(2, ',')}}</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-red"><i aria-hidden="true" class="fa fa-file-shield"></i></span>
                <div class="info-box-content">
                    <p class="no-margin">
                        <span>{{ 'reporting.dashboard.label.proof_average'|trans }}</span>
                        <span class="info-box-number">{{ data.proofByCollectivity.average|number_format(2, ',')}}</span>
                    </p>
                </div>
            </div>
        </div>

        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-green"><i aria-hidden="true" class="fa fa-clipboard-list"></i></span>
                <div class="info-box-content">
                    <p class="no-margin">
                        <span>{{ 'reporting.dashboard.label.reporting_review_average'|trans }}</span>
                        <span class="info-box-number">{{ data.balanceSheetProofByCollectivity.average|number_format }}<small>%</small></span>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-yellow"><i aria-hidden="true" class="fa fa-chart-line"></i></span>
                <div class="info-box-content">
                    <p class="no-margin">
                        <span>{{ 'reporting.dashboard.label.maturity_survey_average'|trans }}</span>
                        <span class="info-box-number">{{ data.surveyLastYear.average|number_format }}<small>%</small></span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
    {% if app_commune_svg_reduced_path is not empty %}
      <div class="col-sm-6 col-xs-12">
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">{{ 'reporting.dashboard.tab.map'|trans }}</h3>
          </div>
          <div class="box-body no-padding map-wrapper">
            <div class="row">
              <div class="col-md-8 col-sm-8">
                <div class="pad">
                  <div id="svg-map">
                    {{source('@public_path'~asset(app_commune_svg_reduced_path))}}
                  </div>
                </div>
              </div>
              <div class="col-md-4 col-sm-4 bg-green">
                <div class="pad">
                  <p class="report text-center">
                    <i aria-hidden="true" class="fa fa-house"></i>
                    <span class="info-box-number">{{data.collectivityByAddressInsee.value.all}}</span>
                    <span class="info-box-text">{{ 'reporting.dashboard.label.total_structures'|trans }}</span>
                  </p>
                  <p class="report text-center">
                    <i aria-hidden="true" class="fa fa-user-shield"></i>
                    <span class="info-box-number">{{data.collectivityByAddressInsee.value.dpoPercent}} %</span>
                    <span class="info-box-text">{{ 'reporting.dashboard.label.mutual_dpd'|trans }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div id="tooltip" class="tooltip-box text-left"></div>
          </div> <!-- end box body-->
        </div>
      </div>
    {% endif %}
        <div class="col-sm-6 col-xs-12">
            {% if app_activate_notifications and app_notification_dashboard_shown == 'true' %}
                {% set maxNotifs = app_notification_dashboard_number %}
                {% set notifs = notifications.findAll()|filter(n => n.readAt is not defined or n.readAt is null) %}

                <div id="notifications" class="box box-solid">
                    {{ block("body", "Notification/Notification/box.html.twig") }}
                </div>
            {% endif %}
        </div>
        <div class="col-sm-6 col-xs-12">
          <div class="box box-solid">
              <div class="box-header with-border">
                <h3 class="box-title">{{ 'reporting.dashboard.tab.structures'|trans }}</h3>
              </div>
              <div class="box-body">
                  {% if 0 == data.collectivityByType.value.all %}
                      {{ 'global.label.no_data'|trans }}
                  {% else %}
                      <div>
                          <canvas id="collectivity-type" width="400" height="220"></canvas>
                      </div>
                  {% endif %}
              </div>
          </div>
        </div>
        {# EXPORT CSV #}
        <div class="col-sm-6 col-xs-12">
            <div class="small-box bg-yellow">
              <div class="inner">
                  <p>{{ 'reporting.dashboard.label.export_registry_treatments'|trans }}</p>
              </div>
              <a aria-label="{{ 'reporting.dashboard.label.export_registry_treatments_csv'|trans }}" href="{{ path('reporting_dashboard_generate_csv', {'exportType': constant('App\\Domain\\Reporting\\Handler\\ExportCsvHandler::TREATMENT_TYPE')}) }}" class="small-box-footer">
                  {{ 'global.action.export'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
              </a>
            </div>
            <div class="small-box bg-yellow">
                <div class="inner">
                    <p>{{ 'reporting.dashboard.label.export_registry_contractors'|trans }}</p>
                </div>
                <a aria-label="{{ 'reporting.dashboard.label.export_registry_contractors_csv'|trans }}" href="{{ path('reporting_dashboard_generate_csv', {'exportType': constant('App\\Domain\\Reporting\\Handler\\ExportCsvHandler::CONTRACTOR_TYPE')}) }}" class="small-box-footer">
                    {{ 'global.action.export'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="small-box bg-yellow">
                <div class="inner">
                    <p>{{ 'reporting.dashboard.label.export_registry_mesurements'|trans }}</p>
                </div>
                <a aria-label="{{ 'reporting.dashboard.label.export_registry_mesurements_csv'|trans }}" href="{{ path('reporting_dashboard_generate_csv', {'exportType': constant('App\\Domain\\Reporting\\Handler\\ExportCsvHandler::MESUREMENT_TYPE')}) }}" class="small-box-footer">
                    {{ 'global.action.export'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
            <div class="small-box bg-yellow">
                <div class="inner">
                    <p>{{ 'reporting.dashboard.label.export_user_collectivities'|trans }}</p>
                </div>
                <a aria-label="{{ 'reporting.dashboard.label.export_user_collectivities_csv'|trans }}" href="{{ path('reporting_dashboard_generate_csv', {'exportType': constant('App\\Domain\\Reporting\\Handler\\ExportCsvHandler::COLLECTIVITY_TYPE')}) }}" class="small-box-footer">
                    {{ 'global.action.export'|trans }} <i aria-hidden="true" class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>

{% endblock %}

{% set inseeObjectFlatten = data.collectivityByAddressInsee.value.addressInsee %}

{% 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 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 colorOne = 'rgb(255, 246, 0, 1)';
        let colorOneOpacity = 'rgb(255, 246, 0, 0.5)';
        let colorTwo = 'rgb(89,46,11, 1)';
        let colorTwoOpacity = 'rgb(89,46,11, 0.5)';
        let colorThree = 'rgb(255, 0, 0, 1)';
        let colorThreeOpacity = 'rgb(255, 0, 0, 0.5)';
        let colorFour = 'rgb(173, 173, 173, 1)';
        let colorFourOpacity = 'rgb(173, 173, 173, 0.5)';

        // COLLECTIVITY BY TYPE
        let collectivityByTypeLabel = [
            'Commune',
            'CCAS',
            'EPCI',
            'CIAS',
            'Syndicat',
            'Sanitaire',
            'Méd/Social',
            'Association',
            'Entreprise',
            'Autre',
        ];
        let collectivityByTypeData = [
            {{ data.collectivityByType.value.type.commune }},
            {{ data.collectivityByType.value.type.ccas }},
            {{ data.collectivityByType.value.type.epci }},
            {{ data.collectivityByType.value.type.cias }},
            {{ data.collectivityByType.value.type.syndicat }},
            {{ data.collectivityByType.value.type.sanitary_institution }},
            {{ data.collectivityByType.value.type.medical_institution }},
            {{ data.collectivityByType.value.type.association }},
            {{ data.collectivityByType.value.type.enterprise }},
            {{ data.collectivityByType.value.type.other }},
        ];
    </script>

    <script>

        (function mapModule (){

            function appendSpan (jqueryElement, text){
                jqueryElement.append("<span>"+text+"</span><br/>")
            }

            function appendCollectivityName (jqueryElement, text){
                jqueryElement.append("<span class=\"collectivity-name\">"+text+"</span><br/>")
            }

            function isAvailableInsee (insee, inseeList) {
                let result = false;
                if(insee && inseeList && Object.entries(inseeList).length > 0){
                    result = !!inseeList[insee]
                }
                return result;
            }

            $( document ).ready(function() {
                const tooltip = $('#tooltip')
                const availableInsees = {{ inseeObjectFlatten|json_encode()|raw }};


                let paths = $('path');
                paths.attr("fill","#FFFFFF")
                paths.attr('stroke-opacity',"0.2")
                paths.attr('stroke-width','200')
                paths.attr('cursor','pointer')
                paths.each(function () {
                    let item = $(this);
                    let insee = item.attr('fme:insee_com');
                    const isAvailable = isAvailableInsee(insee, availableInsees)
                    if(isAvailable){
                        item.attr('fill', '#01C0EF');
                        item.on('mouseover', e => {
                            item.attr('fill', '#F49C12')
                            const x= e.clientX;
                            const y= e.clientY;
                            tooltip.css('top', (y + 20) + 'px').css('left', x + 'px');
                            $.each(availableInsees[insee], function (key, value) {
                                const nomCommune = value.name
                                const nbTraitementActifs = value.nbTraitementActifs
                                const nbActionsProtection = value.nbActionsProtection
                                appendCollectivityName(tooltip,nomCommune)
                                appendSpan(tooltip,'Nb traitements actifs: ' + nbTraitementActifs)
                                appendSpan(tooltip,'Nb actions de protection: ' + nbActionsProtection)
                            })
                            tooltip.show();
                        });
                        item.on('mouseout', () => {

                            item.attr('fill', '#01C0EF')
                            tooltip.hide();
                            tooltip.empty();
                            tooltip.removeAttr('style');
                        });
                    }
                });
            });
        })();
    </script>

    {# USE DATA & DEFINE GRAPH #}
    {{ encore_entry_script_tags('js/dashboard_admin') }}
{% endblock %}