@extends('layouts.app')
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
@section('content')
<style type="text/css">
    .message .body b,
    .message .body i,
    .message .body code{
        display: contents !important;
    }
    .message{
        display: table;
        min-width: 20%;
    }
    .message iframe{max-width: 400px;max-height: 300px;}
    .chats{width: 550px;}

    .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;
    }
    
    .modal-body{
        display:grid;
    }
    .imprimir{left: 0;top: 0;position: absolute;width: 100%;display: none;z-index: 2;}
    .imprimir.imprimir-whatsapp .modal-content,.imprimir.imprimir-telefonia .modal-content{width: 100%!important;position: relative!important;left: unset!important;display: table;}
    .imprimir.imprimir-chat .modal-content,.imprimir.imprimir-email .modal-content{width: 100%!important;position: relative!important;display: table;}
    
    .imprimir .modal-header{border-bottom: 1px solid #EFEFEF;padding: 15px;background-color: #426a9e!important;color:#fff;-webkit-print-color-adjust: exact;}
    .imprimir .modal-header .print-button{background: #e9e9e9;padding: 3px 12px;color: #000;border: 1px solid #999;cursor: pointer;font-weight: 400;margin-left: 5px;font-size: 12px;-webkit-print-color-adjust: exact;}
    .imprimir .chats li{list-style: none;padding: 5px 0;margin: 10px auto;font-size: 12px;}
    .imprimir .chats li .message {display: block;padding: 5px;position: relative;}
    .imprimir .chats li.out .avatar{float: right;margin-left: 10px;}
    .imprimir .chats li.in .avatar {float: left;margin-right: 10px;}
    
    .imprimir audio{-webkit-print-color-adjust: exact;}
    @media print {
        /* esconder tudo */
        body *{visibility: hidden;}
        /* exibir somente o que tem na div para imprimir */
        .imprimir, .imprimir * {visibility: visible;display:block;}
        /* estilização de links */
        a::after{display: none;}
        
        /* estilização da página */
        .imprimir .modal-header span{color: #fff!important; -webkit-print-color-adjust: exact;}
        .imprimir .modal-header .print-button{background: #e9e9e9!important;color: #000!important;-webkit-print-color-adjust: exact;display: inline-block;}
        .imprimir .modal-body{background-color: #ddd!important;-webkit-print-color-adjust: exact;overflow-y: hidden!important;height: max-content!important;overflow-x: hidden!important;}
        .imprimir .modal-body ul.chats{height: auto!important;width: 100%!important;overflow-y: hidden!important;}

        .imprimir.imprimir-whatsapp .modal-body ul.chats span,.imprimir.imprimir-chat .modal-body ul.chats span,.imprimir.imprimir-telefonia .modal-body ul.chats span{background-color: #426AB4!important;color: #fff!important;-webkit-print-color-adjust: exact;}
        .imprimir.imprimir-email .modal-body ul.chats span{background-color: transparent!important;color: #000!important;-webkit-print-color-adjust: exact;}
        .imprimir .modal-body ul.chats .out .atendente_nome span{background: transparent!important;color: #000!important;-webkit-print-color-adjust: exact;}
        .imprimir .modal-body ul.chats .out .message,.imprimir .modal-body ul.chats .out .message nome{background-color: #426a9e!important;color: #fff!important;border-right: 2px solid #426a9e!important;padding: 5px;-webkit-print-color-adjust: exact;}
        .imprimir .modal-body ul.chats .out .message, .imprimir .modal-body ul.chats .out .message nome{color: #fff!important;}
        .imprimir .modal-body ul.chats .out .message .arrow, .imprimir .modal-body ul.chats .in .message .arrow {background-color: transparent!important;}

        .imprimir .modal-body ul.chats .in .message{background-color: #fff!important;color: #000!important;border-left: 2px solid #fff!important;padding: 5px;box-shadow: 0 2px 5px #000!important;-webkit-print-color-adjust: exact;}
        .imprimir .modal-body ul.chats .in .message .body{background-color: #fff!important;color: #000!important;-webkit-print-color-adjust: exact;}
        .imprimir .modal-body ul.chats .in .message .body .datetime{background-color: #fff!important;color: #000!important;-webkit-print-color-adjust: exact;}

        .imprimir .chats li.in .message .arrow, .imprimir .chats li.out .message .arrow{display: block;position: absolute;top: 5px;border-top: 8px solid transparent;border-bottom: 8px solid transparent;right: -8px;-webkit-print-color-adjust: exact;}
        .imprimir .chats li.in .message .arrow {left: -8px;width: 0;height: 0;-webkit-print-color-adjust: exact;}
    }
        
    /* atualizar modal de email */
    #ModalEmail .modal-body,#ModalEmail .modal-body .col-md-12{padding-right: 0px;}
    #ModalEmail .modal-body .chats{width: 100%;}

    /* #ModalEmail *::-webkit-scrollbar {
        height: 4.7px;
        width: 4.7px;
    }
    #ModalEmail *::-webkit-scrollbar-track {
        border-radius: 5px;
        background-color: #DFE9EB;
    }

    #ModalEmail *::-webkit-scrollbar-track:hover {
        background-color: #B8C0C2;
    }

    #ModalEmail *::-webkit-scrollbar-track:active {
        background-color: #B8C0C2;
    }

    #ModalEmail *::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #426a9e;
    }

    #ModalEmail *::-webkit-scrollbar-thumb:hover {
        background-color: #426a9e;
    }

    #ModalEmail *::-webkit-scrollbar-thumb:active {
        background-color: #426a9e;
    } */

    /* ajuste options value */
    #canal.multiselect-container>li, 
    #tipo_atendimento.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;
    }

    /* tooltip atender */
    .tooltip-atender{position: relative;display: inline-block;}
    .tooltip-atender .tooltiptext{visibility: hidden;width: 120px;background-color: #757575;color: #fff;text-align: center;padding: 5px 0;border-radius: 6px!important;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -60px;opacity: 0;transition: opacity 0.3s;user-select: none;padding: 10px;box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);text-align: left;}
    .tooltip-atender .tooltiptext hr{border-color: rgba(255,255,255,.3);margin-top: 10px;margin-bottom: 10px;}
    .tooltip-atender .tooltiptext::after{content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #757575 transparent transparent transparent;}
    .tooltip-atender:hover .tooltiptext{visibility: visible;opacity: 1;}
    /* message answer */
    .message-answer{width: 100%;min-height: 30px;border-radius: 5px!important;border-left: 5px solid;cursor: pointer;user-select: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-height: 100px;font-size: 10px;font-family: inherit;padding: 1px 5px 5px 5px;position: relative;max-width: 350px;margin-bottom: 10px;}
    .in .message-answer{background-color: rgba(0,0,0,.15);border-color: #426a9e;}
    .out .message-answer{background-color: rgba(255,255,255,.15);border-color: #ffffff;}
    .message-answer label{display: block;width: 100%;margin: 5px 0; padding: 0;font-weight: 900;cursor: pointer;}
    .message-answer p{position: relative;padding-bottom: 5px;display: inline;height: 100%;margin: 0;word-break: break-word;width: 100%;}
    .message-answer .file{display: block;width: 50px;height: 50px;margin: 0;font-size: 45px;padding: 0;}
    #chat_whtas .chats{overflow-y: hidden!important;position: relative;}
    #chat_whtas .chats .whatsBox{height: 100%;overflow-x: hidden;width: 100%;position: absolute;}
    #mdl_message_answer .chats{display: block;overflow-x: hidden;width: 100%;padding: 0 15px;}
    /* evitar sobreposição de historico de emails */
    blockquote .inbox-view{height: auto!important;}
    
    @keyframes atender-shorting-loading {from {transform: scaleX(1);}to {transform: scaleX(0);}}
</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 Atendimento</h1>
        <!-- <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() }}
                <style type="text/css">
                    .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; }
                    .relatorio-filtros-row{ margin-bottom: 14px; }
                    .relatorio-filtros-row .form-group{ margin-bottom: 0; }
                    .relatorio-filtros-row .control-label{ font-weight: 500; color: #555; }
                </style>
                <div class="row">
                    {{-- Linha 1: Período e contexto principal do relatório --}}
                    <div class="col-md-12 relatorio-filtros-row">
                        <div class="col-md-2">
                            <label class="control-label" id="init_label"><i class="fa fa-calendar"></i> Data Início<span style="display:none; padding-left:40px;">Data Inicial é Obrigatório</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="dd/mm/aaaa" 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-2">
                            <label class="control-label" id="fim_label"><i class="fa fa-calendar"></i> Data Final<span style="display:none; padding-left:40px;">Data Final é Obrigatório</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="dd/mm/aaaa" 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-2">
                            <label class="control-label"><i class="fa fa-comments"></i> Canal</label>
                            <select class="form-control" id="canal" name="canais[]" size="1" multiple="multiple">
                                <option value="10" class="select-option" 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-2">
                            <label class="control-label" id="fila_control"><i class="fa fa-list"></i> Fila</label>
                            <select class="form-control" id="fila" name="fila" size="1" multiple="multiple">
                                @foreach($canais as $canal)
                                    @if(collect($filas_atendimento)->contains('canal', $canal->id))
                                        <optgroup label="{{$canal->nome}}">
                                            @foreach($filas_atendimento as $fila)
                                                @if($fila['canal'] == $canal->id)
                                                    <option value="{{ json_encode(['id'=>$fila['id'], 'nome'=>$fila['fila'], 'canal'=>$fila['canal']]) }}">{{$fila['fila']}}</option>
                                                @endif
                                            @endforeach
                                        </optgroup>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label"><i class="fa fa-info-circle"></i> Status</label>
                            <select class="form-control" id="status" name="status" size="1" multiple="multiple">
                                <option value="1" class="select-option" selected>Em Atendimento</option>
                                <option value="2" class="select-option" selected>Atendido</option>
                                <option value="0" class="select-option" selected>Transferido</option>
                                <option value="4" class="select-option" selected>Fora do Horário</option>
                                <option value="5" class="select-option" selected>Em fila de espera</option>
                                <option value="6" class="select-option" selected>Bot</option>
                                <option value="7" class="select-option" selected>Em Pesquisa</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label"><i class="fa fa-exchange"></i> Tipo de atendimento</label>
                            <select class="form-control" id="tipo_atendimento" name="tipos[]" size="1">
                                <option value="">Todos</option>
                                <option value="1">Ativo</option>
                                <option value="2">Receptivo</option>
                            </select>
                        </div>
                    </div>

                    {{-- Linha 2: Refinamento e busca --}}
                    <div class="col-md-12 relatorio-filtros-row">
                        <div class="col-md-2">
                            <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 value="{{$at->id}}" class="select-option">{{$at->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label"><i class="fa fa-tag"></i> Tabulação</label>
                            <select class="form-control" id="tabulacao" name="tabulacao[]" size="1" multiple="multiple">
                                @foreach ($tabulacoes as $idx => $val)
                                    <optgroup label="{{ $idx }}">
                                        @foreach ($val as $option)
                                            <option value="{{ $option['id'] . ',' . $idx }}" class="select-option">{{ $option['nome'] }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label"><i class="fa fa-file-text-o"></i> Template</label>
                            <select class="form-control" id="template" name="template[]" size="1" multiple="multiple">
                                <!-- opções carregadas via AJAX -->
                            </select>
                        </div>
                        <div class="col-md-4">
                            <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>
                        <div class="col-md-2" style="padding-top: 26px;">
                            <button type="button" class="btn blue" id="getRelatorioCampanha" style="display: inline-block;">
                                <i class="fa fa-search"></i> Pesquisar
                            </button>
                            <a id="limpa_campo" title="Limpar Filtros" class="acoes btn btn-circle btn-default" tabindex="0" style="margin-left: 8px; padding: 6px 10px;"><i class="fa fa-eraser"></i></a>
                        </div>
                    </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>
                        <!-- <button type="button" class="btn blue" id="qw" > -->
            </form>
        </div>
        
        <div class="row">
            <div class='col-md-12'>
                <div class="alert alert-success relatorio" style="display:none;">
                    <ul>
                    </ul>
                </div>
                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="glyphicon glyphicon-list-alt"></i>Relatório - Visualização de Atendimentos
                        </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; vertical-align: middle;">
                                            <i class="fa fa-phone" style="margin-right: 3px"></i>
                                            <span>Canal</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="icon-earphones-alt" style="margin-right: 3px"></i>
                                            <span>Tipo</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-phone" style="margin-right: 3px"></i>
                                            <span>Fila</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="icon-earphones-alt" style="margin-right: 3px"></i>
                                            <span>Template</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-phone" style="margin-right: 3px"></i>
                                            <span>Status</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fas fa-address-book" style="margin-right: 3px"></i>
                                            <span>Destino</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fas fa-address-book" style="margin-right: 3px"></i>
                                            <span>Origem</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fas fa-phone" style="margin-right: 3px"></i>
                                            <span>Número Integração</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-user" style="margin-right: 3px"></i>
                                            <span>Contato</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-user" style="margin-right: 3px"></i>
                                            <span>Atendente</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-commenting" style="margin-right: 3px"></i>
                                            <span>Motivo</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-wechat" style="margin-right: 3px"></i>
                                            <span>Assunto</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="icon-check" style="margin-right: 3px"></i>
                                            <span>Concluir</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 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; vertical-align: middle;">
                                            <i class="icon-drawer" style="margin-right: 3px"></i>
                                            <span>Protocolo</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-play" style="margin-right: 3px"></i>
                                            <span>Conteúdo</span>
                                        </th>
                                        <th class="text-center" style="font-weight: 60!important; vertical-align: middle;">
                                            <i class="fa fa-play" style="margin-right: 3px"></i>
                                            <span>Ação</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>

<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">
    <!-- Modal Transferencia de canais -->
    <div class="modal fade" id="modalTransferencia" tabindex="-1" role="basic" aria-hidden="true" data-backdrop="false" data-keyboard="false">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #426a9e !important;">
                  
                </div>
                <div class="modal-body" style="min-height: 150px !important;">
                    
                </div>
                <div class="modal-footer text-center">
                    
                </div>
                <div class="erros" style="display: none;">
                    <div class="alert alert-danger">
                        <ul></ul>
                    </div>
                </div>
                <div class="success" style="display: none;">
                    <div class="alert alert-success">
                        <ul></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Transferencia de canais -->
</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;">                  
                    <ul class="chats" style="height: 450px;overflow-y: scroll;padding-right: 2%;">
                                
                    </ul>
                </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/relatorioatendimento/initrelatorio.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-atendimento-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('');
        $('#template').val('');
        if (typeof loadTemplates === 'function') loadTemplates([]);
    });
    
    $('#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
    });

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

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

    $('#fila').multiselect({
        allSelectedText: 'Todos selecionados',
        nonSelectedText: 'Selecionar',
        nSelectedText: "Selecionados",
        numberDisplayed: 10,
        maxHeight: 200,
        buttonWidth: '100%',
        enableCaseInsensitiveFiltering: true,
        selectAllText: 'Selecionar Todos',
        includeSelectAllOption: true,
        enableClickableOptGroups: true
    });
    $('#fila').on('change', function(){
        if (typeof loadTemplates === 'function') loadTemplates($('#fila').val() || []);
    });
    if (typeof loadTemplates === 'function') loadTemplates([]);
});

// função para carregar mensagens de whatsapp
function submit_menssager_relatorio(data)
{
    $('ul.chats').empty();
    insere_tratativa(data,'ul.chats',true);
}

function insere_tratativa(data, selector)
{
    $.each(data, function (i, item) {
        let horario;

        if (item.created_at.indexOf("T") !== -1) {
            // Ex: 2025-04-03T10:44:00.000Z pega so "10:44"
            horario = item.created_at.split("T")[1].split(":").slice(0, 2).join(":");
        } else {
            // Ex: 2025-04-03 10:44 pega so "10:44"
            horario = item.created_at.split(" ")[1].split(":").slice(0, 2).join(":");
        }

        nome_atendente = (item.user_id != "" && item.user_id != undefined) ? item.user_id : "";

        // criar icone de status
        let status_html = '';
            if(!isEmpty(item.data) && item.tipo == 0 && item.sistema != 1)
            {
                if(typeof item.data == 'string') item.data = JSON.parse(item.data);
                let icon = null;
                let info = [];
                if(isEmpty(data))
                {
                    info.push(`Lida: -`);
                    info.push(`Entregue: -`);
                    icon = '<i class="fas fa-check" style="cursor: pointer;color: #bdbdbd;"></i>';
                }
                else
                {
                    if(!isEmpty(item.data['read']) && item.data['read']['status'] == true && !isEmpty(item.data['read']['date']))
                    {
                        icon = '<i class="fas fa-check-double" style="cursor: pointer;color: #2196f3;"></i>';
                        let date = formatChatMessageDate(item.data['read']['date']);
                        if(!isEmpty(date['date']) && !isEmpty(date['hour'])) info.push(`Lida: ${date['hour']}<br/>${date['date']}`);
                    }
                    else
                    {
                        info.push(`Lida: -`);
                    }

                    if(!isEmpty(item.data['delivered']) && item.data['delivered']['status'] == true && !isEmpty(item.data['delivered']['date']))
                    {
                        if(icon == null) icon = '<i class="fas fa-check-double" style="cursor: pointer;color: #bdbdbd;"></i>';
                        let date = formatChatMessageDate(item.data['delivered']['date']);
                        if(!isEmpty(date['date']) && !isEmpty(date['hour'])) info.push(`Entregue: ${date['hour']}<br/>${date['date']}`);
                    }
                    else
                    {
                        info.push(`Entregue: -`);
                    }
                    if(icon == null) icon = '<i class="fas fa-check" style="cursor: pointer;color: #bdbdbd;"></i>';
                }
                // atualizar status
                status_html = `<div class="tooltip-atender" style="margin-left: 5px;">${icon}` + 
                                    `<span class="tooltiptext">${info.join('<hr/>')}</span>` +
                                `</div>`;
            }
        let legenda_tmp = !isEmpty(item.legenda) ? `<p>${item.legenda}</p>`: '';

        if (item.tipo_mensagem == "text" && !isEmpty(item.mensagem)) {
            if (item.tipo == 1) {
                // verificar se há url
                item.mensagem = validarURL(item.mensagem);
                var html = `
                    <li class="in" id_menssagen="${item.id}"> 
                        <img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">
                            <div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">
                                <span class="arrow" style="border-right:8px solid #fff"> </span>
                                <span class="body" style="text-align:justify;display: flex;flex-direction: column;word-wrap:break-word" >${toMarkup(breakrow(item.mensagem))}<br>
                                    <span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">${horario}</span>
                                </span>
                            </div>
                        </li>`;
            } else if (item.tipo == 0) {
                // verificar se há url
                item.mensagem = validarURL(item.mensagem);

                var html = '<li class="out" id_menssagen="'+item.id+'">' +
                    '<div class="atendente_nome" style="position:relative;"> <img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;"> <span style="font-size: 9px;text-align: center;word-wrap: break-word; position: absolute; bottom: -50px; right: -2px;width: 40px;">' + nome_atendente + ' </span></div>' +
                    '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                    '<span class="arrow" style="border-left:8px solid #426a9e"> </span>' +
                    '<span class="body" style="text-align:justify;flex-direction: column;word-wrap:break-word" >' + item.mensagem +
                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' + horario + status_html + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            } else if (item.tipo == 2) {
                // verificar se há url
                item.mensagem = validarURL(item.mensagem);
                var html = '<li class="out" id_menssagen="'+item.id+'">' +
                    '<div class="atendente_nome" style="position:relative;"> <img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;"> <span style="font-size: 9px;text-align: center;word-wrap: break-word; position: absolute; bottom: -50px; right: -2px;width: 40px;">' + nome_atendente + ' </span></div>' +
                    '<div class="message" style=" background-color:#3E9BE2;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                    '<span class="arrow" style="border-left:8px solid #3E9BE2"> </span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;word-wrap:break-word" >' + toMarkup(breakrow(item.mensagem)) + '<br>' +
                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' + horario + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            }
        } else if (item.tipo_mensagem == 'image') {
            if (item.tipo == 1) {
                var html = '<li class="in" id_menssagen="'+item.id+'">' +
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">' +
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">' +
                    '<span class="arrow" style="border-right:8px solid #fff"> </span>' +
                    '<span>' +
                    '<a href="' + item.url_arquivo + '" target="_blank">' +
                    '<image src="' + item.url_arquivo + '" style="width:320px;height:240px"/>' +
                    '</a>' +
                    '<a href="' + item.url_arquivo + '" download="anexo" target="_blank">' +
                    // '<button style="background-color: #007bff;color: #fff;border: none;padding: 10px 20px;border-radius: 5px;font-size: 16px;cursor: pointer;text-decoration: none;" href="'+item.url_arquivo+'">Baixar</button>'+
                    '</a>' +
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                    '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">' + horario + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>'
            } else {
                var html = '<li class="out" id_menssagen="'+item.id+'">' +
                    '<div class="atendente_nome" style="position:relative;"> <img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;"> <span style="font-size: 9px;text-align: center;word-wrap: break-word; position: absolute; bottom: -50px; right: -2px;width: 40px;">' + nome_atendente + ' </span></div>' +
                    '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                    '<span class="arrow" style="border-left:8px solid #426a9e"> </span>' +
                    '<span>' +
                    '<a href="' + item.url_arquivo + '" target="_blank">' +
                    '<image src="' + item.url_arquivo + '" style="width:320px;height:240px"/>' +
                    '</a>' +
                    '<a href="' + item.url_arquivo + '" download="anexo">' +
                    //'<button style="background-color: #007bff;color: #fff;border: none;padding: 10px 20px;border-radius: 5px;font-size: 16px;cursor: pointer;text-decoration: none;" href="'+item.url_arquivo+'">Baixar</button>'+
                    '</a>' +
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' + horario + status_html + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            }

        } else if (item.tipo_mensagem == 'audio') {
            if (item.tipo == 1) {
                var html = '<li class="in" id_menssagen="'+item.id+'">' +
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">' +
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 50px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">' +
                    '<span class="arrow" style="border-right:8px solid #fff"> </span>' +
                    '<span>' +
                    '<audio controls="controls" preload="auto" id="audio_whatsapp_'+item.id+'" src="'+item.url_arquivo+'">'+
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">' +
                    '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">' + horario + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            } else {
                var url = item.url_arquivo;

                // Verificar a extensão do arquivo na URL
                if (url.endsWith('.bin')) {
                            var html = '<li class="out" id_menssagen='+item.id+'>'+ 
                                            '<div id="info-atendente" style="position: relative;"> <img class="avatar" alt="" src="{{asset('pages/img/gestao/ux-base-atendimento-30x30.png')}}" style="width: 30px;height: 30px;"> <span style="    font-size: 9px;text-align: center;word-wrap: break-word; position: absolute;top: 35px; right: -6px;">'+nome_atendente+' </span> </div>'+ 
                                            '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                                                    '<span>'+
                                                        '<audio controls="controls" preload="auto" id="audio_whatsapp_'+item.id+'">'+
                                                            '<source src="'+url+'" type="audio/ogg">'+
                                                            '<source src="'+url+'" type="audio/mpeg">'+
                                                            '<source src="'+url+'" type="audio/wma">'+
                                                        '</audio>'+
                                                    '</span>'+
                                                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">'+
                                            '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                                            '</span>'+
                                        '</div>';
                        } else {
                            var html = '<li class="out" id_menssagen='+item.id+'>'+ 
                                            '<div id="info-atendente" style="position: relative;"> <img class="avatar" alt="" src="{{asset('pages/img/gestao/ux-base-atendimento-30x30.png')}}" style="width: 30px;height: 30px;"> <span style="    font-size: 9px;text-align: center;word-wrap: break-word; position: absolute;top: 35px; right: -6px;">'+nome_atendente+' </span> </div>'+ 
                                            '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">'+
                                            '<span class="arrow" style="border-left:8px solid #426a9e"> </span>'+
                                            '<span>'+
                                            '<audio controls="controls" preload="auto" id="audio_whatsapp_'+item.id+'" src="'+item.url_arquivo+'">'+
                                            '</audio>'+
                                            '</span>'+  
                                            '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">'+
                                            '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">'+ horario +'</span>'+
                                            '</span>'+
                                        '</div>';
                        }
            }
        } else if (item.tipo_mensagem == 'video') {
            if (item.tipo == 1) {
                var html = '<li class="in" id_menssagen="'+item.id+'" id_menssagen="'+item.id+'">' +
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">' +
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">' +
                    '<span class="arrow" style="border-right:8px solid #fff"> </span>' +
                    '<span>' +
                    '<video width="320" height="240" controls>' +
                    '<source src="' + item.url_arquivo + '" disablePictureInPicture type="video/mp4">' +
                    'Your browser does not support the video tag.' +
                    '</video>' +
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                    '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">' + horario + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            } else {
                var html = '<li class="out" id_menssagen="'+item.id+'">' +
                    '<div class="atendente_nome" style="position:relative;"> <img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;"> <span style="font-size: 9px;text-align: center;word-wrap: break-word; position: absolute; bottom: -50px; right: -2px;width: 40px;">' + nome_atendente + ' </span></div>' +
                    '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                    '<span class="arrow" style="border-left:8px solid #426a9e"> </span>' +
                    '<span>' +
                    '<video width="320" height="240" controls>' +
                    '<source src="' + item.url_arquivo + '" disablePictureInPicture type="video/mp4">' +
                    'Your browser does not support the video tag.' +
                    '</video>' +
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' + horario + status_html + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            }
        } else if (
            item.tipo_mensagem == 'pdf' ||
            item.tipo_mensagem == 'vnd.openxmlformats-officedocument.presentationml.presentation' ||
            item.tipo_mensagem == 'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
            item.tipo_mensagem == 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
            item.tipo_mensagem == 'vnd.ms-powerpoint' ||
            item.tipo_mensagem == 'vnd.ms-excel' ||
            item.tipo_mensagem == 'msword' ||
            item.tipo_mensagem == 'pptx' ||
            item.tipo_mensagem == 'ppt' ||
            item.tipo_mensagem == 'docx' ||
            item.tipo_mensagem == 'doc' ||
            item.tipo_mensagem == 'xlsx' ||
            item.tipo_mensagem == 'xls' ||
            item.tipo_mensagem == 'csv' ||
            item.tipo_mensagem == 'x-zip-compressed' ||
            item.tipo_mensagem == 'vnd.openxmlformats-officedocument.spreadsheetml.template' ||
            item.tipo_mensagem == 'xltx' ||
            item.tipo_mensagem == 'vnd.oasis.opendocument.spreadsheet' ||
			item.tipo_mensagem == 'ods' ||
            item.tipo_mensagem == 'zip'
        ) {
            const iconClasses = {
                'pdf': 'far fa-file-pdf',
                'ppt': 'far fa-file-powerpoint',
                'pptx': 'far fa-file-powerpoint',
                'doc': 'far fa-file-word',
                'docx': 'far fa-file-word',
                'xls': 'far fa-file-excel',
                'xlsx': 'far fa-file-excel',
                'xltx': 'far fa-file-excel',
                'ods': 'far fa-file-excel',
                'zip': 'far fa-file-archive',
            };

            const extension = item.nome_exibicao.split('.').pop();
            const iconClass = iconClasses[extension] || 'far fa-file';
            if (item.tipo == 1) {
                var html = '<li class="in" id_menssagen="' + item.id + '">' +
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px;height: 30px;font-size:12px;">' +
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left:10%;width: 80%;">' +
                    '<span class="arrow" style="border-right:8px solid #fff"> </span>' +
                    '<span>' +
                    '<a style="color:#000" href="' + item.url_arquivo + '" download="' + item
                    .nome_exibicao +
                    '" target="_blank"><i class="' + iconClass + '" style="font-size:16px"></i>' + item
                    .nome_exibicao + '</a>' +
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                    '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">' +
                    horario + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            } else {
                var html = '<li class="out" id_menssagen="' + item.id + '">' +
                    '<div class="atendente_nome" style="position:relative;"> <img class="avatar" alt="" src="/pages/img/gestao/ux-base-atendimento-30x30.png" style="width: 30px;height: 30px;"> <span style="font-size: 9px;text-align: center;word-wrap: break-word; position: absolute; bottom: -50px; right: -2px;width: 40px;">' +
                    nome_atendente + ' </span></div>' +
                    '<div class="message" style=" background-color:#426a9e;color:#fff;border-right: 2px solid #426a9e;margin-right:10%;border-radius: 5px!important; max-width: fit-content;box-shadow: 0 2px 5px #000;margin-left: auto;max-width: fit-content;width: 80%">' +
                    '<span class="arrow" style="border-left:8px solid #426a9e"> </span>' +
                    '<span>' +
                    '<a style="color:#fff" href="' + item.url_arquivo + '" download="' + item
                    .nome_exibicao +
                    '" target="_blank"><i class="' + iconClass + '" style="font-size:16px"></i>' + item
                    .nome_exibicao + '</a>' +
                    legenda_tmp+
                    '</span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;" >' +
                    '<span class="datetime" style="float:right;color:#fff;margin-left:10px;text-align: end;font-size:12px;font-size: 11px;font-weight: 700;">' +
                    horario + status_html + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            }
        } else if (item.tipo_mensagem == 'location') {
            if (item.tipo == 1 && item.data != '') {
                var location = JSON.parse(item.data);
                var mapUrl = 'https://www.google.com/maps?q=' + location.latitude + ',' + location.longitude;

                var html = '<li class="in" id_menssagen="' + item.id + '">' +
                    '<img class="avatar" alt="" src="/pages/img/gestao/ux-base-30x30.png" style="width: 30px; height: 30px; margin-left: 30px;">' +
                    '<div class="message" style="background-color:#fff; color:#2f353b; border-left: 2px solid #fff; border-radius: 5px; max-width: fit-content; margin: 0 46px 0 75px; width: 80%; box-shadow: 0 2px 5px #000;">' +
                    '<span class="arrow" style="border-right:8px solid #fff"></span>' +
                    '<span class="body" style="text-align:justify; display: flex; flex-direction: column;">' +
                    '<button onclick="event.preventDefault(); window.open(\'' + mapUrl + '\', \'_blank\');"><strong>Localização</strong><br>Abrir mapa para visualizar.</button>' +
                    '<span class="datetime" style="float:right; color:#2f353b; text-align: end; font-size: 11px; font-weight: 700;">' + horario + status_html + '</span>' +
                    '</span>' +
                    '</div>' +
                    '</li>';
            }
        }else if (item.tipo_mensagem  == 'contacts') {
            if (item.tipo == 1 && item.data != '') {
                var contacts = JSON.parse(item.data);

                var html = '<li class="in" id_menssagen=' + item.id + '>' +
                    '<img class="avatar" alt="" src="{{asset('pages/img/gestao/ux-base-30x30.png')}}" style="width: 30px;height: 30px;font-size:12px;margin-left: 30px;">' +
                    '<div class="message" style="background-color:#fff;color:#2f353b;border-left: 2px solid #fff;border-radius: 5px!important;max-width: fit-content;margin-right: 46px;box-shadow: 0 2px 5px #000;margin-left: 75px;width: 80%;">' +
                    '<span class="arrow" style="border-right:8px solid #fff"> </span>' +
                    '<span class="body" style="text-align:justify;display: flex;flex-direction: column;">' +
                    '<button onclick="event.preventDefault();" style="pointer-events:none"><strong>'+contacts.name+'</strong><br>'+contacts.phone+'</button>' +
                    '<span class="datetime" style="float:right;color:#2f353b;text-align: end;font-size: 11px;font-weight: 700;">' + horario + status_html +  '</span>' +
                    '</span>' +
                    '</div>';

                @if(Auth::user()->cliente_id == 58)
                    html += answer_icon;
                @endif

                html += '</li>';
            }
        } 

        //pegar data
        inserirData(item.created_at, selector);
        $(selector).append(html);

        if(!isEmpty(item.data))
        {
            setTimeout(() => {
                getAnswerOrigin(item.id, item.data, 'chats','#ModalChatWhatssapp');
            }, 1500);
        }
    });
}

function interacoes(){
    let dados = {
        "data_init": $("#datainit").val(), 
        "data_fim": $("#datafinal").val(),
        "canal": $("#canal").val(),
        "status": $("#status").val(),
        "tipos": $("#tipo_atendimento").val(),
        "atendente": $("#atendente").val(),
        "pesquisa": $("#pesquisa").val(),
        "tabulacao": $("#tabulacao").val(),
        "fila": $('#fila').val(),
    };
    $.ajax({
        async:true,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: '/atendimento/interacoes/consulta',
        type: 'POST',
        dataType: 'json',
        data: dados,
        beforeSend: function () {
            setAtenderAlertInfo('Aguarde, gerando documento...');
        },  
        success: function(data){
            let queryString = Object.keys(dados).map(function(k) {
                if (!isEmpty(dados[k])) {
                    return encodeURIComponent(k) + '=' + encodeURIComponent(dados[k])
                }
            }).join('&')
            console.log('/atendimento/interacoes/download?'+queryString);
            window.location.href='/atendimento/interacoes/download?'+queryString;
        },
        error: function (err) {
            if (isEmpty(err) || isEmpty(err.status) || err.status == false) {
                let message = (!isEmpty(err) && !isEmpty(err.message)) ? err.message : 'Erro interno, contate o administrador.';
                setTimeout(() => {
                    setAtenderAlertError(message);
                }, 1000);
                return
            }
            setAtenderAlertError('Erro interno, contate o administrador.');
        }
    });
}
</script>
@endpush

@endsection