{% 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="stockArticleForm" action="{{ path('Stock.StockArticle.nouveau') }}">
                <h3>
                    <a href="{{ path('Stock.BonEntree.gestion') }}" class="secondaire button button_right">
                        {{  'Annuler' | trad }}
                    </a>
                    <button type="submit" class="principal button last button_right mr-small">
                        {{ 'Créer' | trad }}
                    </button>
                </h3>
                <div class="tab-content">
                    <div class="tab-pane active in clearfix padding_form bg_form border_form">
                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ 'Choix de l\'article' | trad }}</legend>
                            <div class="row">
                                <div class="colonne2">
                                    {{ inputAdvance('ZOOMADVANCE', {
                                        'name': 'SARTICLE[CODE_ART]',
                                        'titre': 'Article' | trad,
                                        'pahtZoom' : path('Ajax.liste.articlesNotInSarticles'),
                                        'pathValidator' : path('Ajax.validator.zoom'),
                                        'paramsValidator' : "{'entity': 'Articles', 'nomChamp' : '" ~ ('Article' | trad |e('js')|raw) ~ "'}",
                                        'titleZoom' : 'Liste des articles' | trad,
                                        'Entity' : 'Articles',
                                        'myFuncValidator' : 'updateForm',
                                        'paramFuncValidator' : '[]',
                                        'obligatoire': true
                                    }) }}
                                    <input type="hidden" name="SARTICLE[DESIGN]" id="input_SARTICLE[DESIGN]">
                                </div>
                            </div>
                        </fieldset>

                        <span class="d-none" id="details">
                        {% embed '@Stock/StockArticle/Composant/_details.twig' %}
                            {% block description %}
                                <div class="row">
                                    <div class="colonne">
                                        <div class="row">
                                            <input type="hidden" name="MEMOS[NODEMEMO]">
                                            {{ inputAdvance('textarea', {
                                                'titre' : 'Description' | trad,
                                                'name' : 'MEMOS[CONTMEMO]',
                                                'pathValidator' : path('Ajax.validator.isStringAvecEspace'),
                                                'paramsValidator' : "{'sizeMin' : '0', 'sizeMax' : '3000'}",
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block general1 %}
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('ZOOMADVANCE', {
                                                'titre': 'Sous-famille' | trad,
                                                'name' : 'SARTICLE[SSFAM]',
                                                'pahtZoom' : path('Ajax.liste.sousFamilles'),
                                                'pathValidator' : path('Ajax.validator.zoom'),
                                                'paramsValidator' : "{'entity' : 'SousFamille','nomChamp' : '"~'Sous-famille' | trad~"', 'null': true}",
                                                'entity' : 'SousFamille',
                                                'titleZoom' : 'Liste des sous-familles' | trad,
                                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                                'convertLibelle' : 'convertLibelleGlobal',
                                                'widthPopup': 'modal_large',
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('ZOOMADVANCE', {
                                                'titre': 'Rubrique' | trad,
                                                'name' : 'SARTICLE[RUBRIQUE]',
                                                'pahtZoom' : path('Ajax.liste.srubComps'),
                                                'pathValidator' : path('Ajax.validator.zoom'),
                                                'paramsValidator' : "{'entity' : 'Srubcomp','nomChamp' : '"~'Rubrique' | trad~"', 'null': true}",
                                                'entity' : 'Srubcomp',
                                                'titleZoom' : 'Liste des rubriques' | trad,
                                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                                'convertLibelle' : 'convertLibelleGlobal',
                                                'codeBDD': 'CODE',
                                                'libelleBDD': 'LIBELLE',
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('TEXT', {
                                                titre: 'Dimension' | trad,
                                                name: 'SARTICLE[DIMENSION]',
                                                pathValidator: path('Ajax.validator.float'),
                                                paramsValidator: "{'min' : '0', 'format': " ~ format_qte() ~ "}",
                                                addClass: 'text-right'
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Article stratégique ?' | trad,
                                                'name' : 'SARTICLE[STRATEG]',
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Article acheté ?' | trad,
                                                'name' : 'SARTICLE[ART_ACH]',
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block valorisation %}
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('SELECT', {
                                                'titre' : 'Valorisation' | trad,
                                                'name' : 'SARTICLE[TYPE_VALO]',
                                                'listeValue' : listeChoixTypeValo,
                                                'obligatoire': true,
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Traçabilité' | trad,
                                                'name' : 'SARTICLE[TRACABLE]',
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block unites %}
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('TEXT', {
                                                titre: 'Unité de stockage' | trad,
                                                name: 'SARTICLE[UNITE_STK]',
                                                option: 'readonly'
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            <input type="hidden" id="input_CODE_ART" value="{{ stockArticle.CODE_ART }}">
                                            {{ inputAdvance('ZOOMADVANCE', {
                                                'titre': 'Unité d\'achat' | trad,
                                                'name' : 'SARTICLE[UNITE_ACH]',
                                                'pahtZoom' : path('Ajax.liste.unites'),
                                                'paramZoom' : "{'filtreArticle': $('#input_CODE_ART').val()}",
                                                'pathValidator' : path('Ajax.validator.zoom'),
                                                'paramsValidator' : "{'entity' : 'Unites', 'nomChamp' : '"~ 'Unité' | trad ~"', 'null' : true}",
                                                'entity' : 'Unites',
                                                'titleZoom' : 'Liste des unités' | trad,
                                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                                'convertLibelle' : 'convertLibelleGlobal'
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('TEXT', {
                                                titre: 'Conversion unité d\'achat / Unité de stockage' | trad,
                                                name: 'SARTICLE[CONVER]',
                                                pathValidator: path('Ajax.validator.float'),
                                                paramsValidator: "{'min' : '0', 'obligatoire': false, 'format': " ~ format_qte() ~ "}",
                                                addClass: 'text-right'
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block gamme %}
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('ZOOMADVANCE', {
                                                'titre' : 'Fabricant' | trad,
                                                'name' : 'CODEFAB',
                                                'pahtZoom' : path('Ajax.liste.fabricant'),
                                                'titreZoom' : 'liste fabricant',
                                                'paramZoom' : "",
                                                'entity' : 'Fabricant',
                                                'pathValidator' : path('Ajax.validator.zoom'),
                                                'paramsValidator' : "{'entity' : 'Fabricant','nomChamp' : 'Fabricant', 'null' : true}",
                                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                                'convertLibelle' : 'convertLibelleGlobal',
                                                'option': 'readonly'
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('ZOOMADVANCE', {
                                                'titre' : 'Gamme' | trad,
                                                'name' : 'CODEGAM',
                                                'pahtZoom' : path('Ajax.liste.gamme'),
                                                'titreZoom' : 'Gamme',
                                                'paramZoom' : "{'filter_CODEFABR' : $('#input_CODEFAB').val()}",
                                                'entity' : 'Gamme',
                                                'pathValidator' : path('Ajax.validator.zoom'),
                                                'paramsValidator' : "{'entity' : 'Gamme','nomChamp' : 'Gamme', 'null' : true}",
                                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                                'convertLibelle' : 'convertLibelleGlobal',
                                                'option': 'readonly'
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('TEXT', {
                                                titre: 'Réf/Fabricant' | trad,
                                                name: 'REFARTFAB',
                                                option: 'readonly'
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block general2 %}
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Article loué' | trad,
                                                'name' : 'SARTICLE[ART_LOUE]',
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('TEXT', {
                                                titre: 'Taux (%/an)' | trad,
                                                name: 'SARTICLE[TX_LOCAT]',
                                                pathValidator: path('Ajax.validator.float'),
                                                paramsValidator: "{'min' : '0', 'max' : '100', 'format': " ~ format_montant() ~ "}",
                                                addClass: 'text-right'
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block dates %}
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('DATE', {
                                                'titre' : 'Date de création' | trad,
                                                'name'  : 'SARTICLE[DTE_CREAT]',
                                                'option': 'readonly',
                                                'value': dateJour | dateTrad
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('DATE', {
                                                'titre' : 'Date de mise à jour' | trad,
                                                'name'  : 'SARTICLE[DTE_MAJ]',
                                                'option': 'readonly'
                                            }) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="colonne2">
                                        <div class="row">
                                            {{ inputAdvance('DATE', {
                                                'titre' : 'Date dernière commande' | trad,
                                                'name'  : 'SARTICLE[DT_DERNCA]',
                                                'option': 'readonly'
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="colonne2 last">
                                        <div class="row">
                                            {{ inputAdvance('DATE', {
                                                'titre' : 'Date de fermeture' | trad,
                                                'name'  : 'SARTICLE[DTE_FERM]',
                                                'pathValidator': path('Ajax.validator.date'),
                                                'paramsValidator': "{'dateMin' : '"~ dateJour ~"', 'null': true}",
                                            }) }}
                                            <input type="hidden" name="SARTICLE[DTE_INV]" value="00000000">
                                        </div>
                                    </div>
                                </div>
                            {% endblock %}

                            {% block champs_supp %}
                                <div class="row">
                                    {% if CSExist('SARTICLE') %}
                                        {{ inputCSAdvance({
                                            'codTab' : 'SARTICLE',
                                            'colonneActif' : true,
                                            'ModeModif' : true,
                                        }) }}
                                    {% endif %}
                                </div>
                            {% endblock %}
                        {% endembed %}
                        </span>
                    </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">
        $('#stockArticleForm').on('submit', (event) => {
            event.preventDefault();

            activeLoader();

            const form = $('#stockArticleForm');
            const formData = form.serializeArray();
            submitForm(form, formData);
        });

        function updateForm () {
            $.ajax({
                url: '{{ path('Stock.StockArticle.getInformationOnArticle') }}',
                type: 'POST',
                data: {
                    codeArt: $('#' + CSS.escape('input_SARTICLE[CODE_ART]')).val()
                },
                success: (data) => {
                    const details = $('#details');
                    const codegamInput = $('#text_CODEGAM');
                    const fabricantInput = $('#text_CODEFAB');
                    const ssfamInput = $('#' + CSS.escape('text_SARTICLE[SSFAM]'));
                    const uniteStkInput = $('#' + CSS.escape('input_SARTICLE[UNITE_STK]'));

                    $('#' + CSS.escape('input_SARTICLE[DESIGN]')).val(data.DESIGN);
                    $('#' + CSS.escape('input_SARTICLE[SSFAM]')).val(data.SSFAM);
                    $('#' + CSS.escape('input_REFARTFAB')).val(data.REFARTFAB);

                    ssfamInput.val(data.SSFAM);
                    ssfamInput.trigger('change');
                    uniteStkInput.val(data.UNIT);
                    fabricantInput.val(data.CODEFAB);
                    fabricantInput.trigger('change');
                    codegamInput.val(data.CODEGAM);
                    codegamInput.trigger('change');

                    details.removeClass('d-none');
                    details.addClass('d-block');
                }
            });
        }
    </script>
{% endblock %}