{% load ajax_helpers %}
{% lib_include 'query_builder' module='advanced_report_builder.includes' %}

<div id="div_{{ field.auto_id }}" class="form-group row">

    <div class="form-group"><label class="control-label col-12 col-form-label-sm">{{ field.label }}</label>
    </div>
    <div id="{{ field.auto_id }}_builder" class="col-12"></div>
    <input type="hidden" name="{{ field.name }}" id="{{ field.auto_id }}" value="{% if field.value %}{{ field.value }}{% endif %}">

    <script>


(function( {{ field.auto_id }}, $, undefined ) {
            let query_builder_id = '#{{ field.auto_id }}_builder';
            let query_builder = $(query_builder_id);
            let field_id = '#{{ field.auto_id }}';

            function set_select2() {
                setTimeout(function () {
                    $(query_builder_id + ' .rule-value-container select').css('width', '275px');
                    $(query_builder_id + ' select').select2({theme: "bootstrap4",
                    dropdownParent: $("#div_{{ field.auto_id }}")});

                }, 100)
            }

            ajax_helpers.command_functions.query_builder_{{ field.auto_id }} = function (command) {
                let rules = $(field_id).val();
                let filters = jQuery.parseJSON(command.data);

                if (rules !== '') {
                    $(field_id).val('');
                    query_builder.queryBuilder({
                        allow_empty: true,
                        filters: filters,
                        rules: JSON.parse(rules)
                    });
                } else {
                    query_builder.queryBuilder({
                        allow_empty: true,
                        filters: filters,
                    });
                }
                set_select2();

                query_builder.on('afterCreateRuleInput.queryBuilder', function (e, rule) {
                    set_select2();
                    if (rule.filter.plugin === 'datetimepicker') {
                        let $input = rule.$el.find('.rule-value-container [name*=_value_]');
                        $input.on('dp.change', function () {
                            $input.trigger('change');
                        });
                    }
                });

                query_builder.on("afterAddRule.queryBuilder", function (event, group) {
                   set_select2();
                });

            }

            function initialise_query_builder(report_type_id) {
                query_builder.queryBuilder('destroy');
                django_modal.send_inputs({'ajax': 'get_query_builder_fields', 'field_auto_id': '{{ field.auto_id }}'})
            }

            $(document).ready(function () {
                initialise_query_builder();
            });

            $('#id_report_type').on('change', function (e) {
                 initialise_query_builder($('#id_report_type').val());
            });

            {{ field.auto_id }}.save_query_builder = function () {
                let results = query_builder.queryBuilder('getRules', {skip_empty: true});
                $(field_id).val(JSON.stringify(results, null, 2));
                return results;
            }

}( window.{{ field.auto_id }} = window.{{ field.auto_id }} || {}, jQuery ));


    ajax_helpers.command_functions.save_query_builder_{{ field.auto_id }} = function (command) {
        {{ field.auto_id }}.save_query_builder();
    };

    </script>
</div>