@extends('layouts.master')

@section('title')
    @lang('translation.dashboard')
@endsection


@section('content')
    <style>
        .ad-space {
            background-color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
    <style>
        /* Ensure no white space and prevent overflow */
		html, body {
			margin: 0;
			padding: 0;
			overflow-x: hidden; /* Disable horizontal scrolling */
			width: 100%; /* Ensure body and html are 100% of the viewport */
		}
		
		.custom-btn {
            background-color: #198754; /* Bootstrap success green */
            color: white;
            border: none;
        }
		
		/* Fix the video container */
		.video-container {
			position: relative;
			background: #000;
			width: 100%; /* Full width */
			height: 100vh; /* Full screen height */
			overflow: hidden; /* Prevent internal overflow */
		}
		
		/* Ensure broadcast video fits container */
		#main-video-div video {
			width: 100%;
			height: 100%;
			object-fit: cover; /* Ensures video fills the container */
		}

        /* Subscriber Videos (vertically aligned at bottom-right corner) */
        .subscribers-container {
			position: absolute;
			right: 10px;
			bottom: 60px; /* Place it above the comment input */
			display: flex;
			flex-direction: column; /* Stack videos vertically */
			gap: 10px;
			z-index: 5;
			justify-content: flex-end; /* Align items at the bottom */
			height: 50%; /* Ensure the height is consistent */
		}

        .subscriber-video {
            background-color: #000;
            border: 2px solid #fff; /* Add a white border for visibility */
            border-radius: 5px; /* Optional: rounded corners */
        }

        /* Comments Section (overlaying on top of the video) */
        .comments-overlay {
            position: absolute;
            bottom: 40px; /* Leave space for the input field */
            left: 0;
            padding: 10px;
            color: white;
            font-size: 0.9rem;
            overflow-y: auto;
            max-height: 30%; /* Make the comments section small */
            z-index: 10;
            display: flex;
            flex-direction: column-reverse; /* New comments appear at the bottom */
			scrollbar-width: none; /* For Firefox */
			-ms-overflow-style: none; /* For Internet Explorer */
        }
		
		.comments-overlay::-webkit-scrollbar {
			display: none; /* For Chrome, Safari, and Opera */
		}

        .comment {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 5px;
            padding: 5px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
        }

        .comment .comment-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .comment-time {
            font-size: 0.8rem;
            color: #ccc;
        }

        .comment-text {
            font-size: 1rem;
            margin-top: 3px;
        }

        /* Comment Input Section (full width) */
        .comment-input {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%; /* Full width */
            display: flex;
            padding: 10px;
            background: rgba(0, 0, 0, 0.8); /* Slightly darker background */
            z-index: 20;
            align-items: center;
            justify-content: space-between;
        }

        .comment-input input {
            width: 85%;
            padding: 8px;
            font-size: 1rem;
            border-radius: 5px;
            border: 1px solid #ddd;
            color: white;
            background: rgba(255, 255, 255, 0.2);
        }

        .comment-input button {
            width: 12%;
            padding: 8px;
            font-size: 1rem;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            border: none;
        }
		
		.text-overlay {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
		  color: white;
		  font-size: 24px;
		  font-weight: bold;
		  display: flex; /* Flexbox for centering */
		  justify-content: center; /* Center horizontally */
		  align-items: center; /* Center vertically */
		  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transitions */
		  z-index: 2; /* Ensure it appears above the video */
		  		  opacity: 0; /* Invisible initially */
		  visibility: hidden; /* Hide from the layout flow */
		  		}
		
		.text-overlay.show {
		  opacity: 1; /* Make it visible */
		  visibility: visible; /* Ensure it's part of the layout */
		}
		
		#join {
			display:none;
		}
		
		@media (max-width: 768px) {
			.subscribers-container {
				width:30%;
				height:50%;
			}
			
			.comments-overlay
			{
				width:68%;
			}
		}
		@media (min-width: 769px) {
			.subscribers-container {
				width:15%;
				height:50%;
			}
			
			.comments-overlay
			{
				width:83%;
				height:42%;
			}
		}
    </style>
    @include('partials.session')


    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <div class="container mt-5">
        <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
            <!-- Left Side: Welcome Message -->
            <h4 class="fw-bold mb-0">Welcome, <span id="username">{{ Auth::user()->first_name }}</span>!</h4>

                


            <!-- Right Side: Radio Buttons and Button -->
            <div class="d-flex align-items-center" id="controlcasting">
                @if(!$error && $page_type != 'view_page')
                    <button id="leave" class="btn custom-btn">Pause Broadcasting</button>&nbsp;
                    <button id="join" class="btn custom-btn">Start Broadcasting</button>&nbsp;
                    @if($channel->id == Auth::id())
                        <button data-url="{{ route('streaming.broadcastMyself') }}" onClick="end_broadcasting(this)" class="btn custom-btn">End Broadcasting</button>
                    @endif
                @endif
                {!! $send_join_request !!}
            </div>
        </div>

        <!-- Channel Video Section -->
        <div class="row">
            <div class="col-12">
                <div class="video-container">
                    @if(!$error)
                    <div id="main-video-div">
                        <video id="main-video" autoplay muted playsinline></video>
                    </div>
                    @endif

                    <div id="text-overlay" class="text-overlay">
                    @if($error)
                    @if($error == "no_view_permission")
                        <a style="color:white" href="javascript:;" url="{{ route('postPermission') }}" request_type="view" onClick="request_permission(this);">Video is Private, Send View Request</a>    
                    @else
                        {{ $error }}
                    @endif
                    @endif
                    </div>

                    @if(!$error)
                    <!-- Comments overlay (on top of the video) -->
                    <div class="comments-overlay" id="commentsList">
                        <div id="comment_list_{{ $channel->channel_id }}">
                            @foreach($comments_normal as $comment)
                                <p><i>{{ \Carbon\Carbon::parse($comment->comment_time)->format('H:i') }}</i> <b>{{ $comment->username }}:</b> {{ $comment->comment_text }}</p>
                            @endforeach
                        </div>
                    </div>

                    <!-- Subscriber videos (vertically aligned at the bottom-right corner) -->
                    <div class="subscribers-container" id="sub-videos">
                    </div>

                    <!-- Comment input area (full width on top of the video) -->
                    <form id="comment-form" action="javascript:;" method="post">
                        <input type="hidden" id="comment_form_action" value="{{ route('broadcast.comment') }}" >
                        @csrf
                        <div class="comment-input">
                            <input type="text" name="comment_text" id="commentInput" placeholder="Write your comment..." autocomplete="off" />
                            <input type="hidden" name="channel_id" value="{{ $channel->channel_id }}" />
                            <button type="submit" id="postCommentBtn" class="btn btn-primary">Post</button>
                        </div>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
    
    <input id="details" type="hidden" 
        data-streaming_user_id="{{ $streamingUserId }}"
        data-channel_id="{{ $channel->channel_id }}"
        data-uid="{{ $channel->id }}"
        data-channel_name="{{ $channel->channel_name }}",
        data-channel_token="{{ $channel->channel_token }}",
        data-pusher_key="{{ $pusher_key }}"
        data-pusher_cluster="{{ $pusher_cluster }}"
        data-agora_app_id="{{$agora_app_id}}"
    />
    @endsection


    
