{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
    <div class="cell small-12">
        <h1 class="underlined">{{ 'article.add.title'|trans }}</h1>
        {{ form_start(form_add,{'attr':{'id':'form_add_article'}}) }}
        <div class="grid-x grid-margin-x">
            <div class="cell small-12 medium-6">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12">{{ form_label(form_add.code)}}</div>
                    <div class="cell small-12">{{ form_widget(form_add.code,{'attr':{'data-parsley-custom-async':'article_code'}})}}</div>
                    <div class="cell small-12">{{ form_label(form_add.designationCourte)}}</div>
                    <div class="cell small-12">{{ form_widget(form_add.designationCourte)}}</div>
                    <div class="cell small-12">{{ form_label(form_add.designationLongue)}}</div>
                    <div class="cell small-12">{{ form_widget(form_add.designationLongue)}}</div>
                    <div class="cell small-12">{{ form_label(form_add.codeABC)}}{{ form_widget(form_add.codeABC,{'attr':{'style':'display:inline-block'}})}}</div>
                    <div class="cell small-12">
                        {{ form_label(form_add.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_add.famille)}}</div>
                    <div class="cell small-12">
                        {{ form_label(form_add.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_add.unite)}}</div>
                </div>
            </div>
            <div class="cell small-12 medium-6">
                <div class="grid-x grid-padding-x">
                    <div class="cell small-12">{{ form_label(form_add.commentaire)}}</div>
                    <div class="cell small-12">{{ form_widget(form_add.commentaire)}}</div>
                </div>
            </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_add" class="button small save">{{ 'save'|trans }}</button>
            </div>
        </div>
        {{ form_end(form_add) }}
    </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-9">{{ form_widget(form_add_unit.code,{'attr':{'data-parsley-custom-async':'unit_code','class':'upper'}})}}</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_add_article = $('#form_add_article');
            let form_parsley_add_article = $(form_add_article).parsley(parsley_options);
            let btn_submit_article_add = $('#btn_submit_article_add');

            //Focus in on code input article
            //$('#article_code').focus();

            $(btn_submit_article_add).click(function(){
                form_parsley_add_article.validate();
                form_parsley_add_article.whenValid().then(function () {
                    $(btn_submit_article_add).html(btn_spin);
                    $(form_add_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();
                $(form_add_article).get(0).reset();
            }


            resetOnload();

        })
    </script>
{% endblock %}