{% 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 class="underlined">{{ 'article.title.clone'|trans }} <span id="article_title">{{ article }}</span></h1>
            </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_clone" class="button small save">{{ 'save'|trans }}</button>
                    </div>
                </div>
                {{ form_end(form_edit) }}
            </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>
{% 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_clone = $('#btn_submit_article_clone');

            $('#article_code').focus();


            $(btn_submit_article_clone).click(function(){
                form_parsley_edit_article.validate();
                form_parsley_edit_article.whenValid().then(function () {
                    $(btn_submit_article_clone).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);
                        }
                    });
                });
            });

            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();
            }


            resetOnload();

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

        })
    </script>
{% endblock %}