@include('plugins.bootstrap-select')
@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.moment')
@include('plugins.notifyjs')
@include('plugins.jstree')
@include('plugins.parsley')
@include('plugins.select2')
@include('plugins.sweetalerts.default')
@include('plugins.sweetalert')

@push('page-js')
    <script>
        const page = {
            tableManagement: null,
            currentFilter: [],
            columns: [
                {data: 'canal', title: 'Canal'},
                {data: 'agrupamento', title: 'Agrupamento'},
                {data: 'tipo', title: 'Visão'},
                {data: 'ciclo', title: 'Ciclo'},
            ],
            load() {
                page.getData();
            },
            getData() {
                let $updateAll = $('#update-all');
                $.ajax({
                    url: document.URL,
                    data: {
                        _token: `{{ csrf_token() }}`
                    },
                    beforeSend() {
                        $updateAll.attr('data-original-title', 'Atualizando...').find('i').addClass('fa-spin');
                    },
                    complete() {
                        $updateAll.attr('data-original-title', 'Atualizar').find('i').removeClass('fa-spin');
                    },
                    success(response) {
                        builders.filters(response.data.filters);
                        builders.mainTable(response.data.table);
                        builders.pendingTable(response.data.pending);
                        builders.createSelects(response.data.cascate);
                        builders.cycles(response.data.cycles);
                    }
                });
            },
            cancelPending(data) {
                swal({
                    type: 'error',
                    title: 'Deseja remover essa solicitação?',
                    text: 'Essa ação não pode ser revertida.',
                    showCancelButton: true,
                    confirmButtonText: 'Continuar',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    preConfirm() {
                        $.ajax({
                            type: 'post',
                            url: '/competition/view-management/destroy',
                            data: {
                                _token: `{{ csrf_token() }}`,
                                area: data.area,
                                operation: data.operation,
                            },
                        }).done((response) => {
                            swal({
                                type: 'success',
                                title: 'Sucesso!',
                                text: response.message,
                            });
                            page.load();
                        });
                    },
                });
            }
        };

        const builders = {
            filters(data) {
                for (const [key, value] of Object.entries(data || {})) {
                    let $element = $(`.filterdetails[data-filter-key="${key}"]`).html(`<option value="">Todos</option>`);

                    for (const [k, v] of Object.entries(value)) {
                        $element.append(`
                            <option value="${v}">${v}</option>
                        `);
                    }

                    $element.select2();
                }
            },
            mainTable(data) {
                let $element = $(`#datatable-view-management`);

                if ($.fn.DataTable.isDataTable($element)) {
                    $element.DataTable().clear().rows.add(data).draw();
                } else {
                    page.tableManagement = $element.DataTable({
                        dom: 'Bfrtip',
                        destroy: true,
                        buttons: [
                            {extend: 'copy'},
                            {extend: 'excel'},
                            {extend: 'pdfHtml5'},
                            {
                                text: '<i class="mdi mdi-plus-circle-outline"></i> Criar',
                                className: 'btn btn-success waves-effect btn-margin waves-light',
                                attr: {
                                    'data-toggle': "modal",
                                    'data-target': "#create-modal",
                                },
                            },
                            {
                                text: '<i class="fa fa-history"></i> Pendentes',
                                className: 'btn btn-primary waves-effect btn-margin waves-light',
                                attr: {
                                    'data-toggle': "modal",
                                    'data-target': "#modal-historical",
                                },
                            },
                        ],
                        columnDefs: [
                            {targets: '_all', className: 'text-center'},
                        ],
                        data: data,
                        columns: [
                            {data: 'Canal', title: 'Canal'},
                            {data: 'Agrupamento', title: 'Agrupamento'},
                            {data: 'Visao', title: 'Visão'},
                            {data: 'Ciclo', title: 'Ciclo'},
                        ],
                        order: [[0, "asc"]],
                        drawCallback: function (settings, json) {
                            $('[data-toggle="tooltip"]').tooltip();
                            niceScrollTo('.dataTables_scrollBody');
                            let $scrollBody = $('.dataTables_scrollBody');
                            $scrollBody.scroll(function () {
                                $('.DTFC_LeftBodyLiner, .DTFC_LeftBodyWrapper').css({
                                    'height': $scrollBody.innerHeight() + 'px',
                                    'max-height': $scrollBody.innerHeight() + 'px'
                                });
                            });
                        },
                        initComplete: function () {
                            $("#datatable-view-management thead tr th").each(function (i) {
                                let id = $(this).text().toLowerCase();

                                let select = $(`#${id}`)
                                    .on( 'change', function () {
                                        let val = $(this).val();

                                        page.tableManagement.column( i )
                                            .search( val ? '^'+$(this).val()+'$' : val, true, false )
                                            .draw();
                                    } );

                                select.html(`<option value="">Todos</option>`);

                                page.tableManagement.column( i ).data().unique().sort().each( function ( d, j ) {
                                    select.append( '<option value="'+d+'">'+d+'</option>' )
                                });
                            });
                        }
                    });
                }
            },
            pendingTable(data) {
                let $element = $(`#datatable-pending`);

                if ($.fn.DataTable.isDataTable($element)) {
                    $element.DataTable().clear().rows.add(data).draw();
                } else {
                    $element.DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            {extend: 'copy'},
                            {extend: 'excel'},
                            {extend: 'pdfHtml5'},
                        ],
                        columnDefs: [
                            {targets: '_all', className: 'text-center'},
                            {targets: 0, orderable: false}
                        ],
                        data: data,
                        columns: [
                            {
                                data: 'areaID',
                                title: 'Ações',
                                render(data, type, row) {
                                    return `<i type="button" class="mdi mdi mdi-delete-forever text-danger cancel-pending"
                                        data-toggle="tooltip" title="Cancelar solicitação"
                                        data-area="${row.areaID}" data-operation="${row.operationID}"></i>`;
                                }
                            },
                            {data: 'Canal', title: 'Canal'},
                            {data: 'Agrupamento', title: 'Agrupamento'},
                            {data: 'Visao', title: 'Visão'},
                            {data: 'Ciclo', title: 'Ciclo'},
                            {
                                data: 'DataHora',
                                title: 'Solicitado em',
                                render: helper.datatables.datetime_format
                            },
                        ],
                        order: [[5, "desc"]],
                        drawCallback: function (settings, json) {
                            $('[data-toggle="tooltip"]').tooltip();
                            niceScrollTo('.dataTables_scrollBody');
                            let $scrollBody = $('.dataTables_scrollBody');
                            $scrollBody.scroll(function () {
                                $('.DTFC_LeftBodyLiner, .DTFC_LeftBodyWrapper').css({
                                    'height': $scrollBody.innerHeight() + 'px',
                                    'max-height': $scrollBody.innerHeight() + 'px'
                                });
                            });
                        },
                    });
                }
            },
            createSelects(cascate) {
                let $channels = $(`[name="select-canal"]`).empty(),
                    $groupings = $(`[name="select-agrupamento"]`).empty();

                for (const [key, value] of Object.entries(cascate.channels || {})) {
                    $channels.append(`
                        <option value="${value.areaID}">${value.Canal}</option>
                    `);

                    let channelGroupings = cascate.groupings[value.areaID];

                    for (const [k, v] of Object.entries(channelGroupings || {})) {
                        $groupings.append(`
                            <option data-channel="${value.areaID}" value="${v.operationID}">${v.Agrupamento}</option>
                        `);
                    }
                }

                $channels.trigger('change');
            },
            cycles(cycles) {
                let $select = $(`[name="select-ciclo"]`).empty();

                for (const [key, value] of Object.entries(cycles || {})) {
                    let month = moment(value.effectiveIniMonth, 'YYYY-MM').format('MM/YYYY');

                    $select.append(`<option value="${value.ciclo}">${value.ciclo} (${month})</option>`)
                }
            }
        };

        $(document).on('change', `[name="select-canal"]`, function () {
            let area = Number($(this).val());

            $(`[name="select-agrupamento"] option`).prop('disabled', true);
            $(`[name="select-agrupamento"] option[data-channel="${area}"]`).prop('disabled', false);
            $(`[name="select-agrupamento"]`).select2();
        });

        $(document).on('click', '.cancel-pending', function () {
            let data = $(this).data();

            page.cancelPending(data);
        });

        $(document).ready(function () {
            page.load();
            $('.select2').select2();
            $('#apply_filter').on('click', function () {
                page.currentFilter = [];
                $('.filterdetails').each(function (i) {
                    let $this = $(this);
                    if ($this.val() != '') {
                        page.currentFilter.push({
                            field: $this.prop('id'),
                            value: $this.val(),
                        });
                    }
                });
                //page.buildTable('#datatable-view-management', false);
                $(".shared-filter").slideUp('fast');
            });

            $('#btn-save-form').on('click', function () {
                let $form = $('#form-create');

                if (! $form[0].checkValidity()) {
                    swal({
                        type: 'error',
                        title: 'Aviso!',
                        text: 'Preencha todos os campos necessários.'
                    });

                    return;
                }

                $.ajax({
                    type: 'post',
                    url: '/competition/view-management/save',
                    data: {
                        _token: $form.find('input[name="_token"]').val(),
                        visao: $form.find('input[name="tipo_visao"]:checked').val(),
                        area: $('#create-select-0').val(),
                        operation: $('#create-select-1').val(),
                        ciclo: $('#ciclo-select').val(),
                    },
                    success(response) {
                        if (response.success == 1) {
                            swal({
                                type: 'success',
                                title: 'Sucesso!',
                                text: response.message,
                            });
                            $('#create-modal').modal('hide');
                        } else {
                            if (response.message.toString().indexOf('?') != -1) {
                                swal({
                                    type: 'error',
                                    title: 'Deseja continuar a operação?',
                                    text: response.message,
                                    showCancelButton: true,
                                    confirmButtonText: 'Continuar',
                                    cancelButtonText: 'Cancelar',
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    preConfirm() {
                                        $.ajax({
                                            type: 'post',
                                            url: '/competition/view-management/save',
                                            data: {
                                                _token: $form.find('input[name="_token"]').val(),
                                                visao: $form.find('input[name="tipo_visao"]:checked').val(),
                                                area: $('#create-select-0').val(),
                                                operation: $('#create-select-1').val(),
                                                ciclo: $('#ciclo-select').val(),
                                                forceSave: true,
                                            },
                                        }).done((response) => {
                                            $('#create-modal').modal('hide');
                                            $.Notification.notify('success', 'top right', 'Operação Realizada', 'Requisição processada!');
                                            page.load();
                                        });
                                    },
                                });
                            } else {
                                swal({
                                    type: 'error',
                                    title: 'Operação não permitida!',
                                    text: response.message,
                                });
                            }
                        }
                    }
                });
            });
        });
    </script>
@endpush