{% 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-sitemap"></i>{{ 'article.famille.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-upload"></i> {{ 'color.button.export'|trans }}</button>
                <button class="button {% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}download{% else %}disabled{% endif %} small" type="button" data-open="{% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}modalStepFile_0{% else %}modalImportNotAllowed_0{% endif %}"><i class="fa fa-cloud-download"></i> {{ 'articlefamille.button.import'|trans }}</button>
                <button class="button save small" type="button"  data-open="modalAddArticleFamille"><i class="fa fa-plus"></i>{{ 'articlefamille.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-afid="{{ row.article_famille.id }}">
{#                        <div class="root_label">{{ row.article_famille.code }} - {{ row.article_famille.libelle }}</div>#}
                        <div class="root_label">{{ row.article_famille.libelle }}</div>
                        {% if row.children|length > 0 %}
                            <ul class="sortableLists">
                                {{ macros.child_sortable_articleFamille(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_article_famille">
            <div class="cell small-12 mt-0-5 text-center">
                <h4>{{ 'articlefamille.title.edit'|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 #}
    <div class="reveal" id="modalAddArticleFamille" data-reveal>
        <div class="reveal-title">{{ 'articlefamille.modal.title.add'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(formAddArticleFamille, {'attr': {'id': 'formAddArticleFamille'}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3 text-right">{{ form_label(formAddArticleFamille.code) }}</div>
                <div class="cell small-9">{{ form_widget(formAddArticleFamille.code,{'attr':{'data-parsley-custom-async':'article_family_code'}})}}</div>
                <div class="cell small-3 text-right">{{ form_label(formAddArticleFamille.libelle) }}</div>
                <div class="cell small-9">{{ form_widget(formAddArticleFamille.libelle) }}</div>
                <div class="small-9 small-offset-3 cell"><p id="helper" class="help-text"></p></div>
            </div>
            {{ form_end(formAddArticleFamille) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small save" id="btn_submit_add_articlefamille">{{ '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 ARTICLE FAMILLE #}
    <div class="reveal" id="modalDeleteItem" data-reveal>
        <div class="reveal-title">{{ 'articlefamille.title.disable.text'|trans }}</div>
        <div class="reveal-body">
            {{ 'articlefamille.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 ARTICLE FAMILLE HAS CHILDREN #}
    <div class="reveal" id="modalConfirmDeleteItem" data-reveal>
        <div class="reveal-title">{{ 'articlefamille.title.disable.confirm'|trans }}</div>
        <div class="reveal-body">{{ 'articlefamille.error.delete'|trans }}</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_ARTICLE') %}
        {{ macro_import_html.html_import(formImport, 'articlefamille.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_article_famille.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');

            {# Famille Article and Form#}
            let formAddArticleFamille = $('#formAddArticleFamille');
            let form_parsley_add_articlefamille = $(formAddArticleFamille).parsley(parsley_options);
            let btn_submit_add_articlefamille = $('#btn_submit_add_articlefamille');
            let modal_add_famille_article = $('#modalAddArticleFamille');
            $(btn_submit_add_articlefamille).click(function () {
                form_parsley_add_articlefamille.validate();
                form_parsley_add_articlefamille.whenValid().then(function () {
                    $(btn_submit_add_articlefamille).html(btn_spin);
                    $(formAddArticleFamille).submit();
                });
            });
            $(modal_add_famille_article).on('closed.zf.reveal', function () {
                $(formAddArticleFamille).trigger("reset");
            });
            $(modal_add_famille_article).on('open.zf.reveal', function () {
                $('#add_article_famille_code').focus();
            });

            let edit_url = "{{ url('app_articlefamille_view', {'articleFamille': '__00__' }) ~'?t=' ~ csrf_token('app_articlefamille_view') }}",
                toggle_url = "{{ url('app_articlefamille_toggle', {'articleFamille': '__00__' }) ~'?t=' ~ csrf_token('app_articlefamille_toggle') }}",
                parent_container = $('#view_article_famille'),
                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'),
                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 articleFamille_item = this,
                    articleFamille_id = $(this).parents('li').data('afid'),
                    position = $(this).position();
                $(btn_submit_edit).unbind('click');
                $(btn_submit_delete).unbind('click');
                getEditSectionForm(articleFamille_id, parseInt(position.top), function(){
                    let form_edit = $('#formEditItem_' + articleFamille_id);
                    let form_edit_parsley = $(form_edit).parsley(parsley_options);
                    let post_url = edit_url.replace('__00__', articleFamille_id),
                        delete_url = toggle_url.replace('__00__', articleFamille_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') {
                                        $(articleFamille_item).html(response.display_name);
                                        form_edit_can_be_send = true;
                                    } else {
                                        toastr.error("{{ 'articlefamille.error.edit'|trans }}");
                                    }
                                });
                            }
                        });
                    });
                    // 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('need_confirm') && response.need_confirm){
                                $('#modalConfirmDeleteItem').foundation('open');
                                $(btn_submit_confirm_delete).on('click',function(){
                                    $(btn_submit_confirm_delete).html(btn_spin);
                                    $.post(delete_url, {data:JSON.stringify({confirmed:true})},function(response_confirm){
                                        $(btn_submit_confirm_delete).html(btn_submit_confirm_delete_initial_state);
                                        if (response_confirm.hasOwnProperty('redirect') && response_confirm.redirect){
                                            window.location = response_confirm.redirect;
                                        }
                                    });
                                });
                            }
                        });
                    });
                });
            });

            function moveFormContainer(top){
                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(articleFamille_id, top, callback){
                let url = edit_url.replace('__00__', articleFamille_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)
                {
                    let change_parent_url = "{{ url('app_articlefamille_change_parent') ~ '?t=' ~ csrf_token('app_articlefamille_change_parent') }}";
                    let data = {
                        current_id: $(item).data('afid'),
                        parent_id: $(item).parents('li').data('afid')
                    };
                    $.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(){
                    $(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);

            function resetOnload() {
                $(formAddArticleFamille).get(0).reset();
            }
            resetOnload();

            {% if is_granted('ROLE_APP_SUB_IMPORT_ARTICLE') %}
            {% import 'App/_include/_import/_modal.import.js.twig'  as macro_import_js %}
                {{ macro_import_js.js_import_general_functions() }}
                {{ macro_import_js.js_import('articleFamille', 0, 'import_articleFamille') }}
            {% endif %}
        });
        </script>
{% endblock %}