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

{% block title %}
    Nous contacter
{%  endblock %}

{%  block body %}
    <section class="contact-hero-section wf-section">
    <div class="main-container">
        <div class="contact-hero-container">
            <div class="contact-hero-heading-container">
                <h1 class="h1-m white-font">Demandez votre étude !</h1>
            </div>
            <div class="contact-sub-text-container">
                <p class="paragraph-white">Profitez-en c'est gratuit et ne vous engage en rien...</p>
            </div>
        </div>
    </div>
    <div class="section-bottom-divider"></div>
    </section>
    <section class="contact-form-section wf-section">
    <div class="main-container">
        <div class="contact-flex-container">
            <div style="width:100%;max-width: initial;">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="contact-form-heading-container">
                        <h2 class="h4-m">Demande d'étude</h2>
                    </div>
                </div>
                <div class="contact-form w-form">
                    <!-- formulaire -->
                    {{  form_start(form, {'attr': {'class': 'form_theme'}}) }}
                        <div class="standard with-margin-top-20">

                            <div class="standard with-padding-top-15">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 size-16 with-margin-bottom-10">
                                        {% if message is not null %}
                                            <div class="alert alert-primary" role="alert">
                                                Votre message a été envoyé avec succès. Un de nos conseiller traitera votre demande dans les plus brefs délais.
                                            </div>
                                        {% else %}
                                            Nos équipes traiterons votre demande dans les meilleurs délais. Tous les champs ci-dessous sont obligatoires.
                                        {% endif %}
                                    </div>
                                </div>

                                <input name="table" type="hidden" value="form"/>
                                <input name="action" type="hidden" value="contact"/>
                                <input name="form_contact" type="hidden" value="" class="" />

                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10">
                                    {{ form_row(form.prestation) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10">
                                    {{ form_row(form.postal) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 with-margin-top-10">
                                    {{ form_row(form.nom) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 with-margin-top-10">
                                    {{ form_row(form.prenom) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 with-margin-top-10">
                                    {{ form_row(form.telephone) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 with-margin-top-10 unl-padding-bottom">
                                    {{  form_row(form.email) }}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 with-margin-top-10 unl-padding-bottom">
                                    <button class="button_theme unl-border">
                                        Envoyer ma demande
                                    </button>
                                </div>
                            </div>
                        </div>
                    {{ form_end(form) }}
                    <div class="w-form-done" tabindex="-1" role="region" aria-label="Contact Form success">
                        <div>Thank you! Your submission has been received!</div>
                    </div>
                    <div class="w-form-fail" tabindex="-1" role="region" aria-label="Contact Form failure">
                        <div>Oops! Something went wrong while submitting the form.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>
{% endblock %}

{% block javascriptFooter %}
    <script>
        $(document).ready(function(){
            if(width > 1024){
                var background = "url('/images/fonds/fond-contact.jpg')";
                $('#zone_contact').css({'background-image':background,
                    'background-repeat':'no-repeat',
                    'background-position':'center',
                    'background-size':'cover'
                });
            }

            $('#form_contact_submit').submit(function(e){
                e.preventDefault();
                var post = $('#form_contact_submit').serialize();
                $('#form_contact_submit').hide();
                $('#form_attente').show();
                $.ajax({
                    url : formURL,
                    type: "POST",
                    data : post,
                    success:function(data, textStatus, jqXHR)
                    {
                        if(data == 'NOT OK'){
                            $('#form_contact_submit').show();
                            $('#form_attente').hide();
                        }else{
                            $('#form_attente').hide();
                            $('#message_reussite').show();
                        }
                    },
                    complete:function(){
                        $("input[name='nom']").val('');
                        $("input[name='objet']").val('');
                        $("input[name='email']").val('');
                        $("input[name='telephone']").val('');
                        $("#message").val('');
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {

                    }
                });
            });
        });
    </script>
{% endblock %}