{% extends 'layout.twig' %}

{% block body %}

<div class="clearfix titre_div"  id="creationDonnee">
    <h1>{{ 'Bibliothèque de données' | trad }}</h1>
    {{ ariane() }}

	<div id="div_donnee_externe">
    <h3>
        {% if action is same as ("create") %}
            {{ 'Ajout d\'une tâche sur la catégorie de tâche' | trad }} {{ hierarchy.LIB }}
        {% else %}
            {{ 'Modification de la tâche' | trad }} {{ task.LIB }}
        {% endif %}
        {% if action is same as ("create") %}
            <a type="button" class="principal button button_right" id="saveTask" onClick="ajaxPopupV2('{{ path('ProjetAchat.Task.create', {typeObjet:typeObjet,idObjet:idObjet,idHierarchy: hierarchy.ID_TACHE_H}) }}', 'form_create_task');">
                {{ 'Enregistrer' | trad }}
            </a>
        {% elseif action is same as ("edit") %}
            <a type="button" class="principal button button_right" id="saveTask" onClick="ajaxPopupV2('{{ path('ProjetAchat.Task.edit', {idTask: idTask}) }}', 'form_create_task')">
                {{ 'Modifier' | trad }}
            </a>
        {% endif %}
        <a class="secondaire button button_right" onClick="triggerTab('tasks');">{{ 'Annuler' | trad }}</a>
	</h3>
	
	<div class="tab-content" style="margin-top:30px;">
        <form action="" method="post" name="form_create_task" id="form_create_task">
            <div id="contentFixe" class="clearfix">
                <div class="clearfix">
                    <input type="text" value="{{ hierarchy.ID_TACHE_H }}" name="ID_TACHE_H" style="display: none">
                    {% if typeObjet is same as ('D') %}
                        <input type="text" value="0" name="submitForce" id="submitForce" style="display: none">
                    {% endif %}
                    <div class="colonne">
                        <div class="row">
                            {{ inputAdvance('TEXTE', {
                                'titre' : 'Libellé' | trad,
                                'name' : 'LIB',
                                'labelStyle' : 'width: 19%',
                                'addStyle' : 'width: 81%',
                                'pathValidator' : path('Ajax.validator.isStringAvecEspace'),
                                'paramsValidator' : "{'nomChamp' : 'LIB', 'sizeMin' : '1', 'sizeMax' : '120'}",
                                'obligatoire' : true,
                                'value' : task['LIB']
                            }) }}
                        </div>
                        <div class="row">
                            {{ inputAdvance('TEXTAREA', {
                                'titre' : 'Description' | trad,
                                'name' : 'DESCR',
                                'addStyle' : 'width: 81%',
                                'value' : task['DESCR'],
                                'pathValidator' : path('Ajax.validator.isStringAvecEspace'),
                                'paramsValidator' : "{'sizeMin' : '0', 'sizeMax' : '3000'}",
                            }) }}
                        </div>
                    </div>
                    <hr>
                    <div class="row" style="margin-top: 30px">
                        {% if typeObjet is same as ('M') %}
                            <div class="colonne2">
                                {{ inputAdvance('SELECT', {
                                    'titre' : 'Responsable' | trad,
                                    'name' : 'RESPONSABLE',
                                    'listeValue' : listeDeclencheur,
                                    'value' : task['RESPONSABLE'],
                                }) }}
                            </div>
                        {% elseif typeObjet is same as ('D') %}
                            <div class="colonne2">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre' : 'Responsable' | trad,
                                    'name' : 'RESPONSABLE',
                                    'obligatoire' : true,
                                    'pahtZoom' : path('Ajax.liste.utilisateur'),
                                    'entity' : 'HASTUTIL',
                                    'titleZoom' : 'Liste des utilisateurs' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'HASTUTIL','nomChamp' : 'utilisateur'}",
                                    'value' : task['RESPONSABLE'],
                                }) }}
                            </div>
                        {% endif %}
                        <div class="colonne2 last">
                            {{ inputAdvance('TEXTE', {
                                'titre' : 'Durée prévisionnelle en jours' | trad ,
                                'name' : 'DUREE_PREV',
                                'value' : task['DUREE_PREV'],
                                'pathValidator' : path('Ajax.validator.isStringSansEspace'),
                                'paramsValidator' : "{'sizeMin' : '0', 'sizeMax' : '3'}",
                                'obligatoire' : true,
                            }) }}
                        </div>
                    </div>
                    {% if typeObjet is same as ('D') %}
                        <hr>
                        <div class="row">
                            <div class="colonne2">
                                {{ inputAdvance('DATE', {
                                    'titre' : 'Date début' | trad,
                                    'name'  : 'DATE_DEB',
                                    'pathValidator' : path('Ajax.validator.date'),
                                    'paramsValidator' : "{'nomChamp' : '"~ 'Date début' | trad |e('js')|raw ~"', 'null': '"~ (roles.DATE_FAFO == true) ~"'}",
                                    'obligatoire' : true,
                                    'value' : task.DATE_DEB,
                                }) }}
                            </div>
                            <div class="colonne2 last">
                                {{ inputAdvance('DATE', {
                                    'titre' : 'Date fin' | trad,
                                    'name'  : 'DATE_FIN',
                                    'value' : task.DATE_FIN,
                                    'pathValidator' : path('Ajax.validator.date'),
                                    'paramsValidator' : "{'nomChamp' : '"~ 'Date fin' | trad |e('js')|raw ~"', 'null': '"~ (roles.DATE_FAFO == true) ~"'}",
                                    'obligatoire' : true,
                                }) }}
                            </div>
                        </div>
                    {% endif %}
                    <hr>
                    <div class="row" style="margin-top: 30px">
                        <div class="colonne2">
                            {{ inputAdvance('SWITCH', {
                                'titre' : 'Soumis à alerte' | trad,
                                'name' : 'SOUMISE_ALERTE',
                                'value' : task['SOUMISE_ALERTE'],
                            }) }}
                        </div>
                        <div class="colonne2 last defaultHidden">
                            {{ inputAdvance('TEXTE', {
                                'titre' : 'Délai de préavis' | trad,
                                'name' : 'DELAI_PREAVIS',
                                'value' : task['DELAI_PREAVIS'],
                            }) }}
                        </div>
                        <div class="colonne2 defaultHidden">
                            {{ inputAdvance('SELECT', {
                                'titre' : 'Type d\'alerte' | trad,
                                'name' : 'TYPE_ALERTE',
                                'textVide' : 'Choisir table' | trad,
                                'listeValue' : {'T': 'Tableau de bord' | trad, 'M': 'Email' | trad, 'B': 'Tableau de bord et Email' | trad},
                                'value' : task['TYPE_ALERTE'],
                            }) }}
                        </div>
                    </div>
                    <hr>
                    <div class="row" style="margin-top: 30px">
                        {% if procedures %}
                            <div class="colonne2">
                                {{ inputAdvance('SELECT', {
                                    'titre' : 'Procédure interne' | trad,
                                    'name' : 'ID_PROC',
                                    'optionVide' : true,
                                    'textVide' : 'Choisissez une procédure' | trad,
                                    'listeValue' : procedures,
                                    'value' : task['ID_PROC'],
                                }) }}
                            </div>
                            <div class="colonne2 last defaultHiddenP">
                                {{ inputAdvance('TEXTE', {
                                    'titre' : 'Chapitre' | trad,
                                    'name' : 'CHAP_PROC',
                                    'value' : task['CHAP_PROC'],
                                }) }}
                            </div>
                        {% endif %}
                    </div>
                    <div class="row">
                        <div class="colonne2">
                            {{ inputAdvance('SELECT', {
                                'titre' : 'Etat d\'avancement Projet' | trad,
                                'name' : 'ID_ETAT_AV',
                                'optionVide' : true,
                                'textVide' : 'Choisissez une état d\'avancement' | trad,
                                'listeValue' : progressStates,
                                'value' : task['ID_ETAT_AV'],
                            }) }}
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
        <script>
        
            $( document ).ready(function() {
                if(!$('#input_SOUMISE_ALERTE').is(':checked')) {
                    $(".defaultHidden").hide()
                }
                {% if(action is same as ("create")) or (action is same as ("edit") and (task['ID_PROC'] == '' or task['ID_PROC'] == '0'))  %}
                    $(".defaultHiddenP").hide()
                {% endif %}

                $("label[for='input_DESCR']").css('width', '19%')
            })

            $('#input_SOUMISE_ALERTE').on('change', function (e) {
                $(".defaultHidden").toggle()
            })

            $('#input_ID_PROC').on('change', function () {
                $("#input_CHAP_PROC").val("")

                if($('#input_ID_PROC').val() === "") {
                    $(".defaultHiddenP").hide()
                } else {
                    $(".defaultHiddenP").show()
                }
            })

            {% if typeObjet is same as ('D') %}

                var unavailableDates = JSON.parse('{{ unavailableDays |e('js')|raw  }}');

                function unavailable(date) {
                    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
                    if ($.inArray(dmy, unavailableDates) < 0) {
                        return [true, "","Book Now"];
                    } else {
                        return [true, "cellAvailableDay","Booked Out"];
                    }
                }

                $("#input_DATE_DEB").datepicker({
                    showOn: "button",
                    buttonImage: "{{ baseUrl('IconeV2/Global/deadline-change.svg') }}",
                    buttonImageOnly: true,
                    showAnim: "fade",
                    dateFormat: "{{ "dd/mm/yy" | paramDateFormat }}",
                    beforeShowDay: unavailable
                });


            	$('#input_DATE_FIN').datepicker({
                    showOn: "button",
                    buttonImage: "{{ baseUrl('IconeV2/Global/deadline-change.svg') }}",
                    buttonImageOnly: true,
                    showAnim: "fade",
                    dateFormat: "{{ "dd/mm/yy" | paramDateFormat }}",
                    beforeShowDay: unavailable
                });


                $('#input_DUREE_PREV').on('change', function() {
                   const destructuredDate = $('#input_DATE_DEB').val().split('/')
                   $.ajax({
                       type: "POST",
                       url: '{{ path('ProjetAchat.Task.findEndDate') }}',
                       data: {
                           idHierarchy: '{{ idHierarchy }}',
                           idProject: '{{ idObjet }}',
                           startDate: destructuredDate[2] + '-' + destructuredDate[1] + '-' + destructuredDate[0],
                           durationPrev: $('#input_DUREE_PREV').val()
                       },
                       success: function(data) {
                           $("#input_DATE_FIN").datepicker('setDate', data);
                       },
                   });
                });

            {% endif %}

        </script>
        <style>
            .cellAvailableDay a {
                background-color: #dddddd !important;
                color: grey !important;
            }
        </style>
    	</div>
	</div>
</div>

{% endblock %}