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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Indicateurs - Communs à l'ensemble des processus
{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .content {
            margin-left: 30px;
            max-width: 95%!important;
        }

        table {
            font-size: 16px;
        }


        table th {
            height: 40px;
        }

        table td {
            height: 50px;
        }

        table, td {
            border: 1px solid #ced4da;
            text-align: center;
        }

        thead, tfoot {
            background-color: #ced4da;
            color: #000;
            text-align: center;
        }

        table td.indicateur-name {
            background-color: #DCDCDC;
            font-weight: 900;
            width: 450px;
        }

        table td.indicateur-name.editable {
            border-right-color: darkgray;
            border-right-width: 3px;
        }


    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-header block-header-default bg-gray">
            <h4 class="font-w700" style="display: -webkit-box;margin-bottom: 0">Indicateurs</h4>
        </div>
        <div class="block-header block-header-default bg-gray" style="padding-top: 0;padding-bottom: 0">
            <h5 style="margin-bottom: 0"><span style="margin-right: 18px;font-weight: 900">{{ indicatorGroupLabel }}</h5>
        </div>
        <div class="block-header block-header-default bg-gray">
            <div style="display: block">
                <h5 class="font-w700" style="display: -webkit-box;margin-bottom: 0">
                    Année
                    <select id="search_year" class="form-control-select" data-url="">
                        {% for period in periods %}
                            <option value="{{ period.id }}" {% if period.id == indicatorYear %}selected{% endif%}>{{ period.name }}</option>
                        {% endfor %}
                    </select>
                </h5>
            </div>
        </div>

        <div class="block-content block-content-full">
            <table style="width: 100%">
                <thead>
                <tr>
                    <th class="indicateur-name">INDICATEURS</th>
                    <th>JANV</th>
                    <th>FEV</th>
                    <th>MARS</th>
                    <th>AVRIL</th>
                    <th>MAI</th>
                    <th>JUIN</th>
                    <th>JUILL</th>
                    <th>AOUT</th>
                    <th>SEPT</th>
                    <th>OCT</th>
                    <th>NOV</th>
                    <th>DEC</th>
                </tr>
                </thead>
                <tbody>
                {% for indicator in indicatorsDisplay %}
                    <tr>

                        <td class="indicateur-name {% if indicator.editableInformation %}editable{% endif %}">{{ indicator.label }}</td>
                        {% if indicator.code != '' or (indicator.code == '' and indicator.valueTemporary != '') %}
                            <td {% if indicator.editable and indicatorYear != 2022 %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','01','JANVIER','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-01" >{% if indicator.valueTemporary and indicatorYear != 2022 %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueJanvier }}{% endif%}</div></td>
                            <td {% if indicator.editable and indicatorYear != 2022 %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','02','FEVRIER','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-02">{% if indicator.valueTemporary and indicatorYear != 2022 %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueFevrier }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','03','MARS','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-03">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueMars }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','04','AVRIL','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-04">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueAvril }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','05','MAI','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-05">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueMai }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','06','JUIN','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-06">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueJuin }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','07','JUILLET','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-07">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueJuillet }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','08','AOUT','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-08">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueAout }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','09','SEPTEMBRE','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-09">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueSeptembre }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','10','OCTOBRE','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-10">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueOctobre }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','11','NOVEMBRE','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-11">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueNovembre }}{% endif%}</div></td>
                            <td {% if indicator.editable %}style="cursor: pointer" onclick="editIndicateur('{{ indicator.code }}','{{ indicatorYear }}','12','DECEMBRE','{{ indicator.label }}')"{% endif%}><div id="{{ indicator.code }}-12">{% if indicator.valueTemporary %}{{ indicator.valueTemporary }}{% else%}{{ indicator.valueDecembre }}{% endif%}</div></td>
                        {% else %}
                            <td colspan="12" style="background-color: #DCDCDC;"></td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% if indicatorGroup == 'SAV' or indicatorGroup == 'LOCATION' %}
                <div>
                    <div id="select-stat-ca-rma" style="margin-top: 2em; margin-bottom: 1em">
                        <select id="search_month_rma" class="form-control-select" data-url="{% if indicatorGroup == 'SAV' %}{{ path('api_plm_stat_rma_search') }}{% elseif indicatorGroup == 'LOCATION' %}{{ path('api_plm_stat_reploc_search') }}{% endif %}">
                            <option value="" disabled selected>Séléctionner un mois</option>
                            {% for period in periodsMonth %}
                                <option value="{{ period.id }}">{{ period.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div id="result-stat-ca-rma">
                        <div id="content-stat-ca-rma">
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    <button type="button" id="btn-modal-edit-indicateur" class="btn" data-toggle="modal" data-target="#modal-large-edit-indicateur" style="display: none"></button>

    <div class="modal" id="modal-large-edit-indicateur" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Modifier la valeur de l'indicateur</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <p style="font-weight: 700;"><span id="indicator-label"></span></p>
                            <div class="form-group row">
                                <label class="col-12">Mois de <span id="indicator-month-label"></span></label>
                                <div class="col-12" style="display: inline-flex">
                                    <input type="text" value="" id="indicator-value" class="form-control" autocomplete="off">
                                    <input type="hidden" value="" id="indicator-code">
                                    <input type="hidden" value="" id="indicator-year">
                                    <input type="hidden" value="" id="indicator-month">
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-modal-rma-edit-status-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button id="btn-update-indicator" type="button" class="btn btn-primary"  >
                            <i class="fa fa-check"></i> Modifier
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
    <script type="text/javascript">

        $("#search_year").on('change', function() {
            window.location.href = "{{ path('indicateurs') }}?group={{ indicatorGroup }}&year=" + $(this).find(":selected").val();
        });

        function editIndicateur(indicatorCode, year, month, monthLabel, indicatorLabel) {

            fieldToUpdateName = "#" + indicatorCode + "-" + month;
            $("#indicator-code").val(indicatorCode);
            $("#indicator-year").val(year);
            $("#indicator-month").val(month);
            $("#indicator-month-label").html(monthLabel);
            $("#indicator-value").val($(fieldToUpdateName).html());
            $("#indicator-label").html(indicatorLabel);
            $('#btn-modal-edit-indicateur').click();
        }


        $("#btn-update-indicator").on('click', function() {

            $('#btn-update-indicator').css('pointer-events', 'none');
            $('#btn-update-indicator').css('opacity', '0.5');
            $('#btn-update-indicator').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

            indicatorCode = $("#indicator-code").val();
            indicatorYear = $("#indicator-year").val();
            indicatorMonth = $("#indicator-month").val();
            indicatorValue = $("#indicator-value").val();

            var url = '{{ path('indicateur_update') }}';

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'indicatorCode': indicatorCode,
                    'indicatorPeriod': indicatorYear + indicatorMonth,
                    'indicatorValue': indicatorValue,
                },
                success: function(data){
                    fieldToUpdateName = "#" + indicatorCode + "-" + indicatorMonth;
                    $(fieldToUpdateName).html(indicatorValue);
                    $('#btn-update-indicator').css('pointer-events', 'auto');
                    $('#btn-update-indicator').css('opacity', '1');
                    $('#btn-update-indicator').html('<i class="fa fa-check"></i> Modifier');
                    $("#btn-modal-rma-edit-status-close").click();
                }
            });
        })

        $('#search_month_rma').change(function() {

            $('#result-stat-ca-rma').css('filter', 'opacity(30%)');
            $('#result-stat-ca-rma').css('-webkit-filter', 'opacity(30%)');
            $('#result-stat-ca-rma').prepend('<i class="fa fa-spinner fa-pulse fa-5x fa-fw spinner-search-club-position"></i>');

            window.setTimeout( getStatRma, 100 );
        });

        function getStatRma() {

            var period = $('#search_month_rma').val()

            var url = $('#search_month_rma').data('url');
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'period': period
                },
                success: function(data){
                    $('#content-stat-ca-rma').html(data);

                    $('#result-stat-ca-rma').css('filter', 'none');
                    $('#result-stat-ca-rma').css('-webkit-filter', 'none');
                    $('#result-stat-ca-rma').html(data);
                }
            });
        }


        $('#search_month_loc').change(function() {

            $('#result-stat-ca-loc').css('filter', 'opacity(30%)');
            $('#result-stat-ca-loc').css('-webkit-filter', 'opacity(30%)');
            $('#result-stat-ca-loc').prepend('<i class="fa fa-spinner fa-pulse fa-5x fa-fw spinner-search-club-position"></i>');

            window.setTimeout( getStatLoc, 100 );
        });

        function getStatLoc() {

            var period = $('#search_month_loc').val()

            var url = $('#search_month_loc').data('url');
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'period': period
                },
                success: function(data){
                    $('#content-stat-ca-loc').html(data);

                    $('#result-stat-ca-loc').css('filter', 'none');
                    $('#result-stat-ca-loc').css('-webkit-filter', 'none');
                    $('#result-stat-ca-loc').html(data);
                }
            });
        }

    </script>
{% endblock %}