@include('includes/header_start')
<meta name="csrf-token" content="{{ csrf_token() }}">

<script src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/js/okta-sign-in.min.js" type="text/javas
cript"></script>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/css/okta-sign-in.min.css" type="text/css"
      rel="stylesheet"/>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.6.0/css/okta-theme.css" type="text/css" rel="
stylesheet"/>

<style>
    body {
        font-family: 'Raleway', sans-serif;
    }

    footer {
        text-align: center;
        margin-top: 2em;
    }

    h2 {
        font-style: italic;
    }

    header {
        text-align: center;
        margin: 4em;
    }

    header h1, header h2 {
        display: inline;
    }

    header h1 a, header h2 a, header h1 a:hover, header h2 a:hover {
        color: inherit;
        text-decoration: none;
    }

    header h2 {
        font-size: 24px;
        padding-left: .5em;
    }

    #remotes {
        visibility: hidden;
    }

    #url {
        text-align: center;
        display: none;
    }

    #login {
        display: none;
    }

    #roomIntro {
        font-weight: bold;
    }

    .videoContainer {
        object-fit: cover;
        margin: 0 auto;
        padding: 0;
    }

    .videoContainer video {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        border: 5px double #f2f2f2;
    }

    .volume {
        position: absolute;
        left: 15%;
        width: 70%;
        bottom: 20px;
        height: 10px;
        display: none;
    }

    .connectionstate {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        color: #fff
    }

    .col-md-6 {
        margin-bottom: 1em;
    }
</style>
@include('includes/header_end')

<!-- Page title -->
<ul class="list-inline menu-left mb-0">
    <li class="list-inline-item">
        <button type="button" class="button-menu-mobile open-left waves-effect">
            <i class="ion-navicon"></i>
        </button>
    </li>
    <li class="hide-phone list-inline-item app-search">
        <h3 class="page-title">Chat</h3>
    </li>
</ul>

<div class="clearfix"></div>
</nav>

</div>
<!-- Top Bar End -->

<!-- ==================
     PAGE CONTENT START
     ================== -->
<div class="page-content-wrapper">

    <iframe
            src="https://tokbox.com/embed/embed/ot-embed.js?embedId=5664ab7c-cfad-4ca6-9472-21cab11f5d32&room=DEFAULT_ROOM&iframe=true"
            width="800px"
            height="640px"
            scrolling="auto"
            allow="microphone; camera"
    ></iframe>

    @include('includes/footer_start')


<script>
    var okta = new OktaSignIn({
        baseUrl: "http://localhost:8000/chat",
        clientId: "0oawrl1c5bdIxYCXp356",
        authParams: {
            issuer: "http://localhost:8000/chat/oauth2/default",
            responseType: ["token", "id_token"],
            display: "page"
        }
    });

    // Render the login form.
    function showLogin() {
        okta.renderEl({ el: "#okta-login-container" }, function(res) {}, function(err) {
            alert("Couldn't render the login form, something horrible must have happened. Please refresh the page.");
        });
    }

    // Handle the user's login and what happens next.
    function handleLogin() {
        // If the user is logging in for the first time...
        if (okta.token.hasTokensInUrl()) {
            okta.token.parseTokensFromUrl(
                function success(res) {
                    // Save the tokens for later use, e.g. if the page gets refreshed:
                    okta.tokenManager.add("accessToken", res[0]);
                    okta.tokenManager.add("idToken", res[1]);

                    console.log("user just logged in");
                }, function error(err) {
                    alert("We weren't able to log you in, something horrible must have happened. Please refresh the page.");
                }
            );
        } else {
            okta.session.get(function(res) {

                // If the user is logged in...
                if (res.status === "ACTIVE") {

                    console.log("user is already logged in")
                    return;
                }

                // If we get here, the user is not logged in.
                console.log("user not logged in");
                showLogin();
            });
        }
    }

    handleLogin();
</script>
@include('includes/footer_end')