@extends('layouts/contentNavbarLayout')

@section('title', 'caller')

@section('content')
    <div id="local-media"></div>
    <button onclick="joinRoom()">Join Call as Caller</button>
    <button onclick="testCamera()">Test Camera</button>

    <!-- Container for the caller's (your) video stream -->
    <div id="caller-media"></div>

    <!-- Container for the receiver's video stream -->
    <div id="receiver-media">
        <img id="receiver-image" src="{{asset('assets/img/default_image/receiver_disconnected.png')}}" alt="Receiver disconnected" style="display: none; width: 640px; height: 480px;" />
        <img id="receiver-black-image" src="{{asset('assets/img/default_image/video_off.png')}}" alt="Video off" style="display: none; width: 640px; height: 480px;" />
        <img id="receiver-muted-image" src="{{asset('assets/img/default_image/receiver_muted.png')}}" alt="Receiver muted" style="display: none; width: 640px; height: 480px;" />
    </div>

    <video id="video" width="640" height="480" autoplay></video>

    <div id="call-timer" class="timer">Call duration: 00:00</div>

    <!-- Area to display messages -->
    <div id="status-message" style="color: red;"></div>

    <!-- Buttons to disconnect, mute, and stop video -->
    <div id="control-buttons" style="display: none;">
        <button onclick="disconnect()" style="background-color: red; color: white;">Disconnect</button>
        <button id="mute-button" onclick="toggleAudio()" style="background-color: green; color: white;">Mute/Unmute Audio</button>
        <button id="video-button" onclick="toggleVideo()" style="background-color: green; color: white;">Stop Video</button>
    </div>
@endsection

