{% macro js_import(entity, index = 0, code = 'empty', type = 'empty') %}
let form_add_file_{{ index }} = $('#formAddFile_{{ index }}'),
    url_import_{{ index }} = "{{ url('app_import',{'entity':entity,'step':'__00__'}) }}",
    data_import_{{ index }} = {token: "{{ csrf_token('app_import') }}"},
    all_required_properties_are_filled_{{ index }} = false,
    file_name_import_{{ index }} = $('#file_name_import_{{ index }}'),
    input_file_{{ index }} = $('#import_{{ index }}_file'),
    modal_step_file_{{ index }} = $('#modalStepFile_{{ index }}'),
    modal_step_file_btn_submit_{{ index }} = $('#modalStepFile_submit_{{ index }}'),
    modal_step_1_{{ index }} = $('#modalImportStep1_{{ index }}'),
    modal_step_1_body_{{ index }} = $('#modalImportStep1_body_{{ index }}'),
    modal_step_1_btn_submit_{{ index }} = $('#modalImportStep1_submit_{{ index }}'),
    modal_step_2_{{ index }} = $('#modalImportStep2_{{ index }}'),
    modal_step_2_body_{{ index }} = $('#modalImportStep2_body_{{ index }}'),
    modal_step_2_btn_submit_{{ index }} = $('#modalImportStep2_submit_{{ index }}'),
    waiting_step_1_{{ index }} = false;
let form_parsley_add_file_{{ index }} = $(form_add_file_{{ index }}).parsley(parsley_options),
    btn_step_2_initial_state_{{ index }} = $(modal_step_2_btn_submit_{{ index }}).html(),
    btn_step_1_initial_state_{{ index }} = $(modal_step_1_btn_submit_{{ index }}).html(),
    btn_step_file_initial_state_{{ index }} = $(modal_step_file_btn_submit_{{ index }}).html();
