{{ Html::script('/js/jquery.contextMenu.min.js') }}
{{ Html::script('/js/jquery.ui.position.js') }}
@include('shared_script._status_alert_notification_script')

<script>
    var menu_elements = [];
    var hidden_columns = [];
    var check_icon = '{{ \App\Search\Grid_Column_Set::CHECK_MARK }}';
    var user_pref_path = '{{ $column_set->get_show_hide_pref_name() }}';
    var hidden_column_class = 'hidden-column';

    $(document).ready(function () {
        // build the list of elements on the column set
        @foreach($column_set->columns as $column)
            @if ($column->can_toggle)
                var element = {};
                element.col_class = '{{ $column->get_col_class() }}';
                element.field_name = '{{ $column->get_field_name() }}'
                element.name = "{{ $column->get_title() }}";
                element.callback = function () {
                    var is_show = show_hide_column('{{ $column->get_col_class() }}');
                    save_user_pref();
                };
                @if (!$column->can_see)
                show_hide_column('{{ $column->get_col_class() }}');
                element.icon = "";
                @else
                    element.icon = check_icon;
                @endif
                menu_elements.push(element);
            @endif
        @endforeach

        $.contextMenu({
            // define which elements trigger this menu
            selector: ".source-data-table-show-hide th",
            zIndex: function ($trigger, opt) {
                return 120;
            },
            // this callback is executed every time the menu is to be shown
            build: function ($trigger, e) {
                var items = [];
                var arrayLength = menu_elements.length;
                for (var i = 0; i < menu_elements.length; i++) {
                    var element = menu_elements[i];
                    items.push(element);
                }
                return {
                    items: items
                };
            }
        });
    });

    function show_hide_columns() {
        // update the corresponding item in menu_elements
        for (var i = 0; i < menu_elements.length; i++) {
            if (menu_elements[i].icon === "")
                $(menu_elements[i].col_class).addClass(hidden_column_class);
        }
    }

    function show_hide_column(col_class) {
        var result;
        if (hidden_columns.indexOf(col_class) === -1) {
            $(col_class).addClass(hidden_column_class);
            hidden_columns.push(col_class);
            result = false;
        } else {
            $(col_class).removeClass(hidden_column_class);
            hidden_columns = hidden_columns.filter(function (value, index, arr) {
                return value !== col_class;
            });
            result = true;
        }
        // update the corresponding item in menu_elements
        for (var i = 0; i < menu_elements.length; i++) {
            if (menu_elements[i].col_class === col_class) {
                menu_elements[i].icon = (result ? check_icon : "");
                break;
            }
        }
    }

    function save_user_pref() {
        var data = JSON.stringify(menu_elements);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '{{ action('UserPrefPathController@save_user_path_pref') }}',
            data: {menu_elements: data, path: user_pref_path},
            success: function (response) {
                if (response.error = false) {
                    status_alert(false, response.message, 10000);
                }
            },
            error: function (result) {
            }
        });
    }
</script>