<div id="filter" class="tab-pane">
    <div class="form-group">
        <div class="h3 header-title">{{ text_default_filter_settings }}</div>
        <p>
            {{ text_default_setting }}
        </p>
        <a href="{{ filter_href }}" class="btn btn-success">{{ button_edit_default }}</a>
    </div>
    <div class="form-group">
        <div class="h3 header-title">{{ text_filter_setting }}</div>
        <p>
            {{ text_filter_default }}
        </p>
        <div>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-success {{ filter_default.status == 'default' ? 'active' }}">
                    <input type="radio" name="module_setting[filter_default][status]" value="default" {{ filter_default.status == 'default' ? 'checked="checked"' }}/>
                    {{ text_global }}
                </label>
                <label class="btn btn-success {{ filter_default.status == '1' ? 'active' }}">
                    <input type="radio" name="module_setting[filter_default][status]" value="1" {{ filter_default.status == '1' ? 'checked="checked"' }} />
                    {{ text_on }}
                </label>
                <label class="btn btn-success {{ filter_default.status == 'default' ? '0' }}">
                    <input type="radio" name="module_setting[filter_default][status]" value="0" {{ filter_default.status == '0' ? 'checked="checked"' }} />
                    {{ text_off }}
                </label>
            </div>
            <div class="container-fluid" id="filter-default-setting" {{ filter_default.status in ['default', '0'] ? 'style="display:none;"' }}>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-sm-2">{{ entry_type }}</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="module_setting[filter_default][type]">
                                    {% for base_type_key, base_type_title in base_types %}
                                        {% if base_type_key in default.allowed_types %}
                                            {% if base_type_key == filter_default.type %}
                                                <option value="{{ base_type_key }}" selected="selected">{{ base_type_title }}</option>
                                            {% else %}
                                                <option value="{{ base_type_key }}">{{ base_type_title }}</option>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">{{ entry_collapse }}</label>
                            <div class="col-sm-10">
                                <input type="hidden" name="module_setting[filter_default][collapse]" value="0" />
                                <input type="checkbox" class="form-control switcher" data-label-text="{{ text_enabled }}" value="1"  name="module_setting[filter_default][collapse]" {{ filter_default.collapse ? 'checked="checked"' }}/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-sm-2">{{ entry_sort_order_values }}</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="module_setting[filter_default][sort_order_values]">
                                    {% for sort_order_type_key, sort_order_type_title in sort_order_types %}
                                        {% if sort_order_type_key == filter_default.sort_order_values %}
                                            <option value="{{ sort_order_type_key }}" selected="selected">{{ sort_order_type_title }}</option>
                                        {% else %}
                                            <option value="{{ sort_order_type_key }}">{{ sort_order_type_title }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="h3 header-title">{{ text_individual_setting }}</div>
        <p>
            {{ text_warning_filter_individual }}
        </p>
        <div>
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" name="select_filter_name"/>
                        <input type="hidden" name="select_filter_group_id"/>
                        <span class="input-group-btn">
                            <a id="add-filter" class="btn btn-default"><i class="fa fa-plus"></i></a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <br/>
        <table class="table table-filter-select {{ filters is empty ? 'hide' }}">
            <thead>
                <tr>
                    <td></td>
                    <td class="text-center">{{ column_status }}</td>
                    <td class="text-center">{{ column_type }}</td>
                    <td class="text-center">{{ column_collapse }}</td>
                    <td class="text-center">{{ column_sort_order_values }}</td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                {% if filters %}
                    {% for filter_group_id, filter in filters %}
                        <tr id="element-filters-{{ filter_group_id }}" data-sort-order="{{ filter.sort_order }}">
                            <td style="max-width: 175px;">{{ filter.name }}</td>
                            <td class="text-center {{ filter.status in ['default', '0'] ? 'disable-next' }}">
                                <input type="hidden" name="module_setting[filters][{{ filter_group_id }}][sort_order]"  class="sort-value" value="{{ filter.sort_order }}"/>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-success btn-sm {{ filter.status == 'default' ? 'active' }}">
                                        <input type="radio" name="module_setting[filters][{{ filter_group_id }}][status]" value="default" {{ filter.status == 'default'? 'checked="checked"' }}/>
                                        {{ text_default }}
                                    </label>
                                    <label class="btn btn-success btn-sm {{ filter.status == '1'? 'active' }}">
                                        <input type="radio" name="module_setting[filters][{{ filter_group_id }}][status]" value="1" {{ filter.status == '1'? 'checked="checked"' }}/>
                                        {{ text_yes }}
                                    </label>
                                    <label class="btn btn-success btn-sm {{ filter.status == '0'? 'active' }}">
                                        <input type="radio" name="module_setting[filters][{{ filter_group_id }}][status]" value="0" {{ filter.status == '0'? 'checked="checked"' }}/>
                                        {{ text_no }}
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <select class="form-control" name="module_setting[filters][{{ filter_group_id }}][type]">
                                    {% for base_type_key, base_type_title in base_types %}
                                        {% if base_type_key in default.allowed_types %}
                                            {% if base_type_key == filter.type %}
                                                <option value="{{ base_type_key }}" selected="selected">{{ base_type_title }}</option>
                                            {% else %}
                                                <option value="{{ base_type_key }}">{{ base_type_title }}</option>
                                            {% endif %}
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </td>
                            <td class="text-center">
                                <input type="hidden" name="module_setting[filters][{{ filter_group_id }}][collapse]" value="0" />
                                <input type="checkbox" class="form-control switcher" data-label-text="{{ text_enabled }}" value="1"  name="module_setting[filters][{{ filter_group_id }}][collapse]" {{ filter.collapse ? 'checked="checked"' }}/>
                            </td>
                            <td class="text-center">
                                <select class="form-control" name="module_setting[filters][{{ filter_group_id }}][sort_order_values]">
                                    {% for sort_order_type_key, sort_order_type_title in sort_order_types %}
                                        {% if sort_order_type_key == filter.sort_order_values %}
                                            <option value="{{ sort_order_type_key }}" selected="selected">{{ sort_order_type_title }}</option>
                                        {% else %}
                                            <option value="{{ sort_order_type_key }}">{{ sort_order_type_title }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </td>
                            <td><a class="delete-element-button" onclick="$(this).closest('tr').remove()"><i class="fa fa-times" aria-hidden="true"></i></a></td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
    <script>
        $(document).ready(function(){
            $(document).on('change', '[name=\'module_setting[filter_default][status]\']', function(e){
                if($(this).val() != '1'){
                    $('#filter-default-setting').slideUp();
                }
                else{
                    $('#filter-default-setting').slideDown();
                }
            });
            $(document).on('click', '#add-filter', function(){
                var filter_group_id = $('input[name="select_filter_group_id"]').val();
                var filter_name = $('input[name="select_filter_name"]').val();
                if(filter_group_id !== ''){
                    $('.table-filter-select').removeClass('hide');
                    d_ajax_filter.addElement(filter_group_id, filter_name, 'filters', '.table-filter-select > tbody', 'tr', {{ default|json_encode }}, {{ base_types|json_encode }});
                    d_ajax_filter.updateSortOrder('table.table-filter-select > tbody','tr');
                    $(".switcher").bootstrapSwitch({
                        'onColor': 'success',
                        'onText': '{{ text_yes }}',
                        'offText': '{{ text_no }}',
                    });
                }
            });
            $('[name="select_filter_name"]').autocomplete({
                'source': function(request, response) {
                    $.ajax({
                        url: 'index.php?route=extension/d_ajax_filter/filter/autocomplete&{{ token }}&filter_name=' +  encodeURIComponent(request),
                        dataType: 'json',
                        success: function(json) {
                            response($.map(json, function(item) {
                                return {
                                    label: item['name'],
                                    value: item['filter_group_id']
                                }
                            }));
                        }
                    });
                },
                'select': function(item) {
                    $('input[name=\'select_filter_name\']').val(item['label']);
                    $('input[name=\'select_filter_group_id\']').val(item['value']);
                }
            });
            d_ajax_filter.createSortable('table.table-filter-select > tbody','tr');
        });
    </script>
</div>