{% extends 'datatables/filter_blocks/base_filter_block.html' %}
{% load datatable_tags %}

{% block content %}
    <div class="filter-content">
    </div>
{% endblock %}

{% block header_icons %}
    <a class="none-check" href="javascript:void(0)" title="Clear">
        <i class="all-clear filter-header-icon fas fa-ban"></i></a>
{% endblock %}


{% block javascript %}
    <script>
        function filter (column_no, html_id, options) {

            this.storage_key = 'tag_filter'
            django_datatables.FilterBase.call(this, column_no, html_id, options)

            this.load_state = function (state_data) {
                $('.tag-filter', '#' + this.html_id).each(function () {
                    saved_class = state_data[$(this).attr('data-value')]
                    if (saved_class != 'option-1') {
                        $(this).removeClass('option-1')
                        $(this).addClass(saved_class)
                    }
                })
            }

            this.save_data = function (data) {
                tag_filter = {}
                $('.tag-filter', '#' + this.html_id).each(function () {
                    tag_filter[$(this).attr('data-value')] = this.className.match(/option-\d+/)[0];
                })
                return tag_filter
            }

            this.buildfilter = function (refresh=false) {
                this.filter_data = {
                    'required': [],
                    'include': [],
                    'exclude': [],
                }
                multi_checkboxes = $(".tag-filter", '#' + this.html_id)
                for (m=0; m<multi_checkboxes.length; m++){
              //      id = parseInt($(multi_checkboxes[m]).attr("data-value"))

                    id = decodeURI($(multi_checkboxes[m]).attr("data-value"))

                    if ($(multi_checkboxes[m]).hasClass('option-3')) {
                        this.filter_data.required.push(id)
                    } else if ($(multi_checkboxes[m]).hasClass('option-2')) {
                        this.filter_data.include.push(id)
                    } else if ($(multi_checkboxes[m]).hasClass('option-4')) {
                        this.filter_data.exclude.push(id)
                    }
                }
               if (this.filter_data.required.length === 0 && this.filter_data.include.length === 0 && this.filter_data.exclude.length === 0) {
                   this.set_status_class('all')
                } else{
                   this.set_status_class('')
                }
                if (refresh) this.pTable.table.api().draw();
            }

            this.refresh= function () {
                this_filter = this
                $(".badge", '#' + this.html_id).each(function () {
                    key = $(this).attr("data-value")
                    this_filter.set_badge(this, key)
                })
            }

            this.filter= function (data) {
                notfound = true
                for (req = 0; req < this.filter_data.required.length; req++) {
                    if (data[this.column_no].indexOf(this.filter_data.required[req]) < 0) {
                        return false
                    }
                    notfound = false
                }
                for (ex = 0; ex < this.filter_data.exclude.length; ex++) {
                    if (data[this.column_no].indexOf(this.filter_data.exclude[ex]) >= 0) {
                        return false
                    }
                }
                if (this.filter_data.include.length == 0) {
                    return true
                }
                for (itag = 0; itag < data[this.column_no].length; itag++) {
                    if (data[this.column_no][itag] < 0x10000) {
                        curtag = data[this.column_no][itag]
                        if (this.filter_data.include.indexOf(curtag) >= 0) {
                            notfound = false
                        }
                    }
                }
                if (notfound === true) return false
                return true
            }

            this.html= function () {
                console.log('filrt')
                tagsection = `  <div class="filter-header" id="tagsec-%3-%1" data-target="#collapsesect%3_%4">
                            <li class="list-group-item list-group-item-secondary p-1 my-1">%1
                                <span id="chbadge-%3-%4" class="small badge badge-pill badge-primary mx-1">%2</span>
                            </li>
                            </div>
                            <div id="collapsesect%3_%4" class="collapse">`

                endsection = `</div>`
                html = ""
                insection = false
                lookup = this.pTable.initsetup.colOptions[this.column_no].lookup

                for (k in lookup) {
                    curlookup = lookup[k]
                    html_source = this.options.tagcheckbox
                    textoptions =
                        {
                            1: curlookup,
                            4: encodeURI(curlookup),
                            5: curlookup.replace(/\W/g, '')
                        }
                    html += rep_options(html_source, textoptions)
                }
                if (insection) html += endsection
                let context = $('#' + this.html_id)
                $('.filter-content', context).html(html)
                $(".all-clear", context).click(this.this_fn('clearall'))
                $(".tag-filter", context).click(this.this_fn('change_multi_input'))
                this.restore_state()
                this.buildfilter(true)
            }

            this.clearall = function () {
                $(".tag-filter", '#' + this.html_id).each(function () {
                    $(this).removeClass("option-2 option-3 option-4");
                    $(this).addClass("option-1");
                }).promise().done(this.this_fn('buildfilter',true));
            }

            this.change_multi_input = function (dummy, checkbox) {
                options = ['option-1', 'option-2', 'option-3', 'option-4']
                option_class = checkbox.className.match(/option-\d+/)[0];
                $(checkbox).removeClass(option_class);
                next_option = options[(options.indexOf(option_class) + 1) % 4]
                $(checkbox).addClass(next_option);
                this.buildfilter(true)
            }
        }
        filter.prototype = Object.create(django_datatables.FilterBase.prototype);
    </script>

{% endblock %}

    {% block remove_registration %}
        options = {
            tagcheckbox : `{% include 'datatables/filter_rows/checkbox_tag.html' %}`
        }
        var new_filter = new filter({{ column_no }}, '{{ html_id }}', options)
        django_datatables.add_filter('{{ table.table_id }}', new_filter)
    {% endblock %}