<!DOCTYPE HTML>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">

    <title>Multiroom Chat</title>

    <!-- JQUERY -->
    <script src="js/jquery-2.2.1.js"></script>

    <!-- bootstrap - link cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- estilo -->
    <link href="css/style.css" rel="stylesheet">

    <script type="text/javascript">

        $(document).ready(function () {
            $("#exibe_chat").click(function () {
                $("#conversa").show();
                $("#participantes").hide();
                ocultaNavbar();
            });

            $("#exibe_participantes").click(function () {
                $("#participantes").show();
                $("#conversa").hide();
                ocultaNavbar();
            });
        });

        function ocultaNavbar() {
            $("#btn_navbar_toggle").attr("class", "navbar-toggle collapsed");
            $("#navbar-collapse-1").attr("class", "navbar-collapse collapse");
            $("#btn_navbar_toggle").attr("aria-expanded", "false");
            $("#navbar-collapse-1").attr("aria-expanded", "false");
        }
    </script>
</head>

<body>


    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1" id="btn_navbar_toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Multiroom Chat</a>
            </div>


            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#" id="exibe_chat">Chat</a>
                    </li>
                    <li>
                        <a href="#" id="exibe_participantes">Participantes</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row conversa" id="conversa">
            <div class="col-md-1"></div>
            <div class="col-md-10" id="dialogos"></div>
            <div class="col-md-1"></div>

        </div>

        <div class="row participantes" id="participantes" style="display:none">
            <div class="col-md-1"></div>
            <div class="col-md-10" id="pessoas"></div>
            <div class="col-md-1"></div>

        </div>
    </div>

    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <div class="container">
            <div class="panel-body campo-mensagem">

                <div class="col-md-12">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Mensagem" id="mensagem" autofocus>
                        <input type="hidden" id="apelido" value="<%=dadosForm.apelido%>">
                        <input type="hidden" id="apelido_atualizado_nos_clientes" value="0">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="enviar_mensagem">></button>
                        </span>
                    </div>
                </div>

            </div>
        </div>
    </nav>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

<!-- Biblioteca do socket.io-->
<script src="/socket.io/socket.io.js"></script>
<script>
    //var socket = io('http://localhost:8080');   
    var socket = io(window.location.protocol + '//' + window.location.host);

    function enviaMensagem() {
        socket.emit(
            'msgParaServidor',
            {
                apelido: $('#apelido').val(),
                mensagem: $('#mensagem').val(),
                apelido_atualizado_nos_clientes: $('#apelido_atualizado_nos_clientes').val()
            }
        );
        $('#mensagem').val("");
        $('#apelido_atualizado_nos_clientes').val(1);
    }

    $(document).keypress(function (e) {
        if (e.which == 13) {
            enviaMensagem();
        }
    });

    $('#enviar_mensagem').on('click', () => {
        /*
        socket.emit(
            'msgParaServidor',
            { 
                apelido: $('#apelido').val(), 
                mensagem: $('#mensagem').val(),
                apelido_atualizado_nos_clientes: $('#apelido_atualizado_nos_clientes').val()
            }
        );
      $('#mensagem').val("");
      $('#apelido_atualizado_nos_clientes').val(1);
      */
        enviaMensagem();
    });


    socket.on('msgParaCliente', (data) => {
        var html = '';
        html += '<div class="dialogo"><h4>' + data.apelido + '</h4><p>' + data.mensagem + '</p></div>';
        $('#dialogos').append(html);

        window.scrollTo(0, document.body.scrollHeight);
    });

    socket.on('participantesParaCliente', (data) => {
        var html = '';
        html += '<span class="participante"><img src="images/ico_usuario.png">' + data.apelido + '</span>';
        $('#pessoas').append(html);
    });
</script>

</html>