@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>
    <script src="{{ asset('assets/js/AgoraRTC_N-4.22.2.js') }}"></script>
    <script src="{{ asset('assets/js/pusher_for_broadcasting.js') }}"></script>

<script>

$(document).ready(function () {
    // Get CSRF token from meta tag
    var csrfToken = $('meta[name="csrf_token"]').attr('content');
    
    // Set the CSRF token in the global AJAX setup
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrfToken
        }
    });
});

function request_permission(d)
{
    let channel_id = $("#details").data("channel_id");
    var permission = $(d).attr('request_type');
    var url = $(d).attr('url');
	if(confirm('Are you sure to send '+ permission +' request') == false) return false;
    $.ajax({
        url: url, 
        type: 'POST',
        dataType: "json",
        data: 'channel_id=' + channel_id + '&permission='+permission, 
        success: function(response) {
            if(response.status == 'send')
            {
                $('#text-overlay').html('View Request Sent');
            }
            else if(response.status == 'join_send')
            {
                $('#joinbtn').hide();
            }
            else
            {
                alert('error occur!' + response);
            }
        },
        error: function(xhr, status, error) {
            alert('Sorry! Error Occur!');
        }
    });
}
@if (!$error)

var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

var localTracks = {
  videoTrack: null,
  audioTrack: null
};

