{% extends 'marketing/base.html' %}
{% load staticfiles %}
{% load paginate %}
{% block content %}
{{ block.super }}
<div class="main_container ml-5 mr-5">
  <div class="row marl">
    <div class="col-md-12">
      <form id="add_form" method="POST" action='' novalidate>
        <div class="overview_form_block row marl justify-content-center">
          <div class="col-md-5">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-center">
                 Contact Detail
                </div>
                <div class="row marl no-gutters justify-content-center">
                  <div class="col-md-12">
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1" class="required">
                          Email{% if form.email.field.required %}<span class="error_marker"
                            style="color:red">*</span>{% endif %}</label>
                            <br>
                        {{contact_obj.email}}
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1" class="required">First
                          Name{% if form.name.field.required %}<span class="error_marker"
                            style="color:red">*</span>{% endif %}</label>
                            <br>
                        {{contact_obj.name}}
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1" class="required">Last
                          Name{% if form.last_name.field.required %}<span class="error_marker"
                            style="color:red">*</span>{% endif %}</label>
                            <br>
                        {{contact_obj.last_name}}
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1" class="required">City
                          {% if form.city.field.required %}<span class="error_marker"
                            style="color:red">*</span>{% endif %}</label>
                            <br>
                        {{contact_obj.city}}
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label for="exampleInputEmail1" class="required">State
                          {% if form.state.field.required %}<span class="error_marker"
                            style="color:red">*</span>{% endif %}</label>
                            <br>
                            {{contact_obj.state}}
                      </div>
                    </div>
                  </div>
                  <!-- <div class="col-md-12">
                    <div class="row marl buttons_row text-center form_btn_row">
                      <button class="btn btn-default save" type="submit">Update</button>
                      <a href="{% url 'marketing:contacts_list' %}" class="btn btn-default save">Cancel</a>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block js_block %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
<script type="text/javascript">

  // $(document).ready(function() {
  //   $('.assigned_users').select2();
  // });
  $(document).ready(function () {

  });

  $('form#add_form').ajaxForm({
    type: 'POST',
    dataType: 'json',
    url: ".",
    data: $('#add_form').serialize(),
    success: function (data) {
      if (data.error) {
        $('.error').html('')
        for (var key in data.errors) {
          $('#id__' + key).html("<p>" + data.errors[key][0] + "</p>");
        };
        $('#submit_btn').removeAttr('disabled')
      }
      else {
        window.location = data.success_url;
      }
    }
  });
</script>
{% endblock js_block %}