{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1 class="underlined"><i class="fa fa-tag"></i>Ecran de mise à jour de masse des CMJ</h1>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div id="list">
            <div id="dtCMJUpdate" class="grid-x"></div>
            {% if dt_settings.data.data_set|length < 1 %}
                <p class="mt-2 text-center">{{ 'emptyData'|trans }}</p>
            {% endif %}
            <div class="table-button">
                <input id="hide_kanban" type="button" class="button mt-1" value="Afficher/cacher les kanban sans alerte"/>
                <input id="select_all" type="button" class="button mt-1" value="{{ 'cmjUpdate.button.select_all.label'|trans }}"/>
                <input id="valid_cmj_update" type="button" class="button success validation mt-1" value="{{ 'cmjUpdate.button.valid.label'|trans }}"/>
            </div>
        </div>
        <div id="screens" style="overflow-x: auto">

        </div>
    </div>

    {# MODAL CONFIRM ACTION #}

    <div class="reveal tiny" id="modalConfirmationAction" data-reveal>
        <div class="reveal-title">{{ 'cmjUpdate.modal.confirmation'|trans }}</div>
        <div class="reveal-body">
            <div id="info" class="text-center mb-1"></div>
            <div class="grid-x grid-padding-x align-center">
                <div class="cell shrink">
                    <a id="confirmModalYes" data-close class="button small no-mb" href="#">{{ 'cmjUpdate.modal.yes'|trans }}</a>
                </div>
                <div class="cell shrink">
                    <a data-close class="cancel button small no-mb">{{ 'cmjUpdate.modal.no'|trans }}</a>
                </div>
            </div>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            var dt_hidden = false;
            {% import 'App/_include/_new_array_event.js.twig' as array_event %}
            {{ array_event.js_import_general_functions }}
            {% if is_granted('ROLE_APP_SUB_IMPORT_KB_APPRO') or is_granted('ROLE_APP_SUB_IMPORT_CMJ') %}
            {% import 'App/_include/_import/_modal.import.js.twig'  as macro_import_js %}
            {% endif %}
            {% if is_granted('ROLE_APP_SUB_IMPORT_KB_APPRO') %}
            {{ macro_import_js.js_import('kanban', 0, 'import_kanban',constant('App\\Entity\\Kanban\\KanbanType::APPRO')) }}
            {% endif %}
            {% if is_granted('ROLE_APP_SUB_IMPORT_CMJ') %}
            {{ macro_import_js.js_import('kanban', 1, 'import_cmj',constant('App\\Entity\\Kanban\\KanbanType::APPRO')) }}
            {% endif %}
            {% include 'App/_include/_export/_modal.export.js.twig'  %}
            
            {% if dt_settings.data.data_set|length > 0 %}
            let dtToolbar_test = new dtToolbar(document.getElementById('dtCMJUpdate'),  
                                                {{ dt_settings|json_encode|raw }}, 
                                                [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 
                                                'id':'btn_generate_rapports',
                                                'icon':'fa-book'},
                                                 {'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 
                                                'id':'btn_call_export',
                                                'icon':'fa-cloud-upload'}]);
            
            table = {{ dt_settings.data.data_set|json_encode|raw }};
            table_hidden = {{ dt_settings_hidden.data.data_set|json_encode|raw }};
            for(var row of table) {
                var rowId = row['DT_RowId'];
                var changeStyle = document.getElementById(rowId);
                changeStyle.childNodes[0].id = row['DT_RowId'].slice(11);
                changeStyle.childNodes[0].classList.add("redirect_to_kanban");                              
                if (typeof row['ecart'] !== 'string' && row['ecart'] > {{ecart}}) {
                    if (changeStyle != null) {
                        changeStyle.childNodes[7].innerHTML = "<div class=\"etiquette_cmj\">" + row["kanban_cmj"] + "</div>";
                    }
                }
            }

            $('.redirect_to_kanban').click(function () {
                let url = "{{ url('app_kanban_board_redirect_to_kanban_type',{'kanbanid':'__00__'}) }}";
                window.location = url.replace('__00__', this.id);
            });

            {% endif %}

            let info_div = document.getElementById('info');
            let valid_prop = document.getElementById("valid_prop");
            let select_all = document.getElementById("select_all");

            $('#valid_cmj_update').click(function(event){
                event.preventDefault();
                info_div.innerText = "{{ 'cmjUpdate.button.valid.label'|trans }}?";
                $("#modalConfirmationAction").foundation('open');
            });

            $('#hide_kanban').click(function(event){
                event.preventDefault();
                var div = document.getElementById('dtCMJUpdate');
                while(div.firstChild){
                    div.removeChild(div.firstChild);
                }
                document.getElementById('dtCMJUpdate').innerHTML= "";
                if (dt_hidden == false) {
                    dt_hidden = true;
                    let dtToolbar_test = new dtToolbar(document.getElementById('dtCMJUpdate'),  
                                    {{ dt_settings_hidden|json_encode|raw }}, 
                                    [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 
                                    'id':'btn_generate_rapports',
                                    'icon':'fa-book'},
                                        {'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 
                                    'id':'btn_call_export',
                                    'icon':'fa-cloud-upload'}]);
                    for(var row of table) {
                        var rowId = row['DT_RowId'];
                        var changeStyle = document.getElementById(rowId);
                        changeStyle.childNodes[0].id = row['DT_RowId'].slice(11);
                        changeStyle.childNodes[0].classList.add("redirect_to_kanban");                              
                        if (typeof row['ecart'] !== 'string' && row['ecart'] > {{ecart}}) {
                            if (changeStyle != null) {
                                changeStyle.childNodes[7].innerHTML = "<div class=\"etiquette_cmj\">" + row["kanban_cmj"] + "</div>";
                            }
                        }
                    }
                }
                else {
                    dt_hidden = false;
                    let dtToolbar_test = new dtToolbar(document.getElementById('dtCMJUpdate'),  
                                    {{ dt_settings|json_encode|raw }}, 
                                    [{'type':'button','title':'{{ "datatable.custom_button.report"|trans }}', 
                                    'id':'btn_generate_rapports',
                                    'icon':'fa-book'},
                                        {'type':'button','title': '{{ "datatable.custom_button.export" | trans }}', 
                                    'id':'btn_call_export',
                                    'icon':'fa-cloud-upload'}]);
                    for(var row of table) {
                        var rowId = row['DT_RowId'];
                        var changeStyle = document.getElementById(rowId);
                        changeStyle.childNodes[0].id = row['DT_RowId'].slice(11);
                        changeStyle.childNodes[0].classList.add("redirect_to_kanban");                              
                        if (typeof row['ecart'] !== 'string' && row['ecart'] > {{ecart}}) {
                            if (changeStyle != null) {
                                changeStyle.childNodes[7].innerHTML = "<div class=\"etiquette_cmj\">" + row["kanban_cmj"] + "</div>";
                            }
                        }
                    }
                }
            });

            $('#confirmModalYes').click(function(e){
                Validating();
            });

            $('#confirmModalNo').click(function(e){
                $("#confirmModalNo").foundation('close');
            });

            select_all.addEventListener("click", function(){
                SelectingAll();
            });

            function Validating() {
                let table = document.getElementById("dtCMJUpdate");
                let checkBoxes = table.getElementsByTagName("INPUT");
                let arrayIdProp = [];

                for (let i = 0; i < checkBoxes.length; i++) {
                    if(checkBoxes[i].checked === true){
                        let string_id_prop = checkBoxes[i].parentNode.parentNode.id
                        let id_prop = string_id_prop.replace(/\D/g, "");
                        arrayIdProp.push(id_prop);
                    }
                }

                var filtered = arrayIdProp.filter(function (el) {
                        return el != '';
                });
                arrayIdProp = filtered;

                url = '{{ url("app_update_maj_cmj") }}';
                $.ajax({
                    url: url,
                    method: "POST",
                    data: {
                        token : "{{ csrf_token('app_update_maj_cmj') }}",
                        data: arrayIdProp
                    },
                    success: function (response) {
                        if (response.hasOwnProperty('result')){
                            if (response.result){
                                window.location = "{{ url('app_list_maj_cmj') }}";
                            }
                        }
                    },
                    error: function () {
                        console.log("error")
                    }
                })

                $("#modalConfirmationAction").foundation('close');
            }

        let statut = 0;

        function SelectingAll(){
            let table = document.getElementById("dtCMJUpdate");
            let checkBoxes = table.getElementsByTagName("INPUT");
            if (statut === 0) {
                for (let i = 0; i < checkBoxes.length; i++) {
                    checkBoxes[i].checked = true;
                }
                statut = 1;
            } else {
                for (let z = 0; z < checkBoxes.length; z++) {
                    checkBoxes[z].checked = false;
                }
                statut = 0;
            }
        }
        });
    </script>
{% endblock %}