@extends('layouts.app')
@section('content')
<link href="{{ asset('global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('global/plugins/bootstrap-multiselect-master/dist/css/bootstrap-multiselect.css') }}" rel="stylesheet" type="text/css"/>
<style>
    #formPesquisa{margin-top: 1.5%;margin-bottom: 2.5%;}
    .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;}
    .row{margin-bottom: 20px;}
</style>
<div class="page-content-wrapper">
    <div class="page-content">
        <!-- paginação -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <a href="{{ url('/home') }}">Home</a>
                    <i class="fa fa-circle"></i>
                </li>
                <li>
                    <span>Logs Fluxo BOT</span>
                </li>
            </ul>
        </div>
        <!-- titulo -->
        <h1 class="page-title nova-faixa"> Logs Fluxo BOT
            <div class="pull-right">
                <i class="nova-faixa-icon icon-user"></i>
            </div>
        </h1>
        
        <!-- filtros -->
        <div class="row">
            <div class="col-md-12">
                <form method="post" id="formPesquisa" onKeyPress="return submitenter(this,event)">
                    {{ csrf_field() }}
                    <div class="row">

                        <div class="col-sm-12 col-md-12 col-lg-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="{{ date('d/m/Y') }}" >
                                <span class="input-group-btn">
                                    <button class="btn btn-sm default" type="button">
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                                            
                        <div class="col-sm-12 col-md-12 col-lg-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="{{ date('d/m/Y') }}" >
                                <span class="input-group-btn">
                                    <button class="btn btn-sm default" type="button">
                                        <i class="fa fa-calendar"></i>
                                    </button>
                                </span>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-4">
                            <div class="col-12 row">
                                <div class="col-md-8">
                                    <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="Número Whatsapp, ID Sessão, etc.." name="pesquisa" id="pesquisa">
                                </div>
                                <div class="col-md-4" style="top: 26px;">
                                    <button type="button" class="btn blue" id="pesquisar" style="display: inline-block;">
                                        <i class="fa fa-search"></i> Pesquisar
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>

        <!-- tabela -->

                <div class="table-responsive" style=" overflow-x: hidden !important;">
                    <table class="table table-striped table-bordered table-advance table-hover  order-column" id="sample_1" style="text-align:center;">
                        <thead>
                            <tr>
                                <th><i class="fas fa-key"></i> ID Fluxo</th>
                                <th ><i class="fas fa-calendar"></i> Data Criação</th>
                                <th ><i class="fas fa-user"></i> Telefone </th>
                                <th ><i class="fas fa-user"></i> Nome </th>
                                <th> <i class="fas fa-mouse-pointer"></i> Última Ação</th>
                                <th ><i class="fas fa-toggle-on"></i> Status Última Ação</th>
                                <th ><i class="fas fa-list"></i> Detalhes</th>
                            </tr>
                        </thead>
                    </table>
                </div>

        
        {{-- MODAL DETALHES --}}
        <div class="modal fade" id="modalDetalhes" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog" style="width:95% !important;">
                <div class="modal-content">
                    <div class="modal-header" style="padding:20px !important;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:10px !important;"></button>
                        <h4 class="modal-title" style="color:#FFF !important;"><b>Detalhes da sessão</b></h4>
                    </div>
                    <div class="modal-body">
                        <b>Informações:</b><br><br>
                        
                        <div style="border-bottom:1px solid #e6e6e6; margin-bottom:20px; display:flex; justify-content:space-between;" >
                            <b>ID Sessão:</b>
                            <div id="id_sessao_detalhes"></div>
                        </div>

                        <div style="border-bottom:1px solid #e6e6e6; margin-bottom:20px; display:flex; justify-content:space-between;" >
                            <b>Última ação:</b>
                            <div id="ultima_acao_detalhes"></div>
                        </div>

                        <div style="border-bottom:1px solid #e6e6e6; margin-bottom:20px; display:flex; justify-content:space-between;" >
                            <b>Canal:</b>
                            <div>
                                <i class="fab fa-whatsapp-square"></i> WhatsApp
                            </div>
                        </div>

                    
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered  table-hover order-column" id="tabelaDetalhes" style="text-align:center;">
                                    <thead>
                                        <tr>
                                            <th> ORDEM </th>
                                            <th> Data / Hora </th>
                                            <th>Canal</th>
                                            <th>Ação Anterior</th>
                                            <th>Ação Atual</th>
                                            <th>Ação Proxíma</th>
                                            <th>Telefone</th>
                                            <th>Nome</th>
                                            <th >Resumo</th>
                                            <th >Conteúdo</th>
                                            <th> Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- MODAL DETALHES JSON --}}
        <div class="modal fade" id="modalJsonDetalhes" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog" style="width:90% !important;">
                <div class="modal-content">
                    <div class="modal-header" style="padding:20px !important;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:10px !important;"></button>
                        <h4 class="modal-title" style="color:#FFF !important;"><b>Sistema</b></h4>
                    </div>
                    <div class="modal-body">
                       Variáveis: <br><br>
                       <div id="json_detalhes" style="width: 90% !important; word-wrap: break-word !important;   overflow-wrap: break-word !important;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>



        {{-- MODAL DETALHES JSON --}}
        <div class="modal fade" id="modalresumoconteudocompleto" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog" style="width:90% !important;">
                <div class="modal-content">
                    <div class="modal-header" style="padding:20px !important;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-top:10px !important;"></button>
                        <h4 class="modal-title" style="color:#FFF !important;"><b>RESUMO CONTEÚDO</b></h4>
                    </div>
                    <div class="modal-body">
                       <div id="resumo_conteudo_completo" style="width: 90% !important; word-wrap: break-word !important;   overflow-wrap: break-word !important;"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark btn-outline" data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<!-- BEGIN PAGE LEVEL PLUGINS -->
