@extends('backend.layouts.app')
@section('content')
<h2 id="quizTitle"></h2>
<ul id="questions"></ul>
<div id="app"></div>


<p>Total Users Connected: <span id="userCount">0</span></p>


@endsection
@section('script')
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script src="{{ env('APP_PATH') }}{{ mix('js/app.js') }}"></script>
<script>
var quizId = {{ $quiz['quiz']->id }};
// Listen for messages on the 'chat' channel
// Enable Pusher logging
//Pusher.logToConsole = true;

// var pusher = new Pusher("{{env('PUSHER_APP_KEY')}}", {
//     cluster: "{{env('PUSHER_APP_CLUSTER')}}",
//     forceTLS: true
// });

// var channel = pusher.subscribe(`quiz.${quizId}`);

// channel.bind('App\\Events\\UserStatusUpdated', function(data) {
//     console.log('Real-time quiz data: UserStatusUpdated: ', data);
// });

window.Echo.private(`quiz.${quizId}`)
    .listen('UserStatusUpdated', (e) => {
        console.log('Real-time quiz data UserStatusUpdated:', event);
        //updateQuizData(event.quizData); 
        //incrementUserCount(users.length);
});



</script>
@endsection