@extends('layouts.systemonecolumn')
@section('content')
 <style>
.dashboard-wrapper{
margin-left: 0px !important;
}
    </style>
    <!-- ============================================================== -->
    <!-- pageheader  -->
    <!-- ============================================================== -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-header">
                <h3 class="mb-2">Monitor</h3>
                {{--<p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.</p>--}}
                <div class="page-breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Monitor</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- end pageheader  -->
    <!-- ============================================================== -->
    <div class="row">
        <div class="offset-xl-10 col-xl-2 col-lg-2 col-md-6 col-sm-12 col-12">
            <form class="form-inline">
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12">
            <div class="card">

                <div class="card-header">
                    <div class="row" style="text-align: center;">

                        <div class="col-xl-1" style="border-right: 1px solid #dee2e6">Loja</div>
                        <div class="col-xl-2" style="border-right: 1px solid #dee2e6">Novos Pedidos</div>
                        <div class="col-xl-3" style="border-right: 1px solid #dee2e6">Novos Clientes</div>
                        <div class="col-xl-1" style="border-right: 1px solid #dee2e6">Configurações Básicas</div>

                    </div>
                </div>

                <div class="card-body">

                            @foreach($clients as $client)

                                 <div class="row p-3  bg-light" id="all_values_{{$client->id}}" style="display: none;">
                                            <div class="col-xl-1" id="client_name_{{$client->id}}">{{$client->name}}</div>
                                             <div class="col-xl-2">
                                                 <div class="row" id="orders_values_{{$client->id}}" style="display: none;">
                                                    <div class="alert alert-success m-r-5 m-b-0" id="div_orders-month_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Mês: </span><span class="values" id="orders-month_{{$client->id}}"></span></div>
                                                    <div class="alert alert-warning m-r-5 m-b-0" id="div_orders-week_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Semana: </span><span class="values" id="orders-week_{{$client->id}}"></span></div>
                                                    <div class="alert alert-info m-b-0" id="div_orders-today_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Dia: </span><span class="values" id="orders-today_{{$client->id}}"></span></div>

                                                 </div>
                                             </div>


                                            <div class="col-xl-3">
                                                <div class="row p-l-15" id="customers_values_{{$client->id}}" style="display: none;">
                                                    <div class="alert alert-primary m-r-5 m-b-0" id="div_customers-month_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Mês: </span><span class="values" id="customers-month_{{$client->id}}"></span></div>
                                                    <div class="alert alert-danger m-r-5 m-b-0" id="div_customers-week_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Semana: </span><span class="values" id="customers-week_{{$client->id}}"></span></div>
                                                    <div class="alert alert-success m-r-5 m-b-0" id="div_customers-today_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Dia: </span><span class="values" id="customers-today_{{$client->id}}"></span></div>
                                                    <div class="alert alert-warning m-r-5 m-b-0" id="div_visitors_{{$client->id}}"><i id="icon-star" class="fa fa-star" aria-hidden="true" style="display: none;"></i><span>Online: </span><span class="values" id="visitors_{{$client->id}}"></span></div>
                                                </div>
                                            </div>
                                            <div class="col-xl-1" id="percentage_{{$client->id}}" style="display: none;"><span id="configurations_{{$client->id}}"></span>% concluído</div>

                                            <div id="orders_today_details_{{$client->id}}" style="display:none;" class="col-xl-12 border border-light rounded">
                                                <div class="row">
                                                    <div class="col-xl-1">Id Pedido</div>
                                                    <div class="col-xl-1">Nome Cliente</div>
                                                    <div class="col-xl-1">Valor Pedido</div>
                                                    <div class="col-xl-1">Valor Frete</div>
                                                    <div class="col-xl-1">Status Atual</div>
                                                    <div class="col-xl-1">Data Pedido</div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-1">100000139</div>
                                                    <div class="col-xl-1">Marcela Pripas</div>
                                                    <div class="col-xl-1">R$:49,80</div>
                                                    <div class="col-xl-1">R$: 16.67</div>
                                                    <div class="col-xl-1">Processando</div>
                                                    <div class="col-xl-1">05/03/2021</div>
                                                </div>
                                            </div>
                                </div>
                            @endforeach   
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
            <div class="card">
                <h2 class="card-header" style="text-align: center;">Ultimas Integrações</h2>
                <div  class="card-body">
                
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Cliente</th>
                            <th scope="col">Data</th>
                            <th scope="col">Nome</th>
                            <th scope="col">Mensagem</th>
                            <th scope="col">tempo de execução</th>
                            <th scope="col">Detalhes</th>
                        </tr>
                        </thead>
                        @foreach($clients as $client)
                        <tbody id ="last-order_{{$client->id}}_{{$client->int_enter_id}}">
                            
                            
                        </tbody>
                        
                        @endforeach
                    </table>
                    <div class="card-footer text-center bg-white">
                    </div>
                    
                </div>
            </div>
        </div>
       
    </div>
    <div class="card-footer text-center bg-white">
                    <a href="{{ url('/home/') }}" class="btn btn-light">Voltar</a>
        </div>
 <audio id="pop" muted>
     <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/descent/gotitem.mp3" type="audio/mpeg">
 </audio>




 <!-- Modal -->
 <div class="modal fade" id="new_updates" tabindex="-1" role="dialog" aria-labelledby="description" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="TituloModalCentralizado">Novas Atualizações!</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body" id="updates_body">
                 <div class="row">
                     <div class="col-xl-1">Loja</div>
                     <div class="col-xl-2">Novos Pedidos</div>
                     <div class="col-xl-2">Novos Clientes</div>
                  </div>
                 <div id="testdata" class="row">

                 </div>
             </div>
             <div class="modal-footer">
                 {{--<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>--}}
                 {{--<button type="button" class="btn btn-primary">Salvar mudanças</button>--}}

             </div>
         </div>
     </div>
 </div>
 <!-- Modal -->