$(modal_step_file_btn_submit_{{ index }}).unbind('click');
$(modal_step_file_btn_submit_{{ index }}).bind('click', function () {
    {# step 0/3 #}
    form_parsley_add_file_{{ index }}.validate();
    form_parsley_add_file_{{ index }}.whenValid().then(function () {
        $(modal_step_file_btn_submit_{{ index }}).html(btn_spin);
        let file = $(input_file_{{ index }}).get(0).files[0];
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onloadend = function (evtLoad) {
            data_import_{{ index }}.separator = $('#import_{{ index }}_separator').val();
            data_import_{{ index }}.origin = $('#import_{{ index }}_origin').val();
            data_import_{{ index }}.file_b64 = evtLoad.target.result;
            data_import_{{ index }}.ignore_first_line = ($('#import_{{ index }}_first_line').is(':checked'));
            data_import_{{ index }}.code = "{{ code }}";
            data_import_{{ index }}.type = "{{ type }}";

            let url_step_1_{{ index }} = url_import_{{ index }}.replace('__00__', '1');
            $.ajax({
                url: url_step_1_{{ index }},
                data: data_import_{{ index }},
                method: 'POST',
                success: function (response_1_{{ index }}) {
                    {# step 1/3 #}
                    if (response_1_{{ index }}.hasOwnProperty('step_1')) {
                        waiting_step_1_{{ index }} = true;
                        data_import_{{ index }}.properties = response_1_{{ index }}.step_1.properties;
                        $(modal_step_1_body_{{ index }}).html(buildStep1ModalBody(response_1_{{ index }}.step_1.properties, response_1_{{ index }}.step_1.preview));
                        $(modal_step_1_{{ index }}).foundation('open');
                        $('.select_property').change(function () {
                            let column_index = $(this).data('col');
                            let new_mapping = onSelectPropertyChange(this);
                            updateMapping_{{ index }}(new_mapping, column_index);
                        });
                        $(modal_step_1_btn_submit_{{ index }}).unbind('click');
                        $(modal_step_1_btn_submit_{{ index }}).bind('click', function () {
                            if (all_required_properties_are_filled_{{ index }} && waiting_step_1_{{ index }}) {
                                waiting_step_1_{{ index }} = false;
                                let url_step_2_{{ index }} = url_import_{{ index }}.replace('__00__', '2');
                                $(modal_step_1_btn_submit_{{ index }}).html(btn_spin);
                                $.ajax({
                                    url: url_step_2_{{ index }},
                                    data: data_import_{{ index }},
                                    method: 'POST',
                                    success: function (response_2_{{ index }}) {
                                        {# step 2/3 #}
                                        if (response_2_{{ index }}.hasOwnProperty('step_2')) {
                                            $(modal_step_2_body_{{ index }}).html(buildStep2ModalBody(response_2_{{ index }}.step_2.properties, response_2_{{ index }}.step_2.combined_data));
                                            $(modal_step_2_{{ index }}).foundation('open');
                                            $(modal_step_1_btn_submit_{{ index }}).html(btn_step_1_initial_state_{{ index }});
                                            $(modal_step_2_btn_submit_{{ index }}).unbind('click');
                                            $(modal_step_2_btn_submit_{{ index }}).bind('click', function () {
                                                let url_step_3_{{ index }} = url_import_{{ index }}.replace('__00__', '3');
                                                $(modal_step_2_btn_submit_{{ index }}).html(btn_spin);
                                                $.ajax({
                                                    url: url_step_3_{{ index }},
                                                    data: {token: data_import_{{ index }}.token},
                                                    method: 'POST',
                                                    success: function (response_3_{{ index }}) {
                                                        {# step 3/3 #}
                                                        if (response_3_{{ index }}.hasOwnProperty('reload') && response_3_{{ index }}.reload) {
                                                            window.location = window.location;
                                                        }
                                                        else{
                                                            $(modal_step_2_{{ index }}).foundation('close');
                                                            toastr_error.error("{{ 'import.error'|trans([],'flash') }}");

                                                        }
                                                    }{# end success ajax step 3 #}
                                                });{# end ajax step 3 #}
                                            });{# end click btn step 2 #}
                                        }{# end test response_2 #}
                                    }{# end success ajax step 1#}
                                });{# end ajax step 2 #}
                            }{# end test all_required_properties_are_filled #}
                        });{# end click btn step 1 #}
                    }{# end test response_1 #}
                }{# end success ajax step file #}
            });{# end ajax step file #}
        }{# end loadend FileReader #}
    });{# end parsley whenIsvalid #}
});{# end click btn step file #}

function updateMapping_{{ index }}(new_mapping, column_index) {
    let counter_required = 0,
        counter_required_filled = 0;
    data_import_{{ index }}.properties.map(function (property, idx) {
        if (new_mapping) {
            if (property.select === new_mapping.property) {
                data_import_{{ index }}.properties[idx].column_index = parseInt(new_mapping.column_index);
            }
        } else if (property.hasOwnProperty('column_index') && parseInt(column_index) === parseInt(property.column_index)) {
            data_import_{{ index }}.properties[idx].column_index = null;
        }
        if (property.required) {
            counter_required++;
            if (property.hasOwnProperty('column_index') && typeof property.column_index === 'number') {
                counter_required_filled++;
            }
        }
    });

    if (counter_required === counter_required_filled) {
        $(modal_step_1_btn_submit_{{ index }}).prop("disabled", false);
        delete data_import_{{ index }}.file_b64;
        all_required_properties_are_filled_{{ index }} = true;
    } else {
        $(modal_step_1_btn_submit_{{ index }}).prop("disabled", true);
        all_required_properties_are_filled_{{ index }} = false;
        // $('#modalImportStep1_submit').unbind('click');
    }
}
{# input file events #}
$(input_file_{{ index }}).change(function () {
    $(file_name_import_{{ index }}).html(getFileFromFullPath(this.value));
});
{# modal closed events #}
$(modal_step_file_{{ index }}).on('closed.zf.reveal', function () {
    $(modal_step_file_btn_submit_{{ index }}).html(btn_step_file_initial_state_{{ index }})
});
$(modal_step_1_{{ index }}).on('closed.zf.reveal', function () {
    $(modal_step_1_body_{{ index }}).html('');
    $(file_name_import_{{ index }}).html('');
    $(input_file_{{ index }}).val(null);
    all_required_properties_are_filled_{{ index }} = false;
    $(modal_step_1_btn_submit_{{ index }}).unbind('click');
    $(modal_step_1_btn_submit_{{ index }}).prop("disabled", true);
    $(modal_step_1_btn_submit_{{ index }}).html(btn_step_1_initial_state_{{ index }});
});
$(modal_step_2_{{ index }}).on('closed.zf.reveal', function () {
    $(modal_step_2_btn_submit_{{ index }}).unbind('click');
    $(modal_step_2_body_{{ index }}).html();
    $(modal_step_2_btn_submit_{{ index }}).html(btn_step_2_initial_state_{{ index }});
});
{# Cancel processus #}
$('.cancel_import_{{ index }}').click(function () {
    sendReset(data_import_{{ index }});
});
{# Reset processus #}
function sendReset(data_import) {
    let url_reset = url_import_{{ index }}.replace('__00__', '99');
    $.ajax({
        url: url_reset,
        data: {token: data_import.token},
        method: 'POST'
    });
}
{% endmacro %}

{% macro js_import_general_functions() %}
{# Step1 : preview data, build modal content #}
function buildStep1ModalBody(properties, preview) {
    let body = document.createElement('div'),
        cell_content = document.createElement('div'),
        cell_table = document.createElement('div');
    body.classList.add('grid-x');
    cell_content.classList.add('cell', 'small-12', 'mb-1');
    cell_content.innerHTML = "{{ 'import.modal_step_1.message'|trans }}";
    body.append(cell_content);
    cell_table.classList.add('cell', 'small-12', 'scrollable');
    cell_table.append(buildStep1Table(properties, preview));
    body.append(cell_table);
    return body;
}
function buildStep1Table(properties, preview) {
    let table = document.createElement('table'),
        thead = document.createElement('thead'),
        tr_head = document.createElement('tr'),
        tbody = document.createElement('tbody'),
        loop_length = (preview.length > 0) ? preview[0].length : 0;
    if (loop_length) {
        for (let i = 0; i < loop_length; i++) {
            let th = document.createElement('th');
            th.append(buildSelectProperty(properties, i));
            tr_head.append(th);
        }

        preview.map(function (row) {
            let tr = document.createElement('tr');
            row.forEach(function (col) {
                let td = document.createElement('td');
                td.innerHTML = col;
                tr.append(td);
            });
            tbody.append(tr);
        });
        thead.append(tr_head);
        table.append(thead);
        table.append(tbody);
        table.classList.add('style-spreadsheet');
        return table;
    } else {
        let span = document.createElement('span');
        span.innerHTML = "{{ 'import.modal_step_1.no_data'|trans }}";
        return span;
    }
}
function buildSelectProperty(properties, number) {
    let select = document.createElement('select'),
        first_option = document.createElement('option')
    ;

    select.id = 'column_' + number;
    select.classList.add('select_property', 'no-mb');
    select.setAttribute('name', 'select_property');
    select.setAttribute('data-col', number);

    first_option.setAttribute('value', '');
    first_option.innerHTML = "{{ 'import.modal_step_1.option_blank'|trans }}";
    select.append(first_option);

    properties.map(function (property) {
        let option = document.createElement('option');
        option.setAttribute('value', property.select);
        option.setAttribute('data-required', property.required);
        option.innerHTML = property.name
        select.append(option);
    });

    return select;
}
function onSelectPropertyChange($select) {
    let current_id = $($select).attr('id'),
        column_index = parseInt($($select).data('col')),
        value = $($select).val();
    if (value) {
        $('.select_property').each(function () {
            let element_id = $(this).attr('id'),
                element_value = $(this).val();
            if (element_id !== current_id && element_value === value) {
                $(this).val('');
            }
        });
        return {'column_index': column_index, 'property': value}
    }

    return null;
}
{# Step2 : preview integration data, build modal content #}
function buildStep2ModalBody(properties, data) {
    let body = document.createElement('div'),
        cell_content = document.createElement('div');
    body.classList.add('grid-x');
    cell_content.classList.add('cell', 'small-12');
    cell_content.innerHTML = "{{ 'import.modal_step_2.message'|trans }}";
    body.append(cell_content);
    body.append(buildStep2Table(data));
    return body;
}
function buildStep2Table(data) {
    let cell_summary = document.createElement('ul'),
        cell_table = document.createElement('div'),
        table = document.createElement('table'),
        thead = document.createElement('thead'),
        tr_head = document.createElement('tr'),
        tbody = document.createElement('tbody'),
        nb_update = 0,
        nb_create = 0,
        nb_reject = 0,
        column_order = [];

    cell_summary.classList.add('mb-1', 'ml-2');
    cell_table.classList.add('cell', 'small-12', 'scrollable');
    collectionEach(data.labels, function (value, prop) {
        column_order.push(prop);
        let th = document.createElement('th');
        th.innerHTML = value;
        tr_head.append(th);
    });
    collectionEach(data, function (value, prop) {
        if (prop === 'errors') {
            if (value.length > 0) {
                value.forEach(function (error) {
                    let tr = document.createElement('tr');
                    tr.classList.add('line-reject');
                    nb_reject++;
                    column_order.forEach(function (col_index) {
                        let td = document.createElement('td');
                        td.innerHTML = error[col_index];
                        tr.append(td);
                    });
                    tbody.append(tr);
                })
            }

        }
    });
    collectionEach(data, function (value, prop) {
        if (prop !== 'labels' && prop !== 'errors') {
            let tr = document.createElement('tr'),
                empty_stored = Array.isArray(value.stored);
            // case stored is empty
           // if (empty_stored && '{#  code #}' !== 'import_cmj') {
            if (empty_stored) {
                tr.classList.add('line-create');
                nb_create++;
            }
            let row_update = false;
            column_order.forEach(function (col_index) {
                let td = document.createElement('td');
                td.innerHTML = value.posted[col_index];
                if (!empty_stored && value.stored.hasOwnProperty(col_index) && value.stored[col_index] !== value.posted[col_index]) {
                    td.classList.add('value-update');
                    row_update = true;
                }
                tr.append(td);
            });
            if (row_update) {
                nb_update++;
            }
            tbody.append(tr);
        }
    });
    thead.append(tr_head);
    table.append(thead);
    table.append(tbody);
    table.classList.add('style-spreadsheet');
    //if('{#  code #}' !== 'import_cmj'){
        cell_summary.innerHTML = '<li class="text-green">' + nb_create + ' {{ "import.modal_step_2.summary.create"|trans }},</li><li  class="text-orange">' + nb_update + ' {{ "import.modal_step_2.summary.update"|trans }},</li><li  class="text-red">' + nb_reject + ' {{ "import.modal_step_2.summary.reject"|trans }}</li>';
    {#}#}
    {#else {#}
    {#    cell_summary.innerHTML = '<li class="text-green">' + nb_update + ' {{ "import.modal_step_2.summary.update"|trans }},</li><li  class="text-red">' + nb_reject + ' {{ "import.modal_step_2.summary.reject"|trans }}</li>';#}
    {#}#}
    cell_table.append(cell_summary);
    cell_table.append(table);
    return cell_table;
}
function collectionEach(collection, callback, scope) {
    if (Object.prototype.toString.call(collection) === '[object Object]') {
        for (var prop in collection) {
            if (Object.prototype.hasOwnProperty.call(collection, prop)) {
                callback.call(scope, collection[prop], prop, collection);
            }
        }
    } else {
        for (var i = 0, len = collection.length; i < len; i++) {
            callback.call(scope, collection[i], i, collection);
        }
    }
}

{# Extract filename from fullpath #}
function getFileFromFullPath(fullpath) {
    if (!fullpath) return null;

    var startIndex = (fullpath.indexOf('\\') >= 0 ? fullpath.lastIndexOf('\\') : fullpath.lastIndexOf('/'));
    var filename = fullpath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    return filename;
}
{% endmacro %}