{% extends 'front.html.twig' %}
{% block title %} Contact CNFCE {% endblock %}
{% block stytesheets %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <!-- breadcrumb area start -->
    <section class="breadcrumb-area" id="home">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-area-content">
                        <h2>Contact Us</h2>
                        <ul>
                            <li><a href="{{ path('front_home') }}">Home</a></li>
                            <li class="active"><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->
    <!-- contact section start -->
    <section class="ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="contact-form2">
                        <h2>Get In Touch</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam, eaque ipsa quae ab beatae illo inventore.</p>
                        {{ form_start(form,{'attr': {'role':'form','id': 'contactForm'}}) }}
                        {% include '@App/Default/flashBag.html.twig' %}
                        <div class="row">
                            <div class="col-md-6">
                                {{ form_widget(form.name, { 'attr': {'class': '', 'placeholder': 'Name *','name':'name','id':'name','required':true} }) }}
                                <div class="valid-feedback">Looks good!</div>
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.phone, { 'attr': {'class': '', 'placeholder': 'Phone *','name':'phone','id':'phone','required':true} }) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.email, { 'attr': {'class': '', 'placeholder': 'Email *','name':'email','id':'email','required':true} }) }}
                            </div>
                            <div class="col-md-6">
                                {{ form_widget(form.subject, { 'attr': {'class': '', 'placeholder': 'Subject *','name':'subject','id':'subject','required':true} }) }}
                            </div>
                            <div class="col-md-12">
                                {{ form_widget(form.message, { 'attr': {'class': '', 'placeholder': 'Message *','message':'content','id':'message','required':true} }) }}
                                <button class="theme-btn theme-btn5" id="send_message">SUBMIT NOW</button>
                            </div>
                        </div>
                        {{ form_end(form) }}
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-info">
                        <h2>Contact Info</h2>
                        <div class="single-contact-info">
                            <div class="contact-info-icon">
                                <i class="icofont icofont-location-pin"></i>
                            </div>
                            <div class="contact-info-text">
                                <h4>Location</h4>
                                <p>22/122 Apple Street, New York, NY 11012, USA</p>
                            </div>
                        </div>
                        <div class="single-contact-info">
                            <div class="contact-info-icon">
                                <i class="icofont icofont-telephone"></i>
                            </div>
                            <div class="contact-info-text">
                                <h4>Phone Number</h4>
                                <p>+123-456-7890</p>
                                <p>+123-456-7890</p>
                            </div>
                        </div>
                        <div class="single-contact-info">
                            <div class="contact-info-icon">
                                <i class="icofont icofont-envelope"></i>
                            </div>
                            <div class="contact-info-text">
                                <h4>Email</h4>
                                <p>contact@example.com </p>
                            </div>
                        </div>
                        <div class="single-contact-info">
                            <div class="contact-info-icon">
                                <i class="icofont icofont-clock-time"></i>
                            </div>
                            <div class="contact-info-text">
                                <h4>Working Hours</h4>
                                <p>Mon to Fri - 08:00 to 16:00 </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact section end -->

    <div id="map"></div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        function initMap() {
            var uluru = {lat: -26.397, lng: 135.644};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 6,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnKyOpsNq-vWYtrwayN3BkF3b4k3O9A_A&callback=initMap"></script>
    {#{% include '@FrontBundle/Default/assets.html.twig' %}#}
{% endblock %}