@endsection

@section('javascript'),
<script type="text/javascript">
    function seeConfigs(id){
        //$("#content").html("");
        $('#description').modal('show');



    }

</script>

<script type="text/javascript">

    $(document).ready(function () {

        var msg1 = $.ajax({type: "GET", url: "https://app.dimio.com.br/api/getmonitor", async: false}).responseText;
        var data = JSON.parse(msg1);
        for (var key in data) {
            $('#visitors_'+ key).html(data[key]['visitors']);
            $('#configurations_'+ key).html(data[key]['configurations']);
            $('#orders-today_'+ key).html(data[key]['count_orders_today']);
            $('#orders-week_'+ key).html(data[key]['count_orders_week']);
            $('#orders-month_'+ key).html(data[key]['count_orders_month']);
            $('#customers-today_'+ key).html(data[key]['count_customers_today']);
            $('#customers-week_'+ key).html(data[key]['count_customers_week']);
            $('#customers-month_'+ key).html(data[key]['count_customers_month']);
            $('#customers_values_'+key).show();
            $('#orders_values_'+key).show();
            $('#percentage_'+key).show();
            $('#all_values_'+key).show();
            checkConfig(data[key]['configurations'],'#percentage_'+ key);

        }
        setInterval(function () {
            // $('#updates_body').html('');
            var msg1 = $.ajax({type: "GET", url: "https://app.dimio.com.br/api/getmonitor", async: false}).responseText;
            var data = JSON.parse(msg1);
            for (var key in data) {
                let actualvisitors = $('#visitors_'+ key).text();
                let actualconfigs = $('#configurations_'+ key).text();
                let actualorderstoday = $('#orders-today_'+ key).text();
                let actualordersweek = $('#orders-week_'+ key).text();
                let actualordersmonth = $('#orders-month_'+ key).text();
                let actualcustomerstoday = $('#customers-today_'+ key).text();
                let actualcustomersweek = $('#customers-week_'+ key).text();
                let actualcustomersmonth = $('#customers-month_'+ key).text();
                createDatasVisitors(actualvisitors,data[key]['visitors'],'#div_visitors_' + key);
                createDatas(actualconfigs,data[key]['configurations'],'#div_configurations_',key);
                createDatas(actualorderstoday,data[key]['count_orders_today'],'#div_orders-today_',key);
                createDatas(actualordersweek,data[key]['count_orders_week'],'#div_orders-week_',key);
                createDatas(actualordersmonth,data[key]['count_orders_month'],'#div_orders-month_',key);
                createDatas(actualcustomerstoday,data[key]['count_customers_today'],'#div_customers-today_', key);
                createDatas(actualcustomersweek,data[key]['count_customers_week'],'#div_customers-week_',key);
                createDatas(actualcustomersmonth,data[key]['count_customers_month'],'#div_customers-month_', key);

            }
        }, 20000);
    });
    function checkConfig(actualconfig,classdata){
        if(actualconfig < 31){
            $(classdata).addClass('alert alert-danger m-b-0');
        }else if(actualconfig < 30 && actualconfig < 61 ){
            $(classdata).addClass('alert alert-warning m-b-0');
        }else if(actualconfig > 60){
            $(classdata).addClass('alert alert-success m-b-0');
        }

    }
    function createModal(newData,classData,key){
  
        let alldata = $('#all_values_'+key).html();
        $("#testdata").append(alldata);
        $("#new_updates").modal('show');
        // setTimeout(function() { $("#new_updates").modal('hide'); }, 5000);
    }
    function createDatas(actualData,newData,classData,key){
        if(actualData != newData ){

            $('audio#pop').prop('muted', false);
            $('audio#pop')[0].play();
            $(classData + key +' .values').html(newData);
            $(classData + key +' #icon-star').show();
            setTimeout(function() { $(classData + key +' #icon-star').hide(); }, 45000);
            //createModal(newData,classData,key);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
            $(classData + key).fadeOut(500);
            $(classData + key).fadeIn(500);
        }

    };
    function createDatasVisitors(actualData,newData,classData){
        if(actualData != newData ){
            $(classData + ' .values').html(newData);
            $(classData).fadeOut(500);
            $(classData).fadeIn(500);
            $(classData).fadeOut(500);
            $(classData).fadeIn(500);
            $(classData).fadeOut(500);
            $(classData).fadeIn(500);
            $(classData).fadeOut(500);
            $(classData).fadeIn(500);
        }};
    $("#show_orders_today_5").click(function(){
        if($('#orders_today_details_5:hidden').length == 0){
            console.log('entrou no slideUp');
            $("#orders_today_details_5").slideUp(500);
        }else{
            console.log('entrou no slideDown');
            $("#orders_today_details_5").slideDown(500);
        }
    });
