{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    {% import 'App/_include/_macro.html.twig' as macros %}
    <div class="cell small-12">
        <div class="grid-x header_title_and_action">
            <div class="cell small-12  medium-auto header_title">
                <h1><i class="fa fa-industry"></i>{{ 'section.title.list'|trans }}</h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button class="button {% if is_granted('ROLE_APP_SUB_EXPORT') %}download{% else %}disabled{% endif %} small" type="button" {% if is_granted('ROLE_APP_SUB_EXPORT') %}data-open="modalExportFile"{% endif %}><i class="fa fa-cloud-download"></i> {{ 'section.button.export'|trans }}</button>
                <button class="button {% if is_granted('ROLE_APP_SUB_IMPORT_SECTION') %}download{% else %}disabled{% endif %} small" type="button" data-open="{% if is_granted('ROLE_APP_SUB_IMPORT_SECTION') %}modalStepFile_0{% else %}modalImportNotAllowed_0{% endif %}"><i class="fa fa-cloud-download"></i> {{ 'section.button.import'|trans }}</button>
                <button class="button save small" type="button" data-open="modalAddSection"><i class="fa fa-plus"></i> {{ 'section.button.add'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-6" style="position: relative">
        <div class="sortable_display">
            {% for row in tree %}
                <ul class="root">
                    <li data-sid="{{ row.section.id }}">
                        <div class="root_label">{{ row.section.libelle }}</div>
                        {% if row.children|length > 0 %}
                            <ul class="sortableLists">
                                {{ macros.child_sortable(row.children) }}
                            </ul>
                        {% endif %}
                    </li>
                </ul>
            {% endfor %}
        </div>
    </div>
    <div class="cell small-12 medium-6" style="position: relative">
        <div class="grid-x hide" id="view_section">
            <div class="cell small-12 mt-0-5 text-center">
                <h4>{{ 'section.edit.title'|trans }}</h4>
            </div>
            <div class="cell small-12" id="form_content"></div>
            <div class="cell small-12 text-right mb-0-5 pr-1">
                <button type="button" class="button small delete no-mb" data-open="modalDeleteItem"><i class="fa fa-trash"></i>&nbsp;{{ 'delete'|trans }}</button>
                <button type="button" class="button small update no-mb" id="btn_submit_edit_item"><i class="fa fa-pencil"></i>&nbsp;{{ 'save'|trans }}</button>
            </div>
        </div>
    </div>
    {# MODAL #}
    {# ADD SECTION #}
    <div class="reveal" id="modalAddSection" data-reveal>
        <div class="reveal-title">{{ 'section.title.add'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formAddSection, {'attr': {'id': 'formAddSection'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3 text-right">{{ form_label(formAddSection.code) }}</div>
                <div class="cell small-9">{{ form_widget(formAddSection.code, {'attr': {'data-parsley-custom-async': 'section_code'}}) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddSection.libelle) }}</div>
                <div class="cell small-9">{{ form_widget(formAddSection.libelle) }}</div>
                <div class="cell small-9 small-offset-3">{{ form_widget(formAddSection.pointStock) }}{{ form_label(formAddSection.pointStock) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddSection.modeleEtiquette) }}</div>
                <div class="cell small-9">{{ form_widget(formAddSection.modeleEtiquette) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddSection.printer) }}</div>
                <div class="cell small-9">{{ form_widget(formAddSection.printer) }}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddSection.parent) }}</div>
                <div class="cell small-9">{{ form_widget(formAddSection.parent) }}</div>
            </div>
            {{ form_end(formAddSection) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_add_section">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {# DELETE SECTION #}
    <div class="reveal red" id="modalDeleteItem" data-reveal>
        <div class="reveal-title">{{ 'section.title.disable.text'|trans }}</div>
        <div class="reveal-body">
            {{ 'section.body.disable'|trans }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_delete">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {# CONFIRM DELETE WHEN SECTION HAS CHILDREN #}
    <div class="reveal red" id="modalConfirmDeleteItem" data-reveal>
        <div class="reveal-title">{{ 'section.title.disable.confirm'|trans }}</div>
{#        <div class="reveal-body">{{ 'section.error.delete'|trans }}</div>#}
        <div class="reveal-body" id="modalConfirmDeleteItem_body"></div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
{#            <button class="button small delete" id="btn_submit_confirm_delete">{{ 'delete'|trans }}</button>#}
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% import 'App/_include/_import/_modal.import.html.twig' as macro_import_html %}
    {% if is_granted('ROLE_APP_SUB_IMPORT_SECTION') %}
        {# Modal Import #}
        {{ macro_import_html.html_import(formImport, 'section.title.import'|trans, 0) }}
    {% else %}
        {{ macro_import_html.html_import_not_allowed('modal.title.import_not_allowed'|trans, 0) }}
    {% endif %}
    {% if is_granted('ROLE_APP_SUB_EXPORT') %}
        {% include 'App/_include/_export/_modal_simple.export.html.twig' with {'title': 'export_section.modal.title'|trans} %}
    {% endif %}
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){
            {% include 'App/_include/_export/_modal_simple.export.js.twig' %}
            var helper = $('#helper');

            {# Section Add Form#}
            let formAddSection= $('#formAddSection');
            let form_parsley_add_section = $(formAddSection).parsley(parsley_options);
            let btn_submit_add_section =  $('#btn_submit_add_section');
            let modal_add_section = $('#modalAddSection');
            $(btn_submit_add_section).click(function(){
                form_parsley_add_section.validate();
                form_parsley_add_section.whenValid().then(function () {
                    $(btn_submit_add_section).html(btn_spin);
                    $(formAddSection).submit();
                });
            });

            $(modal_add_section).on('open.zf.reveal', function () {
                $('#add_section_code').focus();
            });

            $(modal_add_section).on('closed.zf.reveal', function () {
                $(formAddSection).trigger("reset");
            });

            let edit_url = "{{ url('app_section_view', {'section': '__00__'}) ~'?t=' ~ csrf_token('app_section_view') }}",
                toggle_url = "{{ url('app_section_toggle', {'section': '__00__'}) ~'?t=' ~ csrf_token('app_section_toggle') }}",
                parent_container = $('#view_section'),
                form_container =  $('#form_content'),
                btn_submit_edit = $('#btn_submit_edit_item'),
                btn_submit_delete = $('#btn_submit_delete'),
                btn_submit_confirm_delete = $('#btn_submit_confirm_delete'),
                modal_confirm_delete_element_body = $('#modalConfirmDeleteItem_body'),
                form_edit_can_be_send = true;
            let btn_submit_edit_initial_state = $(btn_submit_edit).html();
            let btn_submit_delete_initial_state = $(btn_submit_delete).html();
            let btn_submit_confirm_delete_initial_state = $(btn_submit_confirm_delete).html();

            $('.item_label_sortable').click(function(){
                let section_item = this,
                    section_id = $(this).parents('li').data('sid'),
                    position = $(this).position();
                $(btn_submit_edit).unbind('click');
                $(btn_submit_delete).unbind('click');
                setSelectParentFormAdd(section_id);
                getEditSectionForm(section_id, parseInt(position.top), function(){
                    let form_edit = $('#formEditItem_' + section_id);
                    let form_edit_parsley = $(form_edit).parsley(parsley_options);
                    let post_url = edit_url.replace('__00__', section_id),
                        delete_url = toggle_url.replace('__00__', section_id);
                    // edition
                    $(btn_submit_edit).on('click',function(){
                        form_edit_parsley.validate();
                        form_edit_parsley.whenValid().then(function () {
                            if(form_edit_can_be_send){
                                form_edit_can_be_send = false;
                                $(btn_submit_edit).html(btn_spin);
                                $.post(post_url, $(form_edit).serialize(), function (response) {
                                    $(btn_submit_edit).html(btn_submit_edit_initial_state);
                                    if (response.hasOwnProperty('result') && response.hasOwnProperty('display_name') && response.hasOwnProperty('label_btn_edit') && response.result === 'done') {
                                        $(section_item).html(response.display_name);
                                        form_edit_can_be_send = true;
                                    } else {
                                        toastr.error('impossible d\'éditer cet item');
                                    }
                                });
                            }
                        });
                    });
                    // delete
                    $(btn_submit_delete).click(function() {
                        $(btn_submit_delete).html(btn_spin);
                        $.post(delete_url, {data:JSON.stringify({confirmed:false})},function(response){
                            $(btn_submit_delete).html(btn_submit_delete_initial_state);
                            if (response.hasOwnProperty('redirect') && response.redirect){
                                window.location = response.redirect;
                            } else if (response.hasOwnProperty('message') && response.message){
                                if (response.message.hasOwnProperty('active_child') && response.message.active_child) $(modal_confirm_delete_element_body).html(response.message.active_child);
                                if (response.message.hasOwnProperty('active_elements') && response.message.active_elements) $(modal_confirm_delete_element_body).append('<br>'+response.message.active_elements);
                                if (response.message.hasOwnProperty('list') && response.message.list){
                                    let table = document.createElement('table'),
                                        thead = document.createElement('thead'),
                                        trh = document.createElement('tr'),
                                        th1 = document.createElement('th'),
                                        th2 = document.createElement('th'),
                                        th3 = document.createElement('th'),
                                        th4 = document.createElement('th'),
                                        tbody = document.createElement('tbody');

                                    table.classList.add('style-light', 'jump', 'mt-1');
                                    th1.innerHTML = "{{ 'kanban.property.type'|trans|capitalize }}";
                                    th2.innerHTML = "{{ 'kanban_appro.list.column.libelle'|trans|capitalize }}";
                                    th3.innerHTML = "{{ 'article.property.code'|trans|capitalize }}";
                                    th4.innerHTML = "{{ 'article.property.designationCourte'|trans|capitalize }}";
                                    table.append(thead);
                                    thead.append(trh);
                                    trh.append(th1);
                                    trh.append(th2);
                                    trh.append(th3);
                                    trh.append(th4);
                                    table.append(tbody);

                                    response.message.list.map(function (row) {
                                        let tr = document.createElement('tr'),
                                            td1 = document.createElement('td'),
                                            td2 = document.createElement('td'),
                                            td3 = document.createElement('td'),
                                            td4 = document.createElement('td');

                                        if (row.kt_code === "{{ constant('App\\Entity\\Kanban\\KanbanType::APPRO') }}"){
                                            kanban_url = "{{ url('app_kanban_appro_edit', {'kanban': '__00__'}) }}";
                                        } else if (row.kt_code === "{{ constant('App\\Entity\\Kanban\\KanbanType::FAB') }}"){
                                            kanban_url = "{{ url('app_kanban_fab_edit', {'kanban': '__00__'}) }}";
                                        } else if (row.kt_code === "{{ constant('App\\Entity\\Kanban\\KanbanType::FS') }}"){
                                            kanban_url = "{{ url('app_kanban_fs_edit', {'kanban': '__00__'}) }}";
                                        } else if (row.kt_code === "{{ constant('App\\Entity\\Kanban\\KanbanType::TRANS') }}"){
                                            kanban_url = "{{ url('app_kanban_transfert_edit', {'kanban': '__00__'}) }}";
                                        }
                                        kanban_url = kanban_url.replace('__00__', row.k_id);
                                        tr.addEventListener('click', function () {
                                            window.location = kanban_url;
                                        });
                                        td1.innerHTML = row.kt_name;
                                        td2.innerHTML = row.k_libelle;
                                        td3.innerHTML = row.a_code;
                                        td4.innerHTML = row.a_designationCourte;
                                        tr.append(td1);
                                        tr.append(td2);
                                        tr.append(td3);
                                        tr.append(td4);
                                        tbody.append(tr);
                                    });
                                    $(modal_confirm_delete_element_body).append(table);
                                }
                                $('#modalConfirmDeleteItem').foundation('open');
                            }
                        });
                    });
                });
            });

            function setSelectParentFormAdd(item_id) {
                let select_parent = $('#add_section_parent');
                select_parent.val(item_id);
                console.log('setSelectParentFormAdd');
            }

            function moveFormContainer(top){
                console.log('moveFormContainer');
                let height_container = parseInt($(parent_container).height());
                let computed_top_container = top - parseInt(height_container/2);
                if(computed_top_container > 0){
                    $(parent_container).css({top:computed_top_container});
                }
                else {
                    $(parent_container).css({top:0});
                }
            }

            function getEditSectionForm(section_id, top, callback){
                console.log('getEditSectionForm');
                let url = edit_url.replace('__00__', section_id);
                $(form_container).createSpinnerLoaderPage();
                $(parent_container).removeClass('hide').fadeIn(function(){moveFormContainer(top);});
                $.get(url,function(form){

                    $(form_container).html(form);
                    moveFormContainer(top);
                    return callback();
                });
            }

            let sortable_options = {
                placeholderClass: 'placeholder-item',
                hintClass: 'hint-item',
                insertZonePlus: true,
                complete: function(item)
                {
                    console.log('complete');
                    let change_parent_url = "{{ url('app_section_change_parent') ~ '?t=' ~ csrf_token('app_section_change_parent') }}";
                    let data = {
                        current_id: $(item).data('sid'),
                        parent_id: $(item).parents('li').data('sid')
                    };
                    $.post(change_parent_url, data, function(response){
                        if (response.hasOwnProperty('result') && response.result === 'done'){
                            $(item).addClass('change_ok');
                            setTimeout(function(){
                                $(item).removeClass('change_ok');
                            }, 500);
                        } else {
                            $(item).addClass('change_nok');
                            setTimeout(function(){
                                $(item).removeClass('change_nok');
                            }, 500);
                        }
                    });
                },
                onDragStart: function(){
                    console.log('onDragStart');
                    $(parent_container).fadeOut();
                    setTimeout(function(){
                        $(form_container).html('');
                    },600);
                },
                opener: {
                    active: true,
                    as: 'html',  // if as is not set plugin uses background image
                    close: '<i class="fa fa-minus c3"></i>',  // or 'fa-minus c3',  // or './imgs/Remove2.png',
                    open: '<i class="fa fa-plus"></i>',  // or 'fa-plus',  // or'./imgs/Add2.png',
                    openerCss: {
                        'display': 'inline-block',
                        'float': 'left',
                        'margin-left': '-35px',
                        'margin-right': '5px',
                    }
                },
                ignoreClass: 'item_label_sortable'
            };

            $('.sortableLists').sortableLists(sortable_options);

            {% if is_granted('ROLE_APP_SUB_IMPORT_SECTION') %}
            {% import 'App/_include/_import/_modal.import.js.twig' as macro_import_js %}
            {{ macro_import_js.js_import_general_functions() }}
            {{ macro_import_js.js_import('section', 0, 'import_section') }}
{#            {% include 'App/_include/_import/_modal.import.js.twig'  with {'entity': 'section' }%}#}
            {% endif %}
        });
    </script>
{% endblock %}