var remoteUsers = {};
var options = {
  appid: $("#details").data("agora_app_id"),
  channel: $("#details").data("channel_name"),
  uid: $("#details").data("uid"),
  token: $("#details").data("channel_token"),
};

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

function handleUserUnpublished(user) 
{
	const id = user.uid;
	  var parent_id = $(`#player-${id}`).parent('div').attr('id');
	  if (parent_id === 'main-video-div') {
		const firstSubVideo = $("#sub-videos video").first();
	
		if (firstSubVideo.length)
		{
		  firstSubVideo.trigger("click");
		}
	  }
	  delete remoteUsers[id];
	  $(`#player-${id}`).remove();
}

@if ($page_type == "host_page")
///////////////////////////////////////////////////////////////////////////
$(document).ready(async function() {
  try {
    await join();
  } catch (error) {
    console.error("Error joining the channel:", error);
  }
});


$("#join").click(async function (e) {

  await join();
})


$("#leave").click(function (e) {
  leave();
})

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

  [options.uid, localTracks.audioTrack, localTracks.videoTrack] = await Promise.all([
    client.join(options.appid, options.channel, options.token || null),
    AgoraRTC.createMicrophoneAudioTrack(),
    AgoraRTC.createCameraVideoTrack()
  ]);

  // Play local video track
  localTracks.videoTrack.play("main-video");
  const mainVideo = document.getElementById("main-video");

  // Wrap MediaStreamTrack in a MediaStream
  mainVideo.srcObject = new MediaStream([localTracks.videoTrack.getMediaStreamTrack()]);

  // Publish local tracks
  await client.publish(Object.values(localTracks));
  video_message('start');
  
  console.log("publish success");
}

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

  // leave the channel
  await client.leave();
  
  if(msg != 'already')
  {
  		video_message('pause');
  }

  /*$("#local-player-name").text("");
  $("#join").attr("disabled", false);
  $("#leave").attr("disabled", true);
  console.log("client leaves channel success");*/
}

async function subscribe(user, mediaType) {
  const uid = user.uid;

  await client.subscribe(user, mediaType);
  console.log("subscribe success");

  if (mediaType === 'video') {
    const player = $(`
      <video width="140" id="player-${uid}" height="180" autoplay muted>
      </video>
    `);
    $("#sub-videos").append(player);

    // Play video track and set srcObject
    user.videoTrack.play(player[0]);
    player[0].srcObject = new MediaStream([user.videoTrack.getMediaStreamTrack()]);
  }

  if (mediaType === 'audio') {
    user.audioTrack.play();
  }
}
////////////////////////////////////////////////////////////////////////////////
@else
///////////////////////////////////////////////////////////////////////////////

$(document).ready(function() {
	joinChannel().catch(error => {
		console.error("Error joining the channel:", error);
	});
});

async function joinChannel()
{
	await client.join(options.appid, options.channel, options.token || null);
    client.on("user-published", handleUserPublished);
    client.on("user-unpublished", handleUserUnpublished);
}

let mainVideoUid = null;
async function subscribe(user, mediaType) {
  const uid = user.uid;

  await client.subscribe(user, mediaType);
  console.log("subscribe success");

  if (mediaType === 'video') {
	  
	  if (mainVideoUid === null)
	  {
		  mainVideoUid = uid;
		  user.videoTrack.play("main-video");
	  }
	  else
	  {
		  const player = $(`
			  				<video width="140" id="player-${uid}" height="180" autoplay muted>
			  				</video>
						`);
		  $("#sub-videos").append(player);
		  user.videoTrack.play(player[0]);
    	  player[0].srcObject = new MediaStream([user.videoTrack.getMediaStreamTrack()]);
	  }
  }

  if (mediaType === 'audio') {
    user.audioTrack.play();
  }
}

