{% 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>{{ 'article.edit.title'|trans }} <span id="article_title">{{ article }}</span>
                </h1>
            </div>
            <div class="cell small-12  medium-shrink header_action">
                <button type="button" id="call_previous_element" class="call_previous_next_element" title="{{ 'previous'|trans }}"></button>
                <button type="button" id="call_next_element" class="call_previous_next_element" title="{{ 'next'|trans }}"></button>
                <a class="button purple small" type="button" href="{{ url('app_article_clone', {'article':article.id}) }}">
                    <i class="fa fa-files-o"></i> {{ 'clone'|trans }}
                </a>
                <a class="button delete small {% if kanbans|length > 0 %}disabled{% endif %}" type="button"
                   {% if kanbans|length < 1 %}data-open="modal_confirm_delete_article"{% endif %}>
                    <i class="fa fa-trash"></i> {{ 'article.button.delete'|trans }}
                </a>
            </div>
        </div>
    </div>
    <div class="cell small-12">
        <div class="grid-x grid-margin-x">
            <div class="cell small-12 medium-6">
                {{ form_start(form_edit,{'attr':{'id':'form_edit_article'}}) }}
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12">{{ form_label(form_edit.code)}}</div>
                    <div class="cell small-12">{{ form_widget(form_edit.code,{'attr':{'data-parsley-custom-async':'article_code#' ~ article.id}})}}</div>
                    <div class="cell small-12">{{ form_label(form_edit.designationCourte)}}</div>
                    <div class="cell small-12">{{ form_widget(form_edit.designationCourte)}}</div>
                    <div class="cell small-12">{{ form_label(form_edit.designationLongue)}}</div>
                    <div class="cell small-12">{{ form_widget(form_edit.designationLongue)}}</div>
                    <div class="cell small-12">{{ form_label(form_edit.codeABC)}}{{ form_widget(form_edit.codeABC,{'attr':{'style':'display:inline-block'}})}}</div>
                    <div class="cell small-12">
                        {{ form_label(form_edit.famille)}}
                        <button class="button tiny mb-0-2 orange" type="button" data-open="modal_add_family">{{ 'article.famille.add.button'|trans }}</button>
                    </div>
                    <div class="cell small-12">{{ form_widget(form_edit.famille)}}</div>
                    <div class="cell small-12">
                        {{ form_label(form_edit.unite)}}
                        <button class="button tiny mb-0-2 orange" type="button" data-open="modal_add_unit">{{ 'unit.button.add'|trans }}</button>
                    </div>
                    <div class="cell small-12">{{ form_widget(form_edit.unite)}}</div>
                    <div class="cell small-12">{{ form_label(form_edit.commentaire)}}</div>
                    <div class="cell small-12">{{ form_widget(form_edit.commentaire)}}</div>
                    <div class="cell small-12 text-right form_action">
                        <a href="{{ url('app_article_list') }}" class="button small cancel">{{ 'cancel'|trans }}</a>
                        <button type="button" id="btn_submit_article_edit" class="button small update">{{ 'edit'|trans }}</button>
                    </div>
                </div>
                {{ form_end(form_edit) }}
            </div>
            <div class="cell small-12 medium-6">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12">
                        <h3>{{ 'article.subtitle.list.kanban'|trans }}
                        <button class="button tiny mb-0-2 orange text-right" type="button" data-open="modal_add_kanban">{{ 'kanban.button.add'|trans }}</button></h3>
                    </div>
                    <div class="cell small-12">

                            <table id="kanban_table" class="style-light jump mt-0-5">
                                <thead>
                                <tr>
                                    <th>{{ 'article.list.kanban.property.type'|trans }}</th>
                                    <th>{{ 'article.list.kanban.property.libelle'|trans }}</th>
                                    <th>{{ 'article.list.kanban.property.section'|trans }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if kanbans|length > 0 %}
                                    {% for row in kanbans %}
                                        {% if row.type_code == constant('App\\Entity\\Kanban\\KanbanType::APPRO') %}
                                            {% set kanban_url = url('app_kanban_appro_edit', {'kanban':row.kanban_id}) ~ '?f=av&i=' ~ article.id %}
                                        {% elseif row.type_code == constant('App\\Entity\\Kanban\\KanbanType::FAB') %}
                                            {% set kanban_url = (is_granted('ROLE_APP_SUB_KB_FAB_ACCESS'))? url('app_kanban_fab_edit', {'kanban':row.kanban_id}) ~ '?f=av&i=' ~ article.id : '#' %}
                                        {% elseif row.type_code == constant('App\\Entity\\Kanban\\KanbanType::FS') %}
                                            {% set kanban_url = (is_granted('ROLE_APP_SUB_KB_FS_ACCESS'))? url('app_kanban_fs_edit', {'kanban':row.kanban_id}) ~ '?f=av&i=' ~ article.id : '#' %}
                                        {% endif %}
                                        <tr class="kanban_table_tr" data-url="{{ kanban_url }}">
                                            <td>{{ row.type_code|trans }}</td>
                                            <td>{% if row.kanban_libelle %}{{ row.kanban_libelle }}{% endif %}</td>
                                            <td>{{ row.section_libelle }}</td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr id="no_kb_in_article">
                                        <td colspan="3" class="text-center">
                                            {{ 'article.no_kb'|trans }}
                                        </td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
{#                        {% endif %}#}
                    </div>

                </div>
            </div>
        </div>
    </div>


    {# Modal Add family #}
    <div class="reveal tiny" id="modal_add_family" data-reveal>
        <div class="reveal-title">{{ 'modal.article.famille.add.title'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(form_add_family,{'attr':{'id':'form_add_family','action': url('app_article_famille_ajax_add')}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3">{{ form_label(form_add_family.code)}}</div>
                <div class="cell small-9">{{ form_widget(form_add_family.code,{'attr':{'data-parsley-custom-async':'article_family_code'}})}}</div>
                <div class="cell small-3">{{ form_label(form_add_family.libelle)}}</div>
                <div class="cell small-9">{{ form_widget(form_add_family.libelle)}}</div>
            </div>
            {{ form_end(form_add_family) }}
        </div>
        <div class="reveal-footer">
            <button type="button" data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button type="button" class="button small save" id="btn_submit_add_family">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {# Modal Add unit #}
    <div class="reveal tiny" id="modal_add_unit" data-reveal>
        <div class="reveal-title">{{ 'modal.unit.add.title'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(form_add_unit,{'attr':{'id':'form_add_unit','action': url('app_unit_ajax_add')}}) }}
            <div class="grid-x grid-padding-x">
                <div class="cell small-3">{{ form_label(form_add_unit.code)}}</div>
                <div class="cell small-9">{{ form_widget(form_add_unit.code,{'attr':{'data-parsley-custom-async':'unit_code'}})}}</div>
                <div class="cell small-3">{{ form_label(form_add_unit.libelle)}}</div>
                <div class="cell small-9">{{ form_widget(form_add_unit.libelle)}}</div>
            </div>
            {{ form_end(form_add_unit) }}
        </div>
        <div class="reveal-footer">
            <button type="button" data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button type="button" class="button small save" id="btn_submit_add_unit">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {# Modal Confirm Delete Article #}
    <div class="reveal tiny red" id="modal_confirm_delete_article" data-reveal>
        <div class="reveal-title">{{ 'article.title.delete'|trans }}</div>
        <div class="reveal-body">
            {{ 'article.message.delete.text'|trans }}
        </div>
        <div class="reveal-footer">
            <button type="button" data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button type="button" class="button small delete" id="btn_confirm_delete_article">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {# Modal Add Kanban #}
    <div class="reveal tiny" id="modal_add_kanban" data-reveal>
        <div class="reveal-title">{{ 'modal.kanban.add.title'|trans }}</div>
        <div class="reveal-body">
            <p>{{ 'modal.kanban.add.message'|trans }}</p>
            <div class="grid-x grid-margin-x">
                <div class="cell text-center">
                    <button type="button" class="button small blue" data-open="modal_add_kanban_appro">{{ 'code_kanban_appro'|trans }}</button>
                    <button type="button" class="button small {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}orange{% else %}disabled{% endif %}" {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}data-open="modal_add_kanban_fab"{% endif %}>{{ 'code_kanban_fab'|trans }}</button>
                    <button type="button" class="button small {% if is_granted('ROLE_APP_SUB_KB_FS_ACCESS') %}purple{% else %}disabled{% endif %}"  {% if is_granted('ROLE_APP_SUB_KB_FS_ACCESS') %}data-open="modal_add_kanban_fs"{% endif %}>{{ 'code_kanban_fs'|trans }}</button>
                </div>
            </div>
        </div>
        <div class="reveal-footer">
            <button type="button" data-close class="button small cancel">{{ 'cancel'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modal_add_kanban_appro" data-reveal>
        <div class="reveal-title">{{ 'kanban_appro.title.add'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(form_add_kanban_appro, {'attr': {'id': 'form_add_kanban_appro','action': url('app_kanban_appro_ajax_add', {'article': article.id}), 'class' : 'not-monitored'}}) }}
            <div class="grid-x grid-margin-x">
                <div class="cell small-12">
                    <div class="grid-x">
                        <div class="cell small-12">
                            {{ form_label(form_add_kanban_appro.section)}}
                            {{ form_widget(form_add_kanban_appro.section)}}
                            <p class="form-error" id="section_error_appro">{{'kanban.error.section.uniqueness'|trans}}</p>
                        </div>
                    </div>
                </div>
            </div>
            {{ form_end(form_add_kanban_appro) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btn_submit_add_kanban_appro" class="button small save">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
    <div class="reveal" id="modal_add_kanban_fab" data-reveal>
        <div class="reveal-title">{{ 'kanban_fab.modal.add.title'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(form_add_kanban_fab, {'attr': {'id': 'form_add_kanban_fab','action': url('app_kanban_fab_ajax_add', {'article': article.id}), 'class' : 'not-monitored'}}) }}
            <div class="grid-x grid-margin-x">
                <div class="cell small-12">
                    <div class="grid-x">
                        <div class="cell small-12">
                            {{ form_label(form_add_kanban_fab.section)}}
                            {{ form_widget(form_add_kanban_fab.section)}}
                            <p class="form-error" id="section_error_fab">{{'kanban.error.section.uniqueness'|trans}}</p>
                        </div>
                    </div>
                </div>
            </div>
            {{ form_end(form_add_kanban_fab) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btn_submit_add_kanban_fab" class="button small save">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% endif %}

    {% if is_granted('ROLE_APP_SUB_KB_FS_ACCESS') %}
    <div class="reveal" id="modal_add_kanban_fs" data-reveal>
        <div class="reveal-title">{{ 'kanban_fs.modal.add.title'|trans }}</div>
        <div class="reveal-body">
            {{ form_start(form_add_kanban_fs, {'attr': {'id': 'form_add_kanban_fs','action': url('app_kanban_fs_ajax_add', {'article': article.id}), 'class' : 'not-monitored'}}) }}
            <div class="grid-x grid-margin-x">
                <div class="cell small-12">
                    <div class="grid-x">
                        <div class="cell small-12">
                            {{ form_label(form_add_kanban_fs.section)}}
                            {{ form_widget(form_add_kanban_fs.section)}}
                            <p class="form-error" id="section_error_fs">{{'kanban.error.section.uniqueness'|trans}}</p>
                        </div>
                    </div>
                </div>
            </div>
            {{ form_end(form_add_kanban_fs) }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button id="btn_submit_add_kanban_fs" class="button small save">{{ 'save'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% endif %}
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function(){

            let form_edit_article = $('#form_edit_article');
            let form_parsley_edit_article = $(form_edit_article).parsley(parsley_options);
            let btn_submit_article_edit = $('#btn_submit_article_edit');

            function tr_on_click(){
                $('.kanban_table_tr').click(function () {
                    window.location = $(this).data('url');
                });
            }
            tr_on_click();

            $('#btn_confirm_delete_article').click(function () {
                $(this).html(btn_spin);
                window.location = "{{ url('app_article_delete', {'article':article.id}) }}"
            });

            $(btn_submit_article_edit).click(function(){
                form_parsley_edit_article.validate();
                form_parsley_edit_article.whenValid().then(function () {
                    $(btn_submit_article_edit).html(btn_spin);
                    $(form_edit_article).submit();
                });
            });

            {# Article Family Modal and Form#}
            let form_add_family = $('#form_add_family');
            let form_parsley_add_family = $(form_add_family).parsley(parsley_options);
            let modal_add_family = $('#modal_add_family');
            let btn_submit_add_family =  $('#btn_submit_add_family');
            $(btn_submit_add_family).click(function(){
                let btn_initial_state =  $(btn_submit_add_family).html();
                form_parsley_add_family.validate();
                form_parsley_add_family.whenValid().then(function () {
                    $(btn_submit_add_family).html(btn_spin);
                    $.ajax({
                        url: $(form_add_family).attr('action'),
                        method: 'POST',
                        data: $(form_add_family).serialize(),
                        success: function(response){
                            $(modal_add_family).foundation('close');
                            addAndSelectOptionOnSelect(response, 'article_famille');
                            $(form_add_family).get(0).reset();
                            $(btn_submit_add_family).html(btn_initial_state);
                        }
                    });
                });
            });

            {# Unit Modal and Form#}
            let form_add_unit = $('#form_add_unit');
            let form_parsley_add_unit = $(form_add_unit).parsley(parsley_options);
            let modal_add_unit = $('#modal_add_unit');
            let btn_submit_add_unit =  $('#btn_submit_add_unit');
            $(btn_submit_add_unit).click(function(){
                let btn_initial_state =  $(btn_submit_add_unit).html();
                form_parsley_add_unit.validate();
                form_parsley_add_unit.whenValid().then(function () {
                    $(btn_submit_add_unit).html(btn_spin);
                    $.ajax({
                        url: $(form_add_unit).attr('action'),
                        method: 'POST',
                        data: $(form_add_unit).serialize(),
                        success: function(response){
                            $(modal_add_unit).foundation('close');
                            addAndSelectOptionOnSelect(response, 'article_unite');
                            $(form_add_unit).get(0).reset();
                            $(btn_submit_add_unit).html(btn_initial_state);
                        }
                    });
                });
            });

            {# Kanban Appro Modal and Form#}
            let form_add_kanban_appro = $('#form_add_kanban_appro'),
                url_add_kb_appro = "{{ url('app_kanban_appro_ajax_add', {'article': article.id}) }}",
                btn_submit_add_kanban_appro =  $('#btn_submit_add_kanban_appro');
            let form_parsley_add_appro = $(form_add_kanban_appro).parsley(parsley_options);
            $(btn_submit_add_kanban_appro).click(function(){
                form_parsley_add_appro.validate();
                form_parsley_add_appro.whenValid().then(function () {
                    $(btn_submit_add_kanban_appro).html(btn_spin);
                    $.post(url_add_kb_appro, $('#form_add_kanban_appro').serialize(), function(response){
                        if(response.hasOwnProperty('redirect')){
                            window.location = response.redirect;
                        } else {
                            console.log('error redirect');
                        }
                    });
                });
            });

            {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
            {# Kanban Fabrication Modal and Form#}
            let form_add_kanban_fab = $('#form_add_kanban_fab');
            let form_parsley_add_fab = $(form_add_kanban_fab).parsley(parsley_options),
                url_add_kb_fab = "{{ url('app_kanban_fab_ajax_add', {'article': article.id}) }}",
                btn_submit_add_kanban_fab =  $('#btn_submit_add_kanban_fab');

            $(btn_submit_add_kanban_fab).click(function(){
                form_parsley_add_fab.validate();
                form_parsley_add_fab.whenValid().then(function () {
                    $(btn_submit_add_kanban_fab).html(btn_spin);
                    $.post(url_add_kb_fab, $('#form_add_kanban_fab').serialize(), function(response){
                        if(response.hasOwnProperty('redirect')){
                            window.location = response.redirect;
                        } else {
                            console.log('error redirect');
                        }
                    });
                });
            });
            {% endif %}

            {% if is_granted('ROLE_APP_SUB_KB_FS_ACCESS') %}
            {# Kanban Fiche Suiveuse Modal and Form#}
            let form_add_kanban_fs = $('#form_add_kanban_fs'),
                url_add_fs = "{{ url('app_kanban_fs_ajax_add', {'article': article.id}) }}",
                btn_submit_add_kanban_fs =  $('#btn_submit_add_kanban_fs');
            let form_parsley_add_fs = $(form_add_kanban_fs).parsley(parsley_options);
            $(btn_submit_add_kanban_fs).click(function(){
                form_parsley_add_fs.validate();
                form_parsley_add_fs.whenValid().then(function () {
                    $(btn_submit_add_kanban_fs).html(btn_spin);
                    $.post(url_add_fs, $('#form_add_kanban_fs').serialize(), function(response){
                        if(response.hasOwnProperty('redirect')){
                            window.location = response.redirect;
                        } else {
                            console.log('error redirect');
                        }
                    });
                });
            });
            {% endif %}

            let article_title = $('#article_title');
            let input_article_code = $('#article_code');
            let input_article_name = $('#article_designationCourte');
            $(input_article_code).on('propertychange input',function(){
                updateArticleTitle();
            });
            $(input_article_name).on('propertychange input',function(){
                updateArticleTitle();
            });

            function updateArticleTitle(){
                let code = $(input_article_code).val();
                let name = $(input_article_name).val();
                let title = (code) ? code : '';
                if(name) title += (title) ? ' - '+name: name;
                $(article_title).html(title);
            }

            function addAndSelectOptionOnSelect(object, selectId){
                let select = $('#'+selectId);
                let new_option = document.createElement('option');
                new_option.value = object.id;
                new_option.innerHTML = object.label;
                new_option.setAttribute('selected','selected');
                $(select).append(new_option);
            }

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

            function addKanbanInList(object, kanban_type) {
                let tr = document.createElement('tr');
                tr.classList.add('kanban_table_tr');
                tr.dataset.url = getKanbanViewUrlByType(kanban_type,object.id);
                let td1 = document.createElement('td');
                let td2 = document.createElement('td');
                let td3 = document.createElement('td');
                td1.innerHTML = object.kb_type;
                td2.innerHTML = object.kb_libelle;
                td3.innerHTML = object.section;
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
                $('#kanban_table tbody').append(tr);
                tr_on_click();
            }

            function getKanbanViewUrlByType(type, kanban_id) {
                let url = '#';

                if (type === "{{ constant('App\\Entity\\Kanban\\KanbanType::APPRO') }}"){
                    url = "{{ url('app_kanban_appro_edit', {'kanban':'__00__'}) }}";
                } else if (type === "{{ constant('App\\Entity\\Kanban\\KanbanType::FAB') }}"){
                    {% if is_granted('ROLE_APP_SUB_KB_FAB_ACCESS') %}
                        url = "{{ url('app_kanban_fab_edit', {'kanban':'__00__'}) }}";
                    {% endif %}
                } else {
                    {% if is_granted('ROLE_APP_SUB_KB_FS_ACCESS') %}
                        url = "{{ url('app_kanban_fs_edit', {'kanban':'__00__'}) }}";
                    {% endif %}
                }

                url = url.replace('__00__', kanban_id);

                return url;
            }


        {#<tr class="kanban_table_tr" data-url="{{ kanban_url }}">#}
        {#        <td>{{ row.type_code|trans }}</td>#}
        {#        <td>{% if row.kanban_libelle %}{{ row.kanban_libelle }}{% else %}Kanban{% endif %}</td>#}
        {#        <td>{{ row.section_libelle }}</td>#}
        {#        </tr>#}

            resetOnload();

            $('table.jump tbody tr').click(function(){
                window.location = $(this).data('url');
            });

            let table_id = 'article_list';{# idem $screen_code in controller list #}
            let collection_ids = $().get_next_previous_ids(table_id);
            if(collection_ids){
                $('.call_previous_next_element').fadeIn(100);
                let next_previous_url = "{{ url('app_article_edit',{'article':'__00__'}) }}";
                $('#call_next_element').click(function(){
                    let id = $().get_next_or_previous_id(table_id,collection_ids,'next');
                    if(id){
                        window.location = next_previous_url.replace('__00__', id);
                    }
                });
                $('#call_previous_element').click(function(){
                    let id = $().get_next_or_previous_id(table_id,collection_ids,'previous');
                    if(id){
                        window.location = next_previous_url.replace('__00__', id);
                    }
                });
                $().manage_btn_next_and_previous(table_id,collection_ids,next_previous_url);
            }

        })
    </script>
{% endblock %}