@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        <div id="configuracoes" class="col-xs-12 section-content">
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <h3>Monitoramento do serviço de chat (EM DESENVOLVIMENTO)</h3>
                    <div id="chat" style="background-color: #f0f0f0;">
                        <p>Situação do chat: Iniciando</p>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <h3>Reiniciar o serviço de chat</h3>
                    <p>Se o chat não esta conectando você pode tentar reiniciá-lo aqui</p>
                    <button id="btnChatRestart" type="button" class="btn btn-danger">Entendo os riscos e quero reiniciar o chat</button>

                </div>

            </div>

        </div>
    </section>
@endsection

@section('scripts')
<script>

    var hb = {
        "heartbeat": 1
    };

    var address = '{{$data['url']}}';

    var socketFactory = function(address) {

        var conn = new WebSocket(address);

        conn.onopen = function(e) {
            $("#chat").delay(400).css("background-color", "green");
            $("#chat p").text('Conectando');
            console.log("Usuário conectado: " + e);
        };

        conn.onmessage = function(e) {
            $("#chat").delay(400).css("background-color", "#58D68D");
            var dados = JSON.parse(e.data);

            $("#chat p").text('Chat online ' + dados.quantidade + ' usuários conectados');

            console.log('Mensagem Recebida Mensagem: '+ e.data);
        };

        conn.onclose = function(e) {
            $("#chat").delay(400).css("background-color", "red");
            $("#chat p").text('Você foi desconectado ou o chat parou de responder');
            console.log('Usuário desconectou ou o chat parou de responder');
            socketconnect();
        };

        conn.onerror = function(e) {
            $("#chat").delay(400).css("background-color", "red");
            $("#chat p").text('Ocorreu um erro!');
            console.log('erro no token: ');


        };

        return conn;

    };

    var conn = socketFactory(address);

    function heartbeat(hb, conn) {
        if (conn.readyState == 1) {
            conn.send(JSON.stringify(hb));
        } else {
            console.log('não foi possível enviar a mensagem pois o socket não está conectado');
        }

    }

    var interval = 5000;

    setInterval(function() {
        heartbeat(hb, conn);
    }, interval);

    function socketconnect () {
        return socketFactory(address);
    }


    $("#btnChatRestart").click(function() {
        //confirm
        if(confirm('Deseja realmente reiniciar o servidor de chat?')) {
            //desabilitar o botão
            $("#btnChatRestart").attr('disabled', 'disabled');
            //reload no sucesso
            $.ajax({
                url: '{{route('ajax.chat.restart')}}',
                method: 'get'
            }).done(function(data){
                console.log(data);
                alert('Chat reiniciado com sucesso!');
                location.reload();
            });

        } else {
            return false;
        }



    });

    </script>
@endsection