{% extends 'layout.twig' %}

{% block body %}
    <div class="contenu clearfix">
        <H1>{{ 'Articles' | trad }}</H1>
        {{ ariane() }}
        <div class="tab-content" id="tab-content">
            <form method="post" name="sarticle" id="articlesDeRemplacementForm" action="{{ path('Stock.StockArticle.articlesDeRemplacement', { codeArt: stockArticle.CODE_ART }) }}">
                <h3 class="mb-base">
                    {{ strBuild('Articles de remplacement de l\'article N° @1@ - @2@' | trad, [stockArticle.CODE_ART, stockArticle.DESIGN])  }}
                    <button type="submit" class="button principal last">{{ 'Enregistrer' | trad }}</button>
                    <a href="{{ path('Stock.StockArticle.gestion') }}" class="secondaire button button_right">
                        {{  'Annuler' | trad }}
                    </a>
                </h3>
                <div class="tab-content">
                    <div class="tab-pane active in clearfix padding_form bg_form border_form">
                        <div class="colonne2">
                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre': 'Article 1' | trad,
                                    'name' : 'SARTICLE[ART_REMP1]',
                                    'value' : stockArticle.ART_REMP1,
                                    'pahtZoom' : path('Ajax.liste.stockArticles'),
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'Sarticle','nomChamp' : '"~'Article 1' | trad~"', 'null': true}",
                                    'entity' : 'Sarticle',
                                    'titleZoom' : 'Liste des articles de stock' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'codeBDD': 'CODE_ART',
                                    'libelleBDD': 'DESIGN',
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre': 'Article 2' | trad,
                                    'name' : 'SARTICLE[ART_REMP2]',
                                    'value' : stockArticle.ART_REMP2,
                                    'pahtZoom' : path('Ajax.liste.stockArticles'),
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'Sarticle','nomChamp' : '"~'Article 2' | trad~"', 'null': true}",
                                    'entity' : 'Sarticle',
                                    'titleZoom' : 'Liste des articles de stock' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'codeBDD': 'CODE_ART',
                                    'libelleBDD': 'DESIGN',
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre': 'Article 3' | trad,
                                    'name' : 'SARTICLE[ART_REMP3]',
                                    'value' : stockArticle.ART_REMP3,
                                    'pahtZoom' : path('Ajax.liste.stockArticles'),
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'Sarticle','nomChamp' : '"~'Article 3' | trad~"', 'null': true}",
                                    'entity' : 'Sarticle',
                                    'titleZoom' : 'Liste des articles de stock' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'codeBDD': 'CODE_ART',
                                    'libelleBDD': 'DESIGN',
                                }) }}
                            </div>
                        </div>
                        <div class="colonne2 last">
                            <div class="row">
                                {{ inputAdvance('TEXT', {
                                    titre: 'Conversion U.Stock Article 1' | trad,
                                    name: 'SARTICLE[CONV_ART1]',
                                    value: stockArticle.CONV_ART1 | qte,
                                    pathValidator: path('Ajax.validator.float'),
                                    paramsValidator: "{'min' : '0', 'format': " ~ format_qte() ~ "}",
                                    addClass: 'text-right'
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('TEXT', {
                                    titre: 'Conversion U.Stock Article 2' | trad,
                                    name: 'SARTICLE[CONV_ART2]',
                                    value: stockArticle.CONV_ART2 | qte,
                                    pathValidator: path('Ajax.validator.float'),
                                    paramsValidator: "{'min' : '0', 'format': " ~ format_qte() ~ "}",
                                    addClass: 'text-right'
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('TEXT', {
                                    titre: 'Conversion U.Stock Article 3' | trad,
                                    name: 'SARTICLE[CONV_ART3]',
                                    value: stockArticle.CONV_ART3 | qte,
                                    pathValidator: path('Ajax.validator.float'),
                                    paramsValidator: "{'min' : '0', 'format': " ~ format_qte() ~ "}",
                                    addClass: 'text-right'
                                }) }}
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/postAjaxForm.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/zoomAdvanceReinitialiser.js') }}"></script>
    <script type="application/javascript">
        $('#articlesDeRemplacementForm').on('submit', (event) => {
            event.preventDefault();

            activeLoader();

            const form = $('#articlesDeRemplacementForm');
            const formData = form.serializeArray();
            submitForm(form, formData);
        });
    </script>
{% endblock %}