Vue.component('grid', {
    computed: {
        gridRows: function() {
            var lefts = $(this.markup).find('div.slick-pane-left:not(.slick-pane-header)').not('[style*="display: none"]').find('div.slick-row').get();
            var rights = $(this.markup).find('div.slick-pane-right:not(.slick-pane-header)').not('[style*="display: none"]').find('div.slick-row').get();
            var rows = [];
            do {
                var row = [];
                row.push(lefts.shift());
                row.push(rights.shift());
                rows.push(row);
            } while (lefts.length);
            return rows;
        },
        headersArray: function() {
            return $(this.markup).find('div.slick-header-columns div[role="columnheader"] > span:not(.slick-sort-indicator)');
        }
    },
    created: function() {
        var $this = this;
        this.headersArray.each(function(index, header) {
            $this.headers.push($(header).text().trim());
        });

        $.each(this.gridRows, function(rowIndex, row) {
            var columns = [];

            $this.gridColumns(row).each(function(colIndex, column) {
                if ($this.table.length == 0) {
                    $this.columnOrder.push(colIndex);
                }
                columns.push($this.gridColumnData(column));
            });

            $this.table.push(columns);
            $this.originalTable.push(columns);
        });
    },
    data: function() {
        return {
            columnOrder: [],
            headers: [],
            hidden: [],
            originalTable: [],
            sortColumn: {
                index : -1,
                direction: -1
            },
            table: []
        }
    },
    methods: {
        getSortIcon: function(index) {
            if (index != this.sortColumn.index) {
                return 'fa-sort grayed-out';
            }

            return this.sortColumn.direction == 1 ? 'fa-sort-amount-asc' : 'fa-sort-amount-desc';
        },
        gridColumnData: function(gridColumn) {
            var child = $(gridColumn).find(':first');
            if ($(child).hasClass('ui-text')) {
                return $(child).find('span')
                        ? $(child).text().trim()
                        : $(child).attr('title');
            }

            if ($(child).hasClass('ui-checkbox')) {
                return '<i class="fa fa-' +
                        ($(child).find('button').attr('aria-checked') == 'true' ? 'check-square' : 'square-o')
                        + '"></i>';
            }

            if ($(child).hasClass('editor-text')) {
                return $(child).val();
            }

            if ($(child).hasClass('ui-buttoninput')) {
                return $(child).find('input:first-child').val();
            }

            if ($(child).hasClass('ui-combobox')) {
                return $(child).find('select option[value="' + $(child).find('input').val() + '"]').text().trim();
            }

            return '';
        },
        gridColumns: function(gridRow) {
            return $(gridRow).find('div[role="gridcell"]');
        },
        isHidden: function(index) {
            return this.hidden.indexOf(index) != -1;
        },
        moveColumn: function(index, direction) {
            var curr = this.columnOrder.indexOf(index);
            this.$set(this.columnOrder, curr, this.columnOrder[curr + direction]);
            this.$set(this.columnOrder, curr + direction, index);
        },
        sortRows: function() {
            var $this = this;
            this.table = this.table.sort(function(a, b) {
                var index = $this.sortColumn.index;

                var x = a;
                var y = b;

                if ($this.sortColumn.direction == 2) {
                    x = b;
                    y = a;
                }

                if (x[index] > y[index]) {
                    return 1;
                }

                if (x[index] < y[index]) {
                    return -1;
                }

                return 0;
            });
        },
        toggleHidden: function(index) {
            if (this.isHidden(index)) {
                this.hidden.splice(this.hidden.indexOf(index), 1);
            } else {
                this.hidden.push(index);
            }
        },
        toggleSortColumn: function(index) {
            if (this.sortColumn.index != index) {
                this.sortColumn.index = index;
                this.sortColumn.direction = 1;
                this.sortRows();
            } else if (this.sortColumn.direction == 1) {
                this.sortColumn.direction = 2;
                this.sortRows();
            } else {
                this.sortColumn.index = -1;
                this.sortColumn.direction = -1;
                this.table = this.originalTable.slice(0);
            }
        },
        $: $
    },
    props: ['markup'],
    template: "<div>\n    <h4 v-if=\"columnOrder.length > 14\" class=\"no-print\">\n        <i class=\"fa fa-info-circle text-info\"><\/i>\n        <span v-if=\"columnOrder.length < 17\">\n            The grid below has {{ columnOrder.length }} columns. You might consider hiding some columns, printing this in landscape mode, or using the Scale feature.\n        <\/span>\n        <span v-else>\n            The grid below has {{ columnOrder.length }} columns. You might consider hiding some columns or using the Scale feature when printing.\n        <\/span>\n    <\/h4>\n    <table class=\"table table-bordered table-striped\">\n        <thead>\n            <tr>\n                <th v-for=\"(columnIndex, index) in columnOrder\" class=\"grid-header\" :class=\"isHidden(columnIndex) ? 'grayed-out' : ''\">\n                    {{ headers[columnIndex] }}\n                    <div>\n                        <i v-if=\"index\" class=\"action fa fa-arrow-left pull-left\" @click=\"moveColumn(columnIndex, -1)\" title=\"Move Column Left\"><\/i>\n                        <i v-if=\"table.length > 2\" class=\"action fa\" :class=\"getSortIcon(columnIndex)\" @click=\"toggleSortColumn(columnIndex)\" title=\"Change Column Sort\"><\/i>\n                        <i class=\"action fa fa-print\" :class=\"[isHidden(columnIndex) ? '' : 'text-success']\" @click=\"toggleHidden(columnIndex)\" title=\"Toggle Column Printing\"><\/i>\n                        <i v-if=\"index != columnOrder.length -1\" class=\"action fa fa-arrow-right pull-right\" @click=\"moveColumn(columnIndex, 1)\" title=\"Move Column Right\"><\/i>\n                    <\/div>\n                <\/th>\n            <\/tr>\n        <\/thead>\n        <tbody>\n            <tr v-for=\"row in table\">\n                <td v-for=\"columnIndex in columnOrder\" v-html=\"row[columnIndex]\" :class=\"isHidden(columnIndex) ? 'grayed-out' : ''\"><\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n<\/div>"
});

        Vue.component('presentation', {
    computed: {
        hasLegend: function() {
            return $(this.markup).closest('fieldset').length > 0;
        },
        legend: function() {
            return $(this.markup).closest('fieldset').find('legend').text().trim();
        },
        rows: function() {
            return $(this.markup).find('tr');
        }
    },
    created: function() {
        var $this = this;
        this.rows.each(function(index, row) {
            var actualRow = [];
            $this.columns(row).each(function(index, column) {
                var actualColumn = '';

                switch (true) {
                    case $this.isHidden(column):
                        break;

                    case $this.isSimple(column):
                        actualColumn = $this.getText(column);
                        break;

                    case $this.isGroup(column):
                        actualColumn = '<b>' + $this.getGroupLabel(column) + '</b>: ' + $this.getOptionList(column);
                        break;

                    case $this.isComplex(column):
                        var that = $this;
                        var added = [];
                        $this.complex(column).each(function(index, complexity) {
                            var label = that.getNonEmptyLabel(complexity);
                            if (added.indexOf(label) == -1) {
                                actualColumn += label + ' <span style="padding-right: 15px">' + that.getData(column, $(complexity)) + '</span>';
                                added.push(label);
                            }
                        });
                        break;

                    case $this.isLabeled(column):
                        actualColumn = $this.getLabel(column) + ' ' + $this.getData(column, $this.getLabelEl(column)) + ' ' + $this.getDescriptor(column);
                        break;

                    case $this.isTextField(column):
                        actualColumn = '<b>' + $(column).find('label').text().trim() + '</b>: ' + $(column).find('span').text().trim();
                        break;
                }

                actualRow.push(actualColumn);
            });
            $this.table.push(actualRow);
        });

        var maxColumns = 0;
        $.each(this.table, function(index, row) {
            maxColumns = Math.max(maxColumns, row.length);
        });

        $.each(this.table, function(index, row) {
            while (row.length < maxColumns) {
                $this.table[index].push('');
            }
        });
    },
    data: function() {
        return {
            hidden: false,
            table: []
        }
    },
    methods: {
        columnHasData: function(index) {
            var hasData = false;

            $.each(this.table, function(rowIndex, row) {
                $.each(row, function (columnIndex, column) {
                    if (columnIndex == index && column.length) {
                        hasData = true;
                    }
                });
            });

            return hasData;
        },
        columns: function(row) {
            return $(row).find('td');
        },
        complex: function(column) {
            return this.getLabelEl(column);
        },
        getData: function(column, label) {
            if (label.length == 0) {
                return '';
            }

            var data = $(column).find('input[name="' + label.attr('for').substr(1) + '"]').attr('title');
            if (data) {
                return data;
            }

            data = $(column).find('input[id="' + label.attr('for') + '"]').attr('title');
            if (data) {
                return data;
            }

            if (label.attr('for').match(/_btn$/)) {
                return '<i class="fa fa-' +
                        ($(column).find('button').attr('aria-checked') == 'true' ? 'check-square' : 'square-o')
                        + '"></i>';
            }

            return '';
        },
        getDescriptor: function(column) {
            var descriptor = $(column).find('div[data-widget="textfield"]');
            return descriptor.length
                    ? '<span style="padding-left: 15px">' + $(descriptor).find('span').text().trim() + '</span>'
                    : '';
        },
        getGroupLabel: function(column) {
            return $(column).find('div[data-widget="component"] > label:first-child').text().trim();
        },
        getLabel: function(column) {
            return this.getNonEmptyLabel(this.getLabelEl(column));
        },
        getLabelEl: function(column) {
            return $(column).find('label[for]');
        },
        getNonEmptyLabel: function(label) {
            label = $(label).text().trim();
            return label
                    ? '<b>' + label + '</b>:'
                    : '';
        },
        getOptionList: function(column) {
            var options = this.options(column);
            var list = [];

            options.each(function(index, option) {
                list.push(
                        '<span style="padding-right: 5px"><i class="fa fa-circle' + ($(option).find('button').attr('aria-checked') == 'true' ? '' : '-o') + '"></i> '
                        + $(option).find('label').text().trim()
                        + '</span>');
            });

            return list.join(' ');
        },
        getText: function(column) {
            return $(column).find('div[data-widget="text"]').text().trim();
        },
        isComplex: function(column) {
            return this.getLabelEl(column).length > 1;
        },
        isGroup: function(column) {
            return $(column).find('div[data-widget="radiogroup"]').length > 0;
        },
        isHidden: function(column) {
            return $(column).find('div[style*="display: none"]').length > 0;
        },
        isLabeled: function(column) {
            return this.getLabelEl(column).length > 0;
        },
        isSimple: function(column) {
            return $(column).find('div[data-widget="text"]').length > 0;
        },
        isTextField: function(column) {
            return $(column).find('div[data-widget="textfield"]').length > 0;
        },
        options: function(column) {
            return $(column).find('div[data-widget="radiobox"]');
        },
        rowHasData: function(r) {
            return r.join('').length;
        },
        $: $
    },
    props: ['markup'],
    template: "<div class=\"panel panel-default avoid-break\" :class=\"hidden ? 'grayed-out' : ''\">\n    <div v-if=\"hasLegend\" class=\"panel-heading\">\n        <h3 class=\"panel-title\" :class=\"hidden ? 'grayed-out' : ''\">\n            {{ legend }}\n            <i class=\"fa fa-print text-success\" :class=\"hidden ? 'grayed-out' : ''\" @click=\"hidden = !hidden\" title=\"Toggle Panel Printing\"><\/i>\n        <\/h3>\n    <\/div>\n    <table class=\"table table-bordered avoid-break\">\n        <tbody>\n            <tr v-for=\"(row, rowIndex) in table\" v-if=\"rowHasData(row)\">\n                <td v-for=\"(column, columnIndex) in row\" v-if=\"columnHasData(columnIndex)\" v-html=\"column\"><\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n<\/div>\n"
});

        Vue.component('banner-printer', {
    created: function() {
        this.message = this.messageTemplate;
    },
    computed: {
        activities: function() {
            var activities = [];

            var pieces = $(this.footer).find('div[id^="activity"][style!="display: none;"]');
            
            pieces.each(function(index, piece) {
                if ($(piece).find('label').length && $(piece).find('span').length) {
                    activities.push(piece);
                }
            });

            return activities;
        },
        criteria: function() {
            var criteria = {};

            var pieces = $(this.doc).find('div.layout-row label').not('.empty');

            pieces.each(function(index, piece) {
                if ($(piece).parent().css('display') == 'none') {
                    return;
                }

                var value = '';

                var data = $(piece).closest('div[data-widget="component"]').find('span.ui-widget-content');
                if (!data.length) {
                    data = $(piece).closest('div[data-widget="datefield"]').find('span.ui-widget-content');
                }
                if (!data.length) {
                    data = $(piece).closest('div[data-widget="textinput"]').find('span.ui-widget-content');
                }
                if (!data.length) {
                    data = $(piece).closest('div[data-widget="combobox"]').find('span.ui-widget-content');
                }

                data.each(function(index, datum) {
                    value += ' ' + $(datum).text().trim();
                });

                if (!data.length) {
                    data = $(piece).closest('div[data-widget="component"]').find('div[data-widget="checkbox"] > button');
                    if (data.length) {
                        value = '<i class="fa fa-' +
                                ($(data).attr('aria-checked') == 'true' ? 'check-square' : 'square-o') +
                                '"></i>'
                    }
                }


                criteria[$(piece).text().trim()] = value;
            });

            return criteria;
        },
        messageTemplate: function() {
            return "ENTER DETAILS HERE\n(missing/wrong data, malformed tables, etc.)";
        },
        sections: function() {
            var sections = [];
            var pieces = $(this.doc).find('div[data-widget="collapsiblepanel"] h3.ui-collapsiblepanel-header');
            pieces.each(function(index, piece) {
                if ($(piece).closest('div.ui-tabs-hide').length == 0) {
                    sections.push(piece);
                }
            });

            pieces = $(this.doc).find('div[data-widget="accordion"] h3.ui-accordion-header');
            pieces.each(function(index, piece) {
                if ($(piece).closest('div.ui-tabs-hide').length == 0) {
                    sections.push(piece);
                }
            });

            return sections;
        }
    },
    data: function() {
        return {
            b9Form: this.title,
            buttonLabel: 'Report a problem',
            contact: '',
            doc: markup,
            error: '',
            footer: footer,
            message: '',
            success: ''
        };
    },
    methods: {
        done: function(response) {
            this.buttonLabel = 'Report a problem';
            if (response.error != undefined) {
                this.error = response.error;
            } else if (response.success != undefined) {
                this.success = response.success;
            } else {
                this.error = 'There was an error submitting the report. Please try again.';
            }
        },
        fail: function(response) {
            this.buttonLabel = 'Report a problem';
            if (response.error != undefined) {
                this.error = response.error;
            } else {
                this.error = 'There was an error submitting the report. Please try again.';
            }
        },
        grids: function(section) {
            return $(section).parent().find('div[data-widget="datagrid"]').get();
        },
        resetResult: function() {
            this.error = '';
            this.success = '';
        },
        reportProblem: function() {
            this.buttonLabel = 'Sending...';
            $.ajax({
                type: 'POST',
                url: 'https://banner9printer.apps.wayne.edu/report',
                data: {
                    b9Form: this.b9Form,
                    contact: this.contact,
                    message: this.message,
                    _token: 'pSTykxNI3g6g7U5nFr329csiGIXSy5heWVrtjBuP'
                }
            })
                    .done(this.done)
                    .fail(this.fail);
        },
        sectionTitle: function(section) {
            var titleDiv = $(section).find('div.ui-accordion-title');
            if (titleDiv.length) {
                return titleDiv.text().trim();
            }

            titleDiv = $(section).find('div.ui-collapsiblepanel-title');
            if (titleDiv.length) {
                return titleDiv.text().trim();
            }

            return $(section).text().trim();
        },
        tables: function(section) {
            return $(section).parent().find('table[role="presentation"]').filter(function(index, table) {
                return $(table).closest('div[style*="display: none"]').length == 0;
            }).get();
        },
        $ : $
    },
    props: ['stats', 'title'],
    template: "<div>\n    <div v-if=\"error || success\" class=\"alert no-print\" :class=\"error ? 'alert-danger' : 'alert-success'\" role=\"alert\" style=\"margin-top: 20px\">\n        <button type=\"button\" class=\"close\" aria-label=\"Close\" @click=\"resetResult()\">\n            <span aria-hidden=\"true\"><i class=\"fa fa-times-circle\"><\/i><\/span>\n        <\/button>\n        {{ error + success }}\n    <\/div>\n    <div class=\"pull-right no-print\">\n        <span v-if=\"stats\"><b>Print Counts<\/b> [This Form: {{ stats.form }}]<span v-if=\"stats.total != 'UNK'\"> [All Forms: {{ stats.total }}]<\/span><\/span>\n        <button class=\"btn btn-sm btn-primary\" data-toggle=\"modal\" data-target=\"#problem\">{{ buttonLabel }}<\/button>\n    <\/div>\n    <h4><b>{{ title }}<\/b><\/h4>\n    <ul class=\"list-unstyled clearfix\">\n        <li v-for=\"(value, criterion) in criteria\" class=\"pull-left\" style=\"padding-right: 15px;\">\n            <b v-html=\"criterion\"><\/b>: <span v-html=\"value\"><\/span>\n        <\/li>\n    <\/ul>\n    <fieldset v-for=\"section in sections\">\n        <legend>{{ sectionTitle(section) }}<\/legend>\n        <presentation v-for=\"(table, index) in tables(section)\" :markup=\"table\" :key=\"index\"><\/presentation>\n        <grid v-for=\"(grid, index) in grids(section)\" :markup=\"grid\" :key=\"index\"><\/grid>\n    <\/fieldset>\n    <fieldset v-if=\"activities.length\">\n        <legend>Activity Details<\/legend>\n        <ul class=\"list-unstyled\">\n            <li v-for=\"activity in activities\">\n                <b>{{ $(activity).find('label').text().trim() }}<\/b>: {{ $(activity).find('span').text().trim() }}\n            <\/li>\n        <\/ul>\n    <\/fieldset>\n\n    <div class=\"modal fade no-print\" id=\"problem\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"problemLabel\">\n        <div class=\"modal-dialog\" role=\"document\">\n            <div class=\"modal-content\">\n                <div class=\"modal-header\">\n                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><i class=\"fa fa-times-circle\"><\/i><\/button>\n                    <h4 class=\"modal-title\" id=\"problemLabel\">Report a problem<\/h4>\n                <\/div>\n                <div class=\"modal-body\">\n                    <div class=\"alert alert-info\">\n                        This is to facilitate reporting any issues found with data display or page printing.  Some basic information about the form you are using has been filled in already.  Please edit the message and submit it to the development team for review.\n                    <\/div>\n                    <form>\n                        <div class=\"form-group\">\n                            <label for=\"b9form\">I have a problem with this form:<\/label>\n                            <input class=\"form-control\" id=\"b9form\" type=\"text\" v-model=\"b9Form\" \/>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"message\">Tell us about the problem:<\/label>\n                            <textarea class=\"form-control\" id=\"message\" rows=\"10\" v-model=\"message\"><\/textarea>\n                        <\/div>\n                        <div class=\"form-group\">\n                            <label for=\"contact\">For additional info, please contact me at:<\/label>\n                            <input class=\"form-control\" id=\"contact\" type=\"text\" v-model=\"contact\" placeholder=\"e.g. Access ID\/phone number\/etc.\"\/>\n                        <\/div>\n                        <div class=\"form-group clearfix\">\n                            <button class=\"btn btn-primary pull-right\" data-dismiss=\"modal\" style=\"margin-left: 15px\" @click.prevent=\"reportProblem()\">Submit<\/button>\n                            <button class=\"btn btn-warning pull-right\" style=\"margin-left: 15px\" @click.prevent.stop=\"message = messageTemplate\">Reset<\/button>\n                            <button class=\"btn btn-default pull-right\" data-dismiss=\"modal\" aria-label=\"Close\">Cancel<\/button>\n                        <\/div>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n"
});