{# templates/select.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}select - {{ parent() }}{% endblock %}
{% block description %}{% endblock %}

{% block body %}
    
    <section id="sub_header">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12" id="position">
                    <ul>
                        <li><a href="{{ path('home_page') }}">Accueil</a></li>
                        <li>select</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    
    <div class="container margin_60">
        <div class="row">
            <div class="col-md-12">
              {% if validation is not empty %}
              <h3>Validation de la Demande par Code</h3>
              <form name="code_verification_form" id="code_verification_form" method="post" action="{{ path('demander_devis') }}">
              <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="alert alert-warning" role="alert">
                        <b>Pour valider votre demande, veuillez vérifier votre adresse email.</b><br>
                        Nous avons envoyé un code de vérification à <b>{{ email_a_verifier }}</b>.
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <label for="code_verification">Saisissez le code :</label>
                        <input type="text" name="code_verification" id="code_verification" class="form-control" size="6" maxlength="6" autocomplete="off">
                        <input type="hidden" name="email_a_verifier" id="email_a_verifier" value="{{ email_a_verifier }}">
                        <div class="form-error" id="error-code-verification">{% if alert is not empty %}{{ alert|raw }}{% endif %}</div>
                    </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-6">
                    <button type="button" id="code_verification_submit" class="btn_1 medium">Continuer</button>
                </div>
              </div>
              </form>
              {% else %}
              {% if alert is not empty %}
              <h3>Demande Validée</h3>
              <div id="message-contact">{{ alert|raw }}</div>
              {% else %}
              <h3>select</h3>
              {{ form_start(form_devis, {'attr':{'id':'devis_form', 'action':path('demander_devis')}}) }}  
                <div class="form_title">
                    <h3><strong><i class="icon-user-8"></i></strong></h3>
                </div>
                <div class="step">
                    <div class="row">
                        {# <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.prenom) }}
                                {{ form_widget(form_devis.prenom) }}
                                <div class="form-error" id="error-devis-prenom">{{ form_errors(form_devis.prenom) }}</div>
                            </div>
                        </div> #}
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.nom) }}
                                {{ form_widget(form_devis.nom) }}
                                <div class="form-error" id="error-devis-nom">{{ form_errors(form_devis.nom) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6"></div>
                    </div>
                    {# <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.villeClient) }}
                                {{ form_widget(form_devis.villeClient) }}
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3">
                            <div class="form-group">
                                {{ form_label(form_devis.cpClient) }}
                                {{ form_widget(form_devis.cpClient) }}
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3"></div>
                    </div> #}
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.adresse) }}
                                {{ form_widget(form_devis.adresse) }}
                                <div class="form-error" id="error-devis-adresse">{{ form_errors(form_devis.adresse) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.ville) }}
                                {{ form_widget(form_devis.ville) }}
                                <div class="form-error" id="error-devis-ville">{{ form_errors(form_devis.ville) }}</div>
                            </div>
                        </div>
                        {# <div class="col-md-3 col-sm-3">
                            <div class="form-group">
                                {{ form_label(form_devis.cp) }}
                                {{ form_widget(form_devis.cp) }}
                                {{ form_widget(form_devis.idVille) }}
                                <div class="form-error" id="error-devis-cp"></div>
                            </div>
                        </div> #}
                        <div class="col-md-6 col-sm-6"></div>
                        <div class="col-md-6 col-sm-6">
                            <div id="search_ville">
                                <div class="close_search_ville">X</div>
                                <div class="data_search_ville"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.email) }}
                                {{ form_widget(form_devis.email) }}
                                <div class="form-error" id="error-devis-email">{{ form_errors(form_devis.email) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.tel) }}
                                {{ form_widget(form_devis.tel) }}
                                <div class="form-error" id="error-devis-tel">{{ form_errors(form_devis.tel) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
        
                <div class="form_title">
                    <h3><strong><i class="icon-pencil-7"></i></strong></h3>
                </div>
                <div class="step">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.service) }}
                                {{ form_widget(form_devis.service) }}
                                <div class="form-error" id="error-devis-service">{{ form_errors(form_devis.service) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.surface) }}
                                {{ form_widget(form_devis.surface) }}
                                <div class="form-error" id="error-devis-surface">{{ form_errors(form_devis.surface) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                {{ form_label(form_devis.frequence) }}
                                {{ form_widget(form_devis.frequence) }}
                                <div class="form-error" id="error-devis-frequence">{{ form_errors(form_devis.frequence) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group add_bottom_45">
                        {{ form_label(form_devis.description) }}
                        {{ form_widget(form_devis.description) }}
                        <div class="form-error" id="error-devis-description">{{ form_errors(form_devis.description) }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label for="form_cgus">
                                    {{ form_widget(form_devis.cgus) }} <span id="cgus_label">J'accepte les <a target="_blank" href="{{ path('cgu') }}">CGUS</a> *</span>
                                <label>
                                <div class="form-error" id="error-devis-cgus">{{ form_errors(form_devis.cgus) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-9 col-sm-6">
                            <div class="form-group">
                                <label for="form_newsletter">
                                    {{ form_widget(form_devis.newsletter) }} <span id="newsletter_label">J'accepte de recevoir la newsletter mensuelle par email</span>
                                <label>
                                <div class="form-error" id="error-devis-newsletter">{{ form_errors(form_devis.newsletter) }}</div>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6"><button type="button" id="submit_devis" class="btn_1 medium">Envoyer</button></div>
                    </div>
                    
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <span style="color:#ff0000;font-size:0.9em;font-style:italic;">(*) : Champs obligatoires</span>
                    </div>
                </div>
        
              {{ form_end(form_devis) }}
              {% endif %}
                        
              {% endif %}
            </div>
            
            {# { render(controller('App\\Controller\\LayoutController::rightColumn', {'current': current})) } #}
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $('#form_ville').select2({
            language: "fr",
            minimumInputLength: 2,
            //tags: [],
            ajax: {
                url: '{{ path("rechercher_ville_cp") }}',
                dataType: 'json',
                type: 'POST',
                quietMillis: 50,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (response) {
                    return {
                        results: $.map(response.listing, function (item) {
                            return {
                                text: item.cp + ' - ' + item.ville,
                                id: item.id
                            }
                        })
                    };
                },
                cache: false
            }
        });
        
        /*$(document).on('keyup', 'input.select2-search__field', function(){
            var q_ville = $(this).val();
            if (q_ville.length > 0) {
                $.ajax({
                    url : '{{ path("rechercher_ville_cp") }}',
                    type : 'POST',
                    data : {q:q_ville},
                    dataType : 'json',
                    success : function(response){
                        if (response.num_rows > 0) {  
                            var listing = response.listing;
                            //var lines = '<option value="0">Choisir</option>';
                            var lines = '';
                            for (var key in listing) {
                                var obj = listing[key];
                                var ville = obj.ville;
                                ville = ville.replace(/'/g, "\\'");

                                lines += '<option value="' + obj.id + '">' + obj.cp + ' - ' + ville + '</option>';
                            }
                            $('select#form_ville').html(lines);
                        } else {
                            //$('.data_search_ville').html('');
                        }
                    },
                    error : function(e){
                    }
                });
            } else {
                //$('.data_search_ville').html('');
            }
        });*/
    });
    // ]]>
    </script>
{% endblock %}