@if(isset($is_multi) && $is_multi)
    {!! Html::script('/js/multiple-select.js') !!}
@endif
@if(isset($date_filter_column_name))
    {{ Html::script('/js/moment.min.js') }}
    {{ Html::script('/js/daterangepicker.js') }}
@endif
@if($column_set->can_show_hide_columns())
    @include('shared_script._grid_columns_script')
@endif
@include('shared_script._status_alert_notification_script')

<script>
    var page = {{ isset($page) ? (int) $page : 1 }};
    var paginating = false;
    var more_data = true;
    $(document).ready(function() {
        @if(isset($is_multi) && $is_multi)
        $('.{{ \App\Providers\FormComponentServiceProvider::MULTI_SELECT }}').multipleSelect({
            onClick: function (view) {
                do_grid_search(used_column, false);
            },
        });
        @endif
        @if(isset($date_filter_column_name))
        init_daterangepicker('date_filter');
        $('#date_filter').val('{{ $column_set->get_filter_value($date_filter_column_name) }}');
        @endif
        var current_search_column = '';
        @if($column_set->current_search_column)
        current_search_column = '{{ $column_set->current_search_column[0] }}';
        @endif
        format_sorting(current_search_column);
        var resource = $('input[name=resource]').val();
        if (resource === undefined)
        {
            alert("Search script used improperly.  Missing search._complex_search_parameter");        }
    });
    var used_column;
    @if($column_set->current_search_column)
        var sort_dirs = {'{{ $column_set->current_search_column[0] }}': '{{ $column_set->current_search_column[1] }}'};
        used_column = '{{ $column_set->current_search_column[0] }}';
    @else
        var sort_dirs = {}; // holds the sort column and direction
    @endif

    function format_sorting(current_search_column) {
        $('th.sorts-by').append("<span class='glyphicon glyphicon-sort'></span>");
        if (current_search_column != '')
            do_sort_style(current_search_column);
    }

    function switch_grid(query_name, column_set_name) {
        var force_reload = false;
        var the_input = $('input[name=resource]');
        if (the_input.val() != query_name)
        {
            the_input.val(query_name);
            force_reload = true;
        }
        the_input = $('input[name=column_resource]');
        if (the_input.val() != column_set_name)
        {
            the_input.val(column_set_name);
            force_reload = true;
        }
        if (force_reload)
            force_grid_load();
    }

    function force_grid_load() {
        // reset these so when we try and paginate again, it will start at the beginning
        more_data = true;
        page = 1;
        do_grid_search(used_column, false);
    }

    function validate_date_range(date_range_control) {
        var date_range_value = date_range_control.value.trim();
        var start_date = date_range_value;
        var end_date = null;
        var dash_pos = start_date.search('-');
        if (dash_pos > -1) {
            end_date = start_date.substr(dash_pos + 1).trim();
            start_date = start_date.substr(0, dash_pos).trim();
        }
        var result = '';
        var dates = [start_date, end_date];
        for (var i = 0; i < dates.length; i++) {
            var date = dates[i];
            if (date) {
                try
                {
                    var formatted_date = is_valid_date(date);
                    if (!formatted_date)
                        return false;
                    if (result)
                        result += ' - ';
                    result += formatted_date;
                }
                catch (e) {
                    return false;
                }
            }
        }
        // it's possible that 11/011/2019 passed validation because Date knows how to parse that.  But carbon does not
        // and that will make this query fail.  Update the value so that doesn't happen
        if (result != date_range_value)
            date_range_control.value = result;
        return true;
    }

    function remove_dusk_search_attribute() {
        $('tbody').removeAttr('dusk');
    }

    // do_grid_search can be invoked from onchange events on filter select dropdowns
    // e.g. clicking on a column reverses it, applying a filter of hitting the search box does not
    var do_grid_search = function(column, reverse_previous_sort, clear_filters) {
        if (typeof(sort_dirs[column]) === 'undefined') sort_dirs[column] = true;
        else sort_dirs[column] = reverse_previous_sort
            ? !sort_dirs[column]
            : sort_dirs[column];

        // currently all the date range controls have the id of date_range_filter. We'll need to tweak this if
        // we need more than one range on a form.  see _grid_search_filter, line 16 for id assignment
        var date_range_control = document.getElementById('date_range_filter');
        if (date_range_control) {
            if (!validate_date_range(date_range_control)) {
                date_range_control = $('#date_range_filter');
                add_validation_error(date_range_control, 'date_range_filter', ['Please choose a valid date range']);
                return false;
            }
        }

        // remove dusk search result attribute before making ajax call
        remove_dusk_search_attribute();

        var direction = sort_dirs[column];
        used_column = column;
        $.ajax({
            dataType: 'json',
            url: '{{ action('SearchGridController@search', ['render' => true]) }}',
            type: 'post',
            data: {
                string: $('input[name=search]').val(),
                resource: $('input[name=resource]').val(),
                column_resource: $('input[name=column_resource]').val(),
                business: $('input[name=business]').val(),
                scope: $('input[name=scope]').val(),
                category: $('#category').val(),
                content_library_status: $('#content_library_status').val(),
                use_parameter : $('input[name=use_parameter]').val(),
                search_parameter : $('form#search_form').serialize(),
                sort_column : used_column,
                sort_direction : direction ? 1 : 0,
                clear_filters: clear_filters ? 1 : null
            }
        })
        .done(function(response) {
            $('#totals_footer').remove(); // removes the totals footer if it exists
            response.clear_filters = clear_filters;
            var handle = document.getElementById('grid_header');
            handle.outerHTML = response.grid_header;
            format_sorting(used_column);
            handle = document.getElementById('grid_body');
            handle.outerHTML = response.grid_body;
            $('#sort_column').val(used_column);
            $('#sort_direction').val(direction ? "desc" : "asc");
            var fn = window['do_after_grid_load'];
            if (fn != undefined) {
                fn(response);
            }
            var subtitlefn = window['update_date_subtitle'];
            if (subtitlefn != undefined) {
                subtitlefn(response);
            }
            @if($column_set->can_show_hide_columns())
            show_hide_columns();
            @endif
        });
    };

    @if(isset($date_filter_column_name))
    function after_apply_daterangepicker_date() {
        do_grid_search(used_column, false);
    }
    @endif

    // hitting the clear filters button on a grid now actually clears the cached filters log from the database
    // as opposed to just clearing out the form but leaving the saved preference
    function clear_filters() {
        var user_pref_path = encodeURIComponent(window.location.pathname);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '{{ action('UserPrefPathController@clear_user_path_pref') }}',
            data: { path: user_pref_path },
			success: function(response) {
				status_alert(true, response.message, 3000);
				$('form#search_form .bt-input').not('#search_column, #search_operator').val('');
				do_grid_search(used_column, false, true);

                // check existence of reset subtitle function
                var subtitlefn = window['reset_date_subtitle'];
                if (subtitlefn != undefined) {
                    subtitlefn();
                }
			},
			error: function(err) {
				console.log(err);
			}
        });
    }

    function sort_column(column) {
        do_grid_search(column, true);
        do_sort_style(column);
    }

    function do_sort_style(column) {
        var active_sort_th_string = "th[data-column="+column+"]";
        var active_sort_th = $(active_sort_th_string);
        var other_th = $("th.sorts-by").not(active_sort_th_string);
        // remove all glyphicons relating to sorting.
        $('span.glyphicon-sort-by-attributes.glyphicon').remove();
        $('span.glyphicon-sort-by-attributes-alt.glyphicon').remove();
        $('span.glyphicon-sort.glyphicon').remove();
        // add the appropriate glyphicon for sorting to the current sort header column
        sort_dirs[column]
            ? active_sort_th.append("<span class='glyphicon glyphicon-sort-by-attributes'></span>")
            : active_sort_th.append("<span class='glyphicon glyphicon-sort-by-attributes-alt'></span>");
        // attach the generic glyphicon to the other th elements
        other_th.append("<span class='glyphicon glyphicon-sort'></span>");
    }
    var do_pagination = function(page) {
		var column_resource = $('input[name=column_resource]').val();
        $.ajax({
            dataType: 'json',
            url: '{{ action('SearchGridController@paginate') }}',
            type: 'post',
            data: {
                string: $('input[name=search]').val(),
                resource: $('input[name=resource]').val(),
                column_resource: column_resource,
                business: $('input[name=business]').val(),
                scope: $('input[name=scope]').val(),
                category: $('#category').val(),
                content_library_status: $('#content_library_status').val(),
                use_parameter : $('input[name=use_parameter]').val(),
                search_parameter : $('form#search_form').serialize(),
                sort_column : used_column,
                sort_direction : sort_dirs[used_column] ? 1 : 0,
                page: page
            }
        }).success(function(response) {
			var gridBody = $(response.grid_body);
			// add hidden column classes to injected rows; only on ticket column sets
			if (column_resource == 'App\\Search\\Ticket_Column_Set') {
				gridBody.children('td').each(function() {
					var td = $(this);
					hidden_columns.forEach(function(col){
						var className = col.substr(1);
						if (td.hasClass(className)) {
							td.addClass('hidden-column');
						}
					});
				});
			}
			$('tbody#grid_body').append(gridBody);
            paginating = false;
            more_data = response.more_data;
            if (more_data) {
                console.log('more data available');
            } else {
                console.log('no more data available');
            }
            console.log('done paginating');
        });
    };
    (function() {
        $(document).ready(function() {
            $('form#search_form').submit( function(e) {
                e.preventDefault();
                do_grid_search(used_column, false);
            });
        });
        window.onscroll = function(e) {
			var scrollPosition = window.innerHeight + window.scrollY;
			var scrollHeight = document.body.scrollHeight;
            if (scrollPosition >= scrollHeight && !paginating && more_data) {
                page++;
                paginating = true;
                console.log('paginating...');
                do_pagination(page);
            }
			// if more_data==false and scrollPosition is 500px less than scrollHeight, assume user has scrolled back up and reset the value of more_data
			if (!more_data && (scrollPosition <= (scrollHeight - 500))) {
				more_data = true;
			}
        }
    })();
</script>