description = "Contact 1 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"
skip_database = 0
==
{% set total = 12 %}
{% set size_1 = data.section_contact1_size %}
{% set size_2 = total - size_1 %}
{% if size_1 == 12 %}
{% set size_2 = total %}
{% endif %}
<div {% if data.section_contact1_id %}id="{{ data.section_contact1_id }}"{% endif %} class="contact1 py-24 {{ data.section_contact1_bg }}">
    <div class="{{ data.section_contact1_container }}">
        <!-- Row  -->
        {% if data.section_contact1_header or data.section_contact1_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_contact1_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_contact1_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-7" {% if data.section_contact1_animation %}data-aos="fade-right" data-aos-duration="1200"{% endif %}>
                        <div class="{{ size_1 != 12 ? 'pr-lg-10' }}">
                            {% if data.section_contact1_ftitle %}<h4 class="pt-5 pb-4">{{ data.section_contact1_ftitle }}</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 btn-lg btn-default text-white mt-5 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 }} mb-7" {% if data.section_contact1_animation %}data-aos="fade-left" data-aos-duration="1200"{% endif %}>
                    
                        {% if data.section_contact1_map %}
                        <div id="map-canvas" class="w-100 h-80r"></div>
                        <!--onload="initialize()"-->
                        <script type="text/javascript">
                            var geocoder;
                            var map;
                            var address ="{{ data.section_contact1_map_address }}";
                            function initialize() {
                              geocoder = new google.maps.Geocoder();
                              var latlng = new google.maps.LatLng(-34.397, 150.644);
                              var myOptions = {
                                zoom: 16,
                                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_contact1_map_key }}&libraries=places&sensor=false&language={{ data.section_contact1_map_language|lower }}&region={{ data.section_contact1_map_region|upper }}&callback=initialize"></script>
                        {% endif %}
                    
                        {% for fields in data.section_contact1_infos %}
                        {% if fields.section_contact1_info_title %}<h4 class="pt-5 pb-4">{{ fields.section_contact1_info_title }}</h4>{% endif %}
                        <ul class="list-inline">
                        {% for info in fields.section_contact1_info %}
                        <li class="py-2 d-flex align-items-center">
                            {% if info.section_contact1_info_url %}<a class="d-flex" href="{{ info.section_contact1_info_url }}">{% endif %}
                                {% if info.section_contact1_info_icon %}<i class="{{ info.section_contact1_info_icon }} d-flex justify-content-center align-items-center rounded-circle bg-default text-white w-8r h-8r mr-3"></i>{% endif %}
                                {{ info.section_contact1_info_text }}
                            {% if info.section_contact1_info_url %}</a>{% endif %}
                        </li>
                        {% endfor %}
                        </ul>
                        {% endfor %}
                        {% if data.section_contact1_social %}
                        {% if data.section_contact1_stitle %}<h4 class="pt-5 pb-4">{{ data.section_contact1_stitle }}</h4>{% endif %}
                        <ul class="list-inline">
                            {% for fields in data.section_contact1_social %}
                            <li class="list-inline-item">
                                <a class="d-flex justify-content-center align-items-center btn btn-outline-default rounded-circle p-1 w-10r h-10r" href="{{ fields.section_contact1_social_url }}">
                                    <i class="{{ fields.section_contact1_social_icon }}"></i>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>