@include('plugins.moment')
@include('plugins.chartjs')
@include('plugins.datepicker')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')

@include('competition.ranking.scripts.script-partials.ranking-graph')

@push('page-js')
    <script>
        const slide = {
            cookieName: 'ranking_slide',
            interval: cookie.get('ranking_slide_seconds') || 15,
            index: null,
            play() {
                let _this = this;
                $('#carousel-ranking').carousel({
                    interval: _this.interval * 1000,
                    cycle: true
                });
            },
            start() {
                if (slide.index >= 0) {
                    $('#carousel-ranking .active').removeClass('active');
                    $('#carousel-ranking .carousel-item').eq(slide.index).addClass('active');
                    slide.index = null;
                }
                slide.play();
                if ($('[data-slide="pause"]').hasClass('d-none')) {
                    $('#carousel-ranking').carousel('pause');
                }
            },
            enable() {
                cookie.set(slide.cookieName, 'enable');
                $('.slide-controls').show();
            },
            disable() {
                cookie.set(slide.cookieName, 'disable');
                $('.slide-controls').hide();
            }
        };

        function reloadPage() {
            let $updateAll = $('#update-all'), filters = {
                str_period: $('#dateMonthYear').data("date"),
                str_callcenterID: [],
            };

            $("input[name='callcenter[]']:checked").each(function () {
                filters.str_callcenterID.push($(this).val());
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('competition.ranking.getData') }}',
                data: {
                    _token: '{{csrf_token()}}',
                    filters,
                },
                beforeSend: () => {
                    loading();
                    $updateAll.attr('data-original-title', 'Atualizando...')
                        .find('i').addClass('fa-spin');
                },
                complete: function () {
                    hideLoading();
                },
                success: response => {
                    $('#content-ranking').html(response);
                    $updateAll.attr('data-original-title', moment().format('[Atualizado às] HH:mm'))
                        .find('i').removeClass('fa-spin text-danger');
                    refreshLabelLastUpdate();
                    $('[data-toggle="tooltip"]').tooltip();
                },
                error: response => {
                    if (response.statusText != 'abort') {
                        $.Notification.notify('error', 'top center', 'Atenção', "Falha ao atualizar os itens!");
                    }
                    $updateAll.attr('data-original-title', 'Atualização falhou!')
                        .find('i').addClass('text-danger').removeClass('fa-spin');
                }
            });
        }

        $(document).ready(function () {
            let $updateAll = $('#update-all'), $boxTimeView = $('#box-time-view'),
                 cardHeaderPosition = $('.custom-card-hd').length ? $('.custom-card-hd').offset().top : 0;

            $('[data-slide="enable"]').click(function () {
                if (cookie.get('ranking_slide') == 'enable') {
                    slide.disable();
                    return;
                }
                slide.enable();
            });

            $('.carousel-top-control[data-slide]').click(function (e) {
                if ($(this).attr('data-slide') == 'cycle' || $(this).attr('data-slide') == 'pause') {
                    $('.carousel-top-control[data-slide="cycle"], .carousel-top-control[data-slide="pause"]')
                        .toggleClass('d-none');
                }
            });

            $boxTimeView.keyup(function (e) {
                if (e.which == 13) {
                    cookie.set('ranking_slide_seconds', $(this).val());
                    slide.interval = $(this).val();
                    $('#carousel-ranking').carousel('dispose');
                    slide.play();
                }
            });

            $boxTimeView.focusout(function (e) {
                cookie.set('ranking_slide_seconds', $(this).val());
                slide.interval = $(this).val();
                $('#carousel-ranking').carousel('dispose');
                slide.play();
            });

            $('.carousel').on('slide.bs.carousel slid.bs.carousel', function () {
                $(window).resize();
            });

            setInterval(function () {
                reloadPage();
            }, 7200000);

            $('#dateMonthYear').datepicker({
                language: "pt-BR",
                format: "yyyy-mm",
                startView: "months",
                minViewMode: "months",
                autoclose: true,
                todayHighlight: true,
            }).on('changeDate', function (ev) {
                $('#dateMonthYear span').html(ev.format('MM, yyyy'));
                $(this).data('date', ev.format('yyyy-mm'));
                $(this).datepicker('hide');
                reloadPage();
            });

            $updateAll.on('click', function () {
                reloadPage();
            });

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

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

            $boxTimeView.trigger('focusout');

            $(window).on('scroll slid.bs.carousel', function () {
                let scroll = $(window).scrollTop(),
                    $cardHeader = $('.carousel-item.active').find('.custom-card-hd'),
                    cardWidth = $cardHeader.closest('.card').width();
                if (scroll > cardHeaderPosition) {
                    $cardHeader.addClass('fixed-card-header').css('width', `${cardWidth}px`);
                } else {
                    $cardHeader.removeClass('fixed-card-header').css('width', 'initial');
                }
            });
        });
    </script>
@endpush