@extends('layouts.app')
@section('content')

<style type="text/css">
    span.multiselect-native-select .btn-group,
    span.multiselect-native-select .btn-group button,
    span.multiselect-native-select .btn-group ul {
        width: 100%;
    }

    .multiselect-container>li.disabled {
        display: none;
    }

    #canal .multiselect-container>li,
    #atendente .multiselect-container>li {
        padding-left: 16px;
    }

    .multiselect-all,
    .multiselect-group b {
        color: #426a9e !important;
    }

    .multiselect-all,
    .multiselect-group {
        padding-left: 0 !important;
    }

    .select-option {
        padding-left: 16px !important;
    }

    .progress {
        font-size: 14px !important;
        position: relative;
        text-align: center;
    }

    .progress-bar-neutro {
        background-color: rgb(199, 199, 199);
    }

    .visits{
        color:#666
    }
    .visits:hover{
        color:#333
    }
</style>

<div class="page-content-wrapper">
    <div class="page-content">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Relatório</span>
                    <i class="fa fa-circle"></i>
                </li>
            </ul>
        </div>
        <h1 class="page-title nova-faixa"> Relatório de Atendimento - Pesquisa de Satisfação / NPS
            <div class="pull-right">
                <i class="nova-faixa-icon icon-notebook" style="padding-right:20px; "></i>
            </div>
        </h1>

        <div class="col-md-12" style="margin-top:1.5%;margin-bottom: 2.5%;">
            <form id='myform'>
                <div class="form-group row">
                    <style type="text/css">
                        .label-error {
                            color: #e7505a;
                        }

                        .form-error {
                            border: 2px solid #e7505a;
                        }

                        span[id^="emj-"] {
                            font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
                        }

                        span[id^="select-emj-"] {
                            font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
                        }
                    </style>

                    <div class="row">
                        <div class='col-md-12'>
                            <div id="erros" class="alert alert-danger" style="display:none;">
                                <ul>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label" id="date"><i class="glyphicon glyphicon-calendar"></i> Dias </label><!--glyphicon-list-alt"-->

                        <select class="form-control" id="datainit" name="data_init" size="1" required>
                            <option value="7" class="select-option" class="subclass" selected>Últimos 7 dias</option>
                            <option value="30" class="select-option">Últimos 30 dias</option>
                            <option value="90" class="select-option">Últimos 3 meses</option>
                            <option value="180" class="select-option">Últimos 6 meses</option>
                            <option value="6" class="select-option">Intervalo de datas personalizado</option>
                        </select>
                    </div>

                    <div class="col-md-4 datepersonalizada" style="display:none">
                        <label class="control-label" id="dateinitper"><i class="glyphicon glyphicon-calendar"></i> Data Inicio<span style=" display: none; padding-left: 40px;">Data Inicial é Obrigatorio</span> </label>
                        <div class="input-group date date-picker margin-bottom-5" id='form_init' data-date-format="dd/mm/yyyy" style="width: 100%">
                            <input type="text" class="form-control form-filter input-sm" name="data_initper" id="datainitper" autocomplete="off" placeholder="data" value="{{date('d/m/Y')}}">
                            <span class="input-group-btn">
                                <button class="btn btn-sm default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                        </div>
                    </div>

                    <div class="col-md-4 datepersonalizada" style="display:none">
                        <label class="control-label" id="datefimper"><i class="glyphicon glyphicon-calendar"></i> Data Final <span style=" padding-left: 40px;display: none;">Data Final é Obrigatorio</span> </label>
                        <div class="input-group date date-picker margin-bottom-5" id="form-fim" data-date-format="dd/mm/yyyy" style="width: 100%">
                            <input type="text" class="form-control form-filter input-sm" name="data_fimper" id="datafimper" autocomplete="off" placeholder="data" value="{{date('d/m/Y')}}">
                            <span class="input-group-btn">
                                <button class="btn btn-sm default" type="button">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label class="control-label"><i style="margin-right: 5px !important" class="fa fa-user"></i>Atendente</label><!--glyphicon-list-alt"-->
                        <select class="bs-select form-control " name="atendente[]" id="atendente" multiple="multiple">
                            @foreach($atendentes as $atendente)
                            <option value="{{$atendente->atendente_id}}" class="select-option">{{$atendente->nome}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Fila </label><!--glyphicon-list-alt"-->

                        <select class="form-control" id="fila" name="filas[]" size="1" required multiple="multiple">
                            @foreach($filas as $fila)
                            <option value="{{$fila->id}}" class="select-option">{{$fila->nome}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <!-- <div class="col-md-4">
                        <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Canal </label>

                        <select class="form-control" id="canal" name="canais[]" size="1" required multiple="multiple">
                            <option value="10" class="select-option" class="subclass" selected>Telefonia</option>
                            <option value="3" class="select-option" selected>Whatsapp</option>
                            <option value="4" class="select-option" selected>Instagram</option>
                            <option value="5" class="select-option" selected>Email</option>
                            <option value="9" class="select-option" selected>Chat</option>
                        </select>
                    </div> -->

                    <div class="col-md-4">
                        <label class="control-label" id="init_label"><i class="glyphicon glyphicon-calendar"></i> Resposta </label><!--glyphicon-list-alt"-->

                        <select class="form-control" id="resposta" name="resposta[]" size="1" multiple="multiple">
                            <option value="1" class="select-option"><span id="select-emj-1">{{empty($emj1) ? '😞' : $emj1}}</span></option>
                            <option value="2" class="select-option"><span id="select-emj-2">{{empty($emj2) ? '🙁' : $emj2}}</span></option>
                            <option value="3" class="select-option"><span id="select-emj-3">{{empty($emj3) ? '😐' : $emj3}}</span></option>
                            <option value="4" class="select-option"><span id="select-emj-4">{{empty($emj4) ? '😁' : $emj4}}</span></option>
                            <option value="5" class="select-option"><span id="select-emj-5">{{empty($emj5) ? '😍' : $emj5}}</span></option>
                        </select>
                    </div>

                    <div class="col-sm-4" style="top: 24px">
                        <button type="button" id="submit" class="btn blue" style="display: inline-block;" form="myform">
                            <i class="fa fa-search"></i> Pesquisar
                        </button>
                    </div>
                </div>
            </form>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="portlet light bordered">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-2">
                                <div class="easy-pie-chart">
                                    <span class="title"> Total de Respostas</span>
                                    <div class="visits" id="bar-total" data-percent="{{$totalResponse}}">
                                        <span id="text-total">{{$totalResponse}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div class="col-md-2">
                                <div class="easy-pie-chart" title="(Número Total de respostas positivas / Número total de respostas) * 100">
                                    <span class="title"> Pontuação de satisfação</span>
                                    <div class="visits" id="bar-pontuacao" data-percent="{{$pontuacao}}">
                                        <span id="text-pontuacao">{{$pontuacao}}</span>%
                                    </div>
                                </div>
                            </div>
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div class="col-md-2">
                                <div class="easy-pie-chart" title="(Número total de respostas / Número total de mensagens CSAT enviadas) * 100.">
                                    <span class="title" href="javascript:;"> Taxa de resposta</span>
                                    <div class="visits" id="bar-taxa" data-percent="{{$taxa}}">
                                        <span id="text-taxa">{{$taxa}}</span>%
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="margin-bottom-10 visible-sm"> </div>
                            <div class="col-md-3">
                                <div class="easy-pie-chart">
                                    <a class="title" href="javascript:;"> Taxa de resposta
                                        <i class="icon-arrow-right"></i>
                                    </a>
                                    <div class="visits" data-percent="85">
                                        <span>34.21</span>%
                                    </div>
                                </div>
                            </div> -->
                            <div class="margin-bottom-10 visible-sm"> </div>
                            <div class="col-md-6">
                                <div class="easy-pie-chart">
                                    <a class="title" href="javascript:;">
                                        <span id="emj-5" title="5">{{empty($emj5) ? '😍' : $emj5}}</span> <span id="emjp-5">{{$score5}}</span>%
                                        <span id="emj-4" title="4">{{empty($emj4) ? '😁' : $emj4}}</span> <span id="emjp-4">{{$score4}}</span>%
                                        <span id="emj-3" title="3">{{empty($emj3) ? '😐' : $emj3}}</span> <span id="emjp-3">{{$score3}}</span>%
                                        <span id="emj-2" title="2">{{empty($emj2) ? '🙁' : $emj2}}</span> <span id="emjp-2">{{$score2}}</span>%
                                        <span id="emj-1" title="1">{{empty($emj1) ? '😞' : $emj1}}</span> <span id="emjp-1">{{$score1}}</span>%
                                    </a>
                                    <div class="progress">
                                        <div id="pb-1" class="progress-bar progress-bar-danger" title="1-{{empty($emj1) ? '😞' : $emj1}}" style="width: {{$score1}}%">
                                            <span class="sr-only">{{$score1}}% Complete (success)</span>
                                        </div>
                                        <div id="pb-2" class="progress-bar progress-bar-warning" title="2-{{empty($emj2) ? '🙁' : $emj2}}" style="width: {{$score2}}%">
                                            <span class="sr-only">{{$score2}}% Complete (success)</span>
                                        </div>
                                        <div id="pb-3" class="progress-bar progress-bar-neutro" title="3-{{empty($emj3) ? '😐' : $emj3}}" style="width: {{$score3}}%">
                                            <span class="sr-only">{{$score3}}% Complete (success)</span>
                                        </div>
                                        <div id="pb-4" class="progress-bar progress-bar-info" title="4-{{empty($emj4) ? '😁' : $emj4}}" style="width: {{$score4}}%">
                                            <span class="sr-only">{{$score4}}% Complete (warning)</span>
                                        </div>
                                        <div id="pb-5" class="progress-bar progress-bar-success" title="5-{{empty($emj5) ? '😍' : $emj5}}" style="width: {{$score5}}%">
                                            <span class="sr-only">{{$score5}}% Complete (danger)</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="glyphicon glyphicon-list-alt"></i>Relatório - Pesquisa de Satisfação / NPS
                        </div>

                        <div id="buttommenu" style="top: 2px;"></div>
                    </div>

                    <style type="text/css">
                        .dt-buttons {
                            float: right !important;
                            margin-top: 3px;
                        }
                    </style>

                    <div class="portlet-body">
                        <style type="text/css">
                            table#sample_1 tbody th,
                            table#sample_1 tbody td {
                                white-space: nowrap;

                            }
                        </style>

                        <div class="table-responsive">
                            <style type="text/css">
                                .center-bold th {
                                    text-align: center;
                                    font-weight: 60 !important;
                                }

                                th,
                                td {
                                    white-space: nowrap;
                                    width: 10%;
                                }

                                div.dataTables_wrapper {
                                    width: 100%;
                                    margin: 0 auto;
                                }

                                div.dataTables_scrollHead {
                                    width: 98% !important;
                                }

                                div.dataTables_scrollBody {
                                    width: 98% !important;
                                }
                            </style>

                            <table class="table table-striped table-bordered table-advance table-hover order-culunm" id="sample_2">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-calendar" style="margin-right: 3px"></i><span>Data Feedback</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-user" style="margin-right: 3px"></i><span>Contato</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="fa fa-user" style="margin-right: 3px"></i><span>Atendente</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Protocolo</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 1</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 1</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 2</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 2</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 3</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 3</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 4</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 4</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 5</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 5</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 6</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 6</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 7</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 7</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 8</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 8</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 9</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 9</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Pergunta 10</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="far fa-file-alt" style="margin-right: 3px"></i><span>Resposta 10</span></th>
                                        <!-- <th class="text-center" style="vertical-align: middle;"><i class="icon-call-out" style="margin-right: 3px"></i><span>Classificação</span></th>
                                        <th class="text-center" style="vertical-align: middle;"><i class="icon-call-in" style="margin-right: 3px"></i><span>Comentario do Feedback</span></th> -->
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="alert alert-danger relatorio" style="display:none;">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="modal fade" id="ModalSatisfaction" tabindex="-1" role="basic" aria-hidden="true">
                <div class="modal-dialog modal-md" style="height: 400px;">
                    <div class="modal-content" style="background-color: #ddd;">
                        <div class="modal-header" style="background-color:#36c6d3">
                            <div class="col-md-12 text-rigth">
                                <span class="caption  bold" id="data_hora_chat" style="float: right; font-size: 12px; color: white;"></span>
                                <span class="caption  bold" style=" font-size: 12px; color: white;" id="titulo_chasts">Chats</span>
                            </div>
                        </div>

                        <div class="modal-body" style="height: 470px;">

                            <div class="col-md-12">
                                <div class="col-md-12">
                                    <ul class="chats" style="height: 450px;overflow-y: scroll;padding-right: 2%;">

                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- <link href="{{ asset('global/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css') }}" rel="stylesheet" type="text/css" /> -->
        <link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js">
        <link rel="stylesheet" type="text/css" href="{{ asset('pages/scripts/relatorio3/fixed.min.js') }}">
        @push('scripts')
        <!-- BEGIN PAGE LEVEL PLUGINS -->
        <link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css" />
        <script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/scripts/datatable.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/datatables/datatables.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}" type="text/javascript"></script>
        <script type="{{asset('global/plugins/datatables/datatables.all.min.js') }}"></script>
        <script type="{{asset('global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js') }}"></script>
        <script src="{{ asset('pages/scripts/relatorioatendimento/csatrelatorio.js') }}" type="text/javascript"></script>

        <!-- <script src="{{ asset('pages/scripts/relatorio3/fixed..js') }}" type="text/javascript"></script> -->


        <script src="{{ asset('pages/scripts/relatorio/bootstrap-confirmation-index.js') }}" type="text/javascript"></script>
        <script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('pages/scripts/components-date-time-pickers.js') }}" type="text/javascript"></script>
        <!--<script src="{{ asset('pages/scripts/components-date-time-pickers.js') }}" type="text/javascript"></script>-->
        <script src="{{ asset('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>
        <!--Datatables-execel-print-->

        <!--<script src="{{ asset('global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>-->


        <script type="text/javascript">
            @can('relatorio-total_atendimento-exportar')
            let buttons = true;
            @else
            let buttons = false;
            @endcan

            $(document).ready(function() {
                $('#limpa_campo').click(function() {
                    $("#canais").val('');
                    $("#filas").val('');
                    $("#datafinal").val('');
                    $('#atendente').val('');
                    $('#canais').val('');
                    $('#pesquisa').val('');
                    (".date-picker").datepicker("refresh");
                });

                $('#atendente').multiselect({
                    allSelectedText: 'Todos selecionados',
                    nonSelectedText: 'Selecionar',
                    numberDisplayed: 10,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    enableCaseInsensitiveFiltering: true,
                    selectAllText: 'Selecionar Todos',
                    includeSelectAllOption: true
                });

                $('#canal').multiselect({
                    allSelectedText: 'Todos selecionados',
                    nonSelectedText: 'Selecionar',
                    numberDisplayed: 10,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    enableCaseInsensitiveFiltering: true,
                    selectAllText: 'Selecionar Todos',
                    includeSelectAllOption: true
                });

                $('#fila').multiselect({
                    allSelectedText: 'Todos selecionados',
                    nonSelectedText: 'Selecionar',
                    numberDisplayed: 10,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    enableCaseInsensitiveFiltering: true,
                    selectAllText: 'Selecionar Todos',
                    includeSelectAllOption: true
                });

                $('#resposta').multiselect({
                    allSelectedText: 'Todos selecionados',
                    nonSelectedText: 'Selecionar',
                    numberDisplayed: 10,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    enableCaseInsensitiveFiltering: true,
                    selectAllText: 'Selecionar Todos',
                    includeSelectAllOption: true
                });

                $('#datainit').multiselect({
                    allSelectedText: 'Todos selecionados',
                    nonSelectedText: 'Selecionar',
                    numberDisplayed: 10,
                    maxHeight: 200,
                    buttonWidth: '100%',
                    enableCaseInsensitiveFiltering: true,
                    selectAllText: 'Selecionar Todos',
                    includeSelectAllOption: true
                });

                $('#pesquisa').on('keydown', function(event) {
                    if (event.keyCode == '13') {
                        event.preventDefault();
                        $('#submit').click();
                    }
                });
            });
        </script>
        @endpush
        @endsection