@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->id }};
window.Echo.join(`quiz.${quizId}`)
    .here((users) => {
        console.log('Currently connected users:', users);
        updateUserCount(users.length);
    })
    .joining((user) => {
        console.log('User joined:', user);
        incrementUserCount();
    })
    .leaving((user) => {
        console.log('User left:', user);
        decrementUserCount();
    })
    .listen('QuizConduct', (event) => {
        alert("hit");
        console.log('Real-time quiz data:', event.quizData);
        updateQuizData(event.quizData); 
    });


// Listen for messages on the 'chat' channel
// Enable Pusher logging
//Pusher.logToConsole = true; // comment in production
//console.log('sd:'+quizId+`quiz.${quizId}`);
// Listen to the 'quiz-channel' for the QuizConduct event
// window.Echo.private(`quiz.${quizId}`)
//     .listen('.App\\Events\\QuizConduct', (data) => {
//         console.log('Real-time quiz data:', data);
//     });

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

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

// channel.bind('.App\\Events\\QuizConduct', function(data) {
//     console.log('Real-time quiz data: Jameel: ', data);
//     // var messagesDiv = document.getElementById('messages');
//     // messagesDiv.innerHTML += '<p>' + data.message + '</p>';
// });

// window.Echo.private(`quiz.${quizId}`)
//     .listen('QuizConduct', (e) => {
//         console.log('Real-time quiz data:', event.quizData);
//         //updateQuizData(event.quizData); 
//         incrementUserCount(users.length);
// });
// Pusher.logToConsole = true;
// window.Echo.join(`quiz.${quizId}`)
//     .here((users) => {
//         console.log('Currently connected users:', users);
//         updateUserCount(users.length);
//     })
//     .joining((user) => {
//         console.log('User joined:', user);
//         incrementUserCount();
//     })
//     .leaving((user) => {
//         console.log('User left:', user);
//         decrementUserCount();
//     })
//     .listen('QuizConduct', (event) => {
//         console.log('Real-time quiz data:', event.quizData);
//         updateQuizData(event.quizData); 
//     })
//     .stopListening('QuizConduct', (event) => {
//         console.log('Real-time quiz stop listening:', event.quizData);
//         //updateQuizData(event.quizData); 
//     })
//     .error((error) => {
//         console.error('Error joining channel:', error);
//     });

function updateUserCount(count) {
    document.getElementById('userCount').textContent = count;
}

function incrementUserCount() {
    let currentCount = parseInt(document.getElementById('userCount').textContent);
    document.getElementById('userCount').textContent = currentCount + 1;
}

function decrementUserCount() {
    let currentCount = parseInt(document.getElementById('userCount').textContent);
    document.getElementById('userCount').textContent = currentCount - 1;
}
function updateQuizData(data) {
    console.log('Questions data:', data.questions); 

    const quizTitleElement = document.getElementById('quizTitle');
    if (quizTitleElement) {
        quizTitleElement.textContent = data.quiz.quiz_description;
    } else {
        console.error('Quiz title element not found.');
    }

    let questionsHtml = data.questions.map(q => `<li>${q.question}</li>`).join('');
    const questionsElement = document.getElementById('questions');
    if (questionsElement) {
        questionsElement.innerHTML = questionsHtml;
    } else {
        console.error('Questions element not found.');
    }

    console.log('Generated HTML:', questionsElement);
}

</script>
@endsection