@extends('layouts.pro')

@section('content')
@if(Session::get('message'))
<div class="alert-alert-info">{{Session::get('message')}}</div>
@endif
<h1>Pro dashboard</h1>
<a href="{{route('pro-logout')}}">Log out</a>

<ul>
    <li>
        <a href="{{route('pro-index')}}">Pros</a>
    </li>
</ul>

<div moe>
    <a start show href="">create pro</a>
    <form url="/api/dev/createSystemAdmin" style="display:none">
        <h1>Form to create pro</h1>
        <button submit>submit</button>
        <button cancel>Cancel</button>
    </form>
</div>
<script>
var stompClient = null;

function setConnected(connected) {
    console.log("User is connected");
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    console.log("connecting...");
    var socket = new SockJS('http://localhost:8080/ws');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        console.log("Connected");
        setConnected(true);
        console.log('Connected: ' + frame);

        // stompClient.send("/app/update-participant-status", {}, JSON.stringify({meetingUid:"mymeetinguid", status:'mystatus'}));

        // stompClient.subscribe('/user/topic/on-participant-status-change', function (message) {
        //     console.log("Participant status changed: ", message);
        // });

        stompClient.subscribe("/user/topic/on-pro-incoming-call", function(message){
            console.log("incoming call:", message);

            message = JSON.parse(message.body);
            console.log(message.meetingUid);

            // auto accept for now
            stompClient.send("/app/pro-join-meeting", {},
                JSON.stringify({
                    sessionKey: "<?= $sessionKey ?>",
                    meetingUid: message.meetingUid
                }));

        });

        // connect
        stompClient.send("/app/pro-connect", {}, JSON.stringify({sessionKey: "<?= $sessionKey ?>"}));

        console.log('Pro connected')

    });
}

connect();

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
}

function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendName(); });
});
</script>
@endsection