{% 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">Une question, besoin d'aide ? </h1>
                </div>
                <div class="contact-sub-text-container">
                    <p class="paragraph-white">
                        Contactez-nous au plus vite, notre équipe vous réponds dans les plus brefs délais...
                    </p>
                </div>
            </div>
        </div>
        <div class="section-bottom-divider"></div>
    </section>
    <section class="contact-form-section wf-section">
        <div class="main-container specFlex">
            <div class="contact-flex-container">
                <div class="contact-form-container">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="contact-form-heading-container">
                            <h2 class="h4-m">Nous contacter</h2>
                        </div>
                    </div>
                    <div class="contact-form w-form">
                        <!-- formulaire -->
                        {{  form_start(form, {'attr': {'class': 'form_theme','id':'formContact'}}) }}
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 with-margin-top-20">
                                <div class="standard 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 %}
                                            Pour contacter nos équipes, veuillez remplir le formulaire ci-dessous.
                                        {% 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-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-12 with-margin-top-10">
                                    {{ form_row(form.email) }}
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10">
                                    {{ form_row(form.objet) }}
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 with-margin-top-10 unl-padding-bottom">
                                    {{  form_row(form.message) }}
                                    <br/>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 with-margin-top-10">
                                    <div class="width-max red-color erase captchaMsg">
                                        Merci de valider que vous n'êtes pas un robot.
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 with-margin-top-10 unl-padding-bottom">
                                    <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6LcRDpogAAAAALaANabiRDff_Gz5H56gtrQXNr2h"></div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 with-margin-top-10 unl-padding-bottom">
                                    <button disabled id="validForm" class="button_theme erase unl-border">
                                        Envoyer ma demande
                                    </button>
                                </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>
                <address class="contact-address-container with-margin-top-20">
                    <div class="contact-address-block">
                        <div class="contact-address-icon-container">
                            <div class="contact-address-icon"><img
                                    src="{{ asset('images/themes/614969c234f1d0429112e0a4_smartphone.svg') }}"
                                    loading="lazy" alt="smartphone icon"></div>
                        </div>
                        <div class="contact-address-text-container">
                            <div class="contact-address-heading-container">
                                <div class="h6-m">Téléphone</div>
                            </div>
                            <div class="contact-address-paragraph-container">
                                <p class="para-17">
                                    +41 78 236 90 90
                                </p>
                            </div>
                        </div>
                    </div>
                </address>
            </div>
        </div>
    </section>
    <section class="faq-section wf-section">
        <div class="main-container">
            <div class="faq-container">
                <div class="faq-heading-container">
                    <h2 class="h3-m">Foire aux questions (F.A.Q)</h2>
                </div>
                <div class="faq-sub-text-container">
                    <p class="align-center">
                        Obtenez des réponses rapides d'une équipe d'assistance amicale, professionnelle et compétente.
                    </p>
                </div>
                <div class="faq-accordion-container">
                    <div class="c-faq">
                        <div data-click="faq" class="c-faq-item">
                            <div class="c-faq-q">
                                <div class="c-faq-q-text">
                                    <h3 class="h5-m">L'étude est-elle payante ?</h3>
                                </div>
                                <div class="c-faq-icon">
                                    <div class="_w-faq-icon"
                                        style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
                                        <div class="faq-stripe-1" style="opacity: 1;"></div>
                                        <div class="faq-stripe-2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-faq-a erase">
                                <div class="c-faq-divider">
                                    <div class="faq-divider"></div>
                                </div>
                                <div class="c-faq-a-text">
                                    <p class="para-17">Non, nous réalisons votre étude en ligne gratuitement.</p>
                                </div>
                            </div>
                        </div>
                        <div data-click="faq" class="c-faq-item">
                            <div class="c-faq-q">
                                <div class="c-faq-q-text">
                                    <h3 class="h5-m">Le déplacement de l'expert est-il payant ?</h3>
                                </div>
                                <div class="c-faq-icon">
                                    <div class="_w-faq-icon"
                                        style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
                                        <div class="faq-stripe-1" style="opacity: 1;"></div>
                                        <div class="faq-stripe-2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-faq-a erase">
                                <div class="c-faq-divider">
                                    <div class="faq-divider"></div>
                                </div>
                                <div class="c-faq-a-text">
                                    <p class="para-17">Non, le déplacement de notre expert est pris en charge pas nos soins, il est donc complètement gratuit.</p>
                                </div>
                            </div>
                        </div>
                        <div data-click="faq" class="c-faq-item">
                            <div class="c-faq-q">
                                <div class="c-faq-q-text">
                                    <h3 class="h5-m">En cas de panne, que dois-je faire ?</h3>
                                </div>
                                <div class="c-faq-icon">
                                    <div class="_w-faq-icon"
                                        style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
                                        <div class="faq-stripe-1" style="opacity: 1;"></div>
                                        <div class="faq-stripe-2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-faq-a erase">
                                <div class="c-faq-divider">
                                    <div class="faq-divider"></div>
                                </div>
                                <div class="c-faq-a-text">
                                    <p class="para-17">
                                        Dans le cadre d'une panne d'un ou plusieurs panneaux photovoltaïques, contactez notre support en indiquant votre numéro de commande ou référence client.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div data-click="faq" class="c-faq-item">
                            <div class="c-faq-q">
                                <div class="c-faq-q-text">
                                    <h3 class="h5-m">Est-il possible de calculer mes économies avec vos panneaux photovoltaïques ?</h3>
                                </div>
                                <div class="c-faq-icon">
                                    <div class="_w-faq-icon"
                                        style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">
                                        <div class="faq-stripe-1" style="opacity: 1;"></div>
                                        <div class="faq-stripe-2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-faq-a erase">
                                <div class="c-faq-divider">
                                    <div class="faq-divider"></div>
                                </div>
                                <div class="c-faq-a-text">
                                    <p class="para-17">
                                        Oui, il est possible de calculer les différents gains de vos panneaux photovoltaïques, pour cela rendez-vous sur le compteur et cliquez sur la flèche de droite.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascriptFooter %}
<script type="text/javascript">
    var onloadCallback = function() {
    };
</script>
    <script>
        function recaptchaCallback() {
            $('.captchaMsg').hide();
            var response = grecaptcha.getResponse();
            if(response.length == 0){
                $('.captchaMsg').show();
            }else{
                $('#validForm').attr('disabled', false);
                $('#validForm').show();
            }
        }
        $(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)
                    {

                    }
                });
            });
            $('.c-faq-item').click(function(){
                if($(this).hasClass('openFaq')){
                    $(this).removeClass('openFaq');
                    $(this).find('.c-faq-a').hide();
                }else{
                    $(this).addClass('openFaq');
                    $('.c-faq-a').hide();
                    $(this).find('.c-faq-a').show();
                }
            });
        });
    </script>
{% endblock %}