@include('plugins.moment')
@include('plugins.daterangepicker')
{{-- @include('plugins.jquery-editable') --}}
@include('plugins.sweetalerts.default')
@push("page-js")
    <script type="text/javascript">
        let cur_dates = {},
            hasDataLoaded = false,
            type_faturamento = 0,
            layoutMatriz = undefined,
            hierarquia = @json($filters);

        const parameters = {
            filter: 1,
            searchData: 2,
            exportCsv: 10,
            updateFieldIsCheckbox: 6,
            updateFieldNotIsCheckbox: 5,
            saveObs: 5,
            editObs: 16,
            faturamentoPadrao: 8,
            faturamentoValidacao: 13,
            needToShowLoading: [1, 2, 5, 6, 8, 13],
        };

        const idsAction = {
            mensagemRetornoFaturamento: 733,
            mensagemRetornoTela: 733,
            fieldIdObservation: 2022,
        };

        const filters = (params = {}) => {
            let previa = document.getElementById('previa').checked;
            // let reajuste = document.getElementById('reajuste').checked;
            let real = document.getElementById('real').checked;

            type_faturamento = previa ? 1 : 2;
            /*if (! reajuste) {
                type_faturamento = previa ? 1 : 2;
            } else {
                type_faturamento = 3;
            }*/


            return Object.assign(
                {
                    startDate: cur_dates.start.format("YYYY-MM-DD"),
                    endDate: cur_dates.end.format("YYYY-MM-DD"),
                    epsID: $('select[name="Callcenter"]').val(),
                    cellID: $('select[name="Cell"]').val(),
                    operacaoID: $('select[name="Agrupamento"]').val() || '',
                    type_faturamento: type_faturamento,
                },
                params
            );
        };

        const ajax = {
            request(param, callback = () => {}) {
                page.startLoading();

                if (needToShowLoading(param.param))  {
                    loading();
                }

                $.ajax({
                    url: document.URL,
                    method: 'POST',
                    data: filters(param),
                    success(response) {
                        page.data = response;
                        page.showResponseMessage(response);
                        callback(response);
                    },
                    complete() {
                        page.endLoading();
                        // if (needToShowLoading(param.param)) {
                            hideLoading();
                        // }
                    },
                    error: notifyAjaxError
                });
            }
        };

        const page = {
            data: undefined,
            fillDefault: true,
            enableInlineEditing() {
                $('.inline-editable-input').editable({
                    closeOnEnter: true,
                    callback : function( data ) {
                        if (data.content) {
                            page.update(data.$el);
                        }
                    }
                });
            },
            refresh() {
                if (pageCustom.validateFilter !== undefined) {
                    return pageCustom.validateFilter();
                } else if (['-', '', undefined, null].indexOf($('select[name="Cell"]').val()) !== -1) {
                    return $.Notification.notify('warning', 'top center', 'Atenção', 'Preencha todos os filtros!');
                }
                ajax.request({param: parameters.searchData}, pageCustom.refresh);
            },
            fill(data) {
                for (const [, value] of Object.entries(data || [])) {

                    let $elements = $(`input[name="value${value['Id']}"], [data-name="value${value['Id']}"], [data-name="label${value['Id']}"]`);

                    $.each($elements, function(i, $el){
                        $el = $($el);

                        page.fillDefault = true;

                        $el.data('original', value.valueOriginal || '');

                        page.fillElInput($el, value);
                        page.fillElSpan($el, value);
                        page.fillElLabel($el, value);
                        page.fillElSelect($el, value);
                        page.fillElDefault($el, value);
                        page.addStyle($el, value);

                        /*if (value['type']) {
                            $el.prop('checked', value['Value'] == 1);
                        }*/
                    });
                }

                if (data.length > 0) {
                    $('.type_simulation_filter').prop('disabled', false);
                }

                let $prev = $('.hideOnPrev');
                if([2, 3].indexOf(type_faturamento) !== -1){
                    $prev.addClass('d-none');
                } else {
                    $prev.removeClass('d-none');
                }
            },
            fillElInput(el, value) {
                if (el.is('input')) {

                    if (el.is(':checkbox')) {
                        el.prop('checked', value['Value'] == 1);
                    } else if (el.is(':text')) {
                        el.val(value['Value']);
                    } else {
                        // console.log('isInput:Qual?');
                        // console.log('el', el);
                    }

                    page.fillDefault = false;
                }
            },
            fillElSpan(el, value) {
                if (el.is('span')) {
                    if (el.siblings('span').length > 0) {
                        el.html(value['Value'].replace("R$ ", ""));
                    } else {
                        if (el.data('name').indexOf('label') !== -1) {
                            el.text(value['Label']);
                        } else {
                            el.text(value['Value']);
                        }
                    }
                    page.fillDefault = false;
                }
            },
            fillElLabel(el, value) {
                if (el.is('label')) {
                    el.val(value['Value']);
                    page.fillDefault = false;
                }
            },
            fillElSelect(el, value) {
                if (el.is('select')) {
                    el.val(value['Value']).change();
                    page.fillDefault = false;
                }
            },
            fillElDefault(el, value) {
                if (page.fillDefault) {
                    if (el.data('name').indexOf('label') !== -1) {
                        el.text(value['Label']);
                    } else {
                        el.text(value['Value']);
                    }
                }
            },
            addStyle(el, value) {
                if (value.fontcolor != '#000000') {
                    el.attr('style', function(i,str) {
                        return (str || '') + 'color:' + value.fontcolor + ' !important;';
                    });
                }
            },
            obsEdit(el) {
                const $this = $(el),
                      id = $this.data('id'),
                      contentObs = $(`#content-obs-${id}`),
                      observationValue = contentObs.find('textarea').val();

                $this.prop('disabled', true);

                if (observationValue.length <= 0) {
                    $this.prop('disabled', false);
                    return $.Notification.notify('warning', 'top center', 'Atenção', 'Digite algo para salvar a edição da observação');
                }

                ajax.request({
                    param: parameters.editObs,
                    fieldID: idsAction.fieldIdObservation,
                    fieldValue: observationValue,
                    Id: id
                }, function(response) {
                    contentObs.find('.content-btn-edit').attr('style', 'display: none !important');
                    contentObs.find('.content-btn-save-edit').css('display', '');
                    contentObs.find('textarea').prop('disabled', false);
                    page.obsMont(response.observations);
                    $this.prop('disabled', false);
                });
            },
            obsSave() {
                let observation = $('textarea#observation-textarea').val();
                if (observation.length <= 0) {
                    $('#btn-save-obs').prop('disabled', false);
                    return $.Notification.notify('warning', 'top center', 'Atenção', 'Campo observação não pode ser em branco!');
                }

                ajax.request({
                    param: parameters.saveObs,
                    fieldID: idsAction.fieldIdObservation,
                    fieldValue: observation
                }, function(response) {
                    page.obsMont(response.observations);
                    $('textarea#observation-textarea').val('');
                    $('#btn-save-obs').prop('disabled', false);
                });
            },
            obsMont(obsList) {
                let observationsContent = [];
                let btnEdit = '';
                const loggedUserId = {{ auth()->user()->id }};
                $.each(obsList, function(key, value) {
                    btnEdit = '';
                    if (value.UserIns == loggedUserId) {
                        btnEdit = `<button class="btn btn-block btn-secondary h-75 edit-obs" data-id="${value.id}">
                                Editar
                            </button>`;
                    }
                   observationsContent.push(`
                        <div class="row m-b-15" id="content-obs-${value.id}">
                            <div class="col-sm-2 col-md-1">
                                <div class="h-100 w-100 d-flex justify-content-center align-items-center bg-muted bg-gradient">
                                    <span class="initials-name font-bold" title="${value.Usuario}">
                                        ${value.Initials}
                                    </span>
                                </div>
                            </div>
                            <div class="col-sm-8 col-md-10">
                                <small class="text-muted">${value.Data || '-'}</small>
                                <textarea class="form-control" disabled>${value.Observacao}</textarea>
                            </div>
                            <div class="col-sm-2 col-md-1 d-flex align-items-end content-btn-edit px-1">
                                ${btnEdit}
                            </div>
                            <div class="col-sm-2 col-md-1 d-flex flex-column justify-content-end content-btn-save-edit px-1" style="display:none !important">
                                <button class="btn btn-sm btn-secondary save-edit-obs m-b-5" data-id="${value.id}">
                                    Salvar
                                </button>
                                <button class="btn btn-sm btn-danger btn-cancel-obs" data-id="${value.id}">
                                    Cancelar
                                </button>
                            </div>
                        </div>
                   `);
                });

                $('#observations-body').find('.overflow-y').empty().html(observationsContent.join(''));
            },
            faturamento(type) {
                ajax.request({
                    param: type,
                }, function(response) {
                    let messageRow = [], value = false;
                    if (response.input == undefined) {
                        return false;
                    }
                    if (Object.keys(response.input).length <= 0) {
                        return false;
                    }

                    if (response.input[idsAction.mensagemRetornoTela] != undefined) {
                        value = response.input[idsAction.mensagemRetornoTela]['value'];
                    } else if (response.input[idsAction.mensagemRetornoFaturamento] != undefined) {
                        value = response.input[idsAction.mensagemRetornoFaturamento]['value'];
                    }
                    // if (messageRow.length == 0 && value) {
                    if (value) {
                        messageRow[0] = {Value: value};
                    }
                    if (messageRow[0]) {
                        swal({
                            title: 'Atenção!',
                            text: messageRow[0].Value || messageRow[0],
                            toast: true,
                            position: 'top',
                            timer: 3500
                        });
                    }

                    // remover parte comentada a partir de uma proxima revisao
                    /*if (pageCustom.fill !== undefined) {
                        pageCustom.fill(response.input);
                    } else {
                        page.fill(response.input);
                    }*/

                    // let messageRow = response.input.filter(row => row.Id == idsAction.mensagemRetornoFaturamento);

                    // let value = false;

                    /*if (response.input[0][idsAction.mensagemRetornoTela] != undefined) {
                        value = response.input[0][idsAction.mensagemRetornoTela]['value'];
                    } else if (response.input[0][idsAction.mensagemRetornoFaturamento] != undefined) {
                        value = response.input[0][idsAction.mensagemRetornoFaturamento]['value'];
                    }

                    if (messageRow.length == 0 && value) {
                        messageRow[0] = {Value: value};
                    }

                    if (messageRow[0]) {
                        swal({
                            title: 'Atenção!',
                            text: messageRow[0].Value || messageRow[0],
                            toast: true,
                            position: 'top',
                            timer: 3500
                        });
                    }*/
                });
            },
            update(el) {
                // se for checkbox = isentar | se for input = update no campo (isentar = 6, update = 5)
                // console.log('param', $(el).is(':checkbox') ? parameters.updateFieldIsCheckbox : parameters.updateFieldNotIsCheckbox);
                // console.log('fieldID', page.getId(el));
                // console.log('fieldValue', $(el).is(':checkbox') ? $(el).is(':checked') ? 1 : 0 : $(el).val() || el.html());
                ajax.request({
                    param: $(el).is(':checkbox') ? parameters.updateFieldIsCheckbox : parameters.updateFieldNotIsCheckbox,
                    fieldID: page.getId(el),
                    fieldValue: $(el).is(':checkbox')
                        ? $(el).is(':checked') ? 1 : 0
                        : $(el).val() || el.html()
                }, pageCustom.update);
            },
            startLoading() {
                $('#update-data i').addClass('fa-spin text-warning');
                $('#filters-loading').removeClass('filters-loading-view');
            },
            endLoading() {
                $('#update-data i').removeClass('fa-spin text-warning');
                $('#filters-loading').addClass('filters-loading-view');
            },
            setTypeSimulation() {
                // $('#type_simulation input#reajuste').prop('checked', false).prop('disabled', false).siblings('label').css('text-decoration', 'none');
                $('#type_simulation input#real').prop('checked', true).prop('disabled', false).siblings('label').css('text-decoration', 'none');
                $('#type_simulation input#previa').prop('checked', true).prop('disabled', false).siblings('label').css('text-decoration', 'none');

                if (page.isFullMonth()) {
                    $('#type_simulation input#previa').prop('checked', false).prop('disabled', true).siblings('label').css('text-decoration', 'line-through');
                } else {
                    $('#type_simulation input#real').prop('checked', false).prop('disabled', true).siblings('label').css('text-decoration', 'line-through');
                    // $('#type_simulation input#reajuste').prop('checked', false).prop('disabled', true).siblings('label').css('text-decoration', 'line-through');
                }
            },
            getFilters() {
                ajax.request({
                    param: parameters.filter
                }, function(response) {
                    hierarquia = response;
                    $('select[name="EPS"]').val('').change();
                    page.enableFilters();
                });
            },
            enableFilters() {
                $('#menu-filters').attr('data-toggle', 'dropdown');
                $('#filter-options').removeClass('disabled-item');
            },
            showResponseMessage(response) {
                let messageRow = [], value = false;
                if (response.input == undefined) {
                    return false;
                }
                if (Object.keys(response.input).length <= 0) {
                    return false;
                }
                // let messageRow = response.input.filter( row => row.Id == idsAction.mensagemRetornoTela); // id do input que mostra
                if (response.input[idsAction.mensagemRetornoTela] != undefined) {
                    value = response.input[idsAction.mensagemRetornoTela]['value'];
                }
                // if (messageRow.length == 0 && value) {
                if (value) {
                    messageRow[0] = {Value: value};
                }
                if (messageRow[0]) {
                    swal({
                        title: 'Mensagem!',
                        text: messageRow[0].Value || messageRow[0],
                        toast: true,
                        position: 'top',
                        timer: 3500
                    });
                }

                // remover parte comentada a partir de uma proxima revisao
                // if (response.input != undefined && response.input.length > 0) {
                //     let messageRow = response.input.filter( row => row.Id == idsAction.mensagemRetornoTela); // id do input que mostra a mensagem
                //     let value = false;

                //     if (response.input[0][idsAction.mensagemRetornoTela] != undefined) {
                //         value = response.input[0][idsAction.mensagemRetornoTela]['value'];
                //     }

                //     if (messageRow.length == 0 && value) {
                //         messageRow[0] = {Value: value};
                //     }

                //     if (messageRow[0]) {
                //         swal({
                //             title: 'Mensagem!',
                //             text: messageRow[0].Value || messageRow[0],
                //             toast: true,
                //             position: 'top',
                //             timer: 3500
                //         });
                //     }
                //     /*if ($('#filters-content').hasClass('show')) {
                //         $('#filters-content').dropdown('toggle');
                //     }*/
                // }
            },
            getId(el) {
                let id = $(el).attr('name') || el.data('name');
                id = id.replace("value", "");
                return id;
            },
            disableFilters() {
                $('#menu-filters').removeAttr('data-toggle');
                $('#filter-options').addClass('disabled-item');
            },
            isFullMonth() {
                const currentFilters = filters(),
                      selectedStartDay = moment(currentFilters.startDate).format("DD"),
                      selectedLastDay = moment(currentFilters.endDate).format("DD"),
                      endOfMonthDay = moment(currentFilters.endDate).endOf('month').format("DD");

                if (selectedStartDay > 1 || selectedLastDay < endOfMonthDay) {
                    return false;
                }

                return true;
            },
            execChangeLabelsToLayou(mapLabelsLayout, layout) {
                /**
                 * exemplo de mapLabelsLayout
                 * idCampo: layout0: Texto layout 0, layout1: Texto layout 1
                 * const mapLabelsLayout = [
                 *     {'label1145': {'layout0': 'Qtde. do Mailing', 'layout1': 'Quantidade'}},
                 * ];
                 */
                for (const [, values] of Object.entries(mapLabelsLayout)) {
                    for (const [key, value] of Object.entries(values)) {
                        $(`#${key}`).text(value[`layout${layout}`]);
                    }
                }
            }
        };

        const needToShowLoading = ( param ) => {
            return parameters.needToShowLoading.indexOf(param) !== -1;
        };

        const copyToClipboard = (str, $obj) => {
            const el = document.createElement('textarea');
            el.value = str;
            el.setAttribute('readonly', '');
            el.style.position = 'absolute';
            el.style.left = '-9999px';
            document.body.appendChild(el);
            const selected =
                document.getSelection().rangeCount > 0
                    ? document.getSelection().getRangeAt(0)
                    : false;
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            if (selected) {
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(selected);
            }
            $obj.focus();
        };

        $(function() {

            $('.copy-real-value').click(function(){
                if (!hasDataLoaded) {
                    return;
                }

                let $el = $(this);
                let id = $($el).attr('name') || $el.data('name');
                    id = id.replace("value", "");

                let data = page.data.input.filter(el => el.Id == id);
                if (data[0]) {
                    let value = data[0].real;
                    value = value.replace('.', ',');
                    copyToClipboard(value, $el);
                    $.Notification.notify('success', 'top center', 'Atenção', 'Valor real copiado para área de transferência.<br> Use <b> CTRL + V </b>');
                }
            });

            $('.copy-original-value').on('click', function(e) {
                if (! hasDataLoaded) {
                    return;
                }

                const $el = $(this);
                const value = $($el).data('original').replace('.', ',');

                if (value) {
                    copyToClipboard(value, $el);
                    $.Notification.notify('success', 'top center', 'Atenção', 'Valor real copiado para área de transferência.<br> Use <b> CTRL + V </b>');
                }
            });

            $('.type_simulation_filter').click(function () {
                if (! hasDataLoaded) {
                    return $.Notification.notify('warning', 'top center', 'Atenção', 'Busque os dados para efetuar o faturamento');
                }

                const tipo = $(this).text();
                let param = $(this).data('padrao') == 1 ? parameters.faturamentoPadrao : parameters.faturamentoValidacao;

                swal({
                    title: tipo,
                    text: 'Confirma o tipo de faturamento selecionado?',
                    confirmButtonColor: '#00b19d',
                    confirmButtonText: '<i class="fa fa-thumbs-up"></i> Sim',
                    showLoaderOnConfirm: true,
                    cancelButtonColor: '#d33',
                    cancelButtonText: '<i class="fa fa-remove"></i> Não',
                    showCancelButton: true,
                }).then((result) => {
                    if (result == true) {
                        page.faturamento(param);
                    }
                });
            });

            $('#search, #update-data').click(function() {
                page.refresh();
            });

            $('#btn-save-obs').click(function(){
                $(this).prop('disabled', true);
                page.obsSave();
            });

            $('#type_simulation input#reajuste').click(function() {
                if ($(this).is(':checked')) {
                    $('#type_simulation input#previa').prop('checked', false).prop('disabled', true).siblings('label').css('text-decoration', 'line-through');
                } else if (page.isFullMonth()) {
                    $('#type_simulation input#previa').prop('checked', false).prop('disabled', true).siblings('label').css('text-decoration', 'line-through');
                } else {
                    $('#type_simulation input#previa').prop('disabled', false).siblings('label').css('text-decoration', 'none');
                }
            });

            $('#print-page').click(function() {
                window.print();
            });

            $('.checkbox input[type="checkbox"]').change(function() {
                console.log(hasDataLoaded);
                if (! hasDataLoaded) {
                    return;
                }

                console.log($(this));
                page.update($(this));
            });

            $('#download-csv').click(function() {
                if ( !hasDataLoaded) {
                    return $.Notification.notify('custom', 'top center', 'Atenção', 'Busque os dados para efetuar o download');
                }

                let currentFilters = $.param(filters({param: parameters.exportCsv}));
                window.open(document.URL + '/download?' + currentFilters, "_blank");
            });

            $('input[name^="value"]:not([readonly]):not([type=checkbox])').on('blur', function() {
                if (! hasDataLoaded) {
                    return;
                }

                let id = page.getId(this);
                let original = page.data.input.filter( row => row.Id == id);

                if (original[0]) {
                    let currentValue = $(this).val() || $(this).html();
                    if (original[0].Value != currentValue) {
                        page.update(this);
                    }
                }
            });

            $('#filters-loading').dblclick(function() {
                $(this).addClass('filters-loading-view');
            });

            $('#filter-options').click(function() {
                if ($(this).hasClass('disabled-item') || !cur_dates) {
                    $.Notification.notify('warning', 'top center', 'Atenção', 'Primeiro selecione uma data');
                }
            });

            $('#reportrange').daterangepicker({
                alwaysShowCalendars: true,
                ranges: {
                    '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-success',
                cancelClass: 'btn-secondary',
                locale: daterangepicker.locales['pt-br']
            }, function (start, end) {

                $('#reportrange span').addClass('p-l-5').html(start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY'));
                cur_dates.start = start;
                cur_dates.end = end;

                if (moment(start).format('M') != moment(end).format('M') || moment(start).format('Y') != moment(end).format('Y')) {
                    page.disableFilters();
                    return $.Notification.notify('warning', 'top center', 'Atenção', 'Data início e data fim devem ser no mesmo mês!');
                }

                page.setTypeSimulation();
                page.getFilters();
            });

            $('[data-nextselect]').change(function() {
                let $value = $(this).val(),
                    $nextSelect = $(this).data('nextselect'),
                    $field = $(this).data('field');

                let $optionsToPopulateNextSelect = hierarquia.filter( el => {
                    return el[$field] == $value;
                });

                let $select = $(`select[name=${$nextSelect}]`);
                $select.find('option:not([value=""])').remove();
                $select.val("");
                $.each($optionsToPopulateNextSelect, function (index, value) {
                    if ($select.find("option[value='" + value[getIdByFieldName($nextSelect)] + "']").length) {
                        $select.val(value[getIdByFieldName($nextSelect)]);
                    } else {
                        let newOption = new Option(value[$nextSelect], value[getIdByFieldName($nextSelect)], false, false);
                        $select.append(newOption);
                    }
                });
                $select.trigger('change');
            });

            $('[data-toggle-second="tooltip"]').tooltip();

            $('#toggle-faturamento').click(function(){
                $('#total-faturamento-toggle').slideToggle({
                    done() {
                        // Pro footer da página dar resize
                        $(`body`).click();
                    }
                });

                $('#toggle-faturamento i').toggleClass('fa-eye-slash');
            });

            $('#open-close-panels').click(function () {
                const $this = $(this),
                      expanded = $this.data('expanded');

                if (!expanded) {
                    $('[data-toggle=collapse]').each(function (index, item) {
                        if ($(item).hasClass('collapsed')) {
                            $(item).click();
                        }
                    });
                    $this.data('expanded', true);
                    $this.find('i').removeClass('ion-ios-add').addClass('ion-ios-remove');
                }
                else {
                    $('[data-toggle=collapse]').each(function (index, item) {
                        if (!$(item).hasClass('collapsed')) {
                            $(item).click();
                        }
                    });
                    $this.data('expanded', false);
                    $this.find('i').removeClass('ion-ios-remove').addClass('ion-ios-add');
                }
            });
        });

        $(document).on('click', '#help-link-options .dropdown-menu, #filter-options .dropdown-menu', function (e) {
            e.stopPropagation();
        });

        $(document).on('click', '.edit-obs', function() {
            const $this = $(this),
                  id = $this.data('id'),
                  contentObs = $(`#content-obs-${id}`);

            $this.prop('disabled', true);

            contentObs.find('.content-btn-edit').attr('style', 'display: none !important');
            contentObs.find('.content-btn-save-edit').css('display', '');
            contentObs.find('textarea').prop('disabled', false);
        });

        $(document).on('click', '.btn-cancel-obs', function() {
            const $this = $(this),
                  id = $this.data('id'),
                  contentObs = $(`#content-obs-${id}`);

            contentObs.find('.edit-obs').prop('disabled', false);

            contentObs.find('.content-btn-edit').css('display', '');
            contentObs.find('.content-btn-save-edit').attr('style', 'display: none !important');
            contentObs.find('textarea').prop('disabled', true);
        });

        $(document).on('click', '.save-edit-obs', function() {
            $(this).prop('disabled', true);
            page.obsEdit(this);
        });

    </script>
@endpush