{% extends 'dashboard/base.html' %}
{% load blog_tags %}
{% load paginate %}
    {% block title %}Posts{% endblock %}
    {% block extra_css %}
    <style type="text/css">
        table td {
            padding: 6px;
        }
    </style>
    {% endblock %}

    {% block content %}
        <div class="row" id="head_style">
            <h1 align="center"><i class="fa fa-newspaper-o"></i> Blog List </h1>
            <p align="center" class="lead">
                <a href="{% url 'blog_add' %}" >
                    <button class="btn btn-default"><i class="fa fa-plus"></i> Add Blog</button>
                </a>
            </p>

        <!-- end div of add blog button -->

                {% if request.user.is_superuser %}
                <div class="bulk_button pull-left" style="display:none">
                   <!-- Bulk actions -->
                    <div class="btn-group">
                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fa fa-gear"></span> Bulk <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                      </button>
                      <ul class="dropdown-menu">
                        <li id="drafted"><a href="#" style="white-space: unset;"> Draft <span class="fa fa-file-o pull-right"></span></a></li>
                        <li id="published"><a href="#" style="white-space: unset;"> Publish <span class="fa fa-thumbs-up pull-right"></span></a></li>
                        <li id="rejected"><a href="#" style="white-space: unset;"> Reject <span class="fa fa-thumbs-down pull-right"></span></a></li>
                        <li id="delete"><a href="#" style="white-space: unset;"> Delete <span class="fa fa-trash-o pull-right"></span></a></li>
                      </ul>
                    </div>
                  <!--Bulk actions end-->
                </div>
                {% endif %}

              <!-- filter -->
              <div class="pull-right">
                <form action="" method="post" id="blogs_data" class="form-inline">
                  {% csrf_token %}
                  <div class="form-group">
                    <select class='input form-control' id="select_status" name="select_status">
                      <option value="" default>Select status</option>
                      {% for key, choice in blog_choices %}
                        <option value="{{ key }}" {% ifequal key request.POST.select_status %}selected{% endifequal %}>{{ choice }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" name="search_text" placeholder="Search Blogs" {% if request.POST.search_text %}value="{{request.POST.search_text}}"{% endif %}>
                  </div>
                  <div class="form-group">
                    <button type="submit" id="search_new_button" class="btn btn-default"><i class='fa fa-search'></i> Search</button>
                  </div>
                  <div class="clearfix"></div>
                </form>
              </div>
              <!--/ filter -->

            </div>

            <br clear="all">

        {% if blog_list %}

            {% paginate 5 blog_list %}
            {% show_pageitems %}

            <div class="row">
                <table class="table table-bordered table-hover" id="my_table">
                    <thead>
                        <tr>
                            <th><input name="bulk_actions" id="selectAll" type="checkbox"></th>
                            <th>Title</th>
                            <th>Author</th>
                            <th>Category</th>
                            <th>Status</th>
                            <th colspan="3">Actions</th>
                        </tr>
                    </thead>

                    {% for blog in blog_list %}
                        <tbody>
                            <tr>
                                <td><input name="bulk_actions" class="bulk_actions" value="{{ blog.id }}" type="checkbox"></td>
                                <td>{{ blog.title }}</td>
                                <td>{{ blog.user }}</td>
                                <td>{{ blog.category }}</td>
                                <td id="blog_status">

                                    {% if blog.status == "Published" %}
                                        <i class="fa fa-thumbs-up"></i> {{ blog.status }}
                                    {% elif blog.status == "Drafted" %}
                                        <i class="fa fa-file-o"></i> {{ blog.status }}
                                    {% elif blog.status == "Trashed" %}
                                        <i class="fa fa-trash-o"></i> {{ blog.status }}
                                    {% else %}
                                        <i class="fa fa-thumbs-down"></i> {{ blog.status }}
                                    {% endif %}

                                </td>
                                <td colspan="3">
                                  <a href="{% url 'view_blog' blog_slug=blog.slug %}" ><button class="btn btn-primary"><i class="fa fa-eye"></i> View</button></a>
                                  {% if blog|is_deletable_by:request.user or request.user|get_user_role_name != 'Author' %}
                                    <a href="{% url 'edit_blog' blog_slug=blog.slug %}"><button class="btn btn-info"><i class="fa fa-edit"></i> Edit</button></a>
                                    <form class="blog_trash_form" role="form" method="POST" action="{% url 'delete_blog' blog_slug=blog.slug %}">
                                      {% csrf_token %}
                                      <input type="hidden" name="action">
                                    </form>
                                  {% endif %}
                                    {% if request.user.is_superuser or request.user|get_user_role_name != 'Author' %}
                                    {% ifequal blog.status "Trashed" %}
                                      <button class="btn btn-success manage_blog" action="restore" title="Restore from trash"><i class="fa fa-refresh"></i> Restore</button>
                                      <button class="btn btn-danger manage_blog" action="delete" title="Permanently delete from trash"><i class="fa fa-trash-o"></i> Delete</button>
                                    {% else %}
                                      <button class="btn btn-warning manage_blog" action="trash" title="Move to Trash"><i class="fa fa-times"></i> Trash</button>
                                    {% endifequal %}
                                    {% endif %}
                                </td>
                            </tr>
                        </tbody>

                    {% endfor %}
                </table>
            <!-- end div of table -->

            <!-- pagination -->
              <div class="pagination_wrap">
                  {% show_pages %}
              </div>
            <!--/ pagination -->
        {% else %}
            <h2 align="center"> There are no blog-posts here !</h2>
        {% endif %}

        </div>

    {% endblock %}
    {% block js_script %}
        <script type="text/javascript">

            $('#home').addClass('active');
            $('.manage_blog').click(function(e){
              e.preventDefault();
              $(this).siblings("form.blog_trash_form").children("input[name='action']").val($(this).attr('action'));
              $(this).siblings("form.blog_trash_form").submit();
            });

        </script>

        <script type="text/javascript">
            $('.select2_blog').select2({placeholder: 'Select Blogs'});
        </script>

        <script type="text/javascript">
        $("#selectAll").change(function() {
            // $(".bulk_button").toggle();
            $(".bulk_actions:checkbox").prop('checked', $(this).prop("checked"));
            if($(this).prop("checked")){
                $(".bulk_button").show();
            }else{
                $(".bulk_button").hide();
            }
        });

        $(".bulk_actions:checkbox").change(function() {
            if ($(this).attr("id") != "selectAll"){
                if($(".bulk_actions:checkbox:checked").length > 0){
                    $(".bulk_button").show();
                }
                else{
                    $("#selectAll").prop('checked', false);
                    $(".bulk_button").hide();
                }
            }
        });

        $('#published').click(function(){

            var blog_ids = [];
            $.each($(".bulk_actions:checked"), function(){
                blog_ids.push(parseInt($(this).val(), 0));
            });

            $.get("{% url 'bulk_actions_blog' %}", {'blog_ids':blog_ids, 'action': "Published"}, function(data){
                if(data.response){
                    //alert('Record(s) successfully updated as Published!');
                    window.location='{% url 'blog' %}';
                }else{
                    //alert('Please select at least one record !');
                    window.location='{% url 'blog' %}';
                }
            }, 'json');

        });

        $('#drafted').click(function(){

            var blog_ids = [];
            $.each($(".bulk_actions:checked"), function(){
                blog_ids.push(parseInt($(this).val(), 0));
            });

            $.get("{% url 'bulk_actions_blog' %}", {'blog_ids':blog_ids, 'action': 'Drafted'}, function(data){
                if(data.response){
                    //alert('Record(s) successfully updated as Drafted!');
                    window.location='{% url 'blog' %}';
                }else{
                    //alert('Please select at least one record !');
                    window.location='{% url 'blog' %}';
                }
            }, 'json');

        });

        $('#rejected').click(function(){

            var blog_ids = [];
            $.each($(".bulk_actions:checked"), function(){
                blog_ids.push(parseInt($(this).val(), 0));
            });

            $.get("{% url 'bulk_actions_blog' %}", {'blog_ids':blog_ids, 'action': 'Rejected'}, function(data){
                if(data.response){
                    //alert('Record(s) successfully updated as Rejected!');
                    window.location='{% url 'blog' %}';
                }else{
                    //alert('Please select at least one record !');
                    window.location='{% url 'blog' %}';
                }
            }, 'json');

        });

        $('#delete').click(function(){
            var blog_ids = [];
            $.each($(".bulk_actions:checked"), function(){
                blog_ids.push(parseInt($(this).val(), 0));
            });

            $.get("{% url 'bulk_actions_blog' %}", {'blog_ids':blog_ids, 'action': 'Delete'}, function(data){
                if(data.response){
                    //alert('Record(s) successfully Deleted!');
                    window.location='{% url 'blog' %}';
                }else{
                    //alert('Please select at least one record !');
                    window.location='{% url 'blog' %}';
                }
            }, 'json');

        });
        </script>

        <script type="text/javascript">
        $('.pagination li a').click(function(event){
            event.preventDefault();
            $('#blogs_data').attr('action', $(this).attr('href'));
            $('#blogs_data').submit();
        });
        </script>

    {% endblock %}
