$('#submit_form_global_parameters').click(function () {
    $(this).html(btn_spin);
    $('#formEditGlobalParameters').submit();
});

$('#submit_form_kanban_parameters').click(function () {
    $(this).html(btn_spin);
    $('#formEditKanbanParameters').submit();
});

enableButton('form_info', 'submit_form_info', true);


function clickEtiquette(element){
    let content = document.getElementById("content");
    content.style.display = "none";
    let ec_id = element.getAttribute("data-eid");
    url = url.replace('__0__', ec_id);
    $.ajax({
        url: url,
        dataType: "json",
        success: function(response) {
            buildModal(response);
        }
    });
}

function SchemaOrListe(){
    let schema = document.getElementById("schema");
    let list = document.getElementById("list");
    let content_schema = document.getElementById("content-schema");
    let content_list = document.getElementById("content-list");

    schema.addEventListener("click", function(){
        content_schema.style.display = "block";
        content_list.style.display = "none";
        $('#schema').attr('aria-selected', true)
        $('#list').attr('aria-selected', false)
    });

    list.addEventListener("click", function(){
        content_schema.style.display = "none";
        content_list.style.display = "block";
        $('#schema').attr('aria-selected', false)
        $('#list').attr('aria-selected', true)
    });
}

function callModalEtiquette(etiquette){
    buildModal(etiquette);
    //let ec_id = element.getAttribute("data-eid");

}


function buildModal(response){
    /*var body = document.getElementsByClassName("reveal-body")
    body.innerHTML = response["ec_etat"];*/

    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);
    let urlChangeDispo = "{{ path('app_kanban_fab_edit_etiquette', { 'etiquette': '__0__', 'label': 'dispo', 'token': csrf_token('app_kanban_fab_edit_etiquette'), 'redirectToKbBoard': 'false'}) }}";
    let 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': 'false'}) }}";
    let 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': 'false'}) }}";
    let 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': 'false'}) }}";
    let 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': 'false'}) }}";
    let RurlDeleteEtiquette = urlDeleteEtiquette.replace("__0__", response.ec_id);


    var numero_serie = document.getElementById("numero_serie");
    //numero_serie.innerHTML = "<div class='cell'>"+'N°' + response.ec_num_serie + '_' + response.ec_numero +"<a href=" + RurlUpdateEtiquette + "><i  class='fa fa-external-link ml-0-5' aria-hidden='true'></i></a></div>";
    numero_serie.innerHTML = '<b>{{ 'n°'|trans }} : ' + response.num_etiquette +"</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 = "<div class='grid-x'><div class='cell small-7 bold'>" + 'Etat :' + '</div><div class="cell small-5">'  + ' ' + response.ec_etat + "</div></div>";
    etat.innerHTML = 'Etat :' + '<b>'  + ' ' + response.ec_etat + "</b>";
    var quantite =  document.getElementById("quantite");
    //quantite.innerHTML = "<div class='grid-x'><div class='cell small-7 bold'>" + 'Quantité :' + '</div><div class="cell small-5">'  + ' ' + response.ec_quantite + "</div></div>";
    quantite.innerHTML = 'Quantité :' + '&nbsp;<b>'  + ' ' + response.ec_quantite + "</b>";
    var statut_ec = document.getElementById("statut_ec");
    //statut_ec.innerHTML = "<div class='grid-x'><div class='cell small-7 bold'>" + 'Statut EC :' + '</div><div class="cell small-5">' + ' ' + response.ec_statutEC + "</div></div>";
    statut_ec.innerHTML = 'Statut EC :' + '<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">Passer en Disponible</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">Passer en Contrôle</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">Supprimer l\'étiquette</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">Consommer l\'étiquette</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">Passer en Contrôle</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">Passer en Encours</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">Supprimer l\'étiquette</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">Consommer l\'étiquette</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">Passer en Disponible</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">Passer en Encours</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">Supprimer l\'étiquette</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");
            data_info = $(this).attr("data-info");
            info_div.innerText = data_info + "?";
            $("#modalConfirmationAction").foundation('open');
        });

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

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

function buildTable(){
    var etiquettes = {{ etiquettes|json_encode|raw }};
    var array_etiquettes = Object.values(etiquettes);
    let row_etiquette;

    {% if dt_settings.data.data_set|length > 0 %}
    let dtToolbar_test = new dtToolbar(document.getElementById('table-etiquettes'),  {{ dt_settings|json_encode|raw }}, [], 0, 20);
    $('.DTFC_ScrollWrapper').css({"height":""});
    $(dtToolbar_test).on("row.click", function(response, id){
        array_etiquettes.forEach(function(etiquette, x){
            etiquette.forEach(function(val){
                if(val.ec_id === id){
                    row_etiquette = val;
                    buildModal(row_etiquette);
                }
            })
        })
    });
    {% endif %}
}

