description = "Contact 3 Section"

[viewBag]

[genericForm]
rules[name] = "required"
rules[email] = "required|email"
rules[phone] = "required|number"
messages_success = "Your form was successfully submitted"
messages_errors = "There were errors with your submission"
inline_errors = "disabled"
allowed_fields[] = "name"
allowed_fields[] = "email"
allowed_fields[] = "subject"
allowed_fields[] = "comments"
allowed_fields[] = "phone"
sanitize_data = "disabled"
anonymize_ip = "disabled"
recaptcha_theme = "light"
recaptcha_type = "image"
recaptcha_size = "normal"
==
{% set total = 12 %}
{% set size_1 = data.section_contact3_size %}
{% set size_2 = total - size_1 %}
{% if size_1 == 12 %}
{% set size_2 = total %}
{% endif %}
<div {% if data.section_contact3_id %}id="{{ data.section_contact3_id }}"{% endif %} class="contact3 py-24 {{ data.section_contact3_bg }}">
    <div class="{{ data.section_contact3_container }}">
        <!-- Row  -->
        {% if data.section_contact3_header or data.section_contact3_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_contact3_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_contact3_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
                <div class="row justify-content-center">
                    <div class="{% if size_1 != 12 %}col-lg-{{ size_1 }}{% else %}col-lg-9 text-center{% endif %} mb-12 mx-auto" {% if data.section_contact3_animation %}data-aos="fade-right" data-aos-duration="1200"{% endif %}>
                        <div class="px-4">
                            {% if data.section_contact3_title %}<h4 class="pt-5 pb-4">{{ data.section_contact3_title }}</h4>{% endif %}
                            <form data-request="{{ genericForm }}::onFormSubmit">
                            {{ form_token() }}
                            <div id="{{ genericForm }}_forms_flash"></div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group mt-4">
                                            <input class="form-control border-2 hover-border-default p-7" id="name" name="name" type="text" placeholder="Name">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mt-4">
                                            <input class="form-control border-2 hover-border-default p-7" id="email" type="text" name="email" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mt-4">
                                            <input class="form-control border-2 hover-border-default p-7" id="subject" type="text" name="subject" placeholder="Subject">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mt-4">
                                            <input class="form-control border-2 hover-border-default p-7" id="phone" type="text" name="phone" placeholder="Phone">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mt-4">
                                            <textarea class="form-control border-2 hover-border-default p-7" id="comments" name="comments" rows="5" placeholder="Message"></textarea>
                                        </div>
                                    </div>    
                                    <div class="col-lg-12">
                                        <div class="form-group mt-4">
                                        {% if (recaptcha_enabled) %}
                                            <div id="{{ genericForm }}" class="g-recaptcha" data-sitekey="{{ genericForm.settings.recaptcha_site_key }}" data-theme="{{ genericForm.property('recaptcha_theme') }}" data-type="{{ genericForm.property('recaptcha_type') }}" data-size="{{ genericForm.property('recaptcha_size') }}"></div>
                                        {% elseif (recaptcha_misconfigured) %}
                                            <h5>{{ recaptcha_warn }}</h5>
                                        {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <button id="simpleContactSubmitButton" type="submit" class="btn px-10 btn-default text-white mt-4 btn-chevron"><span> SUBMIT <i class="fas fa-chevron-right"></i></span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    {% if size_1 != 12 %}
                    <div class="col-lg-{{ size_2 }}" {% if data.section_contact3_animation %}data-aos="fade-left" data-aos-duration="1200"{% endif %}>
                        {% if data.section_contact3_type == 'image' %}
                        <img src="{{ data.section_contact3_image|media|resize(500, 450, { mode: 'crop' }) }}" class="img-fluid w-100">
                        {% endif %}
                        
                        {% if data.section_contact3_type == 'map' %}
                        <div id="map-canvas" class="w-100 {{ data.section_contact3_map_height }}"></div>
                        <!--onload="initialize()"-->
                        <script type="text/javascript">
                            var geocoder;
                            var map;
                            var address ="{{ data.section_contact3_map_address }}";
                            function initialize() {
                              geocoder = new google.maps.Geocoder();
                              var latlng = new google.maps.LatLng(-34.397, 150.644);
                              var myOptions = {
                                zoom: {{ data.section_contact3_map_zoom }},
                                center: latlng,
                              mapTypeControl: true,
                              mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                              navigationControl: true,
                                mapTypeId: google.maps.MapTypeId.ROADMAP,
                            
                                   styles: [{
                                       "featureType": "landscape.natural",
                                       "elementType": "geometry.fill",
                                       "stylers": [{
                                         "color": "#ffffff"
                                       }]
                                     }, {
                                       "featureType": "landscape.man_made",
                                       "stylers": [{
                                         "color": "#ffffff"
                                       }, {
                                         "visibility": "on"
                                       }]
                                     }, {
                                       "featureType": "water",
                                       "stylers": [{
                                         "color": "#80C8E5"
                                       }, {
                                         "saturation": 0
                                       }]
                                     }, {
                                       "featureType": "road.arterial",
                                       "elementType": "geometry",
                                       "stylers": [{
                                         "color": "#999999"
                                       }]
                                     }, {
                                       "elementType": "labels.text.stroke",
                                       "stylers": [{
                                         "visibility": "off"
                                       }]
                                     }, {
                                       "elementType": "labels.text",
                                       "stylers": [{
                                         "color": "#333333"
                                       }]
                                     }
                            
                                     , {
                                       "featureType": "road.local",
                                       "stylers": [{
                                         "color": "#dedede"
                                       }]
                                     }, {
                                       "featureType": "road.local",
                                       "elementType": "labels.text",
                                       "stylers": [{
                                         "color": "#666666"
                                       }]
                                     }, {
                                       "featureType": "transit.station.bus",
                                       "stylers": [{
                                         "saturation": -57
                                       }]
                                     }, {
                                       "featureType": "road.highway",
                                       "elementType": "labels.icon",
                                       "stylers": [{
                                         "visibility": "off"
                                       }]
                                     }, {
                                       "featureType": "poi",
                                       "stylers": [{
                                         "visibility": "off"
                                       }]
                                     }
                            
                                   ]
                            
                              };
                              map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
                              if (geocoder) {
                                geocoder.geocode( { 'address': address}, function(results, status) {
                                  if (status == google.maps.GeocoderStatus.OK) {
                                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                                    map.setCenter(results[0].geometry.location);
                            
                                      var infowindow = new google.maps.InfoWindow(
                                          { content: '<b>'+address+'</b>',
                                            size: new google.maps.Size(150,50)
                                          });
                              
                                      var marker = new google.maps.Marker({
                                          position: results[0].geometry.location,
                                          map: map, 
                                          title:address
                                      }); 
                                      google.maps.event.addListener(marker, 'click', function() {
                                          infowindow.open(map,marker);
                                      });
                            
                                    } else {
                                      alert("No results found");
                                    }
                                  } else {
                                    alert("Geocode was not successful for the following reason: " + status);
                                  }
                                });
                              }
                            }
                        </script>
                        <script src="https://maps.googleapis.com/maps/api/js?key={{ data.section_contact3_map_key }}&libraries=places&sensor=false&language={{ data.section_contact3_map_language|lower }}&region={{ data.section_contact3_map_region|upper }}&callback=initialize"></script>
                        {% endif %}
                        
                    </div>
                    {% endif %}
                </div>
                <div class="row mt-12">
                    {% if data.section_contact3_infos|length == 1 %}
                    {% set size = 12 %}
                    {% elseif data.section_contact3_infos|length == 2 %}
                    {% set size = 6 %}
                    {% elseif data.section_contact3_infos|length == 3 %}
                    {% set size = 4 %}
                    {% elseif data.section_contact3_infos|length == 4 %}
                    {% set size = 3 %}
                    {% endif %}
                    {% set aos = ['flip-left', 'flip-up', 'flip-down'] %}
                    
                    {% for fields in data.section_contact3_infos %}
                    <div class="col-lg-{{ size }} mb-7" {% if data.section_contact3_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                        <div class="p-5 d-flex">
                            <div class="mr-5 align-self-start">
                                {% if fields.section_contact3_info_icon %}<i class="{{ fields.section_contact3_info_icon }} d-flex justify-content-center align-items-center rounded-circle text-default display-7 border-1 border-default w-24r h-24r"></i>{% endif %}
                            </div>
                            <div class="">
                                <h6 class="font-weight-medium">{{ fields.section_contact3_info_title }}</h6>
                                {% for info in fields.section_contact3_info %}
                                {% if info.section_contact3_info_url %}<a class="d-flex" href="{{ info.section_contact3_info_url }}">{% endif %}
                                    <p class="m-0">{{ info.section_contact3_info_text }}</p>
                                {% if info.section_contact3_info_url %}</a>{% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
</div>