@extends('layouts.master')
@section('title')
    @lang('translation.live_streaming')
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="{{asset('assets/css/custom/live-streaming.css')}}" rel="stylesheet" type="text/css">
    <style>
        .sh-left img {
            width: 30px;
            height: 30px;
            object-fit: cover;
            border: 1px solid #dedddd;
            border-radius: 50%;
        }

        .sh-strong {
            padding-right: 0.5rem;
            color: #737373;
            font-weight: bold;
        }

        .sh-right {
            width: 90%;
        }

        .sh-left {
            width: 5%;
        }

        @media (max-width: 600px) {
            .sh-right {
                width: 65%;
            }

            .sh-left {
                width: 20%;
            }
        }
    </style>

@endsection

@section('content')

    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.live_streaming')
        @endslot
        @slot('title')
            @lang('translation.live_streaming')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')


    <div class="row">
        <section class="right row">
            <!-- video -->
            <div class="video-group col-md-12 col-lg-6">
                <!-- local stream -->
                <section class="card">
                    <div class="card-header">
                        local stream
                    </div>
                    <div class="card-body">
                        <div id="local-player" class="player">
                            <div class="card-text local-player-name" id="local-player-name"></div>
                        </div>
                    </div>
                </section>
                <!-- remote stream -->
                <section class="card">
                    <div class="card-header">
                        remote stream
                    </div>
                    <div class="card-body">
                        <div id="remote-playerlist"></div>
                    </div>
                </section>
            </div>

            <!-- form -->
            <div class="form-wrapper col-lg-6">
                <form id="join-form" name="join-form">
                    <div class="button-group">
                        @if (data_get($liveStreaming, 'user_id') == auth()->id())
                            <button type="button" id="video-set-enabled" class="btn btn-primary btn-rounded btn-lg">
                                <i class="fas fa-video-slash"></i>
                            </button>
                            <button type="button" id="audio-set-enabled" class="btn btn-primary btn-rounded btn-lg">
                                <i class="fas fa-microphone-slash"></i>
                            </button>
                        @endif
                        <button id="leave" type="button" class="btn btn-primary btn-rounded">Leave</button>
                    </div>
                </form>
            </div>


            <!-- Comment Section -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h5>Live Chat</h5>
                    </div>
                    <div class="card-body sh-chat-box" id="sh-chat-box" style="height: 400px; overflow-y: auto;">
                        <!-- Comments will appear here -->
                    </div>
                    <div class="card-footer">
                        <form id="comment-form">
                            <div class="input-group">
                                <textarea id="comment" name="comment" class="form-control"
                                          placeholder="Enter your comment" required></textarea>
                                <button type="submit" class="btn btn-primary sh-send-message-button">Send</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </section>
    </div>
@endsection

