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

    .out a{color: #fff!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 - Fila Omnichannel
            <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">
                    <div class="form-group" >
                        <style type="text/css">
                            .label-error{
                                color:#e7505a;
                            }

                            .form-error{
                                border: 2px solid #e7505a;
                            }
                        </style>
                        
                        <div class="col-md-12" style="padding-left: 0px;">
                            <div class="col-md-4">
                                <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" style = "width: 100%" >
                                    <input type="text" class="form-control form-filter input-sm" name="data_init" id="datainit" autocomplete="off" placeholder="data" value="{{$data_inicial}}">
                                    <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" 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" style = "width: 100%" >
                                    <input type="text" class="form-control form-filter input-sm" name="data_fim" id="datafinal" autocomplete="off" placeholder="data" value="{{$data_final}}" >
                                    <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-search"></i>Pesquisa</label><!--glyphicon-list-alt"-->
                            <input type="text" class="form-control" placeholder="Telefone" name="pesquisa" id="pesquisa">
                        </div>
                            

                            <!--<div class="col-md-3">
                                <label class="control-label" id="fim_label"><i class="glyphicon glyphicon-calendar"></i> Hora inicial <span style="padding-left: 40px;display: none;">Hora inicial</span> </label>
                                <div class="input-group bootstrap-timepicker timepicker">
                                    <input id="hora_init" name="hora_init" type="text" class="form-control input-small">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                </div>
                            </div> -->
                            
                            <!--<div class="col-md-3">
                                <label class="control-label" id="fim_label"><i class="glyphicon glyphicon-calendar"></i>Hora Final <span style="padding-left: 40px;display: none;">Hora inicial</span> </label>
                                <div class="input-group bootstrap-timepicker timepicker">
                                    <input id="hora_fim" name="hora_fim" type="text" class="form-control input-small">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                            </div> -->
                            
                            <!--<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="hora_fim" id="datafinal" autocomplete="off" placeholder="data" >
                                <span class="input-group-btn">
                                    <button class="btn btn-sm default" type="button">
                                      <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                            </div> -->
                        </div>
                    </div>

                    <div class="col-md-12" style="padding-left: 0px;">

                        <div class="col-md-4">
                            <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="1" class="select-option">Atendido</option>
                                <option value="2" class="select-option">Em Atendimento</option>  
                                <option value="3" class="select-option">Em Fila de Espera</option>
                                <option value="4" class="select-option">Fora do Horário</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="control-label" id="init_label"><i class="fa fa-comments-o"></i> Canal *</label>
                           
                            <select class="form-control" id="canal" name="canais[]" size="1" multiple="multiple" required>
                                <!-- <option value="10" class="subclass" disabled>Telefonia</option> -->
                                <option value="3" class="select-option" selected>Whatsapp</option>
                                <!-- <option value="5" disabled>Email</option>  -->
                                <option value="9" class="select-option" selected>Chat</option> 
                            </select>
                        </div>
                        
                       
                        <div class="col-md-4" style='top:26px'>
                            <button type="button" class="btn blue" id="getRelatorioWhats" style="display: inline-block;">
                            <i class="fa fa-search"></i> Pesquisar</button>

                            <span style="width: 10px; padding-left: 10px;" title="Link Externo">
                                <a id="limpa_campo" title="Limpar Filtros" class="acoes btn btn-circle btn-default" tabindex="0" style="padding-left: 4px;padding-right: 4px;padding-bottom: 2px;padding-top: 2px;"><i class="fa fa-eraser"></i></a>
                            </span>
                        </div>

                    </div>
                    
                    <style type="text/css">
                        #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;
                        }
                    </style>
                    
                    <!--<div class="col-md-4" style="">
                        <label class="control-label"><i class="fa fa-user"></i>Atendente</label><!--glyphicon-list-alt"
                        <select class="bs-select form-control " name="atendente" id="atendente">
                            <option value="">Selecione um Atendente</option>
                            @foreach($atendente as $at)
                                <option value="{{$at->id}}">{{$at->name}}</option>
                            @endforeach      
                        </select>
                    </div>-->
                        
                </div>
                
                <div class="col-md-8" id="Usuario" style="display: none;" >
                    <label class="control-label"><i  style="margin-right: 5px !important" class="fa fa-user"></i>Usuario</label>
                    <input type="text" class="form-control" name="mensagen"  style="height: 34px !important">
                </div>

                <div class="col-md-8" id="Telefone" style="display: none;">
                    <label class="control-label"><i  style="margin-right: 5px !important" class="fa fa-mobile-phone"></i>Telefone</label>
                    <input type="text" class="form-control" name="celular" id="tel"  style="height: 34px !important">
                </div>

            </form>
        </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 - Fila Omnichannel
                        </div>
                        
                        <div class="tools"><!--inicio -->
                                   <!--fim--> 
                        </div>

                        <div id="buttommenu"  style="top: 2px;"></div>
                    </div>
                    
                    <style type="text/css">
                        .centralizar{
                            text-align: center;
                        }

                        .dt-buttons{
                            float: right!important;
                            margin-top: 3px;
                        }
                    </style>
                    <!-- inicio tabela-->
                    <div class="portlet-body">
                        <div 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>
                                    <style type="text/css">
                                        .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;
                                        }

                                    </style>
                                    <tr class="center-bold" style="width: 98%!important">
                                        <th class="text-center"style="font-weight: 60!important;"><i class="fa fa-calendar" style="margin-right: 3px"></i><span>Data</span></th>
                                        <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-phone" style="margin-right: 3px"></i><span>Fila</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-address-card" style="margin-right: 3px"></i> <span>Nome</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-address-card" style="margin-right: 3px"></i> <span>CNPJ</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-address-card" style="margin-right: 3px"></i> <span>CPF</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-address-card" style="margin-right: 3px"></i> <span>CEP</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-home" style="margin-right: 3px"></i> <span>Nome da Empresa</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-envelope" style="margin-right: 3px"></i> <span>Email</span></th>
                                        <th class="text-center" style="font-weight: 60!important;"><i class="fa fa-phone" style="margin-right: 3px"></i> <span>Telefone</span></th>
                                        <th style="font-weight: 60!important;"><i class="fa fa-tags" style="margin-right: 3px"></i><span>Status</span></th>
                                        <th class="text-center"style="font-weight: 60!important;"><i class="far fa-clock" style="margin-right: 3px"></i><span>Entrada na Fila</span></th>
                                        <th class="text-center"style="font-weight: 60!important;"><i class="far fa-clock" style="margin-right: 3px"></i><span>Tempo de Espera</span></th>
                                        <th class="text-center"style="font-weight: 60!important;"><i class="far fa-clock" style="margin-right: 3px"></i><span>Saída da Fila</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="far fa-clock" style="margin-right: 3px"></i><span>Tempo de Atendimento</span></th>
                                        <th class="text-center"style="font-weight: 60!important;"><i class="fa fa-user" style="margin-right: 3px"></i><span>Atendente</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>
                  
                                    <style type="text/css">
                                        tbody tr td{
                                            height:;
                                        }
                                    </style>
                                </thead>
                                <tbody style="width: 98%;">
                                  
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-danger relatorio" style="display:none;">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <style type="text/css">
        th i{
            margin-right: 5px;
            font-size: 13px;
        }
    </style>
 
