@extends('layouts.app')
@section('content')
<style type="text/css">
    .message{
        display: table;
        min-width: 20%;
    }

    .label-error{
        color:#e7505a;
    }

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

    #cinza{
        background-color: #e1e5ec!important;
        border-color: #e1e5ec !important;
        transition: 1s;
    }

    #cinza:hover{
        border-color: #e1e5ec!important;
    }

    i.fa.fa-paper-plane-o{
        margin-right: 5px;
    }

    .centralizar{
        text-align: center;
    }

    .dt-buttons{
        float: right!important;
        margin-top: 3px;
    }

    .center-bold th{
        text-align: center;
        font-weight: 60 !important;
    }
    
    th, td { 
        white-space: nowrap;
    }

    div.dataTables_wrapper {
        width: 100%;
        margin: 0 auto;
    }
    div.dataTables_scrollHead{
        overflow: scroll;
        width: 98%!important;
    }
    div.dataTables_scrollBody{
        width: 98%!important;
    }

    th i{
        margin-right: 5px;
        font-size: 13px;
    }

    #formPesquisa .col-md-3{padding-left:0;}
    #formPesquisa .row{position: relative;}
    #formPesquisa .col-md-3.col-pesquisar{bottom: 0;position: absolute;left: 1;display: inline-block;}

    #ModalChatWhatssapp .modal-dialog.modal-md{height: 400px;width: 700px;}
    #ModalChatWhatssapp .modal-content{background-color: #ddd;}
    #ModalChatWhatssapp .modal-content .modal-header{background-color:#426a9e;margin-bottom:10px;color: #ffffff;font-size: 13px;}
    #ModalChatWhatssapp .modal-content .modal-header .float-right{float: right;text-align: left;position: relative;display: inline-grid;}
    #ModalChatWhatssapp .modal-content .modal-header .float-left{float: left;position: relative; display: inline-grid;}

    .print-button{background: #e9e9e9;padding: 3px 12px;color: #000;border: 1px solid #999;cursor: pointer;font-weight: 400;margin-left: 5px;font-size: 12px;user-select: none;}
    .print-button:hover{background: #e0e0e0;}
    .modal-body{display:grid;}

    /* css para função de imprimir */
    @media print {
        .modal-header{background-color:#426a9e;margin-bottom:10px;color: #ffffff;font-size: 13px;-webkit-print-color-adjust: exact;padding: 15px;position: relative; display: block;height: min-content;}
        .float-right{float: right;text-align: left;position: relative;display: inline-grid;}
        .float-left{float: left;position: relative; display: inline-grid;}
        .row-button{margin-top: 10px;text-align: right;display: inline-grid;position: relative;width: 100%;}
        .modal-body{overflow-y: hidden!important;height: min-content!important;}
        .modal-body #status{background-color: #F1C40F!important;color:#fff;font-size: 13px;padding: 2px 5px;margin: 10px 0;-webkit-print-color-adjust: exact;position: relative;}
        .modal-body .accordion-toggle{display: none!important;}
    }
    .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;
    }
</style>
<!-- <script src="{{ asset('global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.css') }}" type="text/javascript"></script> -->

<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <div class="page-content">
        <!--1-->
        <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>
                </li>
            </ul>
        </div>
        <h1 class="page-title nova-faixa"> Relatório de BackOffice
            <div class="pull-right">
                <i class="nova-faixa-icon icon-notebook" style="padding-right:20px; "></i>
            </div>
        </h1>
        <h4>
            <small class="pull-right">
                <span class="ajuda" data-toggle="confirmation" data-popout="true" data-trigger="hover" data-placement="left" data-original-title="" title="" id="ajuda">
                    Ajuda <i class="fa fa-question-circle" aria-hidden="true"></i>
                </span>
            </small>
        </h4>
        <!-- <a href="{{URL::to('relatorio')}}" style="cursor: not-allowed;" disabled='disabled'><button style="cursor: not-allowed;" disabled='disabled' class="btn blue" style="margin-top: 1.0%;">Visualizar Resultados</button></a> -->

        <div class="col-md-12" style="margin-top:1.5%;margin-bottom: 2.5%;">
            <form method="post" id="formPesquisa" onKeyPress="return submitenter(this,event)">
                {{ csrf_field() }}
                <div class="row">
                    <!-- data inicial -->
                    <div class="col-md-3">
                        <label class="control-label" id="init_label"><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">
                            <input type="text" class="form-control form-filter input-sm"  name="data_init" id="datainit" autocomplete="off" placeholder="data" value="{{$data_inicial}}" style="height:34px;">
                            <span class="input-group-btn">
                                <button class="btn btn-sm default" type="button" style="height:34px">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                    <!-- data final -->
                    <div class="col-md-3">
                        <label class="control-label" id="fim_label"><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">
                            <input type="text" class="form-control form-filter input-sm"  name="data_fim" id="datafinal" autocomplete="off" placeholder="data" value="{{$data_final}}" style="height:34px;">
                            <span class="input-group-btn">
                                <button class="btn btn-sm default" type="button" style="height:34px">
                                    <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                    <!-- status -->
                    <div class="col-md-3">
                        <label class="control-label" id="fim_label"><i class="fa fa-check-square-o"></i> Status</label>
                        <select class="form-control" id="status" name="status[]" size="1" multiple="multiple">
                            <option value="PENDENTE" class="select-option" selected>Pendentes</option>  
                            <option value="CONCLUÍDO" class="select-option" selected>Concluido</option>
                        </select>
                    </div>
                    <!-- atendente -->
                    <div class="col-md-3">
                        <label class="control-label"><i class="fa fa-user"></i> Atendente</label>
                        <select class="bs-select form-control " name="atendente[]" id="atendente" multiple="multiple">
                            @foreach($atendente as $at)
                                <option class="select-option" value="{{$at->id}}">{{$at->name}}</option>
                            @endforeach      
                        </select>
                    </div>
                </div>
                <div class="row">
                    <!-- canal -->
                    <div class="col-md-3">
                        <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" multiple="multiple">
                            <option value="10" class="subclass select-option">Telefonia</option>
                            <option value="3" class="select-option">Whatsapp</option>
                            <option value="4" class="select-option">Instagram</option>
                            <option value="5" class="select-option">Email</option> 
                            <option value="9" class="select-option">WebChat</option>   
                        </select>
                    </div>
                    <!-- pesquisa -->
                    <div class="col-md-3">
                        <label class="control-label"><i class="fa fa-search"></i> Pesquisa</label>
                        <input type="text" class="form-control" placeholder="nome do contato, empresa, telefone, cpf, motivo, assunto..." name="pesquisa" id="pesquisa">
                    </div>
                    <!-- botões -->
                    <div class="col-md-3 col-pesquisar">
                        <button type="button" class="btn blue" id="getRelatorioPendencia">
                            <i class="fa fa-search"></i> Pesquisar
                        </button>

                        <span title="Link Externo">
                            <a id="limpa_campo" title="Limpar Filtros" class="acoes btn btn-circle btn-default" tabindex="0"><i class="fa fa-eraser"></i></a>
                        </span>
                    </div>
                </div>
            </form>
            <br/>
            <div class='row' style="margin-bottom:2%">
                <div class="alert alert-danger relatorio" style="display:none;">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class='col-md-12'>
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="glyphicon glyphicon-list-alt"></i>Relatório - Histórico de Backoffice
                        </div>
                        
                        <div class="tools"><!--inicio -->
                                   <!--fim--> 
                        </div>

                        <div id="buttommenu"  style="top: 2px;"></div>
                    </div>
                    
                    <!-- inicio tabela-->
                    <div class="portlet-body">
                        <div id="firsttableresponsive" class="table-responsive">
                            <table class="table table-striped table-bordered table-advance table-hover order-column display" id="sample_1" style="width: 98%!important">
                                <thead>
                                    <tr class="center-bold" style="width: 98%!important">
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-phone" style="margin-right: 3px"></i> <span>Canal</span>  </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-object-group" style="margin-right: 3px"></i> <span>Fila Origem</span>    </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-object-group" style="margin-right: 3px"></i> <span>Fila BackOffice</span>    </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-pencil" style="margin-right: 3px"></i> <span>Status</span>    </th>
                                        <th  class="text-center"style="font-weight: 60!important;"><i class="fa fa-user" style="margin-right: 3px"></i> <span>Atendente Origem</span>  </th>
                                        <th  class="text-center"style="font-weight: 60!important;"><i class="fa fa-user" style="margin-right: 3px"></i> <span>Atendente BackOffice</span>  </th>
                                        <th  class="text-center"style="font-weight: 60!important;"><i class="fa fa-user" style="margin-right: 3px"></i> <span>Nome Civil</span>  </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-phone" style="margin-right: 3px"></i> <span>Origem</span>    </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-building-o " style="margin-right: 3px"></i><span>Empresa</span>  </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-commenting" style="margin-right: 3px"></i> <span>Motivo</span>   </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-wechat" style="margin-right: 3px"></i> <span>Assunto </span>  </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="icon-check" style="margin-right: 3px"></i> <span>Finalização</span>    </th>
                                        <th style="font-weight: 60!important;"><i class="fa fa-tags" style="margin-right: 3px"></i><span>Marcação</span>    </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-wechat" style="margin-right: 3px"></i> <span>Parecer </span>  </th>
                                        <th  class="text-center"style="font-weight: 60!important;"><i class="fa fa-calendar" style="margin-right: 3px"></i><span>Data e <br>Hora Inicial</span>   </th>
                                        <th  class="text-center"style="font-weight: 60!important; vertical-align: middle;"><i class="fa fa-calendar" style="margin-right: 3px"></i><span>Data e <br>Hora Final</span>   </th>
                                        <th  class="text-center"style="font-weight: 60!important;"><i class="far fa-clock" style="margin-right: 3px"></i><span>Tempo em Fila</span>   </th>
                                        <th  class="text-center"style="font-weight: 60!important;"><i class="far fa-clock" style="margin-right: 3px"></i><span>Duração</span>   </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="icon-earphones-alt" style="margin-right: 3px"></i> <span>Tipo</span>  </th>  
                                        <th class="text-center" style="font-weight: 60!important;"><i class="icon-drawer" style="margin-right: 3px"></i> <span>Protocolo </span>  </th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-play" style="margin-right: 3px"></i> <span>Conteúdo</span>  </th>
                                    </tr>
                                </thead>
                                <tbody style="width: 98%;">
                                  
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</div>

<div class="col-md-12">
    <div class="modal fade" id="ModalChatWhatssapp" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="float-left">
                                <label class="caption bold float-left" id="protocolo_chasts">Protocolo: </label>
                                <label class="caption bold float-left" id="contato_chasts">Nome Civil: </label>
                                <label class="caption bold float-left" id="origem_chasts">Origem: </label>
                            </div>
                            <div class="float-right">
                                <label class="caption bold float-right" id="data_chasts">Data: </label>
                                <label class="caption bold float-right" id="hora_chasts">Hora: </label>
                                <label class="caption bold float-right" id="atendente_chasts">Atendente: </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="modal-body" style="height: 470px;overflow-y: scroll;">
                  
                    <div class="col-md-12 chats">
                        
                    </div>
                </div>
                 
            </div>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="modal fade" id="ModalAudio" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 300px;">
            <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: 200px;">
                    <div class="row">                         
                        <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-3">
                                    <span>Gravação:</span>
                                </div>
                                <div class="col-md-10 col-sm-10 col-lg-10 col-xs-9">
                                    <ul class="play-audio" style="padding-left: 0%;">
                                    
                                    </ul>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-2 col-sm-2 col-lg-2 col-xs-3">
                                    <span>Tratativa:</span>
                                </div>
                                <div class="col-md-10 col-sm-10 col-lg-10 col-xs-9">
                                    <textarea id="tratativa" readonly rows="5" style="resize: none;width: 100%"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 
            </div>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="modal fade" id="ModalEmail" 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>
<!-- END CONTENT -->

<!-- <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" /> -->

@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 src="{{ asset('global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/moment/moment.min.js') }}" type="text/javascript"></script>

<!-- END PAGE LEVEL PLUGINS -->
<script src="{{ asset('pages/scripts/relatoriopendencia/historicopendencia.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 type="text/javascript">
@can('relatorio-pendencia-exportar')
    let buttons = true;
@else
    let buttons = false;
@endcan

$(document).ready(function(){
    $('#hora_init').timepicker('showWidget');
    $('#hora_fim').timepicker('showWidget');
        
    $('#limpa_campo').click(function(){
        $("#datainit").val('');
        $("#datafinal").val('');
        $('#atendente').val('');
        $('#pesquisa').val('');
    });
    
    $('#canal').multiselect({
        allSelectedText: 'Todos selecionados',
        nonSelectedText: 'Selecionar',
        numberDisplayed: 10,
        maxHeight: 200,
        buttonWidth: '100%',
        enableCaseInsensitiveFiltering: true,
        selectAllText: 'Selecionar Todos',
        includeSelectAllOption: true
    });
    
    $('#tipo_atendimento').multiselect({
        allSelectedText: 'Todos selecionados',
        nonSelectedText: 'Selecionar',
        numberDisplayed: 10,
        maxHeight: 200,
        buttonWidth: '100%',
        enableCaseInsensitiveFiltering: true,
        selectAllText: 'Selecionar Todos',
        includeSelectAllOption: true
    });

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

    $('#status').multiselect({
        allSelectedText: 'Todos selecionados',
        nonSelectedText: 'Selecionar',
        numberDisplayed: 10,
        maxHeight: 200,
        buttonWidth: '100%',
        enableCaseInsensitiveFiltering: true,
        selectAllText: 'Selecionar Todos',
        includeSelectAllOption: true
    });
});
</script>
@endpush

@endsection