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

{% block asset_css %}
    <!--GOOGLE API-->
    <script src="https://www.google.com/recaptcha/api.js"
            async defer>
    </script>
{% endblock %}

{% block body %}
    <section class="contact-form" id="contact-form">
        <!-- banner -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm12 col-md-12 col-lg-12 col-xl-12 p-0">
                    <img src="../assets/images/banner/banner-5.png" alt="banner-5" class="w-100">
                </div>
            </div>
        </div>
        <!-- / banner -->
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <h1>Contactez-nous</h1>
                    <p>Pour toutes <b>informations</b>, n'hésitez pas à nous <b>contacter</b>. <br> Si vous souhaitez
                        <b>s'inscrire</b> sur le site et avoir votre propre <b>tableau de bord</b>, profiter de toutes
                        les <b>fonctionnalités</b>, envoyez-nous un message.</p>
                    <!--Contact-->
                    <div class="sptb bg-white mb-0 pb-0">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-5 col-xl-4  col-md-12  d-block mb-7">
                                    <div class="section-title center-block text-center">
                                        <h2>Info</h2>
                                    </div>
                                    <div class="row mx-auto w-100 text-white">
                                        <div class="col-12 mb-5">
                                            <div class="support-service bg-primary br-2 mb-4 mb-xl-0 tel row"
                                                data-aos="fade-right"
                                                data-aos-anchor=".text-muted">
                                                <div class="col-2 p-0">
                                                    <i class="fa fa-phone"></i>
                                                </div>
                                                <div class="col-10">
                                                    <h6>+(261) 20 22 206 73</h6>
                                                    <P style="text-align:left">Téléphone</P>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 mb-5">
                                            <div class="support-service bg-primary br-2 mb-4 mb-xl-0 tel row"
                                                data-aos="fade-right"
                                                data-aos-anchor=".text-muted">
                                                <div class="col-2 p-0">
                                                    <i class="fa fa-phone"></i>
                                                </div>
                                                <div class="col-10">
                                                    <h6>{{ _soc.numeroCommande }}</h6>
                                                    <P style="text-align:left">Commande</P>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 mb-5">
                                            <div class="support-service bg-secondary br-2 mb-4 mb-xl-0 ouvert row"
                                                data-aos="fade-left" data-aos-anchor=".text-muted">
                                                <div class="col-2 p-0">
                                                    <i class="fa fa-clock-o"></i>
                                                </div>
                                                <div class="col-10">
                                                    <h6>Lun-Sam(09:00-17:00)</h6>
                                                    <p style="text-align:left">Heure d'ouverture</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="support-service br-2 email row" data-aos="fade-right"
                                                data-aos-anchor=".text-muted">
                                                <div class="col-2 p-0">
                                                    <i class="fa fa-envelope-o"></i>
                                                </div>
                                                <div class="col-10">
                                                    <h6 style="color:#fff">service.clientel@opham.com</h6>
                                                    <p style="text-align:left">Email</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7 col-xl-8 col-md-12 d-block p-0">
                                    <div class="single-page">
                                        <div class="col-lg-12  col-md-12 mx-auto d-block">
                                            <div class="section-title center-block text-center">
                                                <h2>Contact</h2>
                                            </div>
                                            <div class="wrapper wrapper2">
                                                <div class="card mb-0">
                                                    <div class="card-body">
                                                        {{ form_start(form, {'attr' : {
                                                            'onsubmit' : "return check_if_capcha_is_filled();"
                                                        }}) }}
                                                        <div class="form-group">
                                                            {{ form_row(form.name, {'label' : false, 'attr' :{'class' : 'form-control', 'placeholder' : 'Nom' }}) }}
                                                        </div>
                                                        <div class="form-group">
                                                            {{ form_row(form.mail, {'label' : false, 'attr' :{'class' : 'form-control', 'placeholder' : 'Adresse mail' }}) }}
                                                        </div>
                                                        <div class="form-group">
                                                            {{ form_row(form.message, {'label' : false, 'attr' :{'class' : 'form-control', 'placeholder' : 'Message', 'rows' : "9" }}) }}
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12 py-2">
                                                                <div class="g-recaptcha"
                                                                     data-callback="capcha_filled"
                                                                     data-expired-callback="capcha_expired"
                                                                     data-sitekey="6Lcd-60nAAAAAEUsV34hepFUhccHzxZtm7FintZT" >
                                                                </div>
                                                                <br/>
                                                            </div>
                                                        </div>
                                                        <button type="submit" class="btn btn-primary">
                                                            Envoyer le message
                                                        </button>

                                                        {{ form_end(form) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Contact-->
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block asset_js %}
    {#SCRIPT RECAPTCHA#}
    <script>
        var allowSubmit = false;

        function capcha_filled () {
            allowSubmit = true;
        }

        function capcha_expired () {
            allowSubmit = false;
        }

        function check_if_capcha_is_filled() {
            if (allowSubmit) {
                return true;
            } else {
                toastr.error('Compléter la case captcha!');
                return false; // Empêcher la soumission du formulaire
            }
        }
    </script>
{% endblock %}