///////////////////////////////////////////////////////////////////////////////
@endif
@endif

$(document).on("click", "#sub-videos video", function () 
{
  // Get the main video element
  const mainVideo = $("#main-video-div video")[0];

  // Get the clicked sub-video element
  const clickedSubVideo = $(this)[0];

  // Temporarily store the main video track and ID
  const mainVideoTrack = mainVideo.srcObject;
  const mainVideoId = mainVideo.id;

  // Swap video streams
  mainVideo.srcObject = clickedSubVideo.srcObject;
  clickedSubVideo.srcObject = mainVideoTrack;

  // Swap IDs
  mainVideo.id = clickedSubVideo.id;
  clickedSubVideo.id = mainVideoId;

  // Optional: Play the videos if they are not auto-playing
  mainVideo.play();
  clickedSubVideo.play();
});

</script>

<script>
$(document).ready(function() {
    $('#comment-form').on('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        post_comment(this); // Call the post_comment function
    });
});

function post_comment(form) {
    var formData = $(form).serialize();
    var url = $("#comment_form_action").val();
	$(form).trigger("reset");
	$('#commentInput').focus();

    $.ajax({
        url: url, 
        type: 'POST', 
        data: formData, 
        success: function(response) {
            //console.log("Comment posted successfully:", response);
        },
        error: function(xhr, status, error) {
            //console.error("Error posting comment:", error);
        }
    });
}

function permission_action(elem,comment_id,user_id,type)
{
    let channel_id = $("#details").data("channel_id");
    let url = $(elem).attr("data-url");
	if(confirm('Are you sure to '+ type +' request') == false) return false;
    $.ajax({
        url: url, 
        type: 'POST', 
        data: 'channel_id='+ channel_id +'&comment_id='+comment_id+'&user_id='+user_id+'&permissionaccept='+type, 
        success: function(response) {
            if(response.status == 'allow')
            {
                var new_link = '<a href="javascript:;" data-url="' + url + '" onClick="permission_action(this,\'' + comment_id + '\', \'' + user_id + '\', \'remove\')">Remove</a>';
                $(elem).closest('.comments-sp').find('a').replaceWith(new_link);
            }
            else if(response.status == 'remove')
            {
                $(elem).closest('.comments-sp').replaceWith('');
            }
            else
            {
                alert(response);
            }
        },
        error: function(xhr, status, error) {
            alert('Sorry! Error Occur!');
        }
    });
}

function end_broadcasting(d)
{
    let channel_id = $("#details").data("channel_id");
    let url = $(d).data("url");

	if(confirm('Are you sure to end broadcast') == false) return false;
    $.ajax({
        url: url, 
        type: 'POST', 
        data: 'channel_id='+ channel_id +'&broadcast_myself=stop', 
        success: function(response) {
            if(response == 'stopped')
            {
            }
        },
        error: function(xhr, status, error) {
            alert('Sorry! Error Occur!');
        }
    });
}

function video_message(type) {
    if (type === 'pause') {
    	$("#text-overlay").html('paused');
        $("#text-overlay").addClass("show");
        $(".comments-overlay, #comment-form, #leave").hide();
        $("#join").show();
    } else if (type === 'end_broadcasting') {
		leave('already');
    	$("#text-overlay").html('end_broadcasting');
        $("#text-overlay").addClass("show");
        $(".comments-overlay, #comment-form, #leave, #join").hide();
    } else if (type === 'start') {
        $("#text-overlay").removeClass("show");
        $(".comments-overlay, #comment-form, #leave").show();
        $("#join").hide();
    } else {
        console.warn("Invalid type passed to video_message:", type);
    }
}
</script>


@endsection