<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/jquery-repeater/jquery.repeater.1.2.1.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->

<!-- END PAGE LEVEL SCRIPTS -->
<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/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/bootstrap-multiselect-master/dist/js/bootstrap-multiselect.js') }}" type="text/javascript"></script>
<script src="{{ asset('global/plugins/moment/moment.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

    $('.datepicker').datepicker();
    $('#hora_init').timepicker('showWidget');
    $('#hora_fim').timepicker('showWidget');
        

});

// function atualizarDatas()
// {
//     var data_atual = $('#datainit').val();
//     data_atual = data_atual.split('/');
//     data_atual = moment(new Date(data_atual[1]+'-'+data_atual[0]+'-'+data_atual[2]));
//     //pegar data para seis meses
//     var mes = data_atual.month() + 7;
//     var ano = data_atual.year();

//     if(mes>12)
//     {
//         mes = mes - 12;
//         ano += 1;
//     }
//     if(mes<9){mes = '0'+mes;}
//     var data_limite = moment(ano+'-'+mes+'-01').endOf('month').format('DD/MM/YYYY');
//     $("#form-fim").datepicker('setStartDate',$('#datainit').val());
//     $("#form-fim").datepicker('setEndDate',data_limite);
//     $("#form-fim").datepicker('setDate',data_limite);
// }

var table = $('#sample_1');
jQuery(document).ready(function() {
    table.dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "/logs/fluxobot/get"+"?"+$("#formPesquisa").serialize(),
        "dom": 'r<"row"<"col-sm-12"<"table-responsive"t>>><"row"<"col-sm-4"i><"col-sm-4 paginacao"p><"col-sm-4"l>>"',

        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sSearch": "Pesquisar",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
            },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
            }
        },
        "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
        "lengthMenu": [
            [5, 15, 30, -1],
            [5, 15, 30, "Todos"] // change per page valuesc here
        ],
        // set the initial value
        "pageLength": 15,            
        "pagingType": "bootstrap_full_number",
        "columns": [
            { data: 'id_fluxo',},
            { data: 'dt_ultima_acao_formatada'},
            { data: 'telefone'},
            { data: 'nome'},
            { data: 'acao_atual'},
            { data: 'status'},
            { 
                data: null, 
                render: function(data, type, full, meta) {
                    return `<button type="button" onclick="showDetalhes('${data.id_fluxo}')" class="btn btn-primary btn-sm"><i class="fas fa-eye"></li></button>`;
                }
            }
        ],
        "columnDefs": [
            {  
                // set default column settings
            }
            
        ],
        "order": [
            [1, "asc"]
        ], // set first column as a default sort by asc
    });

    $("#pesquisar").click( function(){  
        console.log($("#formPesquisa").serialize());
        table.fnReloadAjax("/logs/fluxobot/get"+"?"+$("#formPesquisa").serialize());
    });

});


        
//         var atualizaTable = function()
//         {
//             table.fnReloadAjax("/logs/search"+"?"+$("#formPesquisa").serialize());
//         }

