@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@push('page-js')
    <script>
        let getIdByFieldName = (fieldName) => {
            return fieldName
                .replace("Callcenter", "ServerID")
                .replace("Cell", "FinCellId")
                .replace("Agrupamento", "OperationId");
        };

        parameters.filter = 10;
        parameters.searchData = 1;
        parameters.updateFieldNotIsCheckbox = 2;
        parameters.updateFieldIsCheckbox = 2;
        parameters.faturamentoPadrao = 5;
        parameters.exportCsv = 15;

        idsAction.mensagemRetornoFaturamento = 'Value';
        idsAction.mensagemRetornoTela = 'Mensagem';

        const param_demais_sla_data      = 11,
              param_demais_sla_tipo_desc = 12,
              param_demais_sla_create    = 13,
              param_demais_sla_delete    = 14;

        const pageCustom = {
            firstCall: true,
            edit: false,
            refresh(response) {
                hasDataLoaded = true;

                // pageCustom.displayRules();

                $('.is_editable').removeClass('edit_item');
                // $('.isentar').prop('disabled', false);
                // $('#observations').removeClass('d-none');

                pageCustom.fill(response.input);
                // pageCustom.tableJustify(response.justify);
                // page.obsMont(response.observations);

                if (response.detailsSla !== undefined) {
                    pageCustom.detaislSla(response.detailsSla);
                }

                if (response.tipoDescDemaisSla !== undefined) {
                    pageCustom.mntTipoDescDemaisSla(response.tipoDescDemaisSla);
                }

                if (response.demaisSla !== undefined) {
                    pageCustom.demaisSla(response.demaisSla);
                }

                if (response.logAlteracoes !== undefined) {
                    pageCustom.logAlteracoes(response.logAlteracoes);
                }

                pageCustom.showTitle();

                if (pageCustom.firstCall) {
                    pageCustom.expandAll();
                    pageCustom.firstCall = false;
                }

                @can('fin.matriz.edit')
                    pageCustom.edit = true;
                    $('.is_editable').addClass('edit_item');
                @endcan
            },
            showTitle() {
                const headerMatriz = $('#label-header'),
                      eps = $('select[name="Callcenter"]>option:selected').text().trim(),
                      canal = $('select[name="Cell"]>option:selected').text().trim();

                let agrupamento = $('select[name="Agrupamento"]>option:selected').val();

                if (agrupamento != '') {
                    agrupamento = '- ' + $('select[name="Agrupamento"]>option:selected').text().trim();
                }

                headerMatriz.html(`${eps} - <small>${canal} ${agrupamento}</small>`);
            },
            expandAll() {
                const btnOpenCloseAll = $('#open-close-panels');
                btnOpenCloseAll.click();
            },
            fill(data) {
                if (data.length === 0) {
                    return false;
                }

                for (const [key, value] of Object.entries(data)) {
                    pageCustom.fillDataCustom(key, value);
                }

                if (Object.keys(data).length > 0) {
                    $('.type_simulation_filter').prop('disabled', false);
                }
            },
            fillDataCustom(key, value) {
                // let el = $(`#${key}:not(.d-none)`);
                let el = $(`[data-name="value_${key}"]:not(.d-none)`);

                el.each(function (idx, elem) {
                    let $el = $(elem);
                    $el.data('original', value.valueOriginal);
                    $el.data('type', value.type);

                    if ($el.is('input')) {
                        if ($el.is(':checkbox')) {
                            $el.prop('checked', parseInt(value.value, 10) === 1);
                        }
                    }

                    if ($el.is('span')) {
                        $el.text(value.value);
                    }

                    /*if (key === 'Edit') {
                        if (value.value === true) {
                            pageCustom.edit = true;
                            $('.bg-color-yellow').addClass('edit');
                        }
                    }*/
                });

                // pageCustom.edit = true;
                // $('.is_editable').addClass('edit_item');
            },
            _fill(data) {
                if (data.input == undefined) {
                    return false;
                }

                if (Object.keys(data.input).length === 0) {
                    return false;
                }

                for (const [key, value] of Object.entries(data.input)) {
                    pageCustom.fillDataCustom(key, value);
                }

                if (Object.keys(data.input).length > 0) {
                    $('.type_simulation_filter').prop('disabled', false);
                }
            },
            update(response) {
                pageCustom.fill(response.input);
                pageCustom.logAlteracoes(response.logAlteracoes);
            },
            detaislSla(response) {
                for (const [key, value] of Object.entries(response)) {
                    let items = [];
                    items.push('<ul class="list-group">');
                    value.forEach(function (v, i) {
                        items.push(`
                            <li class="list-group-item d-flex justify-content-between px-5 py-1">
                                <span title="Condição">${v['Condition']}</span>
                                <span title="Penalidade">${v['Penalidade']}</span>
                            </li>
                        `);
                    });
                    items.push('</ul>');
                    $(`.det-sla-${key} td`).html(items.join(''));
                }
            },
            mntTipoDescDemaisSla(response) {
                let select = document.getElementById('tipo_desconto_sla');
                select.innerHTML = '';

                let opt0 = document.createElement('option');
                opt0.innerHTML = 'Selecione';
                select.appendChild(opt0);

                for (const [key, value] of Object.entries(response)) {
                    let opt = document.createElement('option');
                    opt.value = value.Id;
                    opt.innerHTML = value.Description;
                    select.appendChild(opt);
                }
            },
            refreshDemaisSla(response) {
                pageCustom.fill(response.input);
                pageCustom.demaisSla(response.demaisSla);
            },
            demaisSla(data) {
                let $element = $(`#table-demais-sla`);

                if ($.fn.DataTable.isDataTable($element)) {
                    $element.DataTable().clear().rows.add(data).draw();
                } else {
                    $element.DataTable({
                        dom: 'Bfrtip',
                        destroy: true,
                        buttons: [
                            {
                                text: '<i class="mdi mdi-plus-circle-outline"></i> Criar',
                                className: 'btn btn-success waves-effect btn-margin waves-light btn-create-demais-sla',
                                attr: {
                                    'data-toggle': "modal",
                                    'data-target': "#modal-create-demais-sla",
                                },
                            },
                        ],
                        columnDefs: [
                            {targets: -1, orderable: false, className: 'text-center'},
                            {targets: 0, className: 'text-left'},
                            {targets: 1, className: 'text-left'},
                            {targets: '_all', className: 'text-center'},
                        ],
                        data: data,
                        columns: [
                            {data: 'Detail'},
                            {data: 'Description'},
                            {data: 'Protocol'},
                            {
                                data: 'Value',
                                render(data, type, row) {
                                    return parseFloat(row['Value']).toLocaleString('pt-BR', { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' });
                                }
                            },
                            {data: 'User'},
                            {
                                data: 'Created',
                                render: helper.datatables.datetime_format
                            },
                            {
                                data: 'Action',
                                render(data, type, row) {
                                    return `<i type="button" class="mdi mdi mdi-delete-forever text-danger cancel-pending"
                                        data-toggle="tooltip" title="Remover linha"
                                        data-detail-id="${row.Id}"></i>`;
                                }
                            },
                        ],
                    });
                }
            },
            logAlteracoes(data) {
                $('#log-alteracoes').addClass('d-none');
                if (typeof data === 'undefined' || data.length == 0) {
                    return false;
                }

                let $element = $(`#table-log-alteracoes`);

                if ($.fn.DataTable.isDataTable($element)) {
                    $element.DataTable().clear().rows.add(data).draw();
                } else {
                    $element.DataTable({
                        dom: 'Bfrtip',
                        destroy: true,
                        ordering: false,
                        buttons: [],
                        columnDefs: [
                            {targets: 0, className: 'text-center'},
                            {targets: 1, className: 'text-center'},
                        ],
                        data: data,
                        columns: [
                            {data: 'Data', width: "6%"},
                            {data: 'Hora', width: "6%"},
                            {data: 'Usuario', width: "15%"},
                            {data: 'Descricao'},
                            {data: 'InformacaoAdicional'},
                        ],
                    });
                }
                $('#log-alteracoes').removeClass('d-none');
            },
            cancelPending(data) {
                swal({
                    type: 'error',
                    title: 'Deseja remover essa linha?',
                    text: 'Essa ação não pode ser revertida.',
                    showCancelButton: true,
                    confirmButtonText: 'Continuar',
                    cancelButtonText: 'Cancelar',
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                }).then(
                    result => {
                        if (result) {
                            ajax.request({
                                id_demais_sla : data.detailId,
                                param: param_demais_sla_delete
                            }, pageCustom.refreshDemaisSla);
                        }
                    }
                ).catch(swal.noop);
            }
        };

        $(document).on('click', '.edit_item', function (e) {
            e.preventDefault();
            const el = $(this).find('span'),
                  // type = el.data('type'),
                  id_campo = el.data('idcampo'),
                  justify = el.data('justify');

            // $('#id-field-edit').val('');
            $('#id-campo').val('');
            $('#input-update-value').val('');
            $('#text-update-value').val('');

            $('#block-form-justify').addClass('d-none');

            if (pageCustom.edit) {
                $('#target_desc_update_item').text(el.data('description'));
                // $('#id-field-edit').val(el.prop('id'));
                $('#id-campo').val(id_campo);
                $('#modal-update').modal('show');
                if (justify == true) {
                    $('#block-form-justify').removeClass('d-none');
                }
            }
        });

        $(document).on('keypress', 'input.only-number', function(e) {
            const $this = $(this);
            const key = (window.event) ? event.keyCode : e.which;
            let dataAcceptDot = $this.data('accept-dot');
            let dataAcceptComma = $this.data('accept-comma');
            let dataAcceptMinus = $this.data('accept-minus');
            let acceptDot = (typeof dataAcceptDot !== 'undefined' && (dataAcceptDot == true || dataAcceptDot == 1)?true:false);
            let acceptComma = (typeof dataAcceptComma !== 'undefined' && (dataAcceptComma == true || dataAcceptComma == 1)?true:false);
            let acceptMinus = (typeof dataAcceptMinus !== 'undefined' && (dataAcceptMinus == true || dataAcceptMinus == 1)?true:false);

            if (
                (key > 47 && key < 58)
                || (key == 46 && acceptDot)
                || (key == 44 && acceptComma)
                || (key == 45 && acceptMinus)
            ) {
                return true;
            } else {
                return (key == 8 || key == 0) ? true : false;
            }
        });

        $(document).on('click', '#btn-update', function (e) {
            e.preventDefault();
            // const idField = $('#form-modal-update-value #id-field-edit').val(),
            const idCampo = $('#form-modal-update-value #id-campo').val(),
                  valor = $('#form-modal-update-value #input-update-value').val(),
                  justificativa = $('#form-modal-update-value #text-update-value').val();

            ajax.request({
                fieldID: idCampo,
                fieldValue: valor,
                Justification: justificativa,
                param: parameters.updateFieldNotIsCheckbox
            }, pageCustom.refresh);

            $('#modal-update').modal('hide');
        });

        $(document).on('keypress', '#text-update-value', function(e) {
            const $this = $(this),
                  maxlen = 1000;

            if ($this.val().length > maxlen) {
                return false;
            }
        });

        $(document).on('click', '.toggler-det-sla', function (e) {
            e.preventDefault();
            const el = $(this),
                  details = el.data('details'),
                  icon = el.find('i');
            $(`.det-sla-${details}`).toggle();
            icon.toggleClass('fa-plus-square fa-minus-square');
        });

        $(document).on('click', '#btn-add-new-value', function (e) {
            e.preventDefault();

            $('#modal-add-new-value').modal('show');
        });

        $(document).on('click', '#btn-save-demais-sla', function (e) {
            e.preventDefault();
            const _form = $('#form-modal-create-demais-sla'),
                 detail_sla = _form.find('#detail_sla').val(),
                 tipo_desconto_sla = _form.find('#tipo_desconto_sla').val(),
                 protocolo_sla = _form.find('#protocolo_sla').val(),
                 valor_sla = _form.find('#valor_sla').val();

            ajax.request({
                detail_sla : detail_sla,
                tipo_desconto_sla : tipo_desconto_sla,
                protocolo_sla : protocolo_sla,
                valor_sla : valor_sla,
                param: param_demais_sla_create
            }, pageCustom.refreshDemaisSla);

            $('#detail_sla').val('');
            $('#tipo_desconto_sla').val('');
            $('#protocolo_sla').val('');
            $('#valor_sla').val('');

            $('#modal-create-demais-sla').modal('hide');
        });

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

            pageCustom.cancelPending(data);
        });

        $(document).ready(function () {
            let cardHeaderPosition = $('.custom-card-hd').offset().top;

            $(window).on('scroll slid.bs.carousel', function () {
                let scroll = $(window).scrollTop(),
                    $cardHeader = $('.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');
                }
            });

            // pageCustom.demaisSla([]);
        });
    </script>
@endpush