<!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>Dashboard</title>
</head>

<body>
    <div class="d-flex wrapper">

        <%- include ('includes/sidebar') %>

        <div class="container-fluid">
            <div class="content">
                <div class="fila row">
                    <div class="fila-header col-1">
                        A
                    </div>
                    <div class="fila-desc col-2">
                        <b>Atendimento Geral</b>
                    </div>
                    <div class="fila-espera col-2">
                        <p>Em espera</p>
                        <i class="fas fa-users"></i> <span id="qtd-A">0</span>
                    </div>
                    <div class="fila-next col-5">
                        <p>Próxima senha</p>
                        <span class="next-A">...</span> <span id="timer"></span>
                    </div>
                    <div class="fila-call col-1">
                        <button class="btn btn-custom btn-chamar" data-toggle="modal" data-target="#senha-modal"
                            data-backdrop="static" data-keyboard="false" data-fila="A">CHAMAR</button>
                    </div>
                </div>
                <div class="fila row">
                    <div class="fila-header col-1">
                        B
                    </div>
                    <div class="fila-desc col-2">
                        <b>Escalões</b>
                    </div>
                    <div class="fila-espera col-2">
                        <p>Em espera</p>
                        <i class="fas fa-users"></i> <span id="qtd-B">0</span>
                    </div>
                    <div class="fila-next col-5">
                        <p>Próxima senha</p>
                        <span class="next-B">...</span>
                    </div>
                    <div class="fila-call col-1">
                        <button class="btn btn-custom btn-chamar" data-toggle="modal" data-target="#senha-modal"
                            data-backdrop="static" data-keyboard="false" data-fila="B">CHAMAR</button>
                    </div>
                </div>
                <div class="fila row">
                    <div class="fila-header col-1">
                        C
                    </div>
                    <div class="fila-desc col-2">
                        <b>Matrículas</b>
                    </div>
                    <div class="fila-espera col-2">
                        <p>Em espera</p>
                        <i class="fas fa-users"></i> <span id="qtd-C">0</span>
                    </div>
                    <div class="fila-next col-5">
                        <p>Próxima senha</p>
                        <span class="next-C">...</span>
                    </div>
                    <div class="fila-call col-1">
                        <button class="btn btn-custom btn-chamar" data-toggle="modal" data-target="#senha-modal"
                            data-backdrop="static" data-keyboard="false" data-fila="C">CHAMAR</button>
                    </div>
                </div>
                <div class="fila row">
                    <div class="fila-header col-1">
                        D
                    </div>
                    <div class="fila-desc col-2">
                        <b>Manuais Escolares</b>
                    </div>
                    <div class="fila-espera col-2">
                        <p>Em espera</p>
                        <i class="fas fa-users"></i> <span id="qtd-D">0</span>
                    </div>
                    <div class="fila-next col-5">
                        <p>Próxima senha</p>
                        <span class="next-D">...</span>
                    </div>
                    <div class="fila-call col-1">
                        <button class="btn btn-custom btn-chamar" data-toggle="modal" data-target="#senha-modal"
                            data-backdrop="static" data-keyboard="false" data-fila="D">CHAMAR</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Senha -->
        <div class="modal fade" id="senha-modal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Dados do cliente:</h5>
                        <h5 class="modal-senha"></h5>
                        </button>
                    </div>
                    <div class="modal-body">
                        <button class="btn btn-custom" id="reg-cliente">Registar cliente?</button>
                        <form id="form-cliente">
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="nome">Nome</label>
                                    <input type="text" class="form-control" name="nome" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="apelido">Apelido</label>
                                    <input type="text" class="form-control" name="apelido" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-9">
                                    <label for="morada">Morada</label>
                                    <input type="text" class="form-control" name="morada" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="cod_postal">Código Postal</label>
                                    <input type="text" class="form-control" name="cod_postal" pattern="^\d{4}-\d{3}$"
                                        placeholder="ex. 8500-001" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="cidade">Cidade</label>
                                    <input type="text" class="form-control" name="cidade" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control" name="email" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="telefone">Telefone</label>
                                    <input type="text" class="form-control" name="telefone" required>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-custom">Registar</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="dropdown">
                            <button class="btn btn-custom dropdown-toggle" type="button" data-toggle="dropdown">
                                Transferir para outra lista
                            </button>
                            <div class="dropdown-menu"></div>
                        </div>
                        <button type="click" class="btn btn-custom" data-dismiss="modal" id="atender-senha">Marcar
                            como atendido</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.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();

    // Atualiza o dashboard ao carregar a página
    socket.emit('dashboard');

    // Recebe os dados das filas e preenche os elementos
    socket.on('dashboard-filas', (data) => {
        const qtd = ['#qtd-A', '#qtd-B', '#qtd-C', '#qtd-D'];
        const next = ['.next-A', '.next-B', '.next-C', '.next-D'];
        populateUsers(qtd, data.users);
        populateSenhas(next, data.senhas);
    });

    // Quando o modal é aberto, altera os dados para bater certo com a fila pretendida
    $('#senha-modal').on('show.bs.modal', function (e) {
        socket.emit('dashboard');

        const button = $(e.relatedTarget);
        // Vai buscar o atributo data-fila do botão
        const fila = button.data('fila');
        const modal = $(this);
        modal.attr('data-fila', fila)
        // Adiciona uma classe ao modal para ser preenchido com a senha ao atualizar
        modal.find('.modal-senha').attr('class', `modal-senha next-${fila}`);

        // Preenchimento do dropdown da transferência de filas
        let filas = ['A', 'B', 'C', 'D'];
        filas.splice(filas.indexOf(fila), 1);

        modal.find('.dropdown-menu').empty();
        for (let i = 0; i < filas.length; i++) {
            modal.find('.dropdown-menu').append(`
            <a class="dropdown-item trocar-fila" href="#" data-fila_atual=${fila} data-fila_nova="${filas[i]}">
                Fila ${filas[i]}
            </a>
            `);
        }
    });

    // Ao clicar no botão de trocar fila, emite um evento com a fila atual e a fila nova
    $(document).on('click', '.trocar-fila', function () {
        const filaAtual = $(this).data('fila_atual');
        const filaNova = $(this).data('fila_nova');
        socket.emit('trocar-fila', filaAtual, filaNova);
        $('#senha-modal').modal('hide');
    });

    // Ao carregar no botão de chamar, emite um evento
    $(document).on('click', '.btn-chamar', function () {
        const fila = $(this).data('fila');
        const balcao = $('.balcao-atual').data('id');
        socket.emit('chamar-senha', fila, balcao);
    });

    // Ao marcar o cliente como 'atendido', emite um evento
    $(document).on('click', '#atender-senha', function (e) {
        e.preventDefault();
        const fila = $('#senha-modal').attr('data-fila');
        socket.emit('senha-atendida', fila);
    });

    // Ao submeter o formulário dos cliente, adiciona o registo à base de dados por AJAX
    $('#form-cliente').submit(function (e) {
        e.preventDefault();
        const $form = $('#form-cliente');
        $.ajax({
            type: "POST",
            url: "/ajax/clientes/add",
            data: $form.serializeArray(),
            success: function (res) {
                $form.trigger("reset");
                $('#reg-cliente').show();
                $('#reg-cliente').prop('disabled', true);
                $('#form-cliente').hide();
                $('#atender-senha').prop('disabled', false);
            }
        });
    });

    $('#reg-cliente').click(function () {
        $(this).hide();
        $('#form-cliente').show();
        $('#form-cliente').trigger('reset');
        $('#atender-senha').prop('disabled', true);
    });

    mostrarFuncao('<%= nivel %>', '<%= id %>');

</script>

</html>