{% extends 'posts/new_base.html' %}
{% load blog_tags %}
{% block title %} Contact Us {% endblock %}
{% block blog_content %}
  <!-- blog_detail_container starts here -->
    <div class="blog_detail_container">
      <div class="blog_details">
        <div class="panel panel-default blog_panel">
          <div class="panel-body">
            <div class="blog_detail_content contact_container">
              <div class="blog_heading">
                <span class="head_line"></span>
                <span class="heading">Contact Us</span>
              </div>
              <form action="" method="post" id="contact_form" role="form">
                {% csrf_token %}
                  <div class="contact_form">
                    <div class="row form_row no_row_margin">
                      <div class="col-md-12">
                        {% for field in contact_form %}
                          <div class="form-group">
                            <div class="controls">
                              {{ field }}
                              {% if field.help_text %}
                              <p class="help-inline"><small>{{ field.help_text }}</small></p>
                              {% endif %}
                            </div>
                          </div>
                        {% endfor %}
                        {% if GOOGLE_CAPTCHA_SITE_KEY %}
                        <div id="id_captcha" class="g-recaptcha" data-sitekey="{{GOOGLE_CAPTCHA_SITE_KEY}}"></div>
                        {% endif %}
                      </div>
                      <br clear="all">
                      <div class=" col-md-12 buttons_row text-left">
                        <button type="submit" class="btn btn-default green_btn"> <i class="fa fa-send" aria-hidden="true"></i> SUBMIT YOUR COMMENT</button>
                        <button type="reset" class="btn btn-default blue_btn"> <i class="fa fa-refresh" aria-hidden="true"></i> RESET</button>
                      </div>
                    </div>
                  </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  <!-- blog_detail_container ends here -->
{% endblock %}
{% block js_script %}
{% if GOOGLE_CAPTCHA_SITE_KEY %}
<script src='https://www.google.com/recaptcha/api.js'></script>
{% endif %}
   <script>
    $( document ).ready(function() {
      $('#myModal').modal('hide');
      $('#myModal').on('hidden', function () {
        // Load up a new modal...
        $('#myModal1').modal('show')
      })
    });

    $('#contact_form').submit(function(event){
      event.preventDefault();
      $.post("",$('#contact_form').serialize(), function(data){
          if(data.error){
              $('p.error_required').remove();
              for (var key in data.response) {
                  $('#id_' + key).after('<p class="error_required">* ' + data.response[key] + '</p>');
              }
          }else{
              //alert(data['response']);
              window.location="{% url 'contact_us' %}";
          }
      }, 'json');
    });

   </script>
{% endblock %}
