{% 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>Tableau de bord Kanban Electronique</h1>
            </div>
            <div class="mb-0-2 cell small-12 medium-shrink header_action" id="swap_box">
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div class="grid-x">
            <div class="cell small-10">
                <div id="filter_div">
                    {{ form_start(formFilter, {'attr': {'id': 'formFilter'}}) }}
                    <div class="grid-x grid-margin-x">
                        <div class="cell small-12">
                            <div class="grid-x grid-margin-x">
                                <div class="cell small-2">
                                    {{ form_widget(formFilter.codeF)}}
                                </div>
                                <div class="cell small-2">
                                    {{ form_widget(formFilter.codeAF)}}
                                </div>
                                <div class="cell small-2">
                                    {{ form_widget(formFilter.codeS)}}
                                </div>
                                <div class="cell small-2">
                                    {{ form_widget(formFilter.type)}}
                                </div>
                                <div class="cell small-2">
                                    <div class="grid-x grid-margin-x row">
                                        <div class="cell small-6 text-center">
                                            <div class="" id="div_le_fixe">
                                                {{ form_label(formFilter.le_fixe)}}
                                                {{ form_widget(formFilter.le_fixe)}}
                                            </div>
                                        </div>
                                        <div class="cell auto text-center">
                                            <button id="btn_submit_fiter" class="button small save">{{ 'save'|trans }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ form_end(formFilter) }}
                </div>
            </div>
            <div class="cell auto">
                <div id="swap_div">
                    <div class="grid-x grid-margin-x row">
                        <div class="cell small-6 text-center">
                            <input type="button" id="previous" class="button small primary" value="Précédant" />
                        </div>
                        <div class="cell small-6 text-center">
                            <input type="button" id="next" class="button small primary"  value="Suivant" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="screens" style="overflow-x: auto; display: flex;"></div>
    </div>

    {# MODAL ETIQUETTE #}
    <div class="reveal" id="modalEtiquette" data-reveal>
        <div class="reveal-title">{{ 'etiquette.title.display'|trans }}</div>
        <div class="reveal-body">
            <div id="content">
                <div class="grid-x" >
                    <div class="cell small-12 medium-4">
                        <fieldset class="modalPart">
                            <h6 class="underlined text_primary_light">{{ 'kanban_appro.subtitle.etiquette'|trans }}</h6>
                            <div class="sub-title" id="numero_serie"></div>
                            <div class="sub-title" id="etat"></div>
                            <div class="sub-title" id="quantite"></div>
                            <div class="sub-title" id="statut_ec"></div>
                            {# </div>#}
                        </fieldset>
                    </div>
                    <div class="cell small-12 medium-8">
                        <fieldset class="modalPart">
                            <div class="cell small-6">
                                <h6 class="underlined text_primary_light">{{ 'kanban_appro.subtitle.actions'|trans }}</h6>
                                <div id="button_action">
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {# MODAL CONFIRM ACTION #}
    <div class="reveal tiny" id="modalConfirmationAction" data-reveal>
        <div class="reveal-title">{{ 'kanban_appro.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" class="button small no-mb" href="#">{{ 'kanban_appro.modal.yes'|trans }}</a>
                </div>
                <div class="cell shrink">
                    <a data-close class="cancel button small no-mb">{{ 'kanban_appro.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 userOrCustomer %}
    {{ form_label(formFilter.user_or_customer)}}
    {{ form_widget(formFilter.user_or_customer)}}
    {# TODO remplacer ça par un fichier twig.html #}
{#    <input type="radio" name="UserOrCustomer" value="Client" id="customer" required><label for="customer">Client</label>#}
{#    <input type="radio" name="UserOrCustomer" value="Utilisateur" id="user"><label for="user">Utilisateur</label>#}
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            {% 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'  %}

            $('#checkboxLE').prop("checked", false);




            //let KanbansFiltered = dataTable["childNodes"][1]["childNodes"];
            //let list = document.getElementById("list");


            let kanbansFilteredWithEtiquetteCustomer = {{ all_kanbans_with_etiquettes_customer|json_encode()|raw }};
            let kanbansFilteredWithEtiquetteUser= {{ all_kanbans_with_etiquettes_user|json_encode()|raw }};
            let userOrCustomer = {{ userOrCustomer|json_encode|raw }};
            let userOrCustomerJsValue = false;
            let nbColumnPerPage = {{ nb_column_max }};
            let dataLength;
            let cardHeight = 30;
            let max_etiquette_per_column = 0; // A REVOIR
            let kb_total;
            let kb_actif;
            let kb_le;
            let kb_propositions;
            let kb_en_attente;
            var Hex = "";
            let nbScreens;
            let le_fixe = {{ le_fixe|json_encode()|raw }};
            let nb_le_max = 0;
            let hasResume;
            let hasResumeBeforeLE;
            let maxEtiquetteForThisColumn;
            let maxEtiquetteForLE;
            let le_kb;
            let rgb_color;
            let screens = document.getElementById("screens");
            let page_container = document.getElementById("page_container");
            let filter_statut = true;
            let current_page;

            if(userOrCustomerJsValue === null){ // C'ets la valeur JS comme ca quand on reload la page, on garde le meme param
                if(userOrCustomer === true){ // CUSTOMER
                    $('#filter_articles_user_or_customer').prop('checked', true);
                    buildTable(kanbansFilteredWithEtiquetteCustomer);
                }else{ //USER
                    $('#filter_articles_user_or_customer').prop('checked', false);
                    buildTable(kanbansFilteredWithEtiquetteUser);
                }
            } else {
                if(userOrCustomerJsValue === true){ // CUSTOMER
                    $('#filter_articles_user_or_customer').prop('checked', true);
                    buildTable(kanbansFilteredWithEtiquetteCustomer);
                }else{ //USER
                    $('#filter_articles_user_or_customer').prop('checked', false);
                    buildTable(kanbansFilteredWithEtiquetteUser);
                }
            }


            $('#filter_articles_user_or_customer').click(function(event){
                if($('#filter_articles_user_or_customer').prop('checked') === true){
                    $('#screens').html("");
                    kanbansFilteredWithEtiquetteCustomer = {{ all_kanbans_with_etiquettes_customer|json_encode()|raw }};
                    buildTable(kanbansFilteredWithEtiquetteCustomer);
                }
            });

            $('#filter_articles_user_or_customer').click(function(event){
                if($('#filter_articles_user_or_customer').prop('checked') === false){
                    $('#screens').html("");
                    kanbansFilteredWithEtiquetteUser = {{ all_kanbans_with_etiquettes_user|json_encode()|raw }};
                    buildTable(kanbansFilteredWithEtiquetteUser);
                }
            });

             $('#displayFilter').on('click', function(){
                 if(filter_statut === true){
                     $('#filter').addClass('move');
                     filter_statut = false;
                 }else{
                     $('#filter').removeClass('move');
                     filter_statut = true;
                 }

             });

            $("#previous").on("click", function () {
                if(current_page === 0){

                }else{
                    current_page--;
                    for(let o = 0; o < nbScreens; o++){
                        let screen = document.getElementById("screen_"+o);
                        if(o === current_page){
                            screen.style.display = "flex";
                        } else{
                            screen.style.display = "none";
                        }
                    }
                }
            });


            $("#next").on("click", function () {
                if(current_page === nbScreens-1){

                }else{
                    current_page++;
                    for(let o = 0; o < nbScreens; o++){
                        let screen = document.getElementById("screen_"+o);
                        if(o === current_page){
                            screen.style.display = "flex";
                        } else{
                            screen.style.display = "none";
                        }
                    }
                }
            });

            //$('#div_le_fixe').css("display", "none");


            function buildTable(kanbansFilteredWithEtiquette) {
                getNbMaxEtiquette(kanbansFilteredWithEtiquette);
                let cardHeight = 30;
                let pageSize = page_container.getBoundingClientRect(); // Stocke dans page size un tableau de valeurs de la div(height, width, margin etc...)
                let valColumn = 0;
                let arrayKanbansLength = kanbansFilteredWithEtiquette.length;
                nbScreens = Math.ceil(arrayKanbansLength / nbColumnPerPage);

                for(let z = 0; z < nbScreens; z++){
                    let screen = buildScreen(z);
                    screens.append(screen);
                    if(arrayKanbansLength > nbColumnPerPage){
                        valColumn = nbColumnPerPage;
                        arrayKanbansLength = arrayKanbansLength - nbColumnPerPage;
                    } else {
                        valColumn = arrayKanbansLength;
                    }
                    for (let i = 0; i < valColumn; i++) {
                        if (kanbansFilteredWithEtiquette.length) {
                            let article = kanbansFilteredWithEtiquette.shift();
                            if(article.kt_code === "APPRO"){
                                le_kb = article.k_le_kanban;
                            }else if(article.kt_code === "FAB"){
                                le_kb = article.k_nombre_le_decide;
                            }
                            le_kb = article.k_le_kanban;
                            Hex = article.ca_valeur;
                            rgb_color = convertHexToRgb(Hex);
                            let nb_etiquette_offset = nb_le_max - le_kb;
                            let o = 0;
                            getPropositionsAndAttentes(article);
                            let column = buildColumn();
                            //column.style.background = "linear-gradient(180deg,"+ "rgba(" + rgb_color[0] + "," + rgb_color[1] + "," + rgb_color[2] + "," + 0.7 + ") 4%" +", rgba(255, 255, 255) 57%";
                            screen.append(column);
                            let total_in_column = 0;
                            let data_for_resume = {
                                yellow: 0,
                                grey: 0,
                                blue: 0,
                                green: 0,
                                orange: 0
                            };

                            let data_for_resume_before_le = {
                                yellow: 0,
                                grey: 0,
                                blue: 0,
                                green: 0,
                                orange: 0
                            };

                            let etiquette_for_resume = [];
                            let etiquette_for_resume_before_le = [];

                            let header = document.createElement('div');
                            header.classList.add('header');
                            header.style.color = checkColor(rgb_color);
                            let header_height = header.offsetHeight;

                            header.innerHTML = '<span>' +
                                '<h1 class="text-center" style="color:' + checkColor(rgb_color) + ';">' + article.a_code + '</h1>' +
                                '<h6 class="text_primary_light text-center" style="color:' + checkColor(rgb_color) + ';">' + article.s_code + '</h6>' +
                                '<div id="footer-header' + article.a_id + article.s_code + '" class="footer-header"></div>' +
                                '<div id="icon-header' + article.a_id + article.s_code + '" class="icon-header"></div>' +
                                '</span>';

                            header.style.background = "linear-gradient(180deg," + "rgba(" + rgb_color[0] + "," + rgb_color[1] + "," + rgb_color[2] + "," + 0.7 + ") 4%" + ", rgba(255, 255, 255) 150%";
                            header.style.borderRadius = 3 + "px";
                            header.style.boxShadow = "1px 2px 2px #0000004a";


                            column.append(header);

                            let card_container = document.createElement('div');
                            card_container.classList.add('card_container');

                            /*if (le_fixe === true) {
                                header.style.position = "fixed"; // FAUDRAIT REVOIR CA %AOS J AI PAS ENCORE REUSSIS
                            }*/
                            column.append(card_container);
                            let cardContainerHeight = pageSize.height * 0.80;

                            if (le_fixe === false) {
                                maxEtiquetteForThisColumn = Math.floor((cardContainerHeight - 35) / (cardHeight + 2));
                                hasResume = (article.k_nombre_kanban_decide + article.k_compteur_etiquettes_blanc + article.k_compteur_etiquettes_supp) > maxEtiquetteForThisColumn;

                                if (article.k_nombre_kanban_decide + article.k_compteur_etiquettes_blanc + article.k_compteur_etiquettes_supp + 2 >= maxEtiquetteForThisColumn) {
                                    maxEtiquetteForThisColumn = maxEtiquetteForThisColumn - 2;
                                }
                                maxEtiquetteForLE = maxEtiquetteForThisColumn;
                                hasResumeBeforeLE = article.k_le_kanban > maxEtiquetteForLE;
                                if (hasResumeBeforeLE === true) {
                                    maxEtiquetteForThisColumn = maxEtiquetteForThisColumn - 1;
                                }
                            } else {
                                hasResume = false;
                                hasResumeBeforeLE = false;
                            }

                            let displayed_infos = false;
                            let icon_header = document.getElementById("icon-header" + article.a_id + article.s_code);
                            let footer_header = document.getElementById("footer-header" + article.a_id + article.s_code);
                            if (icon_header !== null) {
                                icon_header.addEventListener("click", function () {
                                    if (displayed_infos === false) {
                                        $('#footer-header' + article.a_id + article.s_code).animate({height: header.offsetHeight});
                                        footer_header.innerHTML =
                                            '<div>Test1 : *******</div>' +
                                            '<div>Test2 : *******</div>' +
                                            '<div>Test3 : *******</div>' +
                                            '<div>Test4 : *******</div>';
                                        displayed_infos = true;
                                        icon_header.style.transform = "rotate(180deg)";
                                    } else {
                                        $('#footer-header' + article.a_id + article.s_code).animate({height: header_height});
                                        footer_header.innerHTML = "";
                                        displayed_infos = false;
                                        icon_header.style.transform = "rotate(360deg)";
                                    }
                                });
                                if (le_fixe === true) {
                                    /**
                                     * Boucle sur toutes les étiquettes jaunes de la colonne
                                     */
                                    for (let i = 0; i < nb_etiquette_offset; i++) {
                                        card_container.append(buildCard("offset", null, null, null));
                                    }
                                }


                                /**
                                 * Boucle sur toutes les étiquettes jaunes de la colonne
                                 */
                                for (let x = 0; x < kb_propositions; x++) {
                                    total_in_column++;
                                    if (le_fixe === false) {
                                        if ((!hasResume || (hasResume && total_in_column <= maxEtiquetteForThisColumn))
                                            && (!hasResumeBeforeLE || (hasResumeBeforeLE && total_in_column < maxEtiquetteForLE))
                                        ) {
                                            card_container.append(buildCard("yellow", null, null, null));
                                            insertLineLE(kb_le, total_in_column, card_container);
                                        } else {
                                            if (hasResume && !hasResumeBeforeLE) {
                                                data_for_resume.yellow++;
                                                etiquette_for_resume.push(null);
                                            }
                                            if (hasResumeBeforeLE) {
                                                if (total_in_column - kb_le === 0) {
                                                    data_for_resume_before_le.yellow++;
                                                    etiquette_for_resume_before_le.push(null);
                                                    card_container.append(addCardResume(data_for_resume_before_le, true, etiquette_for_resume_before_le, article));
                                                    insertLineLE(null, null, card_container, true);
                                                    hasResumeBeforeLE = false;
                                                    let nbEtiquetteInResumeLE = data_for_resume_before_le.yellow +
                                                        data_for_resume_before_le.grey +
                                                        data_for_resume_before_le.blue +
                                                        data_for_resume_before_le.green +
                                                        data_for_resume_before_le.orange;
                                                    maxEtiquetteForThisColumn = maxEtiquetteForThisColumn + nbEtiquetteInResumeLE - 1;
                                                } else {
                                                    data_for_resume_before_le.yellow++;
                                                    etiquette_for_resume_before_le.push(null);
                                                }
                                            }
                                        }
                                    } else {
                                        card_container.append(buildCard("yellow", null, null, null));
                                        insertLineLE(kb_le, total_in_column, card_container);
                                    }
                                }
                                /**
                                 * Boucle sur toutes les étiquettes grises de la colonne
                                 */
                                for (let j = 0; j < kb_en_attente; j++) {
                                    total_in_column++;
                                    if (le_fixe === false) {
                                        if ((!hasResume || (hasResume && total_in_column <= maxEtiquetteForThisColumn))
                                            && (!hasResumeBeforeLE || (hasResumeBeforeLE && total_in_column < maxEtiquetteForLE))
                                        ) {
                                            card_container.append(buildCard("grey", null, null, null));
                                            insertLineLE(kb_le, total_in_column, card_container);
                                        } else {
                                            if (hasResume && !hasResumeBeforeLE) {
                                                data_for_resume.grey++;
                                                etiquette_for_resume.push(null);
                                            }
                                            if (hasResumeBeforeLE) {
                                                if (total_in_column - kb_le === 0) {
                                                    data_for_resume_before_le.grey++;
                                                    etiquette_for_resume_before_le.push(null);
                                                    card_container.append(addCardResume(data_for_resume_before_le, true, etiquette_for_resume_before_le, article));
                                                    insertLineLE(null, null, card_container, true);
                                                    hasResumeBeforeLE = false;
                                                    let nbEtiquetteInResumeLE = data_for_resume_before_le.yellow +
                                                        data_for_resume_before_le.grey +
                                                        data_for_resume_before_le.blue +
                                                        data_for_resume_before_le.green +
                                                        data_for_resume_before_le.orange;
                                                    maxEtiquetteForThisColumn = maxEtiquetteForThisColumn + nbEtiquetteInResumeLE - 1;
                                                } else {
                                                    data_for_resume_before_le.grey++;
                                                    etiquette_for_resume_before_le.push(null);
                                                }
                                            }

                                        }
                                    } else {
                                        card_container.append(buildCard("grey", null, null, null));
                                        insertLineLE(kb_le, total_in_column, card_container);
                                    }
                                }
                                let loop = 0;

                                /**
                                 * Boucle sur toutes les étiquettes bleues de la colonne
                                 */

                                article.etiquettes.map(function (etiquette) {
                                    if (loop < parseInt(article.k_compteur_etiquettes_encours) && etiquette.ec_etat === "encours") {
                                        total_in_column++;
                                        if (le_fixe === true) {
                                            if ((!hasResume || (hasResume && total_in_column <= maxEtiquetteForThisColumn))
                                                && (!hasResumeBeforeLE || (hasResumeBeforeLE && total_in_column < maxEtiquetteForLE))
                                            ) {
                                                card_container.append(buildCard("blue", etiquette, null, article));
                                                insertLineLE(kb_le, total_in_column, card_container);
                                            } else {
                                                if (hasResume && !hasResumeBeforeLE) {
                                                    etiquette_for_resume.push(etiquette);
                                                    data_for_resume.blue++;
                                                }
                                                if (hasResumeBeforeLE) {
                                                    if (total_in_column - kb_le === 0) {
                                                        data_for_resume_before_le.blue++;
                                                        etiquette_for_resume_before_le.push(etiquette);
                                                        card_container.append(addCardResume(data_for_resume_before_le, true, etiquette_for_resume_before_le, article));
                                                        insertLineLE(null, null, card_container, true);
                                                        hasResumeBeforeLE = false;
                                                        let nbEtiquetteInResumeLE = data_for_resume_before_le.yellow +
                                                            data_for_resume_before_le.grey +
                                                            data_for_resume_before_le.blue +
                                                            data_for_resume_before_le.green +
                                                            data_for_resume_before_le.orange;
                                                        maxEtiquetteForThisColumn = maxEtiquetteForThisColumn + nbEtiquetteInResumeLE - 1;
                                                    } else {
                                                        data_for_resume_before_le.blue++;
                                                        etiquette_for_resume_before_le.push(etiquette);
                                                    }
                                                }

                                            }
                                            loop++;
                                        } else {

                                            card_container.append(buildCard("blue", etiquette, null, article));
                                            insertLineLE(kb_le, total_in_column, card_container);
                                        }
                                    }
                                });
                                loop = 0;
                                /**
                                 * Boucle sur toutes les étiquettes vertes de la colonne
                                 */
                                article.etiquettes.map(function (etiquette) {
                                    if (loop < parseInt(article.k_compteur_etiquettes_dispo) && etiquette.ec_etat === "dispo") {
                                        total_in_column++;
                                        if (le_fixe === false) {
                                            if ((!hasResume || (hasResume && total_in_column <= maxEtiquetteForThisColumn))
                                                && (!hasResumeBeforeLE || (hasResumeBeforeLE && total_in_column < maxEtiquetteForLE))
                                            ) {
                                                card_container.append(buildCard("green", etiquette, null, article));
                                                insertLineLE(kb_le, total_in_column, card_container);
                                            } else {
                                                if (hasResume && !hasResumeBeforeLE) {
                                                    etiquette_for_resume.push(etiquette);
                                                    data_for_resume.green++;
                                                }
                                                if (hasResumeBeforeLE) {
                                                    if (total_in_column - kb_le === 0) {
                                                        data_for_resume_before_le.green++;
                                                        etiquette_for_resume_before_le.push(etiquette);
                                                        card_container.append(addCardResume(data_for_resume_before_le, true, etiquette_for_resume_before_le, article));
                                                        insertLineLE(null, null, card_container, true);
                                                        hasResumeBeforeLE = false;
                                                        let nbEtiquetteInResumeLE = data_for_resume_before_le.yellow +
                                                            data_for_resume_before_le.grey +
                                                            data_for_resume_before_le.blue +
                                                            data_for_resume_before_le.green +
                                                            data_for_resume_before_le.orange;
                                                        maxEtiquetteForThisColumn = maxEtiquetteForThisColumn + nbEtiquetteInResumeLE - 1;
                                                    } else {
                                                        data_for_resume_before_le.green++;
                                                        etiquette_for_resume_before_le.push(etiquette);
                                                    }
                                                }

                                            }
                                            loop++;
                                        } else {
                                            card_container.append(buildCard("green", etiquette, null, article));
                                            insertLineLE(kb_le, total_in_column, card_container);
                                        }
                                    }
                                });
                                // 6 etiquettes oranges etat 4
                                loop = 0;
                                /**
                                 * Boucle sur toutes les étiquettes orange de la colonne
                                 */
                                article.etiquettes.map(function (etiquette) {
                                    if (loop < parseInt(article.k_compteur_etiquettes_controle) && etiquette.ec_etat === "controle") {
                                        total_in_column++;
                                        if (le_fixe === false) {
                                            if ((!hasResume || (hasResume && total_in_column <= maxEtiquetteForThisColumn))
                                                && (!hasResumeBeforeLE || (hasResumeBeforeLE && total_in_column < maxEtiquetteForLE))
                                            ) {
                                                card_container.append(buildCard("orange", etiquette, null, article));
                                                insertLineLE(kb_le, total_in_column, card_container);
                                            } else {
                                                if (hasResume && !hasResumeBeforeLE) {
                                                    data_for_resume.orange++;
                                                    etiquette_for_resume.push(etiquette);
                                                }
                                                if (hasResumeBeforeLE) {
                                                    if (total_in_column - kb_le === 0) {
                                                        data_for_resume_before_le.orange++;
                                                        etiquette_for_resume_before_le.push(etiquette);
                                                        card_container.append(addCardResume(data_for_resume_before_le, true, etiquette_for_resume_before_le, article));
                                                        insertLineLE(null, null, card_container, true);
                                                        hasResumeBeforeLE = false;
                                                        let nbEtiquetteInResumeLE = data_for_resume_before_le.yellow +
                                                            data_for_resume_before_le.grey +
                                                            data_for_resume_before_le.blue +
                                                            data_for_resume_before_le.green +
                                                            data_for_resume_before_le.orange;
                                                        maxEtiquetteForThisColumn = maxEtiquetteForThisColumn + nbEtiquetteInResumeLE - 1;
                                                    } else {
                                                        data_for_resume_before_le.orange++;
                                                        etiquette_for_resume_before_le.push(etiquette);
                                                    }
                                                }
                                            }
                                            loop++;
                                        } else {
                                            card_container.append(buildCard("orange", etiquette, null, article));
                                            insertLineLE(kb_le, total_in_column, card_container);
                                        }
                                    }
                                });
                                if (hasResume) {
                                    card_container.append(addCardResume(data_for_resume, false, etiquette_for_resume, article));
                                }
                                /**
                                 * Creation du footer avec ces informations
                                 * @type {HTMLDivElement}
                                 */
                                {# let footer = document.createElement('div'); #}
                                {# footer.classList.add('footer'); #}
                                {# footer.innerHTML= "TEST"; #}
                                {# footer.style.backgroundColor = "rgb("+rgb_color[0]+","+rgb_color[1]+","+rgb_color[2]+")"; #}
                                {# footer.style.color = checkColor(rgb_color); #}
                                {# column.append(footer); #}

                            }
                        }
                    }

                }
                DisplayScreens(nbScreens);

                /** fonction qui definit le nombre max d'étiquette que l'on va avoir pour une colonne (la boucle kanban qui la plus grande le) **/
                function getNbMaxEtiquette(kanbansFilteredWithEtiquette) {
                    let p = 0;
                    kanbansFilteredWithEtiquette.forEach(function (article) {
                        let le_kb = article.k_le_kanban;
                        if (le_kb > nb_le_max && p < kanbansFilteredWithEtiquette.length) {
                            nb_le_max = le_kb;
                        }
                        p++;
                    });
                }


                /** fonction qui convertit des valeurs Hexa en valeur Rgb **/
                function convertHexToRgb(Hex) {

                    var validHEXInput = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(Hex);
                    if (!validHEXInput) {
                        return false;
                    }
                    return rgb_color = [
                        parseInt(validHEXInput[1], 16),
                        parseInt(validHEXInput[2], 16),
                        parseInt(validHEXInput[3], 16)
                    ];

                }

                /** function qui choisis la couleur que l'on va utiliser (noir ou blanc) en fonction du contraste
                 * , pour éviter du blanc sur un fond jaune **/
                function checkColor(rgb_color) {
                    var yiq = (rgb_color[0] * 299 + rgb_color[1] * 587 + rgb_color[2] * 114) / 1000;
                    return (yiq < 128) ? '#ffffff' : '#000000';
                }


                /** fonction qui créé les info-bulles quand il y a trop d'étiquette à afficher**/
                function addCardResume(data_for_resume, beforeLe, etiquette_for_resume, article) {

                    let card = document.createElement("div");
                    card.classList.add("etiquette", "resume");
                    if (beforeLe) {
                        card.classList.add("before-le");
                    }

                    /**
                     * Boucle sur un tableu et un badge  si sa valeur  > 0
                     */

                    Object.keys(data_for_resume).forEach(function (color) {
                        if (data_for_resume[color] > 0) {
                            card.innerHTML += '<span class = "badge badge-' + color + '">+' + data_for_resume[color] + '</span>';
                        }
                    })

                    card.addEventListener("click", function () {
                        displayCardResume(data_for_resume, card, etiquette_for_resume, article);
                    });

                    return card;
                }

                /** fonction qui affiche les infos bulles**/
                function displayCardResume(data_for_resume, card, etiquette_for_resume, article) {
                    card.innerHTML = "";
                    let h = 0;
                    card.classList.remove("resume", "etiquette", "before-le");
                    card.classList.add("card_container_resume");

                    Object.keys(data_for_resume).forEach(function (color) {
                        if (data_for_resume[color] > 0) {
                            for (let n = 0; n < data_for_resume[color]; n++) {
                                etiquette_for_resume.length !== 0 ? card.append(buildCard(color, etiquette_for_resume[h], null, article)) : card.append(buildCard(color, null, null, null));
                                h++;
                            }
                        }
                    })
                }


                /** fonction qui insere la LE**/
                function insertLineLE(nb_kb_le, total_in_column, container, force) {
                    if (force || (parseInt(nb_kb_le) === total_in_column)) {
                        let hr_le = document.createElement('hr');
                        hr_le.classList.add('hr_le');
                        hr_le.classList.add('table-view');
                        container.append(hr_le);
                    }
                }

                /** fonction qui créée la carte en fonction de sa classe (encours, dispo, etc)  **/
                function buildCard(className, etiquette, icon, article) {
                    let card = document.createElement("div");
                    card.style.height = cardHeight + "px";
                    card.classList.add("etiquette", className);
                    card.style.marginBottom = 0.2 + "rem";
                    if (etiquette !== null) {
                        card.id = etiquette.ec_num_serie + "" + etiquette.ec_numero;
                        card.innerHTML = '<span>' + etiquette.ec_num_serie + " " + etiquette.ec_numero + '</span>';
                    }
                    if (className !== "grey" && className !== "yellow" && className !== "offset") {
                        card.addEventListener("click", function () {
                            buildModal(etiquette, article);
                        });
                    }
                    return card;
                }

                /** function qui definie le nombre d'étiquette en proposition ainsi qu'en attente **/
                function getPropositionsAndAttentes(article) {

                    kb_total = article.k_nombre_kanban_decide + article.k_compteur_etiquettes_supp + article.k_compteur_etiquettes_blanc;

                    kb_actif = article.k_compteur_etiquettes_encours +
                        article.k_compteur_etiquettes_dispo +
                        article.k_compteur_etiquettes_controle;
                    article.etiquettes.forEach(function(e){
                        if(e.type === "blanc"){
                            kb_actif++;
                        }
                    });
                    kb_le = article.k_le_kanban;
                    kb_propositions = Math.floor((kb_total - kb_actif) / kb_le) * kb_le;
                    kb_en_attente = kb_total - kb_actif - kb_propositions;

                }


                /** construit la colonne **/
                function buildColumn() {

                    let screen_width = document.getElementById('screens').offsetWidth;
                    let div = document.createElement('div');
                    div.classList.add('column');
                    div.style.marginRight = 0.2 + "rem";
                    div.style.minWidth = ((screen_width / 8) * 0.98) + 'px';
                    return div;
                }

                function buildScreen(z){
                    let screen = document.createElement('div');
                    screen.classList.add('screen');
                    screen.id = 'screen_'+z;
                    screen.style.display = 'none';

                    return screen;
                }


                function DisplayScreens(nbScreens) {
                    let screen = document.getElementById('screen_0');
                    screen.style.display = 'flex';
                    current_page = 0;
                }

                $('.change-page-button').on('click', function () {
                    ChangeScreens($(this).attr("data-main"), nbScreens);
                });

                function ChangeScreens(change_label_value, nbScreens) {

                }

                function buildModal(response, article){
                    let RurlChangeDispo;
                    let RurlChangeControle;
                    let RurlChangeConso;
                    let RurlChangeEncours;
                    let RurlDeleteEtiquette;

                    {# TODO REVOIR ICI POUR FAIRE UN HREF DYNAMIC, MAIS JE N'AI PAS REUSSI A FAIRE NE METTANT EN PARAM LE HREF DANS LE PATHNAME #}
                    if(article.kt_code === "APPRO"){
                        let urlChangeDispo = '{{ path('app_kanban_appro_edit_etiquette', { 'etiquette': '__0__', 'label': 'dispo', 'token': csrf_token('app_kanban_appro_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}';
                        RurlChangeDispo = urlChangeDispo.replace('__0__', response.ec_id);
                        let urlChangeControle = "{{ path('app_kanban_appro_edit_etiquette', { 'etiquette': '__0__', 'label': 'controle', 'token': csrf_token('app_kanban_appro_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlChangeControle = urlChangeControle.replace('__0__', response.ec_id);
                        let urlChangeConso = "{{ path('app_kanban_appro_edit_etiquette', { 'etiquette': '__0__', 'label': 'conso', 'token': csrf_token('app_kanban_appro_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlChangeConso = urlChangeConso.replace("__0__", response.ec_id);
                        let urlChangeEncours = "{{ path('app_kanban_appro_edit_etiquette', { 'etiquette': '__0__', 'label': 'encours', 'token': csrf_token('app_kanban_appro_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlChangeEncours = urlChangeEncours.replace("__0__", response.ec_id);
                        let urlDeleteEtiquette = "{{ path('app_kanban_appro_edit_etiquette', { 'etiquette': '__0__', 'label': 'supprime', 'token': csrf_token('app_kanban_appro_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlDeleteEtiquette = urlDeleteEtiquette.replace("__0__", response.ec_id);
                    }else{
                        let urlChangeDispo = '{{ path('app_kanban_fab_edit_etiquette', { 'etiquette': '__0__', 'label': 'dispo', 'token': csrf_token('app_kanban_fab_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}';
                        RurlChangeDispo = urlChangeDispo.replace('__0__', response.ec_id);
                        let urlChangeControle = "{{ path('app_kanban_fab_edit_etiquette', { 'etiquette': '__0__', 'label': 'controle', 'token': csrf_token('app_kanban_fab_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlChangeControle = urlChangeControle.replace('__0__', response.ec_id);
                        let urlChangeConso = "{{ path('app_kanban_fab_edit_etiquette', { 'etiquette': '__0__', 'label': 'conso', 'token': csrf_token('app_kanban_fab_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlChangeConso = urlChangeConso.replace("__0__", response.ec_id);
                        let urlChangeEncours = "{{ path('app_kanban_fab_edit_etiquette', { 'etiquette': '__0__', 'label': 'encours', 'token': csrf_token('app_kanban_fab_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlChangeEncours = urlChangeEncours.replace("__0__", response.ec_id);
                        let urlDeleteEtiquette = "{{ path('app_kanban_fab_edit_etiquette', { 'etiquette': '__0__', 'label': 'supprime', 'token': csrf_token('app_kanban_fab_edit_etiquette'), 'redirectToKbBoard': 'true'}) }}";
                        RurlDeleteEtiquette = urlDeleteEtiquette.replace("__0__", response.ec_id);
                    }


                    var content = document.getElementById("content");
                    content.style.display = "block";

                    let urlUpdateEtiquette = "{{ path('app_kanban_etiquette_colis_edit', {'etiquette': '__0__' }) }}";
                    let RurlUpdateEtiquette = urlUpdateEtiquette.replace('__0__', response.ec_id);

                    var numero_serie = document.getElementById("numero_serie");
                    numero_serie.innerHTML = '<b>{{ 'n°'|trans }} : ' + response.ec_num_serie + '_' + response.ec_numero +"</b><a href=" + RurlUpdateEtiquette + "><i  class='fa fa-external-link ml-0-5' aria-hidden='true'></i></a>";
                    var etat = document.getElementById("etat");
                    etat.innerHTML = '{{ 'etat'|trans }} : ' + '<b>'  + ' ' + response.ec_etat + "</b>";
                    var quantite =  document.getElementById("quantite");
                    quantite.innerHTML = '{{ 'quantite'|trans }} :' + '&nbsp;<b>'  + ' ' + response.ec_quantite + "</b>";
                    var statut_ec = document.getElementById("statut_ec");
                    statut_ec.innerHTML = '{{ 'ec'|trans }} :' + '<b>' + ' ' + response.ec_statutEC + "</b>";

                    let button_action = document.getElementById('button_action');
                    button_action.innerHTML = "" ;

                    if(response.ec_etat === "encours"){
                        button_action.innerHTML +=
                            '<div class="grid-y">' +
                            '<div class="cell small-6 medium-8">' +
                            '<div class="grid-x">' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeDispo +'" class="modalConfirmationAction button dispo actions_modal" data-info="Etes-vous sûr de vouloir passer l\'étiquette en disponible">{{ "modal.etiquette.become_available"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeControle +'" class="modalConfirmationAction button controle actions_modal" data-info="Etes-vous sûr de vouloir passer l\'étiquette en contrôle">{{ "modal.etiquette.become_control"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a class="modalConfirmationAction button delete actions_modal" href="'+ RurlDeleteEtiquette +'"  data-info="Etes-vous sûr de vouloir supprimer l\'étiquette">{{ "modal.etiquette.become_delete"|trans }}</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    } else if(response.ec_etat === "dispo"){
                        button_action.innerHTML +=
                            '<div class="grid-y">' +
                            '<div class="cell small-6 medium-8">' +
                            '<div class="grid-x">' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeConso +'" class="modalConfirmationAction actions_modal button conso" data-info="Etes-vous sûr de vouloir consommer l\'étiquette">{{ "modal.etiquette.become_consume"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeControle +'" class="modalConfirmationAction actions_modal button controle" data-info="Etes-vous sûr de vouloir passer l\'étiquette en contrôle">{{ "modal.etiquette.become_control"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeEncours +'" class="modalConfirmationAction actions_modal button encours" data-info="Etes-vous sûr de vouloir passer l\'étiquette en encours">{{ "modal.etiquette.become_in_progress"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a class="modalConfirmationAction actions_modal button delete" href="'+ RurlDeleteEtiquette +'"  data-info="Etes-vous sûr de vouloir supprimer l\'étiquette">{{ "modal.etiquette.become_delete"|trans }}</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    } else {
                        button_action.innerHTML +=
                            '<div class="grid-y">' +
                            '<div class="cell small-6 medium-8">' +
                            '<div class="grid-x">' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeConso +'" class="modalConfirmationAction button conso actions_modal" data-info="Etes-vous sûr de vouloir consommer l\'étiquette">{{ "modal.etiquette.become_consume"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeDispo +'" class="modalConfirmationAction button dispo actions_modal" data-info="Etes-vous sûr de vouloir passer l\'étiquette en disponible">{{ "modal.etiquette.become_available"|trans }}</a>' +
                            '</div>'+
                            '<div class="cell small-6 button-modal">' +
                            '<a href="'+ RurlChangeEncours +'" class="modalConfirmationAction encours button actions_modal" data-info="Etes-vous sûr de vouloir passer l\'étiquette en encours">{{ "modal.etiquette.become_in_progress"|trans }}</a>' +
                            '</div>' +
                            '<div class="cell small-6 button-modal">' +
                            '<a class="modalConfirmationAction button delete actions_modal" href="'+ RurlDeleteEtiquette +'"  data-info="Etes-vous sûr de vouloir supprimer l\'étiquette">{{ "modal.etiquette.become_delete"|trans }}</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    }

                    $('#modalEtiquette').foundation('open');

                    var Rhref, data_info;
                    var info_div = document.getElementById('info');

                    $(document).ready(function(){
                        $('.modalConfirmationAction').click(function(e){
                            e.preventDefault();

                            Rhref = $(this).attr("href");
                            console.log(Rhref);

                            data_info = $(this).attr("data-info");
                            info_div.innerText = data_info + "?";
                            if($(this).hasClass("delete")){
                                $('#confirmModalYes').addClass('red');
                                $('#modalConfirmationAction').addClass('red');
                                $('#confirmModalYes').text('{{ 'delete'|trans }}');
                            } else {
                                $('#confirmModalYes').removeClass('red');
                                $('#modalConfirmationAction').removeClass('red');
                                $('#confirmModalYes').text('{{ 'yes'|trans }}');
                            }
                            $("#modalConfirmationAction").foundation('open');
                        });

                        $('#confirmModalYes').click(function(e){
                            $(this).attr('href', Rhref);
                        });

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

            }
        });
    </script>
{% endblock %}