@include('plugins.moment')
@include('plugins.daterangepicker')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.sweetalert')

@push('page-js')
    <script>
        let curDates;

        const filters = () => {
            const data = {
                startDate: curDates && curDates.start.format("YYYY-MM-DD") || moment().startOf('month').format("YYYY-MM-DD"),
                endDate: curDates && curDates.end.format("YYYY-MM-DD") || moment().format("YYYY-MM-DD")
            };
            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.refresh();
            },
            refresh() {
                // let $updateAll = $('#update-all');

                $.ajax({
                    url: '{{ route('competition.reprocess-base.getData') }}',
                    type: 'POST',
                    data: filters(),
                    beforeSend: () => {
                        helper.startLoading();
                        // $updateAll.attr('data-original-title', 'Atualizando...')
                        //     .find('i').addClass('fa-spin');
                    },
                    success: function(res) {
                        const data = res.data;
                        builder.table(data.table);
                    },
                    complete: function() {
                        helper.stopLoading();
                        // $updateAll.attr('data-original-title', moment().format('[Atualizado às] HH:mm'))
                        //     .find('i').removeClass('fa-spin text-danger');
                    },
                    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');
                    }
                });
            },
            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'));
                });
            },
        };

        const builder = {
            table(data) {
                const $table = $('#table');

                if ($.fn.DataTable.isDataTable($table)) {
                    $table.DataTable().destroy();
                }

                $table.DataTable({
                    lengthChange: false,
                    data: data,
                    responsive: true,
                    scrollY: '45vh',
                    scrollX: true,
                    scrollCollapse: true,
                    paging: false,
                    // aaSorting: [],
                    // ordering: false,
                    dom: 'Bfrtip',
                    columns: [
                        {
                            data: 'value',
                            title: `
                                <div class="custom-control custom-checkbox form-check-inline">
                                    <input id="all_rows" type="checkbox" class="check-all-rows custom-control-input" value="">
                                    <label class="custom-control-label" for="all_rows"></label>
                                </div>
                            `,
                            render: function (data, type, row) {
                                return `
                                    <div class="custom-control custom-checkbox form-check-inline">
                                        <input id="row_${data}" type="checkbox" name="row[]" class="row-base custom-control-input" value="${data}">
                                        <label class="custom-control-label" for="row_${data}"></label>
                                    </div>
                                `;
                            }
                        },
                        {data: 'dt_pedido', title: 'Data Pedido', render: helper.datatables.date_format},
                        {data: 'tipo', title: 'Tipo'},
                        {data: 'data_inicio', title: 'Data Início', render: helper.datatables.date_format},
                        {data: 'data_fim', title: 'Data Fim', render: helper.datatables.date_format},
                        {data: 'status_reprocessamento', title: 'Status Reprocessamento'},
                        {data: 'envio_relatorio', title: 'Envio Relatório'},
                    ],
                    buttons: [{
                            extend: 'copy',
                            className: 'btn-sm',
                            text: 'Copiar'
                        },
                        {
                            extend: 'excel',
                            className: 'btn-sm',
                            filename: 'BaseReprocessadosBMG',
                        },
                        {
                            text: 'Reprocessar Selecionados',
                            className: 'btn-bmg-primary btn-bordered btn-xs mx-1 waves-effect waves-light btn-reprocess-selects btn-extra-action d-none',
                            action() {
                                builder.reprocess()
                            }
                        },
                    ],
                    columnDefs: [
                        {
                            targets: 0,
                            orderable: false,
                            className: 'text-center'
                        },
                        {
                            targets: [2, 3],
                            className: 'text-left'
                        },
                        {
                            targets: '_all',
                            className: 'text-center'
                        }
                    ],
                    initComplete: function(settings, json) {
                        $('.dataTables_scrollBody').addClass('overflow-y overflow-x');
                    }
                });
            },
            showHideExtraBtns() {
                let selecionados = $("input[name='row[]']:checked").map(function () {
                    return this.value;
                }).get();

                $('.btn-extra-action').addClass('d-none');
                if (selecionados.length > 0) {
                    $('.btn-extra-action').removeClass('d-none');
                }
            },
            reprocess() {
                let selecionados = $("input[name='row[]']:checked").map(function () {
                    return this.value;
                }).get();

                console.log('selecionados', selecionados)

                swal({
                    type: 'info',
                    title: 'Atenção!',
                    text: `Em Desenvolvimento o Reprocessamento do(s) ${selecionados.length} selecionado(s)!`,
                });


            }
        };

        $(document).on('change', '#all_rows', function (event) {
            event.preventDefault()
            $("input[name='row[]']").prop('checked', $(this).prop('checked'));
            builder.showHideExtraBtns();
        });

        $(document).on('change', "input[name='row[]']", function (event) {
            event.preventDefault()
            builder.showHideExtraBtns();
        });

        $(() => {
            $('#update-all').click(function () {
                page.refresh();
            });

            /*$('#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