function buildColumns() {

    var etiquettes = {{ etiquettes|json_encode|raw }};
    var kb_info = {{ kanban_info|json_encode|raw }};
    var kb_decide = kb_info["kanban_decide"];
    var kb_decide_total = kb_info["kanban_decide"] + parseInt(old_supp_value) + parseInt(old_blanc_value);
    var nb_etiquettes = etiquettes["dispo"].length
        + etiquettes["encours"].length
        + etiquettes["controle"].length
    var nb_etiquettes_proposition = kb_decide_total - nb_etiquettes;
    var le = kb_info["le"];


    attente.value = nb_etiquettes_proposition;
    proposition.value = Math.floor(nb_etiquettes_proposition / le) * le;

    var checkLe = 1;

    let parameters = [
            {color:"yellow",key: "proposition",container:"prog"},
            {color:"blue",key: "encours",container:"encours"},
            {color:"green",key: "dispo",container:"dispo"},
            {color:"orange",key: "controle",container:"dispo"}
        ];
    let loop = 1;

    parameters.forEach(function(parameter){
        let container = document.getElementById(parameter.container);
        let etiquette_collection = [];
        if(parameter.key !== "proposition"){
            etiquette_collection = etiquettes[parameter.key];
        }
        if(parameter.key === "proposition") {
            for (let i = 0; i < kb_decide_total; i++) {
                let card = document.createElement('div');
                card.classList.add("etiquette");
                card.style.height = 30 + "px";
                container.append(card);
                if (checkLe <= nb_etiquettes_proposition) {
                    if (nb_etiquettes_proposition >= le) {
                        card.classList.add("yellow");
                    } else {
                        card.classList.add("grey");
                    }
                } else {
                    if(i >= kb_decide){
                        card.style.borderColor = "pink";
                    } else {
                        card.classList.add("none");
                    }
                }
                if(checkLe === le){
                    nb_etiquettes_proposition = nb_etiquettes_proposition - le;
                    checkLe = 0;
                }
                if (le === loop) {
                    var hr_le = document.createElement('hr');
                    hr_le.classList.add('hr_le');
                    container.append(hr_le);
                }
                checkLe += 1;
                loop++;
            }
        }
        etiquette_collection.forEach(function(etiquette){
            let card = document.createElement('div');
            card.classList.add("etiquette");
            card.style.height = 30 + "px";
            container.append(card);
            card.classList.add(parameter.color);
            let content = etiquette["ec_num_serie"] + '-' + etiquette["ec_numero"];
            content += etiquette["ec_statutEC"] !== null?
                '</div><div class=" cell small-12 medium-2">' + 'EC:' + etiquette["ec_statutEC"] + '</div>':
                '</div><div class=" cell small-12 medium-2"></div>';
            card.innerHTML = '<div class="grid-x"><div class=" cell small-12 medium-10">' + content +'</div>';
            card.addEventListener("click", function(){
                buildModal(etiquette);
            });

        });
    })
}

let form_compteurs_edit = $('#form_compteurs_edit');
let btn_compteurs_submit = $('#btn_submit_compteurs_edit');
let supp = document.getElementById('edit_compteurs_kanban_fab_compteurEtiquettesSupp');
let blanc = document.getElementById('edit_compteurs_kanban_fab_compteurEtiquettesBlanc');
let input_supp = $('#edit_compteurs_kanban_fab_compteurEtiquettesSupp');
let input_blanc = $('#edit_compteurs_kanban_fab_compteurEtiquettesBlanc');
let old_supp_value = supp.value;
let old_blanc_value = blanc.value;
let attente = document.getElementById('edit_compteurs_kanban_fab_attente');
let proposition = document.getElementById('edit_compteurs_kanban_fab_proposition');
let data_has_change = false;


input_supp.change(function () {
    $(btn_compteurs_submit).removeAttr('disabled');
    data_has_change = true;
});

input_blanc.change(function () {
    $(btn_compteurs_submit).removeAttr('disabled');
    data_has_change = true;
});


$(document).ready(function() {

    let form_parsley = $(form_compteurs_edit).parsley(parsley_options);
    $(btn_compteurs_submit).click(function () {
        let new_supp_value = supp.value;
        let new_blanc_value = blanc.value;

        form_parsley.validate();
        form_parsley.whenValid().then(function () {
            $(btn_compteurs_submit).html(btn_spin);
            $(form_compteurs_edit).submit();
        });
    });
});

buildTable()
buildColumns()
//SchemaOrListe()