{% extends 'dashboard/base.html' %}
{% load paginate %}
    {% block title %}Categories{% 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-database"></i> Categories list</h1>
            <p align="center" class="lead">
                <a href="{% url 'blog:add_category' %}" >
                    <button class="btn btn-default"><i class="fa fa-plus"></i> Add Category</button>
                </a>
            </p>
             <!-- end div of add blog button -->

                {% if request.user.is_superuser %}
                <div class="bulk_button pull-left">
                   <!-- 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="true"><a href="#" style="white-space: unset;"> Active <span class="fa fa-check-square-o pull-right"></span></a></li>
                        <li id="false"><a href="#" style="white-space: unset;"> Inactive <span class="fa fa-minus-square-o 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="categories_data" class="form-inline">
                  {% csrf_token %}


                    <div class="form-group">
                      <select class='input form-control' id="select_status" name="select_status">
                        <option value="" default>Status</option>
                        <option value="True" {% ifequal request.POST.select_status "True" %}Selected{% endifequal %}>Active</option>
                        <option value="False" {% ifequal request.POST.select_status "False" %}Selected{% endifequal %}>Inactive</option>
                      </select>

                    </div>

                    <div class="form-group">

                      <select class='input select2 select2_category form-control' id="category" name="category" multiple>

                        {% for category in category_choices %}
                          <option value="{{ category.id }}" {% for category_id in requested_categories %}{% ifequal category.id category_id|add:'0' %}selected{% endifequal %}{% endfor %}>
                              {{ category }}
                          </option>
                        {% endfor %}

                      </select>

                    </div>

                    <div class="form-group">
                      <button type="submit" class="btn btn-default" id="search_new_button"><i class='fa fa-search'></i> Search</button>
                    </div>

                <div class="clearfix"></div>

                </form>
              </div>
              <!--/ filter -->

            </div>

            <br clear="all">

        {% if categories_list %}

            {% paginate 5 categories_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>Status</th>
                            <th colspan="2">Actions</th>
                        </tr>
                    </thead>

                    {% for category in categories_list %}
                        <tbody>
                            <tr>
                                <td><input name="bulk_actions" class="bulk_actions" value="{{ category.id }}" type="checkbox"></td>
                                <td>{{ category.name }}</td>

                                {% if category.is_active %}
                                    <td><i class="fa fa-check-square-o"></i> Active</td>
                                {% else %}
                                    <td><i class="fa fa-minus-square-o"></i> Inactive</td>
                                {% endif %}

                                {% if request.user.is_superuser or request.user == category.user %}
                                <td><a href="{% url 'blog:edit_category' category_slug=category.slug %}"><button class="btn btn-info"><i class="fa fa-edit"></i> Edit</button></a></td>
                                <td><a href="{% url 'blog:delete_category' category_slug=category.slug %}"><button class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</button></a></td>
                                {% endif %}
                            </tr>
                        </tbody>

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

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

        </div>
    {% endblock %}
    {% block js_script %}

        <script type="text/javascript">
            $('#categories').addClass('active');
        </script>
        <script type="text/javascript">
            $('.select2_category').select2({placeholder: "Select Categories"});
        </script>

        <script type="text/javascript">
            $("#selectAll").change(function() {
                $(".bulk_actions:checkbox").attr('checked', this.checked);
            });
            $('#true').click(function(){

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

                $.get("{% url 'blog:bulk_actions_category' %}", {'blog_ids':blog_ids, 'action': 'True'}, function(data){
                    if(data.response){
                        window.location='/dashboard/category/';
                    }else{
                        window.location='/dashboard/category/';
                    }
                }, 'json');

            });

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

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

                $.get("{% url 'blog:bulk_actions_category' %}", {'blog_ids':blog_ids, 'action': 'False'}, function(data){
                    if(data.response){
                        window.location='/dashboard/category/';
                    }else{
                        window.location='/dashboard/category/';
                    }
                }, 'json');

            });

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

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

            });
        </script>

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