{% extends 'dashboard/new_base.html' %}
{% load staticfiles %}
{% block title %}
{% if add_blog %}
Add
{% else %}
Edit
{% endif %} Blog
{% endblock %}
{% block extra_css %}
{% endblock %}
{% block content %}
<div class="row no_row_margin heading_count">
  <div class="heading col-md-6" id='page_title'></div>
</div>
<div class="row no_row_margin">
  <div class="container-fluid">
    <form action="" method="post" enctype="multipart/form-data" id="post-form" role="form">
      {% csrf_token %}
      <div class="row form_row no_row_margin">
        <div class="col-md-12">
          <div class="col-md-6">
            {% for field in form %}
              {% if field.name != 'content' %}
                <div class="form-group">
                  <label>{% if field.name == 'title' %}POST TITLE{% else %}{{ field.label }}{% endif %}</label>
                  <div class="controls">
                    {{ field }}
                    {% if field.help_text %}
                    <p class="help-inline"><small>{{ field.help_text }}</small></p>
                    {% endif %}
                  </div>
                </div>
              {% endif %}
            {% endfor %}
            {% if form.instance.id %}
            <div class="form-group">
              <label>History:</label>
              <div class="controls">
                <select name="history" class="form-control">
                <option value=""> Please choose previous edit </option>
                {% for history in history_list %}
                  <option value="{{history.id}}">{{ history.created_at }}</option>
                {% endfor %}
                </select>
                <p class="help-inline"><small>Revert to previous edits</small></p>
              </div>
            </div>
            {% endif %}
          </div>
          <div class="col-md-6">
            {% for field in form %}
              {% if field.name == 'content' %}
                <div class="form-group">
                  <label>Description</label>
                  <div class="controls">
                    {{ field }}
                    {% if field.help_text %}
                    <p class="help-inline"><small>{{ field.help_text }}</small></p>
                    {% endif %}
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
        <div class="col-md-12">
          {{ formset.management_form }}
          {% for form in formset %}
            <div class="col-md-12 slug">
              {{ form }}
            </div>
          {% endfor %}
        </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-floppy-o" aria-hidden="true"></i> Save</button>
          <button type="reset" class="btn btn-default blue_btn"> <i class="fa fa-refresh" aria-hidden="true"></i> Reset</button>
        </div>
      </div>
    </form>
  </div>
</div>
<!-- end of add form div -->
{% endblock %}
{% block js_script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>

<script type="text/javascript">
  $(document).ready(function(){

    // for form submission
    CKEDITOR.replace('content',{
      filebrowserUploadUrl: '{% url "upload_photos" %}',
      filebrowserBrowseUrl: '{% url "recent_photos" %}',
      uiColor: '#ffffff',
      height:475,
    });


        $('form#post-form').ajaxForm({
                beforeSerialize: function()
                {
                    $('#id_content').val(CKEDITOR.instances.id_content.getData());
                },

                dataType:  'json',
                success:  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
                       {
                               window.location="{% url 'blog' %}";
                       }
                }
        });
    //  script for form submission ends here


    // for page title

        if(window.location.pathname=="{% url 'blog_add' %}"){
            $('#page_title').text('Add Blog');
        }
        else{
            var blog = '{{ blog_name.title }}';
            $('#page_title').text('Edit Blog: '+ blog);
        }

    //script for page title ends here

    // for tags

        function onAddTag(tag) {
            alert("Added a tag: " + tag);
        }
        function onRemoveTag(tag) {
            alert("Removed a tag: " + tag);
        }

        function onChangeTag(input,tag) {
            alert("Changed a tag: " + tag);
        }

        $(function() {
            $('.myTags').tagsInput({width:'auto'});
        });

    // script for tags ends here


  });

  // revert to history
  $("select[name=history]").change(function(e){
    var id = $(this).val()
    if(!id){
      return false;
    }
    $.post("", {"history_id": id, "csrfmiddlewaretoken": "{{ csrf_token }}"}, function(response){
      if(response.content){
        $('[name=content]').val(response.content);
        CKEDITOR.instances.id_content.setData(response.content)
      }
    })
  });
</script>
{% endblock %}