{% extends 'base.html.twig' %}
{% block body %}
<div class="page-title-area ptb-100">
    <div class="container">
        <div class="page-title-content">
            <h1>{% trans %}Contact{% endtrans %}</h1>
            
        </div>
    </div>
    <div class="bg-image">
        <img src="{{asset('img/banner.jpg')}}" alt="Batifluid Background banner">
    </div>
</div>
<section id="contact" class="contact-section contact-single pt-100 pb-70">
    <div class="container">
        <div class="top-content">
            <div class="title">
                <h2>{% trans %}Contactez-nous !{% endtrans %}</h2>
            </div>
            <p>
                {% trans %}N'hésitez à nous envoyer un message{% endtrans %}
        </div>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="contact-image mb-30">
                    <img src="{{asset('img/Contact/11-Traite.jpg')}}" alt="Demo Image" />
                </div>
            </div>
            <div class="col-lg-6 mb-30">
            {{ form_start(form) }}
                <form id="contactfm">
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                {{ form_row(form.nom) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                {{ form_row(form.email) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                {{ form_row(form.numero) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group">
                                {{ form_row(form.entreprise) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12">
                            <div class="form-group">
                                {{ form_row(form.message) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12">
                            <div class="form-group">
                                {{ form_row(form.captcha) }}
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12">
                            <button type="submit" class="primary-btn">{% trans %}Envoyer{% endtrans %}</button>
                            <div id="contact-message"></div>
                        </div>
                    </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</section>

<div id="coverage" class="coverage-area pt-100 pb-70">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="contact-map rounded">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12790.894467405074!2d3.0784588!3d36.7291985!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2be9920fe090289!2sSARL%20BATIFLUIDE!5e0!3m2!1sfr!2sdz!4v1619091444962!5m2!1sfr!2sdz"
                        width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="item-single mb-30">
                    <h3><a href="#">{% trans %}Adresse{% endtrans %}</a></h3>
                    <p> Rue 3 N°7 HAY EL HAYET KOUBA Alger 16050</p>
                    <p>08 Lotissement Boirie, Kouba Alger Algérie 16000</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="item-single mb-30">
                    <h3><a href="#">{% trans %}Tel/Fax{% endtrans %}</a></h3>
                    <p> 023 60 24 88</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="item-single mb-30">
                    <h3><a href="#"> {% trans %}Email{% endtrans %}</a></h3>
                    <p>
                        <a href="#">
                            contact@batifluide.dz
                        </a>
                    </p>
                    <p>
                        <a href="#">
                            commercial@batifluide.dz
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block headjavascripts %}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>    
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
	/**
    * The callback function executed
    * once all the Google dependencies have loaded
    */
    function onGoogleReCaptchaApiLoad() {
        var widgets = document.querySelectorAll('[data-toggle="recaptcha"]');
        for (var i = 0; i < widgets.length; i++) {
        renderReCaptcha(widgets[i]);
        }
    }
    /**
    * Render the given widget as a reCAPTCHA 
    * from the data-type attribute
    */
    function renderReCaptcha(widget) {
        var form = widget.closest('form');
        var widgetType = widget.getAttribute('data-type');
        var widgetParameters = {
            'sitekey': '{{ gg_recaptcha_site_key }}'
        };

        if (widgetType == 'invisible') {
            widgetParameters['callback'] = function () {
                form.submit()
            };
            widgetParameters['size'] = "invisible";
        }

        var widgetId = grecaptcha.render(widget, widgetParameters);

        if (widgetType == 'invisible') {
            bindChallengeToSubmitButtons(form, widgetId);
        }
    }
    /**
    * Prevent the submit buttons from submitting a form
    * and invoke the challenge for the given captcha id
    */
    function bindChallengeToSubmitButtons(form, reCaptchaId) {
        getSubmitButtons(form).forEach(function (button) {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                grecaptcha.execute(reCaptchaId);
                alert(reCaptchaId);
            });
        });
    }
    /**
    * Get the submit buttons from the given form
    */
    function getSubmitButtons(form) {
        var buttons = form.querySelectorAll('button, input');
        var submitButtons = [];
        for (var i= 0; i < buttons.length; i++) {
            var button = buttons[i];
            if (button.getAttribute('type') == 'submit') {
                submitButtons.push(button);
            }
        }
        return submitButtons;
    }
</script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>


{% endblock %}