{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}
{% assign _layout = settings.general_placement %}

<div class="page-contact">
  {% assign _info_column_position = section.settings.info_column_position %}
  {% assign _heading = section.settings.heading %}
  {% assign _description = section.settings.description %}
  {% assign _address = section.settings.address %}
  {% assign _phone_number = section.settings.phone_number %}
  {% assign _fax_number = section.settings.fax_number %}
  {% assign _email_1 = section.settings.email_1 %}
  {% assign _email_2 = section.settings.email_2 %}
  {% assign _work_time = section.settings.work_time %}
  {% assign _social_widget = section.settings.social_widget %}

  {% if _layout == 'wide' %}<div class="container-fluid">{% endif %}
    <div id="col-main" class="page-contact-content">
      {% unless _info_column_position == 'none' %}<div class="row">{% endunless %}

        {% if _info_column_position == 'left' %}{% include 'page-contact-info-column' %}{% endif %}
        

        <div class="contact-form-wrapper{% unless _info_column_position == 'none' %} col-lg-8 col-md-6 col-sm-12 col-12{% endunless %}">
          <div class="contact-form-inner" style="background-color: {{section.settings.contact_form_bg_color}};">
            <div class="title-wrapper">
              {% unless section.settings.contact_form_title == blank %}<h3>{{ section.settings.contact_form_title }}</h3>{% endunless %}
            </div>

            <div class="contact-form">
              {% form 'contact' %}

              {% if form.posted_successfully? %}
                <div class="alert alert-success">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                  {{'contact.form.post_success' | t }}
                </div>
              {% endif %}

              {% if form.errors %}
                <div class="alert alert-error">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                  {{ form.errors | default_errors }}
                </div>
              {% endif %}

              <div id="contact-form">
                <div class="row">
                  <div class="form-group col-lg-6 col-md-12">
                    <label for="name">{{ 'contact.form.name' | t }}<span class="req">*</span></label>
                    <input type="text" id="name" class="form-control" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.first_name }} {{ customer.last_name }}{% endif %}" name="contact[name]" />
                  </div>

                  <div class="form-group col-lg-6 col-md-12{% if form.errors contains 'email' %} error{% endif %}">
                    <label for="email">{{ 'contact.form.email' | t }}<span class="req">*</span></label>
                    <input required type="email" id="email" class="form-control" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" name="contact[email]" />
                  </div>
                </div>
                
                <div class="form-group">
                  <label for="phone">{{'contact.form.phone' | t }}</label>
                  <input type="text" id="phone" class="form-control" value="{{ form.phone }}" name="contact[phone]" />
                </div>

                <div class="form-group{% if form.errors contains 'body' %} error{% endif %}">
                  <label for="message">{{ 'contact.form.message' | t }}</label>
                  <textarea required id="message" class="form-control" cols="40" rows="7" name="contact[body]">{{ form.body }}</textarea>
                </div>

                <div class="form-actions">
                  <button type="submit" class="btn btn-1">{{'contact.form.submit_button' | t }}</button>
                </div>
              </div>

              {% endform %}
            </div>
          </div>  
        </div>
        

        {% if _info_column_position == 'right' %}{% include 'page-contact-info-column' %}{% endif %}

      {% unless _info_column_position == 'none' %}</div>{% endunless %}

      {% if section.settings.enable_contact_map %}
      <div class="map-wrapper">
        <div id="page-contact-map" class="map" style="height: 418px;"></div>
      </div>
      {% endif %}
    </div>
  {% if _layout == 'wide' %}</div>{% endif %}

