{% extends 'default/form.html.twig' %}

{% block content %} 
    {{ form_start(form, {'attr': {'class': 'form-horizontal', 'enctype' : 'multipart/form-data'}}) }}
        {# Section to insert Main Data #}
        <div class="row">
            {% for item in form %}
                {# Message d'erreur ou d'information #}
                {% if item.vars.name starts with 'Message-alert' %}
                    <div class="col-md-12">
                        <div class="form-floating mb-3">
                            <div class="alert alert-danger "> 
                                <i class="ti-alert"></i> {{ form_label(item) }} {{ form_widget(item) }} 
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% if item.vars.attr is not empty %}
                    {% if item.vars.attr['data-type'] starts with 'main-' %}
                        {% if item.vars.attr['data-type'] == 'main-level-geo' or item.vars.attr['data-type'] == 'main-restriction' %} {# Insert the geo access level#}
                            <div class="col-md-3">
                                <div class="form-floating mb-3">
                                    {{ form_widget(item) }}
                                    {{ form_label(item) }}
                                    <span class="help-block text-danger">
                                        <small><i>{{ form_errors(item) }}</i></small>
                                    </span>
                                    <span class="help-block text-info">
                                        <small><i>{{ form_help(item) }}</i></small> 
                                    </span>
                                </div>
                            </div>
                        {% elseif item.vars.attr['data-type'] == 'main-data-analyst' %} {# Insert access to DataAnalyst #}
                            <div class="col-md-3 m-b-20" style='margin-top: 0.5rem;'>
                                <div class="col-md-12">
                                    {% for t in item %}
                                        {{ form_widget(t, {'attr': {'class': ''}}) }}  {{ form_label(t) }}
                                        <span class='m-l-30'></span>
                                    {% endfor %}
                                    <span class="help-block text-danger">
                                        <small><i>{{ form_errors(item) }}</i></small>
                                    </span>
                                    <span class="help-block text-info">
                                        <small><i>{{ form_help(item) }}</i></small> 
                                    </span>
                                </div>
                            </div>
                            {# Insert data confidentiality automatically under checkbox : 'entries-nb'    => 4 #}
                            
                        {% elseif item.vars.attr['data-type'] == 'main-checkbox' %}
                            {% if item.vars.attr['entries-nb'] > 4 %} 
                            <div class="col-md-12 m-b-20" style='margin-top: 0.5rem;'> 
                            {% else %}
                            <div class="col-md-6 m-b-20" style='margin-top: 0.5rem;'>
                            {% endif %} 
                                <div class="col-md-12">
                                    {% for t in item %}
                                        {{ form_widget(t, {'attr': {'class': ''}}) }}  {{ form_label(t) }}
                                        <span class='m-l-30'></span>
                                    {% endfor %}
                                    <span class="help-block text-danger">
                                        <small><i>{{ form_errors(item) }}</i></small>
                                    </span>
                                    <span class="help-block text-info">
                                        <small><i>{{ form_help(item) }}</i></small> 
                                    </span>
                                </div>
                            </div>
                        
                        {% elseif item.vars.attr['data-type'] == 'main-boolean' %}
                            <div class="col-md-6" style='margin-top: 0.5rem;'>
                                <div class="col-md-12">
                                    {% for t in item %}
                                        {{ form_widget(t, {'attr': {'class': ''}}) }}  {{ form_label(t) }}
                                        <span class='m-l-30'></span>
                                    {% endfor %}
                                    <span class="help-block text-danger">
                                        <small><i>{{ form_errors(item) }}</i></small>
                                    </span>
                                    <span class="help-block text-info">
                                        <small><i>{{ form_help(item) }}</i></small> 
                                    </span>
                                </div>
                            </div>
                        {% elseif item.vars.attr['data-type'] == 'main-file' %}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    {{ form_label(item) }}
                                    {{ form_widget(item) }}
                                    <span class="help-block text-info">
                                        <small><i>{{ form_help(item) }}</i></small> 
                                    </span>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    {{ form_widget(item) }}
                                    {{ form_label(item) }}
                                    <span class="help-block text-danger">
                                        <small><i>{{ form_errors(item) }}</i></small>
                                    </span>
                                    <span class="help-block text-info">
                                        <small><i>{{ form_help(item) }}</i></small> 
                                    </span>
                                </div>
                            </div>
                        {% endif %}   
                    {% endif %}   
                {% endif %}   
            {% endfor %}
        </div>
        {# Section to insert Annex Data #}
        {% if hasAnnex == true %}
        <h4>{{ 'Form.Annex.Section' | trans }}</h4>
        <div class="panel panel-default border border-info rounded p-3 m-b-20">
            <div class="panel-body">
                <div class="row">
                    {% for item in form %}
                        {% if item.vars.attr is not empty %}
                            {% if item.vars.attr['data-type'] starts with 'annex-' %}
                                {% if item.vars.attr['data-type'] == 'annex-checkbox' %}
                                    {% if item.vars.attr['entries-nb'] > 4 %} 
                                    <div class="col-md-12 m-b-20" style='margin-top: 0.5rem;'> 
                                    {% else %}
                                    <div class="col-md-6 m-b-20" style='margin-top: 0.5rem;'>
                                    {% endif %} 
                                        <div class="col-md-12">
                                            {% for t in item %}
                                                {{ form_widget(t, {'attr': {'class': ''}}) }}  {{ form_label(t) }}
                                                <span class='m-l-30'></span>
                                            {% endfor %}
                                            <span class="help-block text-danger">
                                                <small><i>{{ form_errors(item) }}</i></small>
                                            </span>
                                            <span class="help-block text-info">
                                                <small><i>{{ form_help(item) }}</i></small> 
                                            </span>
                                        </div>
                                    </div>
                                {% elseif item.vars.attr['data-type'] == 'annex-boolean' %}
                                    <div class="col-md-6" style='margin-top: 0.5rem;'>
                                        <div class="col-md-12">
                                            {% for t in item %}
                                                {{ form_widget(t, {'attr': {'class': ''}}) }}  {{ form_label(t) }}
                                                <span class='m-l-30'></span>
                                            {% endfor %}
                                            <span class="help-block text-danger">
                                                <small><i>{{ form_errors(item) }}</i></small>
                                            </span>
                                            <span class="help-block text-info">
                                                <small><i>{{ form_help(item) }}</i></small> 
                                            </span>
                                        </div>
                                    </div>
                                {% elseif item.vars.attr['data-type'] == 'annex-file' %}
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            {{ form_label(item) }}
                                            {{ form_widget(item) }}
                                            <span class="help-block text-info">
                                                <small><i>{{ form_help(item) }}</i></small> 
                                            </span>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="col-md-6">
                                        <div class="form-floating mb-3">
                                            {{ form_widget(item) }}
                                            {{ form_label(item) }}
                                            <span class="help-block text-danger">
                                                <small><i>{{ form_errors(item) }}</i></small>
                                            </span>
                                            <span class="help-block text-info">
                                                <small><i>{{ form_help(item) }}</i></small> 
                                            </span>
                                        </div>
                                    </div>
                                {% endif %}   
                            {% endif %}   
                        {% endif %}   
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        <div class="form-group">
            <div class="ms-auto mt-3 mt-md-0">
                <input type="hidden" name="token" value="{{ csrf_token('data-entry') }}"/>
                <button type="submit" class="btn btn-success text-white">{{'Form.Submit' | trans}}</button>
                <a href='{{path(return)}}' class="btn btn-warning text-white"><i class='ti-control-backward'></i> {{'Form.Return' | trans}}</a>
            </div>
        </div>
        {#  Cette idée consiste à insérer dynamiquement les annexes dans le formulaire. Mais elle n'est pas finalisée
        {% if hasAnnex == true %}
            <div class="row">
                {% import "data/prototype.html.twig" as macAnnex %}       
                <div id="data_annex" class="tags" data-prototype="{{ macAnnex.AnnexItem(form.annex.vars.prototype)|e }}">      
                    {% for a in form.annex %}
                        {{ macAnnex.AnnexItem(a) }} 
                    {% endfor %}    
                </div>
            </div>
        {% endif %}
        </form>
        #}
        {{ form_rest(form) }}
    {{ form_end(form) }}

{% endblock %}
{% block custom_js %} 
	{{parent()}}
    <script type="text/javascript">
        $(window).on('load', function() {
            if ('{{mode}}' == 'add'){
                {#Ajout forcé de la classe 'active' parce que le lien URL est different de celui du bouton menu#}
                $('#menu_ajout_saisie').addClass('active');
            } else {
                $('#menu_edit_saisie').addClass('active');
            }
        });
    </script>

    <script type="text/javascript">
        $(function () {
            $.fn.datepicker.dates['fr'] = {
                days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
                daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
                daysMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
                months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
                today: "Aujourd'hui",
                clear: "Effacer",
                format: "dd/mm/yyyy",
                titleFormat: "MM yyyy",
                weekStart: 1
            };

            $.fn.datepicker.dates['pt'] = {
                days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
                daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sam"],
                daysMin: ["Do", "Seg", "Te", "Qua", "Qui", "Se", "Sá"],
                months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                today: "Actualmente",
                clear: "Apagar",
                format: "dd/mm/yyyy",
                titleFormat: "MM yyyy",
                weekStart: 1
            };

            $('.date-picker').datepicker({
                autoclose: true,
                todayHighlight: true,
                language: '{{ app.request.getLocale() }}',
                startView: 'years',
                format: "dd/mm/yyyy",
                todayBtn: true,
                clearBtn: true,
            });

            $('.time-picker').clockpicker({
                donetext: 'Done',
            }).find('input').change(function() {
                console.log(this.value);
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            //Prise en compte du bouton add/remove booster
            // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.  
            var $container = $('div#data_annex');  
            // On ajoute un lien pour ajouter une nouvelle catégorie  
            var $lienAjout = $('<a href="#" id="add_annex" class="btn btn-info">{{'Form.Annex.Add' | trans}}</a><p></p>');  
            $container.append($lienAjout);  // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
            $lienAjout.click(function(e) {    
                    ajouterDoc($container);    
                    e.preventDefault(); // évite qu'un # apparaisse dans l'URL    
                    return false;  
            });  
            // On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement  
            var index = $container.find(':input').length;  
            // On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'une nouvelle entité par exemple).  
            if (index === 0) {    
                    //ajouterDoc($container);  
            } else {    
            // Pour chaque catégorie déjà existante, on ajoute un lien de suppression    
                $container.children('div').each(function() {
                        ajouterLienSuppression($(this));    
                });  
            }  
            // La fonction qui ajoute un formulaire Categorie  
            function ajouterDoc($container) {    
                // Dans le contenu de l'attribut « data-prototype », on remplace :    // - le texte "__name__label__" qu'il contient par le label du champ    
                // - le texte "__name__" qu'il contient par le numéro du champ    
                var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Annex n°' + (index+1)).replace(/__name__/g, index));    
                // On ajoute au prototype un lien pour pouvoir supprimer la catégorie    
                ajouterLienSuppression($prototype);    
                // On ajoute le prototype modifié à la fin de la balise <div>    
                $container.append($prototype);    
                // Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro    
                index++;  
            }  
            // La fonction qui ajoute un lien de suppression d'une catégorie  
            function ajouterLienSuppression($prototype) {    
                // Création du lien    
                var $lienSuppression = $('<a id="remove_annex" href="#" class="btn btn-warning" style="margin-top: 0px;">{{'Form.Remove' | trans}}</a>');    
                // Ajout du lien    
                $prototype.append($lienSuppression);    
                // Ajout du listener sur le clic du lien    
                $lienSuppression.click(function(e) {    
                    if(index > 0) {
                        $prototype.remove();      
                        e.preventDefault(); 
                        index--;
                        // évite qu'un # apparaisse dans l'URL      
                        return false; 
                    }
                });  
            }
        });
    </script>
{% endblock %}