{% extends 'layout.twig' %}

{% block body %}
    <div class="contenu clearfix">
        <H1>{{ 'Gestion des indisponibilités' | trad }}</H1>
        {{ ariane() }}

        <h3 class="mb-base">
            {{ 'Mise en indisponibilité' | trad }}

            <button type="submit" class="principal button button_right last" form="indisponibilite_form">
                {{ 'Valider' | trad }}
            </button>
            <a href="{{ path('Stock.Indisponibilite.gestion') }}" class="secondaire button">
                {{  'Annuler' | trad }}
            </a>
        </h3>
        <div class="tab-content clearfix" id="tab-content">
            <div class="tab-content">
                <div class="tab-pane active in clearfix bg_form border_form pr-base pl-base">
                    <form method="post" name="sindispo" id="indisponibilite_form" action="{{ path('Stock.Indisponibilite.miseEnIndisponibilite') }}">
                        <fieldset class="scheduler-border">
                            <div class="colonne2">
                                <div class="row">
                                    {{ inputAdvance('ZOOMADVANCE', {
                                        titre: 'Site Concerné' | trad,
                                        name : 'SINDISPO[SITE]',
                                        pahtZoom : path('Ajax.liste.siteStockAccessible'),
                                        paramZoom: "{ 'opened_only': true }",
                                        entity : 'SSiteSto',
                                        pathValidator : path('Ajax.validator.zoom'),
                                        paramsValidator : "{'entity' : 'SSiteSto', 'nomChamp' : '"~ 'Site' | trad ~"', 'null' : false}",
                                        titleZoom : 'Liste des sites de stockage' | trad,
                                        pathConvert : path('Ajax.outil.convertLibelle'),
                                        convertLibelle : 'convertLibelleGlobal',
                                        obligatoire: true
                                    }) }}
                                </div>
                                <div class="row">
                                    {% set is_nullable = is_tiers_nullable() ? 'true': 'false' %}
                                    {% set exclude_empty_code = is_blanc_interdit_tiers() ? 'true': 'false' %}
                                    {{ inputAdvance('ZOOMADVANCE', {
                                        titre: 'Tiers' | trad,
                                        name: 'SINDISPO[COD_TIERS]',
                                        pahtZoom : path('Ajax.liste.tiers'),
                                        paramZoom: "{'exclude_empty_code': " ~ exclude_empty_code ~ "}",
                                        entity: 'Tiers',
                                        titleZoom: 'Liste des tiers' | trad,
                                        pathConvert: path('Ajax.outil.convertLibelle'),
                                        convertLibelle : 'convertLibelleGlobal',
                                        pathValidator : path('Ajax.validator.zoom'),
                                        paramsValidator : "{'entity' : 'Tiers','nomChamp' : 'Tiers', 'null' : " ~ is_nullable ~ "}",
                                        obligatoire: true
                                    }) }}
                                </div>
                            </div>
                            <div class="colonne2 last">
                                <div class="row">
                                    {{ inputAdvance('ZOOMADVANCE',{
                                        titre: 'Article indisponible' | trad,
                                        name: 'SINDISPO[ART]',
                                        pahtZoom: path('Ajax.liste.stockLocal'),
                                        entity: 'Sstocklo',
                                        titleZoom : 'Liste des code articles' | trad,
                                        paramZoom: "{'filter_egal_STO#point#SITE': $('#'+CSS.escape('input_SINDISPO[SITE]')).val() }",
                                        pathValidator : path('Ajax.validator.zoomStockLocal'),
                                        paramsValidator : "{'null': false, 'site': $('#'+CSS.escape('input_SINDISPO[SITE]')).val()}",
                                        pathConvert: path('Ajax.outil.convertLibelle'),
                                        convertLibelle: 'convertLibelleGlobal',
                                        obligatoire: true
                                    }) }}
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ 'Données de stock' | trad }}</legend>
                            <div class="row">
                                <div class="colonne2">
                                    <h4>{{ 'Sur site' | trad }}</h4>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité physique' | trad,
                                            'name': 'SSTOCKLO[QTE_PHYS]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité réservée' | trad,
                                            'name': 'SSTOCKLO[QTE_RES]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité déjà indisponible' | trad,
                                            'name': 'SSTOCKLO[QTE_INDIS]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité en Transfert' | trad,
                                            'name': 'SSTOCKLO[QTE_TRF]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité Disponible' | trad,
                                            'name': 'SSTOCKLO[QTE_DISPO]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                </div>
                                <div class="colonne2 last">
                                    <h4>{{ 'Global' | trad }}</h4>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité physique' | trad,
                                            'name': 'SSTOCKLO_GLOBAL[QTE_PHYS]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité réservée' | trad,
                                            'name': 'SSTOCKLO_GLOBAL[QTE_RES]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité déjà indisponible' | trad,
                                            'name': 'SSTOCKLO_GLOBAL[QTE_INDIS]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité en Transfert' | trad,
                                            'name': 'SSTOCKLO_GLOBAL[QTE_TRF]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TEXT', {
                                            'titre': 'Quantité Disponible' | trad,
                                            'name': 'SSTOCKLO_GLOBAL[QTE_DISPO]',
                                            'option': 'readonly',
                                            'addClass': 'text-right'
                                        }) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="colonne">
                                    <div class="row">
                                        {{ inputAdvance('TEXTAREA', {
                                            titre: 'Motif de mise en indisponibilité' | trad,
                                            name: 'SINDISPO[MOTIF]',
                                            pathValidator: path('Ajax.validator.isStringAvecEspace'),
                                            paramsValidator: "{'sizeMin' : '0', 'sizeMax' : '3000'}",
                                        }) }}
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-0">
                                <div class="colonne2">
                                    <div class="row mb-0">
                                        {{ inputAdvance('TEXT', {
                                            titre: 'Lieu de Stockage temporaire' | trad,
                                            name: 'SINDISPO[LIEU]',
                                            pathValidator: path('Ajax.validator.isStringAvecEspace'),
                                            paramsValidator: "{'sizeMin' : '0', 'sizeMax' : '255'}",
                                        }) }}
                                    </div>
                                </div>
                                <div class="colonne2 last">
                                    <div class="row mb-0">
                                        {{ inputAdvance('TEXT', {
                                            titre: 'Quantité de l\'immobilisation' | trad,
                                            name: 'SINDISPO[QTE]',
                                            pathValidator : path('Ajax.validator.float'),
                                            paramsValidator : "{'min' : '1', 'max' : $('#' + CSS.escape('input_SSTOCKLO[QTE_DISPO]')).val(), 'null': false }",
                                            obligatoire: true,
                                            addClass: 'text-right'
                                        }) }}
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset id="lots" class="scheduler-border d-none">
                            <legend class="scheduler-border">{{ 'Répartition par lots' | trad }}</legend>
                            <div id="collection"></div>
                            <div class="bs-col-1">
                                <button type="button" class="principal addItem">
                                    {{ 'Ajouter' | trad }}
                                </button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="d-none">
        {{ include('@Stock/Indisponibilite/Composant/_lot.twig', { key: '%i%', model: true }) }}
        {{ include('@Stock/Indisponibilite/Composant/_lot.twig', { key: 0 }) }}
    </div>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/collectionForm.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/lotsForm.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/postAjaxForm.js') }}"></script>
    <script type="application/javascript" src="{{ baseUrl('js/Modules/Stock/enteForm.js') }}"></script>
    <script type="application/javascript">
        addZoomChangeListenerOnDomChange();

        $('#indisponibilite_form').on('submit', (event) => {
            event.preventDefault();

            const form = $('#indisponibilite_form');
            activeLoader();
            submitForm(form, form.serializeArray());
        });

        $('#' + CSS.escape('input_SINDISPO[ART]')).on('change', (event) => {
            $.ajax({
                method: 'POST',
                url: '{{ path('Stock.StockLocal.getInformation') }}',
                data: {
                    site: $('#' + CSS.escape('input_SINDISPO[SITE]')).val(),
                    codeArt: $(event.target).val()
                },
                success: (stockLocal) => {
                    updateFormRow('input_SSTOCKLO[QTE_PHYS]', stockLocal.QTE_PHYS, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO[QTE_RES]', stockLocal.QTE_RES, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO[QTE_INDIS]', stockLocal.QTE_INDIS, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO[QTE_TRF]', stockLocal.QTE_TRF, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO[QTE_DISPO]', stockLocal.QTE_DISPO, stockLocal.UNITE_STK);

                    const stockLocalGlobal = stockLocal.GLOBAL;
                    updateFormRow('input_SSTOCKLO_GLOBAL[QTE_PHYS]', stockLocalGlobal.QTE_PHYS, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO_GLOBAL[QTE_RES]', stockLocalGlobal.QTE_RES, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO_GLOBAL[QTE_INDIS]', stockLocalGlobal.QTE_INDIS, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO_GLOBAL[QTE_TRF]', stockLocalGlobal.QTE_TRF, stockLocal.UNITE_STK);
                    updateFormRow('input_SSTOCKLO_GLOBAL[QTE_DISPO]', stockLocalGlobal.QTE_DISPO, stockLocal.UNITE_STK);

                    updateFormRow('input_SINDISPO[QTE]', '', stockLocal.UNITE_STK);
                    handleLotsFieldSet(stockLocal);
                }
            })
        });

        $('.addItem').on('click', () => {
            addItem();
        });

        $('.removeItem').on('click', (event) => {
            removeItem(event);
        });

        function updateFormRow (inputId, value, uniteStk) {
            const unite = ' (' + uniteStk + ')';
            const label = $('label[for="'+inputId+'"]');

            $('#' + CSS.escape(inputId)).val(value);

            if (!label.text().includes(unite)) {
                label.text(label.text() + unite);
            }
        }
    </script>
{% endblock %}