//         var LimpaCampos = function( modal )
//         {
//             $( modal+' input[name="email"]').val("");
//             $( modal+' select[name="acesso"]').val("");
//             $( modal+' input[name="name"]').val("");
//             // $( modal+' input[name="user"]').val("");
//             $( modal+' input[name="ramal"]').val("");
//         }

//         var LimpaRetorno = function( modal )
//         {
//             $( modal+' .success').css('display', 'none');
//             $( modal+' .success').children("div").children("ul").html('');
//             $( modal+' .erros').children("div").children("ul").html('');
//             $( modal+' .erros').css('display', 'none');
//         }

//         var tableWrapper = jQuery('#sample_1_wrapper');
// });


function showConteudo(conteudo)
{   
    var el = JSON.parse(decodeURIComponent(conteudo));

    $("#json_detalhes").empty();
    $("#json_detalhes").append(el.conteudo);
    $('#modalJsonDetalhes').modal('show');
}


function showResumoCompleto(resumo)
{   
    $("#resumo_conteudo_completo").empty();
    $("#resumo_conteudo_completo").append(resumo);
    $('#modalresumoconteudocompleto').modal('show');
}


async function showDetalhes(idLog){

    await $.get("/logs/fluxobot/get/completo/"+idLog, function(data, status){


        $("#id_sessao_detalhes").empty();
        $("#ultima_acao_detalhes").empty();
        $("#id_sessao_detalhes").append(data[0].id_sessao);
        $("#ultima_acao_detalhes").append(dataFormatada(data[0].dt_ultima_acao));


        

        $("#tabelaDetalhes tbody").empty();
        data.reverse();
        data.map( (el, index) => {
            $("#tabelaDetalhes tbody").append(`
            <tr>
                <td>
                    ${ index + 1 }<br>
                    ${  (index + 1) == 1 ? `<span style="border-radius:4px; font-weight:bold; color:green;">Início</span>` : ``}
                    ${  (index + 1) == data.length ? `<span style="border-radius:4px; font-weight:bold; color:red;">Fim</span>` : ``}
                </td>
                <td>${dataFormatada(el.dt_ultima_acao)}</td>
                <td>${el.canal}</td>
                <td>${el.acao_anterior && el.acao_anterior != '' ? el.acao_anterior : ''}</td>
                <td>${el.acao_atual && el.acao_atual != '' ? el.acao_atual : ''}</td>
                <td>${el.acao_proxima && el.acao_proxima != '' ? el.acao_proxima : ''}</td>
                <td>${el.telefone}</td>
                <td>${el.nome}</td>
                <td>
                    <button type="button" onclick="showResumoCompleto('${el.resumo}')" title="Ver completo"><i class="fab fa-whatsapp-square"></i></button>    
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-warning sua-classe-css" onclick="showConteudo('${encodeURIComponent(JSON.stringify(el))}')">
                        <i class="fas fa-code"></i>
                    </button> 
                </td>
                <td>
                    <span style=" color:#000 !important; font-size:13px !important; border-radius:0 !important; font-weight:bold; padding: 3px 10px !important;">${el.status}</span>
                </td>
            </tr>
            `);

        })
        
            

    }).then(() => {
        $('#modalDetalhes').modal('show');
    });

}


function dataFormatada(date){
    const dataOriginal = new Date(date);
    const dia = String(dataOriginal.getDate()).padStart(2, '0');
    const mes = String(dataOriginal.getMonth() + 1).padStart(2, '0'); // Mês começa em 0
    const ano = dataOriginal.getFullYear();
    const hora = String(dataOriginal.getHours()).padStart(2, '0');
    const minuto = String(dataOriginal.getMinutes()).padStart(2, '0');
    const segundo = String(dataOriginal.getSeconds()).padStart(2, '0');
    const dataFormatada = `${dia}/${mes}/${ano} ${hora}:${minuto}:${segundo}`;
    return dataFormatada;
}

</script>
@endpush