{{-- @include('plugins.datatables.default') --}}
{{-- @include('plugins.datatables.buttons') --}}
{{-- @include('plugins.datatables.rowsGroup') --}}
{{-- @include('plugins.datatables.fixedColumns') --}}
@include('plugins.moment')
{{-- @include('plugins.datepicker') --}}
{{-- @include('plugins.daterangepicker') --}}

@push('page-js')
    <script>
        const page = {
            load() {
                this.getData();
            },
            getData() {
                let $updateAll = $('#update-all');

                $.ajax({
                     url: '{{ route('incident.report.index') }}',
                    type: 'POST',
                    beforeSend: () => {
                        helper.startLoading();
                        $updateAll.attr('data-original-title', 'Atualizando...')
                            .find('i').addClass('fa-spin');
                    },
                    success: function(res) {
                        const data = res.data;
                        // builder.list(data.table);
                        builder.table(data.table, data.total);
                    },
                    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');
                    }
                });
            },
        };

        const builder = {

            list(data) {
                const $content = $('#content-list-report');
            },

            table(data, total) {
                const $table = $('#table');
                let tbody = [];

                for ([key, rows] of Object.entries(data)) {

                    const row = rows[0];
                    const comp_month_1_2 = builder.comparative_month(row.comp_month_1_2);
                    const comp_month_2_3 = builder.comparative_month(row.comp_month_2_3);
                    let col_resumo_incidente = [];
                    let col_recorrente = [];

                    for ([k, value] of Object.entries(rows)) {
                        const text_color = value.recorrente == 'Sim' ? 'text-warning' : 'text-light';

                        col_resumo_incidente.push(`
                            <li class="${text_color} list-group-item bg-bmg-primary">
                                ${value.resumo_incidente}
                            </li>
                        `);
                        col_recorrente.push(`
                            <li class="${text_color} list-group-item bg-bmg-primary">
                                ${value.recorrente}
                            </li>
                        `);
                    }

                    tbody.push(`
                        <tr>
                            <td class="text-center font-24 text-bmg-warning">${row.fornecedor}</td>
                            <td class="text-left bg-bmg-primary font-12">
                                <ul class="list-group list-group-flush">
                                    ${col_resumo_incidente.join('')}
                                </ul>
                            </td>
                            <td class="text-center bg-bmg-primary font-12">
                                <ul class="list-group list-group-flush">
                                    ${col_recorrente.join('')}
                                </ul>
                            </td>
                            <td class="text-center text-warning bg-bmg-primary font-18 font-weight-bold">
                                ${row.tempo_acumulado}
                            </td>
                            <td class="text-center text-bmg-warning bg-bmg-light font-18 font-weight-bold">
                                ${row.month_1}
                            </td>
                            <td class="text-center">${comp_month_1_2}</td>
                            <td class="text-center text-bmg-warning bg-bmg-light font-18 font-weight-bold">
                                ${row.month_2}
                            </td>
                            <td class="text-center">${comp_month_2_3}</td>
                            <td class="text-center text-light bg-bmg-warning font-18 font-weight-bold">
                                ${row.month_3}
                            </td>
                        </tr>
                    `);
                }

                $table.find('tbody').html(tbody.join(''));

                $table.find('tfoot').html(`
                    <tr>
                        <td colspan="4"></td>
                        <td class="text-center text-bmg-warning bg-bmg-light-total font-18 font-weight-bold">
                            <div class="d-flex flex-column">
                                <span>${total.month_1}</span>
                                <span>Totais</span>
                            </div>
                        </td>
                        <td></td>
                        <td class="text-center text-bmg-warning bg-bmg-light-total font-18 font-weight-bold">
                            <div class="d-flex flex-column">
                                <span>${total.month_2}</span>
                                <span>Totais</span>
                            </div>
                        </td>
                        <td></td>
                        <td class="text-center text-bmg-warning bg-bmg-light-total font-18 font-weight-bold">
                            <div class="d-flex flex-column">
                                <span>${total.month_3}</span>
                                <span>Totais</span>
                            </div>
                        </td>
                    </tr>
                `);
            },

            _table(data) {
                const $table = $('#table');
                let tbody = [];

                for ([key, rows] of Object.entries(data)) {

                    const row = rows[0];
                    const comp_month_1_2 = builder.comparative_month(row.comp_month_1_2);
                    const comp_month_2_3 = builder.comparative_month(row.comp_month_2_3);
                    let col_resumo_incidente = [];
                    let col_recorrente = [];

                    for ([k, value] of Object.entries(rows)) {

                        const text_color = value.recorrente == 'Sim' ? 'text-warning' : 'text-light';

                        col_resumo_incidente.push(`
                            <li class="list-group-item ${text_color} bg-primary">
                                ${value.resumo_incidente}
                            </li>
                        `);
                        col_recorrente.push(`
                            <li class="list-group-item ${text_color} bg-primary">
                                ${value.recorrente}
                            </li>
                        `);
                    }

                    tbody.push(`
                        <tr>
                            <td class="text-center font-24 text-warning">${row.fornecedor}</td>
                            <td class="text-center">
                                <ul class="list-group list-group-flush font-12">
                                    ${col_resumo_incidente.join('')}
                                </ul>
                            </td>
                            <td class="text-center">
                                <ul class="list-group list-group-flush font-12">
                                    ${col_recorrente.join('')}
                                </ul>
                            </td>
                            <td class="text-center">
                                <ul class="list-group list-group-flush font-18 font-weight-bold">
                                    <li class="list-group-item text-warning bg-primary">
                                        ${row.tempo_acumulado}
                                    </li>
                                </ul>
                            </td>
                            <td class="text-center">
                                <ul class="list-group list-group-flush font-18 font-weight-bold">
                                    <li class="list-group-item text-warning bg-light">
                                        ${row.month_1}
                                    </li>
                                </ul>
                            </td>
                            <td class="text-center">${comp_month_1_2}</td>
                            <td class="text-center">
                                <ul class="list-group list-group-flush font-18 font-weight-bold">
                                    <li class="list-group-item text-warning bg-light">
                                        ${row.month_2}
                                    </li>
                                </ul>
                            </td>
                            <td class="text-center">${comp_month_2_3}</td>
                            <td class="text-center">
                                <ul class="list-group list-group-flush font-18 font-weight-bold">
                                    <li class="list-group-item text-light bg-warning">
                                        ${row.month_3}
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    `);

                    /*const comp_month_1_2 = builder.comparative_month(value.comp_month_1_2);
                    const comp_month_2_3 = builder.comparative_month(value.comp_month_2_3);

                    tbody.push(`
                        <tr>
                            <td class="text-center">${value.fornecedor}</td>
                            <td class="text-center">${value.resumo_incidente}</td>
                            <td class="text-center">${value.recorrente}</td>
                            <td class="text-center">${value.tempo_acumulado}</td>
                            <td class="text-center">${value.month_1}</td>
                            <td class="text-center">${comp_month_1_2}</td>
                            <td class="text-center">${value.month_2}</td>
                            <td class="text-center">${comp_month_2_3}</td>
                            <td class="text-center">${value.month_3}</td>
                        </tr>
                    `);*/
                }
                $table.find('tbody').html(tbody.join(''));
            },

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

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

                $table.DataTable({
                    lengthChange: false,
                    data: data,
                    responsive: true,
                    searching: false,
                    info: false,
                    // scrollY: '45vh',
                    scrollX: true,
                    scrollCollapse: true,
                    paging: false,
                    aaSorting: [],
                    ordering: false,
                    dom: 'Bfrtip',
                    buttons: [],
                    rowsGroup: [0, 3, 4, 5, 6, 7, 8],
                    columns: [
                        {data: 'fornecedor', title: 'Fornecedor'},
                        {data: 'resumo_incidente', title: 'Resumo: Últimos Incidentes'},
                        {data: 'recorrente', title: 'Recorrente'},
                        {data: 'tempo_acumulado', title: 'Tempo Acumulado'},
                        {data: 'month_1', title: 'Jun/22'},
                        {data: 'comp_month_1_2', title: '', render: builder.comparative_month},
                        {data: 'month_2', title: 'Jul/22'},
                        {data: 'comp_month_2_3', title: '', render: builder.comparative_month},
                        {data: 'month_3', title: 'Ago/22'},
                    ],
                    columnDefs: [
                        {
                            targets: [0, 1],
                            className: 'text-left'
                        },
                        {
                            targets: '_all',
                            className: 'text-center'
                        }
                    ],
                    /*rowCallback: function(row, data, index) {
                        const aDataGravidade = data.gravidade;
                        const gravidadeColor = {
                            'Baixo':'bg-info text-dark',
                            'Médio':'bg-warning text-dark',
                            'Alto':'bg-danger text-dark',
                        };

                        $(row).addClass(gravidadeColor[aDataGravidade] || 'bg-light');
                    },*/
                    initComplete: function(settings, json) {
                        $('.dataTables_scrollBody').addClass('overflow-y overflow-x');
                        helper.stopLoading();
                    }
                });
            },

            comparative_month (data, type, row) {
                // if (data == "" || data == null) {
                //     return '-';
                // }

                const config = {
                    '0':'fa-equals text-primary',
                    '-1':'fa-level-up-alt text-danger',
                    '1':'fa-level-down-alt text-success',
                };

                return `<i class="fa fa-2x ${config[data]}"></i>`;
            },



            createListItems(items, id) {
                let list = [];
                for ([key, value] of Object.entries(items)) {
                    list.push(`
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            ${value.tipo_incidente}
                            <a href="javascript:;" class="show-item-incident" data-key="${key}" data-alert="${id}">
                                <i class="fa fa-eye"></i>
                            </a>
                        </li>
                    `);
                }
                return list.join('');
            },



        };

        $('#update-all').on('click', function () {
            page.load();
        });

        $(document).ready(function() {
            page.load();
        });
    </script>
@endpush