@include('plugins.datatables.default')
@include('plugins.datatables.rowsGroup')
@include('plugins.jquery-rowspanizer')
@include('plugins.jquery-ui.sortable')
@include('plugins.bootstrap-select')
@include('plugins.moment')

@push('page-js')
     <script type="text/javascript">
        let areas = [], countFiltersSelected, backupTable = [];
        const jsonConfigColumns = @json($configColumns);
        const agora_table = {
            xhr: null,
            next_update: null,
            update_interval: 5 * 1000,
            original_table: null,
            build() {
                let $updateButton = $('#update i');
                $updateButton.addClass('fa-spin');
                if (agora_table.next_update) {
                    clearTimeout(agora_table.next_update)
                }

                let data = {};
                $('.filters input').serializeArray().map(function (v) {
                    if (typeof data[v.name] == 'undefined') {
                        data[v.name] = [];
                    }
                    data[v.name].push(v.value);
                });

                agora_table.xhr = $.ajax({
                    url: document.URL,
                    data: data,
                    success(data) {
                        agora_table.original_table = data.view;
                        $('#table-agora').html(agora_table.original_table);
                        areas = data.areas;
                        $('#agora-table').rowspanizer({
                            columns: [0, 1, 2],
                            vertical_align: 'middle'
                        });

                        segment.getLocalState();
                        $('div[role="tooltip"]').remove();
                        $('[data-toggle="tooltip"]').tooltip({
                            html: true,
                            container: '#fullscreen-content-page'
                        });

                        if ($('.show-skill .ion').hasClass('ion-md-remove')) {
                            $('.show-skill').trigger('click').trigger('click');
                        }

                        initColumnVisible();
                        expandTable();
                        $updateButton.removeClass('fa-spin');
                        agora_table.next_update = setTimeout(() => {
                            agora_table.build();
                        }, agora_table.update_interval);
                    },
                    error(response) {
                        if (response.statusText != 'abort') {
                            $updateButton.removeClass('fa-spin').addClass('text-danger');
                            $.Notification.notify('error', 'top center', 'Atenção', "Falha ao atualizar os dados!");
                            agora_table.next_update = setTimeout(() => {
                                agora_table.build();
                            }, agora_table.update_interval);
                        }
                    },
                    beforeSend: function () {
                    },
                    complete: function () {
                    }
                });
            }
        };

        const segment = {
            show() {
                $('.segment-dep').show();
                $('.segment').toggleClass('segment-visible segment');
                $('.details-row').toggleClass('details-row-visible details-row');
            },
            hide() {
                if ($('.segment-dep').find('i').hasClass('ion-md-remove')) {
                    $('.segment-dep').trigger('click');
                }

                $('.segment-dep').hide();
                $('.segment-visible').toggleClass('segment-visible segment');
                $('.details-row-visible').toggleClass('details-row-visible details-row');
            },
            getLocalState() {
                if (localStorage.getItem('now-segment-visible') === "false") {
                    this.hide();
                }
            },
            setVisibility(visible) {
                localStorage.setItem('now-segment-visible', visible);
                visible ? this.show() : this.hide();
            }
        };

        const ordenator = {
            target: '#orderbox',
            cookieName: 'area_order_agora',
            listAreas() {
                let list = [];
                if (cookie.get(ordenator.cookieName) != undefined) {
                    let cookieArray = cookie.get(ordenator.cookieName);
                    cookieArray.split(',').forEach(function (v, k) {
                        let areaItem = (areas || []).find(x => x.AreaId == v);
                        if (areaItem) {
                            list.push({
                                id: areaItem.AreaId,
                                name: areaItem.Area,
                                hex: `${areaItem.HexArea}`
                            });
                        }
                    });
                    return list;
                }
                areas.forEach(function (v, k) {
                    list.push({
                        id: v.AreaId,
                        name: v.Area,
                        hex: `${v.HexArea}`
                    });
                });
                return list;
            },
            build() {
                let list = ordenator.listAreas();
                $(ordenator.target).html('');
                list.forEach(v => $(ordenator.target).append($('<li>', {
                    id: v.id,
                    html: `<i class="ion ion-md-move m-r-15"></i> ${v.name}`,
                    style: `background:${v.hex};`
                })));
                $(ordenator.target).sortable({
                    cursor: 'grabbing'
                });
            },
            save() {
                let cards = [];
                $(ordenator.target).find('li').each(function () {
                    cards.push($(this).prop('id'));
                });
                cookie.set(ordenator.cookieName, cards);
                agora_table.build();
            }
        };

        const skill = {
            isShow: false,
            el: null,
            change() {
                this.el.find('i').hasClass('ion-md-remove')
                    ? this.hide()
                    : this.show();

                this.isShow = !this.isShow;
            },
            hide(){
                this.el.find('i').removeClass('ion-md-remove').addClass('ion-md-add');
                $('[data-ids].skill-row td:not(.skill-column)').fadeOut();
                $('tr:not(.skill-row) td.skill, th.skill').fadeOut();
                $('.segment i').removeClass('ti-angle-down').addClass('ti-angle-right');
            },
            show(){
                this.el.find('i').addClass('ion-md-remove').removeClass('ion-md-add');
                $('[data-ids].skill-row td:not(.skill-column)').fadeIn();
                $('tr:not(.skill-row) td.skill, th.skill').fadeIn();
                $('.segment i').removeClass('ti-angle-right').addClass('ti-angle-down');
            }
        };

        $(document).ready(() => {
            setTimeout(() => location.reload(), 600000);
            setTimeout(() => agora_table.build(), 100);

            let skillContainer = $('.show-skill');
            skill.el = skillContainer;
            skillContainer.click(function () {
                if(countFiltersSelected !== 2){
                    $.Notification.notify('warning', 'top right', 'Atenção', 'Selecione Agrupamento e Visão para expandir as skill');
                    return;
                }

                skill.change();
            });

            $('#table-agora').delegate('.toggle-skill', 'click', function () {
                let target = $(this).closest('tr').data('ids'), $this = $(this), $this_id = $this.attr('id');
                $('[data-ids="' + target + '"].skill-row td:not(.skill-column)').slideToggle(0);
                $(this).find('i').toggleClass('ti-angle-right, ti-angle-down');

                if ($('[data-ids].skill-row td:not(.skill-column):visible').length) {
                    $('tr:not(.skill-row) td.skill, th.skill').fadeIn();
                    $this.addClass('skill-expanded');
                    let cookieContent = cookie.get('table_expanded') || '';
                    if (cookieContent.toString().search($this_id) == -1) {
                        cookie.set('table_expanded', cookieContent + $this_id + ',');
                    }
                } else {
                    $('tr:not(.skill-row) td.skill, th.skill').fadeOut();
                    $this.removeClass('skill-expanded');
                    let cookieContent = cookie.get('table_expanded') || '';
                    cookie.set('table_expanded', cookieContent.replace($this_id + ',', ''));
                }
            });

            $('#update').click(() => {
                agora_table.xhr.abort();
                agora_table.build();
            });

            $('input.checkall').change(function () {
                let parent = $(this).parents('.parent:eq(0)');
                let chck = $(this).is(':checked');
                parent.find('.checkboxies input').prop('checked', chck).change()
            });

            $('#aplicar_filtros').click(() => {
                $('#update').click();
                $('#filter-areas').slideUp();
            });

            $('#aplicar_filtros_eps').click(() => {
                if($("input[name='eps[]']:checked").length <= 0){
                    return $.Notification.notify('warning', 'top right', 'Atenção', 'Selecione ao menos uma EPS');
                }

                $('#update').click();
                $('#filter-eps').slideUp();
            });

            $('#filter-areas-modal').on('show.bs.modal', function (event) {
                ordenator.build();
            });

            $('#order-box-save').click(function () {
                ordenator.save();
                $('#filter-areas-modal').modal('hide');
            });

            $('#select-columns').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
                let _this = $(this),
                selectedColumns = _this.val();
                showHideColumns(selectedColumns, true);
            });

            $('#select-columns').on('rendered.bs.select	', function (e) {
                countFiltersSelected = e.target.selectedOptions.length;
            });
        });

        function showHideColumns(selectedColumns, saveCookie) {
            let configColumns = Object.keys(jsonConfigColumns);

            // por enquanto que temos somente 2 opções, isso abaixo não deixa remover o agrupamento sem antes ter removido a visão
            if (selectedColumns.indexOf(configColumns[0]) === -1 && selectedColumns.indexOf(configColumns[1]) !== -1) {
                $('.selectpicker').selectpicker('val', cookie.get('column_visible').toString().split(','));
                $.Notification.notify('warning', 'top right', 'Atenção', 'Não é possível remover o agrupamento antes de remover a visão');
                return;
            }

            let show = configColumns.filter(x => selectedColumns.includes(x));
            let hide = configColumns.filter(x => !selectedColumns.includes(x));

            switch(hide.length){
                case 0:
                    $(`#table-agora`).html(agora_table.original_table);
                    $('#agora-table').rowspanizer({
                        columns: [0, 1, 2],
                        vertical_align: 'middle'
                    });
                    break;
                case 1:
                    for(const [key, value] of Object.entries(backupTable)) {
                        $(`tbody tr.trTotalValue[data-ids^="${key}"]:first`).html(value);
                    }

                    $.each($(`tbody tr`), function(index, value) {
                        $.each($(this).find('td.operation'), function (i, v) {
                            $(v).removeAttr('rowspan');
                        });

                        $(this).css('display', 'table-row');
                    });

                    $.each($(`tbody tr.trTotalValue td.area`), function (i, v) {
                        let ids = $(this).parent().data('ids').split('-')[0];
                        let rowspan = 0;

                        $.each($(`tbody tr.trTotalValue[data-ids^="${ids}"] td.operation`), function (ind, val) {
                            rowspan++;
                        });

                        if(rowspan > 0) {
                            $(this).attr('rowspan', rowspan);
                        }
                    });
                    $('.details-row-visible').css('display', 'none');

                    skill.hide();
                    break;
                case 2:
                    skill.hide();

                    let somados = [];
                    $.each($('tr.trTotalValue'), function(index, value){
                        let ids = $(value).data('ids').split('-');
                        somados.includes(ids[0])
                            ? somados[ids[0]].push($(`tr.trTotalValue[data-ids^="${ids[0]}"]`))
                            : somados[ids[0]] = $(`tr.trTotalValue[data-ids^="${ids[0]}"]`);
                    });
                    let parsed = [];
                    somados.map(function(value, index){
                        let qtdTotal = [];
                        let time = [];
                        parsed[index] = [];

                        $.each(value, function(ind, count){
                            $.each($(count).find('td.eps_col'), function (i, v) {
                                if(!time[i]) {
                                    time[i] = moment('00:00:00', 'HH:mm:ss');
                                }

                                if(!qtdTotal[i]) {
                                    qtdTotal[i] = 0;
                                }

                                let hour = moment($(v).find('div > span').html().trim(), 'HH:mm:ss');
                                if(hour.isAfter(time[i])) {
                                    time[i] = hour;
                                }

                                qtdTotal[i] += parseInt($(v).find('div > strong').html().trim());
                                parsed[index][i] = {
                                    time: time[i].format("HH:mm:ss"),
                                    qtdTotal: qtdTotal[i]
                                };
                            });
                        });
                    });

                    for(const [key, value] of Object.entries(parsed)) {
                        $.each($(`tbody tr[data-ids^="${key}"]`), function(index, value) {
                            $(this).css('display', 'none');
                        });

                        $.each($(`tbody tr.trTotalValue[data-ids^="${key}"]:first`), function(index, value) {
                            backupTable[key] = $(this).html();

                            $(this).css('display', 'table-row');
                            $(this).find('td:first').removeAttr('rowspan');
                        });

                        $.each($(`tbody tr.trTotalValue[data-ids^="${key}"] td.eps_col`), function (i, v) {
                            if(value[i] !== undefined) {
                                $(v).children().html(`<strong class="float-left text-left">${value[i].qtdTotal}</strong>&nbsp;&nbsp;<span class="time">${value[i].time}</span>`);
                            }
                        });
                    }
                    break;
            }

            for (let hideKey in hide) {
                let hideClass = hide[hideKey];
                $(`td.${hideClass}, th.${hideClass}, th.th-${hideClass}`).hide();
                if (saveCookie) {
                    let updatedCookieContent = cookie.get('column_visible');
                    cookie.set('column_visible', updatedCookieContent.replace(hideClass + ',', ''));
                }
            }

            for (let showKey in show) {
                let showClass = show[showKey];
                $(`td.${showClass}, th.${showClass}, th.th-${showClass}`).show();
                if (saveCookie) {
                    let updatedCookieContent = cookie.get('column_visible');
                    if (updatedCookieContent.toString().search(showClass) == -1) {
                        cookie.set('column_visible', updatedCookieContent + showClass + ',');
                    }
                }
            }
        }

        function initColumnVisible() {
            if (cookie.get('column_visible') == undefined) {
                cookie.set('column_visible', 'operation,');
                $('.selectpicker').selectpicker('val', cookie.get('column_visible').toString().split(','));
            } else {
                let visible = cookie.get('column_visible').toString().split(',');
                $('.selectpicker').selectpicker('val', visible);
                showHideColumns(visible, false);
            }
        }

        function expandTable() {
            if (cookie.get('table_expanded') != undefined) {
                let expanded = cookie.get('table_expanded').toString().split(',');
                (expanded || []).filter(function (x) {
                    if (x != '') {
                        let id = '#' + x;
                        $(id).trigger('click');
                    }
                });
            }
        }
    </script>
@endpush