@push('script')
    <script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.20.2.js"></script>
    <script>
        let userID = "{{ auth()->id() }}";
        let data = @json($liveStreaming);

        let client = AgoraRTC.createClient({mode: "live", codec: "vp8"});
        let localTracks = {
            videoTrack: null,
            audioTrack: null
        };
        let remoteUsers = {};
        // Agora client options

        let options = {
            appid: '{{ config('app.agora_app_id') }}',
            channel: `livestreaming-${data.id}`,
            role: "audience", // host or audience
            audienceLatency: 2
        };

        let localTrackState = {
            videoTrackMuted: false,
            videoTrackEnabled: false,
            audioTrackMuted: false,
            audioTrackEnabled: false
        };

        $(document).on('click', "#video-set-enabled", function (e) {
            if (localTrackState.videoTrackEnabled) {
                setEnabled("video", false)
            } else {
                setEnabled("video", true)
            }
        })

        $(document).on('click', "#audio-set-enabled", function (e) {
            if (localTrackState.audioTrackEnabled) {
                setEnabled("audio", false)
            } else {
                setEnabled("audio", true)
            }
        })

        if (userID == data.user_id) {
            options.role = "host"
        }

        setTimeout(async function () {
            try {
                await join();
            } catch (error) {
                console.error(error);
            } finally {
                $("#leave").attr("disabled", false);
            }
        })

        $(document).on('click', "#leave", function (e) {
            leave();
        })

        async function join() {
            client.on("user-published", handleUserPublished);
            client.on("user-unpublished", handleUserUnpublished);

            if (options.role === "audience") {
                client.setClientRole(options.role, {level: options.audienceLatency});
                // add event listener to play remote tracks when remote user publishs.
            } else {
                client.setClientRole(options.role);
            }

            // join the channel
            options.uid = await client.join(options.appid, options.channel, options.token || null, options.uid || null);

            if (options.role === "host") {
                // create local audio and video tracks
                localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack({
                    encoderConfig: "music_standard"
                });

                localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();

                // play local video track
                localTracks.videoTrack.play("local-player");
                $("#local-player-name").text(`uid: ${options.uid}`);

                // publish local tracks to channel
                await client.publish(Object.values(localTracks));

                localTracks.audioTrack.setEnabled(false)
                localTracks.videoTrack.setEnabled(false)
            }
        }

        async function leave() {
            for (trackName in localTracks) {
                let track = localTracks[trackName];
                if (track) {
                    track.stop();
                    track.close();
                    localTracks[trackName] = undefined;
                }
            }

            // remove remote users and player views
            remoteUsers = {};
            $("#remote-playerlist").html("");

            // leave the channel
            await client.leave();

            if (options.role == 'host') {
                let csrf_token = $('meta[name="csrf_token"]').attr("content")
                $.ajax({
                    url: `/live-streaming/${data.id}`,
                    method: "POST",
                    data: {
                        "_token": csrf_token,
                    },
                    success: (response) => {
                        // check role
                        if (response.success) {
                            window.location.href = "{{ route('liveStreaming') }}";
                        }
                    },
                    error: (xhr, status, error) => {
                    }
                });
            } else {
                window.location.href = "{{ route('liveStreaming') }}";
            }
        }

        async function subscribe(user, mediaType) {
            const uid = user.uid;
            // subscribe to a remote user
            await client.subscribe(user, mediaType);
            if (mediaType === 'video') {
                const player = $(`
                <div id="player-wrapper-${uid}">
                    <div id="player-${uid}" class="player">
                            <div class="player-name">uid: ${uid}</div>
                    </div>
                </div>
            `);
                $("#remote-playerlist").append(player);
                user.videoTrack.play(`player-${uid}`);
            }
            if (mediaType === 'audio') {
                user.audioTrack.play();
            }
        }

        function handleUserPublished(user, mediaType) {
            const id = user.uid;
            remoteUsers[id] = user;
            subscribe(user, mediaType);
        }

        function handleUserUnpublished(user, mediaType) {
            //print in the console log for debugging
            if (mediaType === 'video') {
                const id = user.uid;
                delete remoteUsers[id];
                $(`#player-wrapper-${id}`).remove();
            }
        }

        async function setEnabled(type, state) {
            try {
                if (type == 'audio') {
                    await localTracks.audioTrack.setEnabled(state);
                    localTrackState.audioTrackEnabled = state;
                    if (state) {
                        $('.fa-microphone-slash').removeClass('fa-microphone-slash').addClass('fa-microphone')
                    } else {
                        $('.fa-microphone').removeClass('fa-microphone').addClass('fa-microphone-slash')
                    }
                } else if (type == "video") {
                    await localTracks.videoTrack.setEnabled(state);
                    localTrackState.videoTrackEnabled = state;
                    if (state) {
                        $('.fa-video-slash').removeClass('fa-video-slash').addClass('fa-video')
                    } else {
                        $('.fa-video').removeClass('fa-video').addClass('fa-video-slash')
                    }
                }
            } catch (err) {
                console.error(err)
            }
        }

        //Comment Section JS
        let csrf_token = $('meta[name="csrf_token"]').attr("content")
        const pusherForComment = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
            cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
            authEndpoint: "/pusher/auth",
            forceTLS: true,
            auth: {
                headers: {
                    "X-CSRF-Token": csrf_token,
                },
            },
        });

        // Subscribe to the live-streaming channel
        var channelForComments = pusherForComment.subscribe('live-streaming.{{ $liveStreaming->id }}');

        // Listen for CommentPosted event
        channelForComments.bind('liveStreamChat', function (data) {
            let commentHTML = `<div class="comment gap-2 d-flex align-items-start mb-4">
            <div class="sh-left">
                <img src='${data.profileUrl}' alt="user">
            </div>
            <div class="sh-right">
            <span class="sh-strong">${data.user}</span>
            <span>${data.comment}</span>
            </div>
        </div>`;
            $('#sh-chat-box').append(commentHTML);
            $('#sh-chat-box').scrollTop($('#sh-chat-box')[0].scrollHeight);
        });

        $('#comment-form').submit(function (e) {
            e.preventDefault();
            let sendButton = $('.sh-send-message-button');
            sendButton.prop('disabled', true).text('Sending...');

            let comment = $('#comment').val();
            $.ajax({
                url: '{{ route("liveStremaing.comment", $liveStreaming->id) }}',
                method: 'POST',
                data: {
                    comment: comment,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    $('#comment').val('');
                    sendButton.prop('disabled', false).text('Send');
                },
                error: function (xhr, status, error) {
                    iziToast['error']({
                        message: "Something went wrong. Please try again.",
                        position: "topRight"
                    });
                    sendButton.prop('disabled', false).text('Send');
                }
            });
        });
    </script>
@endpush