@section('page-script')
    <script>
        let room; // Global variable to store the room
        let localAudioTrack; // Variable to store the local audio track
        let localVideoTrack; // Variable to store the local video track
        let timer; // Variable for the timer
        let seconds = 0; // Seconds counter

        function testCamera() {
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function(stream) {
                    const video = document.getElementById('video');
                    video.srcObject = stream;
                })
                .catch(function(error) {
                    console.error('Camera access error', error);
                });
        }

        // Function to start the timer
        function startTimer() {
            timer = setInterval(() => {
                seconds++;
                const minutes = Math.floor(seconds / 60);
                const secs = seconds % 60;
                document.getElementById('call-timer').textContent = `Call duration: ${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
            }, 1000);
        }

        // Function to join a Twilio room
        function joinRoom() {
            const appointment_id = '2';

            fetch(`/CRM/token/${appointment_id}?identity=caller`)
                .then(response => response.json())
                .then(data => {
                    return Twilio.Video.connect(data.token, {
                        name: 'MyRoom'
                    });
                })
                .then(r => {
                    room = r; // Assign the room to the global variable
                    console.log('Connected to room:', room.name);

                    // Add the caller's (local) video stream to the screen
                    room.localParticipant.tracks.forEach(publication => {
                        if (publication.track.kind === 'audio') {
                            localAudioTrack = publication.track;
                        }
                        if (publication.track.kind === 'video') {
                            localVideoTrack = publication.track;
                            document.getElementById('caller-media').appendChild(localVideoTrack.attach()); // Attach the local video track
                        }
                    });

                    // Handle the addition of a participant
                    room.on('participantConnected', participant => {
                        console.log(participant.identity + ' has joined the room');

                        participant.tracks.forEach(publication => {
                            if (publication.isSubscribed) {
                                const track = publication.track;
                                console.log(`Track kind: ${track.kind}, Track subscribed: ${publication.isSubscribed}`);
                                if (track.kind === 'video') {
                                    document.getElementById('receiver-media').appendChild(track.attach());
                                    startTimer();
                                    document.getElementById('control-buttons').style.display = 'block';
                                }
                                if (track.kind === 'audio') {
                                    console.log('Audio track is subscribed:', track);
                                    if (!track.isEnabled) {
                                        displayReceiverMutedImage(participant.identity);
                                    }
                                }
                            }
                        });

                        participant.on('trackSubscribed', track => {
                            if (track.kind === 'video') {
                                document.getElementById('receiver-media').appendChild(track.attach());
                                startTimer();
                                document.getElementById('control-buttons').style.display = 'block';
                            }
                            if (track.kind === 'audio') {
                                console.log('Audio track subscribed');
                                track.on('mute', () => {
                                    console.log('Receiver muted');
                                    displayReceiverMutedImage(participant.identity);
                                });
                                track.on('unmute', () => {
                                    console.log('Receiver unmuted');
                                });
                                if (!track.isEnabled) {
                                    displayReceiverMutedImage(participant.identity);
                                }
                            }
                        });

                        participant.on('trackUnsubscribed', track => {
                            if (track.kind === 'video') {
                                track.detach().forEach(element => element.remove());
                                console.log(participant.identity + ' has stopped video');
                                document.getElementById('receiver-media').style.display = 'none'; // Hide the video container
                                document.getElementById('receiver-black-image').style.display = 'block'; // Show the black image
                                displayStatusMessage(`${participant.identity} has stopped the video.`);
                            }
                            if (track.kind === 'audio') {
                                console.log(participant.identity + ' has muted their audio');
                                displayStatusMessage(`${participant.identity} has muted their audio.`);
                            }
                        });
                    });

                    room.on('disconnected', () => {
                        console.warn('Disconnected from the room');
                        room.localParticipant.tracks.forEach(track => track.stop());
                        clearInterval(timer); // Stop the timer when disconnected
                    });
                })
                .catch(error => {
                    console.error('Unable to connect to Twilio: ' + error.message);
                });
        }

        // Function to display the image when the receiver is muted
        function displayReceiverMutedImage(participantIdentity) {
            const mutedImage = document.getElementById('receiver-muted-image');
            mutedImage.style.display = 'block'; // Show the muted image
            displayStatusMessage(`${participantIdentity} is muted.`);
        }

        // Function to disconnect from the room
        function disconnect() {
            if (room) {
                const appointment_id = '2';
                const deviceToken = 'your_device_token'; // Replace with logic to get the device token

                fetch('/CRM/token/disconnect/notification', { // Update with the correct path
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include the CSRF token if necessary
                    },
                    body: JSON.stringify({ device_token: deviceToken , appointment_id: appointment_id })
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data.message);
                        room.disconnect(); // Disconnect from the room after sending the notification
                        console.log('Disconnected from the room');
                    })
                    .catch(error => {
                        console.error('Error while sending disconnect notification: ' + error.message);
                    });
            }
        }

        // Function to mute or unmute the audio
        function toggleAudio() {
            const muteButton = document.getElementById('mute-button');
            if (localAudioTrack) {
                if (localAudioTrack.isEnabled) {
                    localAudioTrack.disable();
                    muteButton.style.backgroundColor = 'red'; // Change the color to red when the audio is muted
                    muteButton.textContent = 'Unmute Audio'; // Change the button text
                    console.log('Audio muted');
                } else {
                    localAudioTrack.enable();
                    muteButton.style.backgroundColor = 'green'; // Change the color to green when the audio is unmuted
                    muteButton.textContent = 'Mute Audio'; // Change the button text
                    console.log('Audio unmuted');
                    const mutedImage = document.getElementById('receiver-muted-image');
                    mutedImage.style.display = 'none'; // Hide the muted image
                }
            }
        }

        // Function to stop or resume the video
        function toggleVideo() {
            const videoButton = document.getElementById('video-button');
            if (localVideoTrack) {
                if (localVideoTrack.isEnabled) {
                    localVideoTrack.disable();
                    videoButton.style.backgroundColor = 'red'; // Change the color to red when the video is stopped
                    videoButton.textContent = 'Start Video'; // Change the button text
                    console.log('Video stopped');
                } else {
                    localVideoTrack.enable();
                    videoButton.style.backgroundColor = 'green'; // Change the color to green when the video is resumed
                    videoButton.textContent = 'Stop Video'; // Change the button text
                    console.log('Video started');
                }
            }
        }

        // Function to display status messages
        function displayStatusMessage(message) {
            const statusMessageDiv = document.getElementById('status-message');
            statusMessageDiv.textContent = message;
            setTimeout(() => {
                statusMessageDiv.textContent = ''; // Clear the message after 5 seconds
            }, 5000);
        }
    </script>
@endsection