</div>
<!-- Modais para visualização do conteúdo -->
<div class="col-md-12">
    <div class="modal fade" id="ModalChatWhatssapp" 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>

<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;width: 1000px;position: absolute; left: 50%; transform: translate(-50%, 0%);">
                <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>

<div class="col-md-12">
    <div class="modal fade" id="Modalchat" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog modal-md" style="height: 400px;">
            <div class="modal-content" style="background-color: #ddd;/*width: 1000px;position: absolute; left: 50%; transform: translate(-50%, 0%);*/">
                <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>

<!-- END PAGE LEVEL PLUGINS -->
<script src="{{ asset('pages/scripts/funcoes/funcoes.js') }}" type="text/javascript"></script>
<script src="{{ asset('pages/scripts/relatorio/relatoriowhats.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('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">
@can('relatorio-omnichannel-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('');
    });
    
    $('#datainit').on('change',function(){
        let data = $('#datainit').val();
        $("input[name='data_init']").removeAttr('value');
        $("input[name='data_init']").attr('value',data);
    })
    $('#datafinal').on('change',function(){
        let data = $('#datafinal').val()
        $("input[name='data_fim']").removeAttr('value');
        $("input[name='data_fim']").attr('value',data);        
    })
    
    $('#canal').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
    });

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

</script>
@endpush

@endsection