{% extends 'base.html.twig' %}

{% block title %}Enquête{% endblock %}

{% block content %}

    {% set prototypeHtml %}
        {% include 'investigation/form-question.html.twig' with { formQtn: form.questions.vars.prototype } %}
    {% endset %}

    <style>
        .save-question {
            position: fixed;
            right: 80px;
            top: 65%;
            width: 215px;
        }

        .add-question {
            position: fixed;
            right: 80px;
            top: 73%;
        }

        .investigation-ready {
            position: fixed;
            right: 80px;
            top: 81%;
            width: 215px;
        }
    </style>

    <div class="az-content">
        <div class="container">
            <div class="az-content-body d-flex flex-column">
                <div class="az-content-breadcrumb">
                    <span>Enquête</span>
                    <span>Création</span>
                </div>
                <h2 class="az-content-title">Enquête</h2>

                <div class="az-content-label mg-b-5"></div>
                <p class="mg-b-20">Créer une nouvelle enquête</p>

                {{ form_start(form) }}
                    <div class="tab-vertical mb-3" id="investigation-information">
                        <ul class="nav nav-tabs" id="myTab3" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="en-vertical-tab" data-toggle="tab" href="#en-vertical" role="tab" aria-controls="home" aria-selected="true">🇬🇧 English (UK)</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="fr-vertical-tab" data-toggle="tab" href="#fr-vertical" role="tab" aria-controls="profile" aria-selected="false">🇫🇷 Français</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="ar-vertical-tab" data-toggle="tab" href="#ar-vertical" role="tab" aria-controls="contact" aria-selected="false">🇸🇦 العربية</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent3">
                            <div class="tab-pane fade show active" id="en-vertical" role="tabpanel" aria-labelledby="en-vertical-tab">
                                <div class="form-group col-sm-12">
                                    <label for="{{ form.name_en.vars.id }}">{{ form_label(form.name_en) }}</label>
                                    {{ form_widget(form.name_en, {'attr': {'class': 'form-control' }}) }}
                                </div>
                                <div class="form-group col-sm-12">
                                    <label for="{{ form.source_en.vars.id }}">{{ form_label(form.source_en) }}</label>
                                    {{ form_widget(form.source_en, {'attr': {'class': 'form-control' }}) }}
                                </div>
                            </div>
                            <div class="tab-pane fade" id="fr-vertical" role="tabpanel" aria-labelledby="fr-vertical-tab">
                                <div class="form-group col-sm-12">
                                    <label for="{{ form.name_fr.vars.id }}">{{ form_label(form.name_fr) }}</label>
                                    {{ form_widget(form.name_fr, {'attr': {'class': 'form-control' }}) }}
                                </div>
                                <div class="form-group col-sm-12">
                                    <label for="{{ form.source_fr.vars.id }}">{{ form_label(form.source_fr) }}</label>
                                    {{ form_widget(form.source_fr, {'attr': {'class': 'form-control' }}) }}
                                </div>
                            </div>
                            <div class="tab-pane fade" id="ar-vertical" role="tabpanel" aria-labelledby="ar-vertical-tab">
                                <div class="form-group">
                                    <label for="{{ form.name_ar.vars.id }}">{{ form_label(form.name_ar) }}</label>
                                    {{ form_widget(form.name_ar, {'attr': {'class': 'form-control' }}) }}
                                </div>
                                <div class="form-group">
                                    <label for="{{ form.source_ar.vars.id }}">{{ form_label(form.source_ar) }}</label>
                                    {{ form_widget(form.source_ar, {'attr': {'class': 'form-control' }}) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="questions-collection" data-prototype="{{ prototypeHtml|e('html_attr') }}" data-index="{{ form|length }}">
                        {% for formQuestion in form.questions %}
                            <div class="question-item">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div id="accordion">
                                            <div class="card border-top border-primary">
                                                <div class="card-header" id="heading-{{ loop.index }}" data-toggle="collapse" data-target="#collapse-{{ loop.index }}" aria-expanded="true" aria-controls="collapse-{{ loop.index }}">
                                                    <div class="d-flex align-items-center">
                                                        <div style="flex: 1;">
                                                            <h5 class="card-title mb-1">Question N: {{ loop.index }}</h5>
                                                            <p class="card-text mb-1">{{ formQuestion.title.vars.value }}</p>
                                                        </div>
                                                        <i class="fas fa-chevron-down arrow"></i>
                                                    </div>
                                                </div>
                                                
                                                <div id="collapse-{{ loop.index }}" class="collapse {% if app.request.attributes.get('_route') == 'app_investigation_add' %} show {% endif %}" aria-labelledby="heading-{{ loop.index }}" data-parent="#accordion">
                                                    <div class="collapse-content">
                                                        <div class="card-body">
                                                            <div class="form-group row">
                                                                <div class="col-md-3">
                                                                    <button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
                                                                        <i class="fa fa-eye"></i> Afficher
                                                                    </button>
                                                                </div>
                                                                <div class="col-md-2 offset-7">
                                                                    <button type="button" class="btn btn-danger remove-question mb-3 float-right">
                                                                        <i class="fa fa-trash"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="form-group row">
                                                                <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.title.vars.id }}">{{ form_label(formQuestion.title) }}:</label>
                                                                <div class="col-sm-8">
                                                                    {{ form_widget(formQuestion.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_en.vars.id }}">{{ form_label(formQuestion.name_en) }}:</label>
                                                                <div class="col-sm-8">
                                                                    {{ form_widget(formQuestion.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_fr.vars.id }}">{{ form_label(formQuestion.name_fr) }}:</label>
                                                                <div class="col-sm-8">
                                                                    {{ form_widget(formQuestion.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_ar.vars.id }}">{{ form_label(formQuestion.name_ar) }}:</label>
                                                                <div class="col-sm-8">
                                                                    {{ form_widget(formQuestion.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="row mt-5">
                                                                <div class="col-md-6">
                                                                    <div class="form-group col-sm-10">
                                                                        <label for="{{ formQuestion.amount.vars.id }}">{{ form_label(formQuestion.amount) }}</label>
                                                                        {{ form_widget(formQuestion.amount, {'attr': {'class': 'form-control' }}) }}
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group col-sm-10">
                                                                        <label for="{{ formQuestion.max_participant.vars.id }}">{{ form_label(formQuestion.max_participant) }}</label>
                                                                        {{ form_widget(formQuestion.max_participant, {'attr': {'class': 'form-control' }}) }}
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <h4 class="card-title mt-4">Modalité</h4>
                                                            <div class="row mt-3">
                                                                <div class="col-md-6">
                                                                    <div class="form-group ">
                                                                        <label>{{ form_label(formQuestion.type_modality) }}</label>
                                                                        {{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3' }}) }}
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6 mt-4">
                                                                    <div class="form-group">
                                                                        {% for key, child in formQuestion.choice %}
                                                                            <div class="custom-control-inline">
                                                                                {{ form_widget(child) }}
                                                                            </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {% set prototype %}
                                                                <div class="modality-item border rounded p-3 mt-3 mb-3">
                                                                    <div class="input-group mb-3">
                                                                        <span class="input-group-text">EN</span>
                                                                        {{ form_widget(formQuestion.modalitys.vars.prototype.name_en, {
                                                                            attr: { class: 'form-control', placeholder: 'Nom (EN)' }
                                                                        }) }}
                                                                    </div>
                                                                    {{ form_errors(formQuestion.modalitys.vars.prototype.name_en) }}

                                                                    <div class="input-group mb-3">
                                                                        <span class="input-group-text">FR</span>
                                                                        {{ form_widget(formQuestion.modalitys.vars.prototype.name_fr, {
                                                                            attr: { class: 'form-control', placeholder: 'Nom (FR)' }
                                                                        }) }}
                                                                    </div>
                                                                    {{ form_errors(formQuestion.modalitys.vars.prototype.name_fr) }}

                                                                    <div class="input-group mb-3">
                                                                        <span class="input-group-text">AR</span>
                                                                        {{ form_widget(formQuestion.modalitys.vars.prototype.name_ar, {
                                                                            attr: { class: 'form-control', placeholder: 'الاسم (AR)', dir: 'rtl' }
                                                                        }) }}
                                                                    </div>
                                                                    {{ form_errors(formQuestion.modalitys.vars.prototype.name_ar) }}
                                                                </div>
                                                            {% endset %}

                                                            <div class="row mt-4">
                                                                <div class="col-md-8">
                                                                    <div class="modalities-container" data-prototype="{{ prototype|e('html_attr') }}">
                                                                        {% for modality in formQuestion.modalitys %}
                                                                            <div class="modality-item border rounded p-3 mb-3">
                                                                                <div class="input-group mb-3">
                                                                                    <span class="input-group-text">EN</span>
                                                                                    {{ form_widget(modality.name_en, {
                                                                                        attr: { class: 'form-control', placeholder: 'Nom (EN)' }
                                                                                    }) }}
                                                                                </div>
                                                                                {{ form_errors(modality.name_en) }}

                                                                                <div class="input-group mb-3">
                                                                                    <span class="input-group-text">FR</span>
                                                                                    {{ form_widget(modality.name_fr, {
                                                                                        attr: { class: 'form-control', placeholder: 'Nom (FR)' }
                                                                                    }) }}
                                                                                </div>
                                                                                {{ form_errors(modality.name_fr) }}

                                                                                <div class="input-group mb-3">
                                                                                    <span class="input-group-text">AR</span>
                                                                                    {{ form_widget(modality.name_ar, {
                                                                                        attr: { class: 'form-control', placeholder: 'الاسم (AR)', dir: 'rtl' }
                                                                                    }) }}
                                                                                </div>
                                                                                {{ form_errors(modality.name_ar) }}

                                                                                <button type="button" class="remove-modality btn btn-danger btn-sm"> Supprimer </button>
                                                                            </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <button type="button" class="btn btn-primary add-modality">Ajouter une modalité</button>   
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3"></div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>

                    <button type="button" class="btn btn-info rounded-pill add-question">
                        <i class="typcn typcn-folder"></i>
                        Ajouter un autre question
                    </button>
                    {{ form_row(form.save, {'attr': {'class': 'btn btn-success rounded-pill save-question' }}) }}

                {{ form_end(form) }}        

                {% if app.request.attributes.get('_route') == 'app_investigation_edit' %}
                    <a href="{{ path('app_investigation_ready', {id: investigation.id}) }}" class="btn btn-secondary rounded-pill investigation-ready">
                        Enquête Prête
                    </a>
                {% endif %}
            </div>
        </div>
    </div>

    {% block javascripts %}
        <script type="text/javascript">
            $(document).ready(function() {
                var $collection = $('#questions-collection');
                var $addButton = $('.add-question');
                
                $collection.data('index', $collection.find('.question-item').length);
                
                $addButton.on('click', function() {
                    var index = $collection.data('index');
                    var prototype = $collection.data('prototype');
                    var newForm = prototype.replace(/__name__/g, index + 1);
                    var $newElement = $('<div class="row question-item"></div>');
                    
                    $newElement.append(newForm);
                    $collection.append($newElement);
                    
                    $collection.data('index', index + 1);
                    $('.remove-question').show();
                    
                    updateIndexes();

                    $("html, body").animate({
                        scrollTop: $(window).scrollTop() + 700
                    }, 400);
                });
                
                $collection.on('click', '.remove-question', function() {
                    if ($('.question-item').length > 1) {
                        $(this).closest('.question-item').remove();
                        updateIndexes();
                        
                        if ($('.question-item').length === 1) {
                            $('.remove-question').hide();
                        }
                    }
                });
                
                function updateIndexes() {
                    $('.question-item').each(function(index) {
                        $(this).find('h5').text('Question N: ' + (index + 1));
                    });
                }

                $(document).on('click', '.add-modality', function() {
                    var $container = $(this).closest('.row').find('.modalities-container');
                    var index = $container.find('.modality-item').length;
                    var prototype = $container.data('prototype');
                    var newForm = prototype.replace(/__name__/g, index);
                    var $newElement = $('<div class="modality-item border rounded p-3 mb-3"></div>').append(newForm);
                    
                    if (!$newElement.find('.remove-modality').length) {
                        $newElement.append('<button type="button" class="remove-modality btn btn-danger btn-sm mt-2">Supprimer</button>');
                    }
                    
                    $container.append($newElement);
                });

                $(document).on('click', '.remove-modality', function() {
                    $(this).closest('.modality-item').remove();
                });
            });
        </script>
    {% endblock %}

{% endblock %}