@extends('layouts.app')

@section('content')
    <style>
        .service-label {
            width: 25px;
            height: 25px;
            display: block;
            border-radius: 50%;
        }

        .service-label.orange {
            background: #e67e22;
        }

        .service-label.green {
            background: #27ae60;
        }

        .service-label.red {
            background: #c0392b;
        }
    </style>
    <div class="row mb-2">
        <div class="col-sm-6">

        </div>
        <div class="col-sm-6">

        </div>
    </div>

    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Conexões ativas</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item active">Conexões ativas</li>
            </ol>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Conexões ativas</h3>
        </div>
        <div class="card-body">
            <button class="btn btn-primary" onclick="details()" style="margin-bottom: 10px; float: right;"><i class="fas fa-sync"></i> Carregar detalhes</button>
            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-3 col-sm-6 col-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-info">
                            <i class="far fa-users"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Conexões</span>
                            <span id="tag-connections" class="info-box-number"></span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-warning">
                            <i class="far fa-microchip"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Capacidade atual</span>
                            <span class="info-box-number">
                                <div class="progress">
                                    <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 1%">
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-success">
                            <i class="far fa-memory"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Capacidade máxima</span>
                            <span class="info-box-number">50.000</span>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-danger">
                            <i class="far fa-server"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">Servidor</span>
                            <span class="info-box-number">Fibonacci</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th style="width: 50px;"></th>
                        <th>Detalhes</th>
                    </tr>
                    </thead>

                    <tbody id="clients">

                    </tbody>

                </table>
            </div>
        </div>
    </div>
@endsection

@section('after_js')
    <script>
        let socket = new WebSocket("wss://fibonacci.omnigator.net:11115");

        socket.onopen = function(e) {
            socket.send(JSON.stringify({action: 'admin-auth', token: '{{ Session::get('admin_token')}}'}));
        };

        socket.onmessage = function(event) {
            var data = JSON.parse(event.data)

            if(data.action === undefined) {
                console.log(data);
                $('#clients').html('');
                $('#clients').append(`
                        <tr>
                            <td>
                                <span class="service-label green"></span>
                            </td>
                            <td><b>Usuário</b>: `+data.data.username+`<br><b>Valor</b>: R$ `+data.data.dificulty.toFixed(2)+`<br><b>Jogo</b>: `+data.data.game+`<br><b>Provedor</b>: `+data.data.provider+`<br><b>Até agora</b>: `+data.data.coins+`</td>
                        </tr>
                `);
            }

            if(data.action == 'connections') {
                $('#tag-connections').html(data.qty);
            }

            if(data.action == 'admin-auth') {
                if(!data.status) {
                    $(document).Toasts('create', {
                        class: 'bg-danger',
                        title: 'Erro na conexão',
                        autohide: true,
                        delay: 2000,
                        body: 'Ocorreu um erro ao abrir conexão com servidor'
                    })
                } else {
                    $('#tag-connections').html(data.qty);
                    $(document).Toasts('create', {
                        class: 'bg-success',
                        title: 'Conectado ao servidor',
                        autohide: true,
                        delay: 2000,
                        body: 'Conexão com o servidor estabelecida com sucesso.'
                    })
                }
            }

        };

        socket.onclose = function(event) {
        if (event.wasClean) {
            alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
        } else {
            // e.g. server process killed or network down
            // event.code is usually 1006 in this case
            $(document).Toasts('create', {
                class: 'bg-danger',
                title: 'Erro na conexão',
                autohide: true,
                delay: 2000,
                body: 'O servidor ficou offline.'
            })
        }
        };

        socket.onerror = function(error) {
            console.log(error);
        };

        function details() {
            socket.send(JSON.stringify({action: 'admin-get-clients', token: '{{ Session::get('admin_token')}}'}));
        }
    </script>
@endsection