</div>

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCmqy8wIh9KCnj_WKXqaskSCM-AUpXd01Q"></script>
<script>
    /*---- Google map -----*/
    (function () {
        "use strict";

        if (jQuery("#page-contact-map")) {
            var locations = [
              ['<div class="map-info-box"><p>{{ shop.address.street }}, {{ shop.address.city }}, {{ shop.address.country }}</p></div>', {{ section.settings.contact_latlong }}, 9]
            ];

            var map = new google.maps.Map(jQuery("#page-contact-map")[0], {
                zoom: {{section.settings.contact_zoom_lv}},
                scrollwheel: {{section.settings.contact_scroll}},
              	center: new google.maps.LatLng({{ section.settings.contact_latlong }}),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();


            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    animation: google.maps.Animation.DROP,
                  	icon: '{{"pin.png" | asset_url}}',
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        }
    }());

</script>

{% schema %}
  {
    "name": "Contact Page",
    "settings": [
      {
        "type": "image_picker",
        "id": "breadcrumb_image",
        "label": "Breadcrumb image"
      },
      {
        "type":"header",
        "content":"Info Column"
      },
      {
        "type":"select",
        "id":"info_column_position",
        "label":"Position",
        "options":[
          {"value":"left", "label":"Left"},
          {"value":"right", "label":"Right"},
          {"value":"none", "label":"None"}
        ],
        "default":"left"
      },
      {
        "type":"color",
        "id":"info_bg_color",
        "label":"Background color",
        "default":"#ffffff"
      },
      {
        "type":"text",
        "id":"heading",
        "label":"Heading",
        "default":"Get in touch"
      },
      {
        "type":"textarea",
        "id":"description",
        "label":"Description",
        "default":"The Alumalite Big Step Side Bars install in minutes, providing great looks, convenience and safety for your vehicle."
      },
      {
        "type":"text",
        "id":"address",
        "label":"Address",
        "default":"Chromium Co , 25 Silicon Road, London D04 89GR"
      },
      {
        "type":"text",
        "id":"phone_number",
        "label":"Phone number",
        "default":"+27 34 66 2455-198"
      },
      {
        "type":"text",
        "id":"fax_number",
        "label":"Fax number",
        "default":"+27 34 66 2455-198"
      },
      {
        "type":"text",
        "id":"email_1",
        "label":"Email #1",
        "default":"info@chromium.com"
      },
      {
        "type":"text",
        "id":"email_2",
        "label":"Email #2",
        "default":"support@chromium.com"
      },
      {
        "type":"text",
        "id":"work_time",
        "label":"Work time",
        "default":"Monday – Friday  8:00 to 19:00"
      },
      {
        "type":"checkbox",
        "id":"social_widget",
        "label":"Show social widget",
        "default":true
      },
      {
        "type": "header",
        "content": "Contact form"
      },
      {
        "type": "checkbox",
        "id": "enable_contact_form",
        "label": "Enable Contact form",
        "default": true
      },
      {
        "type":"color",
        "id":"contact_form_bg_color",
        "label":"Background color",
        "default":"#ffffff"
      },
      {
        "type": "text",
        "id": "contact_form_title",
        "label": "Heading",
		"default": "#get in touch"
      },
      {
        "type": "header",
        "content": "Map settings"
      },
      {
        "type": "checkbox",
        "id": "enable_contact_map",
        "label": "Enable Map",
        "default": true
      },
      {
        "type": "text",
        "id": "contact_latlong",
        "label": "Latitude and Longitude",
        "info": "Please click [here](http:\/\/latlong.net) to get Latitude and Longitude",
		"default": "51.514863, -0.133689"
      },
      {
        "type": "select",
        "id": "contact_zoom_lv",
        "label": "Select Zoom Level",
        "options": [
          {
            "value": "0",
            "label": "0"
          },
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          },
          {
            "value": "7",
            "label": "7"
          },
          {
            "value": "8",
            "label": "8"
          },
          {
            "value": "9",
            "label": "9"
          },
          {
            "value": "10",
            "label": "10"
          },
          {
            "value": "11",
            "label": "11"
          },
          {
            "value": "12",
            "label": "12"
          },
          {
            "value": "13",
            "label": "13"
          },
          {
            "value": "14",
            "label": "14"
          },
          {
            "value": "15",
            "label": "15"
          },
          {
            "value": "16",
            "label": "16"
          },
          {
            "value": "17",
            "label": "17"
          },
          {
            "value": "18",
            "label": "18"
          },
          {
            "value": "19",
            "label": "19"
          },
          {
            "value": "20",
            "label": "20"
          },
          {
            "value": "21",
            "label": "21"
          }
        ],
		"default": "17"
      },
      {
        "type": "checkbox",
        "id": "contact_scroll",
        "label": "Scroll Wheel"
      }
    ]
  }
{% endschema %}
