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

{% block title %}{{controller_name}}{% endblock %}

{% block body %}
<div id="page_caption" class="hasbg parallax baseline ">
    <div class="parallax_overlay_header"></div>
    <div id="bg_regular" style="background-image:url('{{ asset('images/slides/find_us.jpg') }}');"></div>
    <div class="page_title_wrapper baseline" data-stellar-ratio="1.3">
        <div class="page_title_inner baseline">
            <h1 class="withtopbar">
                <span class="ppb_title_first" >Our</span>Contact  </h1>
        </div>
    </div>
</div>


<div class="ppb_wrapper hasbg withtopbar">
    <div class="one withsmallpadding ppb_text" style="text-align:center;padding-bottom: 0px !important;padding:50px 0 50px 0;">
        <div class="standard_wrapper">
            <div class="page_content_wrapper">
                <div class="inner">
                    <div style="margin:auto;width:60%">
                        </p>

                        <p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="one withsmallpadding ppb_text" style="padding-top: 0 !important;text-align:center;padding:50px 0 50px 0;">
        <div class="standard_wrapper">
            <div class="page_content_wrapper">
                <div class="inner">

                </div>
            </div>
        </div>
    </div>
    <div class="one" style="padding-bottom: 100px !important;position:relative;padding:30px 0 30px 0;">
        <div class="standard_wrapper">
            <div class="page_content_wrapper">
                <div class="inner">
                    <div class="one_half parallax_scroll_image" style="width:70%;">
                        <div class="image_classic_frame expand">
                            <div class="image_wrapper">
                                <a href="{{ asset('images/slides/find_us2.jpg') }}" class="img_frame"><img src="{{ asset('images/slides/find_us2.jpg') }}" class="portfolio_img" alt="" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="one_half last parallax_scroll" style="width:40%;position:absolute;right:90px;background:#ffffff;padding:30px;" data-stellar-ratio="1.3">
                        <h2 class="ppb_title">{% trans %}Contacts{% endtrans %}</h2>
                        <p><i class="fa fa-map-marker marginright"></i>Praia da Mareta, 8650-361 Sagres</p>
                        <p><i class="fa fa-phone marginright"></i><a href="tel:+351914232906">+351 914 232 906</a></p>
                        <p><i class="fa fa-envelope marginright"></i><a href="mailto:gerencia@telheirodoinfante.com">gerencia@telheirodoinfante.com</a></p>
                        <p><i class="fa fa-globe marginright"></i>telheirodoinfante.com</p>
                        <div id="reponse_msg_1570105835359928382" class="contact_form_response">
                            <ul></ul>
                        </div>
                        <div id="1570355777904681258" class="alert_box success sucess_send"><i class="fa fa-flag alert_icon"></i>
                            <div class="alert_box_msg">{% trans %}Thank you for contact us, we answer you soon as possible.{% endtrans %}</div><a href="#" class="close_alert" data-target="1570355777904681258"><i class="fa fa-times"></i></a>
                        </div>

                            <div class="quform-elements">
                                <div class="quform-element">

                                    <br>
                                    <span class="wpcf7-form-control-wrap your-name">
                                                    <input id="name" type="text" name="name" size="40" class="input1" aria-required="true" aria-invalid="false" placeholder="Name*" required>
                                                </span>

                                </div>
                                <div class="quform-element">

                                    <br>
                                    <span class="wpcf7-form-control-wrap your-email">
                                                    <input id="email_contact" type="text" name="email" size="40" class="input1" aria-required="true" placeholder="Email*" required>
                                                </span>

                                </div>
                                <div class="quform-element">

                                    <br>
                                    <span class="wpcf7-form-control-wrap your-message">
                                                    <textarea required  id="message_contact" name="message" cols="40" rows="10" class="input1" aria-invalid="false" placeholder="Message*"></textarea>
                                                </span>

                                </div>

                                <!-- Begin Submit button -->
                                <div class="quform-submit">
                                    <div class="quform-submit-inner">
                                        <button type="submit" id="send_email" class="submit-button"><span>{% trans %}Send{% endtrans %}</span></button>
                                    </div>
                                    <div class="quform-loading-wrap"><span class="quform-loading"></span></div>
                                </div>

                            </div>

                    </div>
                    <br class="clear" />
                </div>
            </div>
        </div>
    </div>

        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3186.158833221607!2d-8.940092684400316!3d37.006006979906736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1b4c61911ab5fb%3A0xdbee09fededd02c7!2sTelheiro%20Do%20Infante!5e0!3m2!1spt-PT!2spt!4v1590367953414!5m2!1spt-PT!2spt"  height="450" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

</div>
    <script src='{{ asset('js/jquery.js') }}'></script>
    <script src='{{ asset('js/jquery-migrate.min.js') }}'></script>
    <script>
        var $=jQuery.noConflict();

        $('.sucess_send').hide();

        $(document).ready(function(){
            $('#send_email').click(function () {

                var name = $('#name').val();
                var email = $('#email_contact').val();
                var message = $('#message_contact').val();


                $('.sucess_send').show();
                $.ajax({
                    url: '{{ path('send_email_contact') }}', // name of the file which we will be creating soon
                    method: "POST",
                    data: {name: name, email:email, message: message},

                    beforeSend: function(){

                    },
                    success: function (data) {

                    }, error: function (data) {

                    }
                })

            });
        });


    </script>

{% endblock %}