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

{% block title %}{{ title|raw }}{% endblock %}
{% block description %}{{ description|raw }} {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('plugins/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">
    <style type="text/css"> .rating-header {margin-top: -10px;margin-bottom: 10px;} #form_civility {display: none}</style>
{% 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>{{ fad|raw }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <div class="container margin_60">
        <div class="row">
            <div class="col-md-12"><h3>Votre avis nous intéresse</h3>
                {% if alert is not empty %}
                    <div id="message-contact">{{ alert|raw }}</div>
                {% else %}
                    {{ form_start(form_avis, {'attr':{'id':'form_avis', 'action':path('votre_avis')}}) }}
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="row">{% for key,item in form_avis.civility %}
                                    <div class="col-sm-2 col-xs-6">
                                        <div class="radio"><label for="{{ item.vars.id }}"><input type="radio" id="{{ item.vars.id }}" name="{{ item.vars.full_name }}" value="{{ item.vars.value }}"> {{ item.vars.label }}</label></div>
                                    </div> {% endfor %}</div>
                                    {{ form_widget(form_avis.modeDde) }}
                            <div class="form-group">
                                <div class="form-error" id="error-avis-civility">{{ form_errors(form_avis.civility) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">{{ form_label(form_avis.prenom) }} {{ form_widget(form_avis.prenom) }}
                                <div class="form-error" id="error-avis-prenom">{{ form_errors(form_avis.prenom) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">{{ form_label(form_avis.nom) }} {{ form_widget(form_avis.nom) }}
                                <div class="form-error" id="error-avis-nom">{{ form_errors(form_avis.nom) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">{{ form_label(form_avis.email) }} {{ form_widget(form_avis.email) }}
                                <div class="form-error" id="error-avis-email">{{ form_errors(form_avis.email) }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">{{ form_label(form_avis.tel) }} {{ form_widget(form_avis.tel) }}
                                <div class="form-error" id="error-avis-tel">{{ form_errors(form_avis.tel) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">{{ form_label(form_avis.commentaire) }} {{ form_widget(form_avis.commentaire) }}
                                <div class="form-error" id="error-avis-commentaire">{{ form_errors(form_avis.commentaire) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12"><label for="form_notation"> Notation *</label>
                            <div>
                                <div class="form-group" id="rating-ability-wrapper"><label class="control-label" for="rating"><input type="hidden" id="selected_rating" name="selected_rating" value="" required="required"></label>
                                    {% for i in 1..5 %}
                                        <button type="button" class="btnrating btn btn-default btn-lg" data-attr="{{ i }}" id="rating-star-{{ i }}"><i class="fa fa-star" aria-hidden="true"></i></button>
                                    {% endfor %}
                                    <span class="selected-rating" style="margin-left:10px;font-size:1em!important;">0</span><small style="font-size:1em!important;"> / 5</small>
                                </div>
                                <div class="form-error" id="error-avis-notation">{{ form_errors(form_avis.notation) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="form-group">
                                <label for="form_email">Code de sécurité * : <img src="{{ asset('captcha/' ~ filename_captcha) }}" alt="" style="margin-top:-3px;"></label>
                                {{ form_widget(form_avis.captcha) }}
                                <div class="form-error" id="error-avis-captcha"></div>
                            </div>
                        </div>
                        <div class="col-md-9 col-sm-6"></div>
                    </div>
                    <div class="row mt-5" style="margin: 15px 0 0 0">
                        <div class="col-md-6">
                            <button type="button" class="btn_1 green medium add_bottom_30" id="submit_avis">Envoyer</button>
                        </div>
                    </div>{{ form_end(form_avis) }}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function () {
            $(".btnrating").on('click', (function (e) {
                $('#error-avis-notation').html('');
                window.notationOk = true;
                var previous_value = $("#selected_rating").val();
                var selected_value = $(this).attr("data-attr");
                $("#selected_rating").val(selected_value);
                $('#form_notation').val(selected_value);
                $(".selected-rating").empty();
                $(".selected-rating").html(selected_value);
                for (i = 1; i <= selected_value; ++i) {
                    $("#rating-star-" + i).toggleClass('btn-warning');
                    $("#rating-star-" + i).toggleClass('btn-default');
                }
                for (ix = 1; ix <= previous_value; ++ix) {
                    $("#rating-star-" + ix).toggleClass('btn-warning');
                    $("#rating-star-" + ix).toggleClass('btn-default');
                }
            }));
            window.notationOk = false;
            $(`#form_civility`).parent().remove();
        });
    </script>
{% endblock %}