<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="icon" href="favicon.ico" />
    <title>Senhas</title>
</head>

<body>

    <div class="container text-center">
        <div class="status">
            <h1 class="display-4" id="fila-status"></h1>
            <h1 class="display-4" id="senha-status"></h1>
        </div>
        <div class="div-buttons">
            <button class="btn btn-lg btn-block btn-senha btn-custom" value="A">
                A - Atendimento Geral
            </button>

            <button class="btn btn-lg btn-block btn-senha btn-custom" value="B">
                B - Escalões
            </button>

            <button class="btn btn-lg btn-block btn-senha btn-custom" value="C">
                C - Matrículas
            </button>

            <button class="btn btn-lg btn-block btn-senha btn-custom" value="D">
                D - Manuais Escolares
            </button>
        </div>
    </div>
</body>

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a747b443e5.js" crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
    const socket = io.connect();

    // Ao clicar num dos buttons de chamada de senha
    $(document).on('click', '.btn-senha', function () {
        // Esconde os buttons
        $(".div-buttons").hide();

        // Emite um evento new-user com a fila
        const fila = $(this).val();
        socket.emit("new-user", fila);
    });

    // Atualização do número de clientes na fila quando um cliente entra
    socket.on("users-in-fila", (numUsers, filaAtual) => {
        const fila = $(`button[value='${filaAtual}']`).text();
        $("#fila-status").html(`Fila ${fila} <br> <i class="fas fa-users"></i> ${numUsers} `);
    });

    // Atualização da senha do cliente
    socket.on('user-senha', (senha) => {
        $('#senha-status').html(`<i class="fas fa-ticket-alt"></i> ${senha}`);
    });

    // Atualização do número de clientes na fila quando um cliente sai
    socket.on("user-left", fila => {
        socket.emit("get-number-users", fila);
    });

    // Quando o cliente é chamado, mostra o balcão
    socket.on("balcao", balcao => {
        $("#fila-status").text(
            `É a sua vez! Dirija-se ao balcão ${balcao}`
        );
        // Se o cliente estiver a usar um telemóvel, vibra 2 vezes
        window.navigator.vibrate([500, 10, 500]);
    });

    // Ao cliente ser desconectado (atendido) refresh à página
    socket.on("disconnect", () => {
        location.reload();
        // TODO bug reload
    });
</script>

</html>