@include('plugins.datatables.default')
@include('plugins.datatables.buttons')
@include('plugins.moment')
@include('plugins.daterangepicker')
{{-- @include('plugins.parsley') --}}

@push('page-js')
<script>
    let filter = {
        status: 1,
        type: 'VQ'
    };

    let tiposSkill = [];
    @foreach ($tipos as $tipo)
        tiposSkill.push({
            'text' : '{{$tipo['Tipo']}}', action () {
                $('.btn-filter-type span').text('{{$tipo['Tipo']}}');
                $('#skill-table').DataTable().column(2).search('^{{$tipo['Tipo']}}$', true, false).draw();
            }
        });
    @endforeach
    tiposSkill.push({
        'text' : 'Todos', action () {
            $('.btn-filter-type span').text('Tipo Skill');
            $('#skill-table').DataTable().column(2).search('', true, false).draw();
        }
    });

    $(document).ready(function () {
        $('#modal-skill-details, #modal-skill-create').on('hidden.bs.modal', function (e) {
            $(this).find('.modal-body').html(`<div class="row m-t-40 m-b-30"><div class="loader-1"></div></div>`);
        });

        const createSkill = () => {
            let $modal = $('#modal-skill-create').modal('show');
            $.ajax({
                type: 'GET',
                url: '{{ route('governance.skill.create') }}',
                success(response) {
                    $modal.find('.modal-body').html(response.view);
                },
                error: notifyAjaxError
            });
        };

        const table = $('#skill-table').DataTable({
            ajax: {
                url: document.URL,
                method: 'post',
                dataSrc: 'data',
                data: function () {
                    return filter;
                }
            },
            scrollX: true,
            scrollCollapse: true,
            paging: true,
            dom: 'Bfrtip',
            buttons: [
                'pageLength',
                'copy',
                'excel',
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                },
                {
                    text: `<i class="fa fa-plus"></i> Criar`,
                    className: 'btn btn-success dt-btn-alone m-r-5 ',
                    action: createSkill,
                },
                {
                    extend: 'collection',
                    className: 'btn-dark btn-filter-status waves-effect waves-light',
                    text: 'Ativos',
                    buttons: [
                        {
                            text: 'Ativos', action() {
                                filter.status = 1;

                                $('#skill-table').DataTable().column(8).search('^Ativo$', true, false).draw();
                                $('.btn-filter-status span').text('Ativos');
                            }
                        },
                        {
                            text: 'Inativos', action() {
                                filter.status = 0;
                                $('#skill-table').DataTable().column(8).search('^Desativado$', true, false).draw();
                                $('.btn-filter-status span').text('Inativos');
                            }
                        },
                    ],
                    fade: true
                },
                {
                    extend: 'collection',
                    className: "btn-dark btn-filter-type ",
                    text: 'Tipo Skill',
                    buttons: tiposSkill,
                    fade: true
                },
            ],
            columns: [
                {data: 'skill', title: 'Skill/Grupo'},
                {data: 'descricao', title: 'Descrição'},
                {data: 'Tipo', title: 'Tipo'},
                {data: 'canal', title: 'Canal'},
                {data: 'agrupamento', title: 'Agrupamento'},
                {data: 'celula', title: 'Célula'},
                {data: 'callcenter', title: 'Callcenter'},
                {data: 'inicio', title: 'Início'},
                {
                    data: 'status',
                    title: 'Status',
                    render(data) {
                        let type = '';

                        switch (data) {
                            case 'Pendente':
                                type = 'warning';
                                break;
                            case 'Aprovado':
                                type = 'success';
                                break;
                            case 'Desativado':
                            case 'Reprovado':
                                type = 'danger';
                                break;
                            default:
                                type = 'primary';
                                break;
                        }

                        return `<span class="badge badge-${type}">${data}</span>`;
                    }
                },
                {
                    data: 'skillID',
                    title: 'Opções',
                    'class': 'text-center',
                    orderable: true,
                    searchable: true,
                    render(data) {
                        return `<a data-skillid="${data}" class="mr-2 view pointer" data-toggle="tooltip" title="Detalhar"><i class="fa fa-edit text-primary"></i></a>`;
                    }
                }
            ],
            order: [[0, "desc"]],
            initComplete() {
                $('[data-toggle="tooltip"]').tooltip();
                $('.dataTables_scrollBody').addClass('overflow-x overflow-y');
                $('#skill-table').DataTable().column(8).search('^Ativo$', true, false).draw();
                $('#skill-table').DataTable().columns.adjust();
            }
        });

        $('#skill-table').delegate('[data-skillid]', 'click', function () {
            let skillid = $(this).data('skillid');
            let $modal = $('#modal-skill-details').modal('show');
            $modal.find('.modal-body').html('<div class="loader-1"></div>');

            $.ajax({
                url: '{{ route('governance.skill.edit') }}',
                type: 'POST',
                data: {
                    view: 'details',
                    skillID: $(this).data('skillid')
                },
                success(result) {
                    $modal.find('.modal-body').html(result.view);
                },
                error: notifyAjaxError
            });
        });
    });

    $(document).on('change', '#cel-rec-area', function (e) {
        e.preventDefault();
        const value = $(this).val();
        const elem = $(`#cel-rec-tier option[data-area-id="${value}"]`);

        $('#cel-rec-tier option').hide();
        $('#cel-rec-tier option[value="0"]').show().prop('selected', true).change();

        if (value != 0) {
            if (elem.length == 1) {
                elem.prop('selected', true);
            }

            elem.show().change();
        }
    });

    $(document).on('change', '#cel-rec-tier', function (e) {
        e.preventDefault();
        const value = $(this).val();
        const elem = $(`#cel-rec-celula option[data-operation-id="${value}"]`);

        $('#cel-rec-celula option').hide();
        $('#cel-rec-celula option[value="0"]').show().prop('selected', true).change();

        if (value != 0) {
            elem.show().change();

            if (elem.length == 1) {
                elem.prop('selected', true).change();
            }
        }
    });
</script>
@endpush