</script>
<script type="text/javascript">
                
                        var msgorder = $.ajax({type: "GET", url: "https://app.dimio.com.br/api/lastorder/3"  , async: false}).responseText;
                        var dataorder = JSON.parse(msgorder)
                        console.log(dataorder);
                        for (var key in dataorder) {
                            var content = "";
                            content += '<tr>' +
                            '<td>' + dataorder[key]['id'] +   '</td><td>' + dataorder[key]['name'] +'</td><td id="datepicker">' + dataorder[key]['created_at'] + '</td><td>' + dataorder[key]['name_log'] +'</td>'+'</td><td>'+dataorder[key]['error_text_log'];
                            if(dataorder[key]['time_taken'] !== ''){
                                content += '</td><td>'+ dataorder[key]['time_taken'] + '</td><td onclick="seeDetails()">Abrir</td></tr>'
                            }
                            $('#last-order_'+dataorder[key]['clients_id']+'_'+key).html(content);
                        }
                       
                        

                setInterval(function () {
                    var msgorder = $.ajax({type: "GET", url: "https://app.dimio.com.br/api/lastorder/3"  , async: false}).responseText;
                        var dataorder = JSON.parse(msgorder)
                        console.log(dataorder);
                        for (var key in dataorder) {
                            var content = "";
                            content += '<tr>' +
                                '<td>' + dataorder[key]['id'] +   '</td><td>' + dataorder[key]['name'] +'</td><td id="datepicker">' + dataorder[key]['created_at'] + '</td><td>' + dataorder[key]['name_log'] +'</td>'+'</td><td>'+dataorder[key]['error_text_log'];
                            if(dataorder[key]['time_taken'] !== ''){
                                content += '</td><td>'+ dataorder[key]['time_taken'] + '</td><td onclick="seeDetails()">Abrir</td></tr>'
                            }
                            $('#last-order_'+dataorder[key]['clients_id']+'_'+key).html(content);
                        }
                  
                }, 20000);    
                function teste(){
                    console.log('rodou!');
                }
                var interval;
                function seeDetails(id,int){
                    console.log(id+int);
                    interval = setInterval(teste,3000);
                }
                function closeDetails(){
                    clearInterval(interval);
                }

                    </script>
@endsection