@include('plugins.moment')
@include('plugins.daterangepicker')
@include('plugins.highcharts.default')
@include('plugins.highcharts.themes.dark-unica')
@include('plugins.sweetalert')

@push('page-js')
    <script>
        const valFiltersJson = $('input[name="filtersJson"]').val();
        let curDates;

        const jpFilters = JSON.parse(valFiltersJson);

        const filters = (data) => {
            data._token = `{{ csrf_token() }}`;
            data.startDate = curDates && curDates.start.format("YYYY-MM-DD") || moment().startOf('month').format(
                "YYYY-MM-DD");
            data.endDate = curDates && curDates.end.format("YYYY-MM-DD") || moment().format("YYYY-MM-DD");

            data.callcenters = [];
            $.each($(`input[name='callcenter[]']:checked`), function() {
                data.callcenters.push($(this).val());
            });

            data.channels = [];
            $.each($(`input[name='operation[]']:checked`), function() {
                data.channels = [...data.channels, ...$(this).data('ids')];
            });

            data.groupings = [];
            $.each($(`[class*="groupingVisibleControl"]:not([style*="none"]) input[name='grouping[]']:checked`),
                function() {
                    data.groupings = [...data.groupings, ...$(this).data('ids')];
                });

            return data;
        };

        const ajax = {
            xhr: undefined,
            request(params, callback = null) {
                if (this.xhr && this.xhr.readyState === 1) {
                    this.xhr.abort();
                }

                $.ajax({
                    url: document.URL,
                    data: filters(params),
                    method: 'POST',
                    success(response) {
                        if (callback) {
                            callback(response);
                        }
                    },
                });
            }
        };

        const page = {
            $content: $('#content-page'),
            init() {
                page.enableCalendarFilter();
                page.checkedCallcenters();
                page.refresh();
            },
            refresh() {
                ajax.request({
                    typeLayout: $('input[name="type_layout"]:checked').val()
                }, function(response) {
                    page.$content.html(response.view);
                    $(`[data-toggle="tooltip"]`).tooltip({
                        html: true
                    });
                })
            },
            enableCalendarFilter() {
                $('#reportrange').daterangepicker({
                    alwaysShowCalendars: true,
                    maxDate: moment(),
                    minDate: '01/01/2017',
                    startDate: moment().startOf('month'),
                    showDropdowns: true,
                    showWeekNumbers: false,
                    ranges: {
                        'Hoje': [moment(), moment()],
                        'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
                        'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
                        'Este mês': [moment().startOf('month'), moment().endOf('month')],
                        'Último mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                            'month').endOf('month')]
                    },
                    opens: 'left',
                    drops: 'down',
                    buttonClasses: ['btn', 'btn-sm'],
                    applyClass: 'btn-bmg-primary',
                    cancelClass: 'btn-secondary',
                    locale: daterangepicker.locales['pt-br'],
                }, function(start, end, label) {
                    curDates = {
                        start,
                        end
                    };
                    page.refresh();
                    $('#reportrange span').html(' ' + start.format('DD/MM/YYYY') + ' - ' + end.format(
                        'DD/MM/YYYY'));
                });
            },
            checkedCallcenters() {
                $(`input[name='callcenter[]']`).prop('checked', true).change();
            },
            downloadAsset(type) {
                window.open(document.URL + '/export?' + $.param(filters({
                    fileType: type,
                    type: 'report',
                    typeLayout: $('input[name="type_layout"]:checked').val()
                })), '_blank');
            },
            downloadAssetRecontatoDigital(type) {
                window.open(document.URL + '/export?' + $.param(filters({
                    fileType: type,
                    type: 'report',
                    typeLayout: 'RecontatoDigital',
                })), '_blank');
            },
            downloadContactAsset(type) {
                window.open(document.URL + '/export?' + $.param(filters({
                    fileType: type,
                    type: 'report',
                    typeLayout: 'Contato'
                })), '_blank');
            },
            changeCallcenter() {
                const $this = $(this);
                const callcenter = $this.next().text().trim();

                for (const [, value] of Object.entries(jpFilters.callcenters[callcenter] || [])) {
                    let item = $('.block-channels').find(`[data-name="${value.area}"]`);
                    let input = item.find('input[type="checkbox"]');
                    let ids = input.data('ids');
                    let idx = ids.indexOf(value.areaID);

                    if ($this.is(':checked') == false) {
                        if (idx !== -1) {
                            ids.splice(idx, 1);
                        }

                        if (ids.length == 0) {
                            item.hide();
                            input.prop('checked', false);
                        }
                    } else {
                        ids.push(value.areaID);

                        item.show();
                        input.prop('checked', true);
                    }

                    input.data('ids', ids);
                    input.change();
                }
            },
            changeChannel() {
                const $this = $(this);
                const channel = $this.next().text().trim();

                for (const [, value] of Object.entries(jpFilters.channels[channel] || [])) {
                    let item = $('.block-group').find(`[data-name="${value.operation}"]`);
                    let input = item.find('input[type="checkbox"]');
                    let ids = input.data('ids');
                    let idx = ids.indexOf(value.operationID);

                    if ($this.is(':checked') == false) {
                        if (idx !== -1) {
                            ids.splice(idx, 1);
                        }

                        if (ids.length == 0) {
                            item.hide();
                            input.prop('checked', false);
                        }
                    } else {
                        if (idx === -1) {
                            ids.push(value.operationID);
                        }

                        item.show();
                        input.prop('checked', true);
                    }

                    input.data('ids', ids);
                    input.change();
                }
            },
        };

        const toggleSwitchIcon = (target) => {
            let total = $(`div[data-toggle-all="${target}"] > blockquote > div > input:visible`),
                checked = total.filter((k, obj) => $(obj).is(':checked')),
                condition = (total.length === checked.length);

            $(`a[data-toggle-all="${target}"] i`)
                .toggleClass('mdi-toggle-switch', condition)
                .toggleClass('mdi-toggle-switch-off-outline', !condition);
        };

        $(document).on('click', 'a[data-toggle-all]', function() {
            let target = $(this).data('toggle-all'),
                checked = $(`div[data-toggle-all="${target}"] > blockquote > div > input[type="checkbox"]:checked`),
                total = $(`div[data-toggle-all="${target}"] > blockquote > div > input[type="checkbox"]`);
            total.prop('checked', checked.length !== total.length).change();
        });

        $(document).on('change', `div[data-toggle-all] > blockquote > div > input`, function() {
            let target = $(this).parents().eq(2).data('toggle-all');

            toggleSwitchIcon(target);
        });

        $(document).on('change', '.check-callcenter input[type="checkbox"]', page.changeCallcenter);
        $(document).on('change', '.check-channel input[type="checkbox"]', page.changeChannel);

        $(() => {
            $('#update-all, #apply_filters').click(function() {
                if ($('input[name="callcenter[]"]:checked').length <= 0 ||
                    $('input[name="operation[]"]:checked').length <= 0 ||
                    $('input[name="grouping[]"]:checked').length <= 0
                ) {
                    return $.Notification.notify('warning', 'top center', 'Atenção',
                        'Selecione ao menos uma opção por bloco de filtro');
                }

                page.refresh();
                $(".shared-filter").slideUp('fast');
            });

            $(document).on('click', '.btn-export-data', function() {
                page.downloadAsset($(this).data('type'))
            });

            $(document).on('click', '.btn-export-data-recontato', function() {
                page.downloadAssetRecontatoDigital($(this).data('type'))
            });

            $(document).on('click', '#export-data-contact', function() {
                page.downloadContactAsset($(this).data('type'))
            });

            /*$('#checkall').change(function () {
                let boolCheck = $(this).prop('checked');
                let checkBoxes = $($(this).data('check'));
                checkBoxes.prop('checked', boolCheck).change();
            });*/

            page.init();
            $('#reportrange span').html(' ' + moment().startOf('month').format('DD/MM/YYYY') + ' - ' + moment()
                .format('DD/MM/YYYY'));
        })
    </script>
@endpush