{% extends 'front/layout.html.twig' %}

{% block reCAPTCHA %}
    <script src='https://www.google.com/recaptcha/api.js'></script>
{% endblock %}

{% block content %}
    <section id="contact">
        {% include 'front/components/page-header.html.twig' with {'title': 'Contacta con nosotros'} %}

        <div class="page-content container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h3 class="contact-header">¿Necesitas información? Ponte en contacto con nosotros</h3>
                </div>
            </div>

            {% for flashMessage in app.session.flashbag.get('email-error') %}
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{ flashMessage }}
                        </div>
                    </div>
                </div>
            {% endfor %}

            {% for flashMessage in app.session.flashbag.get('email-successful') %}
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{ flashMessage }}
                        </div>
                    </div>
                </div>
            {% endfor %}

            <div class="row">
                <div class="col-xs-12">
                    <form id="contactForm" class="contact-form" {{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }} method="POST">
                    {% if recaptchaError == true %}
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="alert alert-danger alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <span>Por favor, rellena el reCAPTCHA.</span>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input
                                    type="text"
                                    class="form-control"
                                    name="name"
                                    onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Nombre*'"
                                    placeholder="Nombre*"
                                    required
                                >
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input
                                    type="email"
                                    class="form-control"
                                    name="email"
                                    onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Email*'"
                                    placeholder="Email*"
                                    required
                                >
                                <p class="help-block text-danger"></p>
                            </div>
                            <div class="form-group">
                                <input
                                    type="text"
                                    class="form-control"
                                    name="phone"
                                    onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Teléfono*'"
                                    placeholder="Teléfono*"
                                >
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <textarea
                                    class="form-control w-100"
                                    name="message"
                                    cols="30"
                                    rows="9"
                                    onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Mensaje...'"
                                    placeholder="Mensaje..."
                                    required
                                ></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                    </div>

                    <div class="g-recaptcha" name="g-recaptcha-response" data-sitekey="6Lfb84cUAAAAAJ6W7ZqK98CKL48gh2kGrlf42DE8"></div>

                    <div class="row">
                        <div class="col-xs-12 text-center">
                            <button type="submit" class="btn btn-primary">Enviar</button>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function() {

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