{% extends 'layout.twig' %}

{% block body %}
    <section class="contenu clearfix">

        <h1>{{ 'Destinataires à notifier' | trad }}</h1>

        {{ ariane() }}

        <div class="tab-content clearfix mt-base">

            {{ arianeSub() }}
            
            <div id="mail" class="padding15">

                <form method="post"
                        class="bs-row py-base form-default gutter-x-base"
                        name="form_param_mail"
                        id="form_param_mail"
                >
                    <div class="bs-col-full text-right mb-base">
                        <p style="float: left">{{ 'Ici vous pouvez paramétrer des destinataires à notifier en cas de modification ou de création de nouvelle version, depuis le portail fournisseurs, de documents rattachés aux fournisseurs.' | trad }}</p>
                        <button
                                type="button"
                                class="button principal button_right"
                                onclick="sendFormParametrage('{{ path('Parametrage.ParametrageOxalink.notifierDestinataire') }}')"
                        >
                            {{- 'Enregistrer' | trad -}}
                        </button>
                    </div>

                    <nav class="bg-default bg_form follow-scroll box-form align-self-start clearfix" id="navBarParam" style="width: 250px;">
                        <ul class="nav">
                            <li class="nav-item"><a class="nav-link {% if formToShow == 'form_default' %}actif{% endif %}" href="javascript:void(0);" id="nav-form_default" onClick="showParam('form_default');">{{ 'Par défaut' |trad }}</a></li>
                            <li class="nav-item"><a class="nav-link {% if formToShow == 'form_type' %}actif{% endif %}" href="javascript:void(0);" id="nav-form_type" onClick="showParam('form_type');">{{ 'Par type de document' |trad }}</a></li>
                        </ul>
                    </nav>

                    <input type="hidden" id="formSend" name="formSend" value="" />

                    <div class="bs-col clearfix" id="divParam">
                        <div class="divParam clearfix bg_form padding15 mb-base" id="form_default">
                            <div class="single">
                                <fieldset class="scheduler-border">
                                    <legend class="scheduler-border">{{ 'Par défaut' | trad }}</legend>
                                    <input type="hidden" name="TYPE_DOC" value="DEFAUT" />
                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputTextarea(
                                                'Destinataires :' | trad,
                                                'COMMENTAIRE',
                                                idDoc.DEFAUT.COMMENTAIRE,
                                                '',
                                                path('Ajax.validator.isStringWithContent'),
                                                "{'nomChamp': '"~ 'Destinataires' | trad ~"', 'contentAutorise': ['.', '@', '_', '-'], 'contentObligatoire': ['.', '@'], 'separation': true, 'sansEspace': true, 'sizeMin': 1, 'sizeMax': 3000}",
                                                '',
                                                'rows="10"',
                                                '',
                                                '',
                                                '',
                                                'height:inherit!important;'
                                            )}}
                                        </div>

                                        <div class="colonne2 last">
                                            <div class="colonne2">
                                                <button class="button secondaire full" type="button" onclick="ajaxPopup('{{ path('Ajax.liste.utilisateurSociete') }}', '', 'input_destinataires_util_appli', '', {'code_ste' : '{{ codeSte }}', 'email' : 'true'})">{{ 'Utilisateur de l\'application' | trad }}</button>
                                                <input type="hidden" id="input_destinataires_util_appli" name="destinataires_util_appli" value="" onchange="addEmail('{{ path('Ajax.MailController.emailUtilisateur') }}', this, 'input_COMMENTAIRE')" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Envoi aux acheteurs des sous-familles' | trad,
                                                'name' : 'ALPHA2',
                                                'value' : idDoc.DEFAUT.ALPHA2 ?? false,
                                            }) }}
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Responsable factures du fournisseur' | trad,
                                                'name' : 'ALPHA3',
                                                'value' : idDoc.DEFAUT.ALPHA3 ?? false,
                                            }) }}
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>

                        <div class="divParam clearfix bg_form padding15 mb-base" id="form_type" style="display:none;">
                            <div class="single">
                                <fieldset class="scheduler-border">
                                    <legend class="scheduler-border">{{ 'Par type de document' | trad }}</legend>
                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputAdvance('SELECT',{
                                                'titre' : 'Type de document' | trad,
                                                'name' : 'TYPE_DOC_second',
                                                'listeValue' : listeTypeDoc,
                                                'value' : post.TYPE_DOC_second,
                                                'myFunction': 'updateForm',
                                                'myParams': '["TYPE_DOC_second"]'
                                            }) }}
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputTextarea(
                                                'Destinataires :' | trad,
                                                'COMMENTAIRE_second',
                                                post.COMMENTAIRE_second,
                                                '',
                                                path('Ajax.validator.isStringWithContent'),
                                                "{'nomChamp': '"~ 'Destinataires' | trad ~"', 'contentAutorise': ['.', '@', '_', '-'], 'contentObligatoire': ['.', '@'], 'separation': true, 'sansEspace': true, 'sizeMin': 1, 'sizeMax': 3000}",
                                                '',
                                                'rows="10"',
                                                '',
                                                '',
                                                '',
                                                'height:inherit!important;'
                                            )}}
                                        </div>

                                        <div class="colonne2 last">
                                            <div class="colonne2">
                                                <button class="button secondaire full" type="button" onclick="ajaxPopup('{{ path('Ajax.liste.utilisateurSociete') }}', '', 'input_destinataires_util_appli_second', '', {'code_ste' : '{{ codeSte }}', 'email' : 'true'})">{{ 'Utilisateur de l\'application' | trad }}</button>
                                                <input type="hidden" id="input_destinataires_util_appli_second" name="destinataires_util_appli_second" value="" onchange="addEmail('{{ path('Ajax.MailController.emailUtilisateur') }}', this, 'input_COMMENTAIRE_second')" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Envoi aux acheteurs des sous-familles' | trad,
                                                'name' : 'ALPHA2_second',
                                                'value' : post.ALPHA2_second ?? false,
                                            }) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="colonne2">
                                            {{ inputAdvance('SWITCH', {
                                                'titre' : 'Responsable factures du fournisseur' | trad,
                                                'name' : 'ALPHA3_second',
                                                'value' : post.ALPHA3_second ?? false,
                                            }) }}
                                        </div>
                                    </div>
                                </fieldset>

                                <fieldset class="scheduler-border">
                                    <legend class="scheduler-border">{{ 'Paramétrage existant' | trad }}</legend>
                                    <div class="row">
                                        <table class="table table-hover">
                                            <thead class="thead-dark">
                                            <tr>
                                                <th>{{ 'Type de document' | trad }}</th>
                                                <th width="25%">{{ 'Destinataires' | trad }}</th>
                                                <th>{{ 'Envoi aux acheteurs des sous-familles' | trad }}</th>
                                                <th>{{ 'Responsable factures du fournisseur' | trad }}</th>
                                                <th>{{ 'Actions' | trad }}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                {% for parametrage, data in idDoc %}
                                                    {% if parametrage != 'DEFAUT' %}
                                                        <tr id="param{{ parametrage }}">
                                                            <td>{{ listeTypeDoc[parametrage] }} ({{ parametrage }})</td>
                                                            <td>{{ data.COMMENTAIRE }}</td>
                                                            <td>{{ data.ALPHA2 | boolTrad }}</td>
                                                            <td>{{ data.ALPHA3 | boolTrad }}</td>
                                                            <td>
                                                                {{ hover_action('param'~parametrage, 'Supprimer_v2', "deleteParam('"~path('Parametrage.ParametrageOxalink.ajaxDeleteParamDestinataire', {type: parametrage})~"', '"~parametrage~"')") }}
                                                                {{ hover_action('param'~parametrage, 'modifier_v2', "changeSelect('"~parametrage~"')") }}
                                                            </td>
                                                        </tr>
                                                    {% endif %}
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="bs-col-full text-right mb-base">
                            <button
                                    type="button"
                                    class="button principal button_right"
                                    onclick="sendFormParametrage('{{ path('Parametrage.ParametrageOxalink.notifierDestinataire') }}')"
                            >
                                {{- 'Enregistrer' | trad -}}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <script>
        var messageDeleteParam = {{ "Êtes-vous sûr de vouloir supprimer le paramètre" | trad | json }}

        function deleteParam(path, idParam)
        {
            let confirmation = confirm(messageDeleteParam+' '+idParam+' ?');

            if (confirmation) {
                activeLoader();
                $.ajax({
                    dataType: 'html',
                    url: path,
                    type: 'POST',
                    data: {type: idParam},
                    success: function(data) {
                        desactiveLoader();
                        $('#param'+idParam).remove();
                        resetForm();
                    }
                });
            }
        }

        function sendFormParametrage(path)
        {
            activeLoader();
            $.ajax({
                url: path,
                type: 'POST',
                dataType: 'html',
                data: $('#form_param_mail').serialize(),
                success: function(result){
                    desactiveLoader();
                    ajaxPopup (
                        '{{ path('Ajax.Erreur.popupInformation') }}',
                        '',
                        '',
                        '',
                        {
                            'message': '{{ 'Vos modifications sont prises en compte.' | trad }}'
                        },
                        '',
                        true
                    );
                },
                error: function (data){
                    activePopup ('Erreur', data.responseText, 'modal_small');
                    desactiveLoader();
                }
            });
        }

        function addEmail(path, object, inputMail)
        {
            value=object.value;
            $.ajax({
                dataType : 'html',
                data: {'value' : value},
                url: path,
                type: 'POST',
                success: function(data) {
                    mails = $('#'+inputMail).val().trim()+data.trim()+",";
                    $('#'+inputMail).val(mails).change();
                }
            });
        }

        function updateForm(id, valueToUse = null) {
            let el      = document.querySelector('#form_type #input_'+id);
            let value   = el.value;
            let data    = {{ idDoc | json }};
            if (valueToUse !== null) {
                value   = valueToUse;
            }

            let selectedData = data[value];

            if (selectedData === undefined) {
                resetForm();
            } else {
                for (const key in selectedData) {
                    let elForm = document.getElementById('input_'+key+'_second');
                    if (elForm.getAttribute('type') === 'checkbox') {
                        changeValueSwitch(elForm.name, selectedData[key] == 1? true:false);
                    }
                    elForm.value = selectedData[key];

                }
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            updateForm('TYPE_DOC_second');
        });

        function resetForm()
        {
            document.getElementById('input_COMMENTAIRE_second').value = '';
            changeValueSwitch('ALPHA2_second', false);
            changeValueSwitch('ALPHA3_second', false);
        }

        function toBool(info) {
            return info === 0x54 || info === 54 || info === 1 || info === '1' || info === 'T' || info === 'O' || info.toLower === 'on' || info.toLower === 'true' || info.toLower === 'checked' || info === true;
        }

        function showParam(div)
        {
            $('#navBarParam .nav-link').removeClass('actif');
            $('#nav-'+div).addClass('actif');

            $('.divParam').hide();

            $('#'+div).show();

            $('#formSend').val(div);
        }

        showParam('{{ formToShow }}');

        function changeSelect(data)
        {
            $('#input_TYPE_DOC_second').val(data);
            updateForm('TYPE_DOC_second');
        }
    </script>
{% endblock %}
