<?php
session_start();

require("connect.php");	

$username = $_SESSION['username'];
 $rolemaster_id = $_SESSION['rolemaster_id'];

 $profile_name=$_SESSION['user_name'];
 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/rythm/mystyle.css">
	<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
	 <!-- Font Awesome -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> -->

<title>rythm woods</title>
</head>
<body>
    <style>
 .header {
            background-color:#ff80b3; /* Dark background for header */
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            width: 100%;
            position: fixed; /* Fixed position */
            top: 0; /* Position at the top of the page */
            z-index: 1000; /* Ensure header stays above other content */
        }

        /* Add padding-top to body so content is not hidden behind the header */
        body {
            padding-top: 60px; /* Adjust to header height */
        }

        /* Search Bar Styling */
        .search-bar {
            /* background-color: white; */
    border: 1px solid #555;
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    margin-left: 26px;
    width: 701px;
    color: white;
}

        .search-bar input {
            background: none;
            border: none;
            outline: none;
            color: white;
            padding: 5px;
        }

        .search-bar input::placeholder {
            color: gray;
        }

        /* Search Icon Styling */
        .search-bar .search-icon {
            color: #d63384; /* Dark pink color for search icon */
            margin-right: 5px;
        }

        /* User Section Styling */
        .user-section {
            /* display: flex;
            align-items: center;
            gap: 15px; */
            margin-right: 63px;

        }

        .user-section .username {
           
            font-weight: 600;
    color: black;
    font-family: cursive;
    font-size: 22px;
        }

        .user-section .logout-btn {
            background-color: #d63384; /* Dark pink color for logout button */
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .user-section .logout-btn:hover {
            background-color: #c2185b; /* Darker pink on hover */
        }

        /* Center Content */
        .center-content {
            padding: 20px;
        }
    
    </style>
    <div class="header">
    <!-- Search Bar -->
    <div class="label">
       <label for="" style="font-weight: 600;
    color: black;
    font-family: cursive;
    font-size: 22px;">Welcome!</label>
    </div>
    <div class="search-bar">
    <span class="search-icon">🔍</span>
    <input type="text" placeholder="Search..." onkeyup="updateCenterContent(this.value)" id="searchInput">
</div>

    <!-- User Section -->
    <div class="user-section">
        <span class="username" ><?php echo $profile_name; ?></span>&nbsp;&nbsp;
        <button class="logout-btn" onclick="logout();">Logout</button>
    </div>
</div>
    <div class="container">
        <div class="sidebar" style="overflow-y: auto;max-height: 100vh;" id="sidebariddd">
      <?php include("rythmsidebar.php"); ?>

</div>

		
	<!------------------------------ center content start portions ------------------------------------------->
	


<div class="center-contents" id="centerconteid">
    <?php include("centercontent.php"); ?>
    
  
</div>



   <!-- <div style="width:2vh;height:2vh;margin-left:6vh;margin-top:10vh;" id="rightcontent">
    		<?php include("rythmrightsidecontent.php"); ?>
	 </div> -->
           
     <!------------------------------ center content end portions ------------------------------------------->
	



<div class="secondary-sidebar" id="secondarySidebar">
    <a href="#" class="closebtn" onclick="closeSidebar()"><img src="/rythm/assets/whitcloseicon.png" style="height:25px;width:25px;"></a><br>
    <div style="display:flex;justify-content;space-between;gap:20px;">
	<input type="search" id="form1" class="form-control"  onkeyup="usernameget(this.value);"/>
	<img src="/rythm/assets/whitesearch.png" style="height:40px;width:40px;" id="sreachbarid" onclick="usernamegetsearchicon();">

	</div>
	<div class="usernamedisplay" id="sreachenamedisplay">
	
	
	</div>
</div>


<div class="third-sidebar" id="thirdsidebarddd">
    <a href="#" class="thirdclsebtn" onclick="thirdclssidebr();"><img src="/rythm/assets/blkcolorcross.png" style="height:25px;width:25px;"></a><br>
    <h2 style="margin-left:15px;color:black;">Notifications</h2><br>
	<div class="nofiticationallaredisplay" id="nofiticationallaredisplay">
	<label style="margin-left:15px;color:black;">New</label>
	<hr style="color:black;">
	<?php
	$getsql=$con->query("SELECT * FROM `posters` where username_id='$rolemaster_id' and likestatus!=0");
	while($notifi = $getsql->fetch(PDO::FETCH_ASSOC))
	{
	  $getuseridd=$notifi['liker_id'];
	  $posttype=$notifi['post_type'];
	  if($posttype=="video"){
	 
	  
	  $getwholikes=$con->query("SELECT * FROM `user_master` WHERE users_id='$getuseridd'");
	   $whokiesss = $getwholikes->fetch(PDO::FETCH_ASSOC);
	   if ($whokiesss) {
	   $now = time();
        $datediff = $now - strtotime($notifi['likesdate']);
        $numofdays = round($datediff / (60 * 60 * 24));

        if ($numofdays == 0) {
            $likesdateee = 'Today';
        } else {
            $likesdateee = $numofdays . 'd';
        }
	   
	?>
	<div style="display: flex; justify-content: space-around; gap: -27px; align-items: center;">
    <div class="user-profile" style="margin-left: -45px;">
        <img src="/rythm/assets/lion.png" alt="User Profile" class="profile-pic">
        <div>
            <span class="username" style="color: black; font-weight: 600;"><?php echo ucfirst($whokiesss['user_name']); ?></span>
            <br><br>
            <span style="font-weight: 400; color: black; font-size: 15px;">Like's your video... <?php echo $likesdateee; ?></span>
        </div>
    </div>
    <div style="background-color: black;">
        <video width="30vh" height="30vh" controls style="height: 93px; width: 108px;">
            <source src="<?php echo $notifi['postvideos']; ?>" type="video/mp4">
        </video>
    </div>
</div><br><br>

	<?php
	}
	}
	else if($posttype=="image")
	{
		
		 $getwholikes=$con->query("SELECT * FROM `user_master` WHERE users_id='$getuseridd'");
	   $whokiesss = $getwholikes->fetch(PDO::FETCH_ASSOC);
	   if ($whokiesss) 
	   {
		$now = time();
        $datediff = $now - strtotime($notifi['likesdate']);
        $numofdays = round($datediff / (60 * 60 * 24));

        if ($numofdays == 0) {
            $likesdateee = 'Today';
        } else {
            $likesdateee = $numofdays . 'd';
        }
		?>
		<div style="display: flex; justify-content: space-around; gap: -27px; align-items: center;">
		<div class="user-profile" style="margin-left:-45px;">
					 
						<img src="/rythm/assets/lion.png" alt="User Profile" class="profile-pic">
						<span class="username" style="color:black;font-weight:600;margin-top:1px;"><?php echo ucfirst($whokiesss['user_name']); ?><br><br><span style="font-weight:400;color:black;font-size:15px;">Like's your post...</span><?php echo $likesdateee; ?></span>
	   </div>
	   <img src="<?php echo $notifi['postimg'];?>" alt="postimgvidoes" style="height:80px;width:110px;">
		 </div><br><br>
		<?php
	}
	}
		
}
	
	?>
	</div>
</div>

</div>
 
          







</body>
</html>




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    
    function updateCenterContent(val) {
    if (val.trim() !== "") { // Ensure input is not empty
        $.ajax({
            url: 'search_results.php', // URL of your server-side script
            type: 'POST',
            data: { searchTerm: val }, // Pass the user input as "searchTerm"
            success: function(response) {
                // Update the centerconteid div with the response
                $("#centerconteid").html(response);
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error); // Handle AJAX errors
            }
        });
    } else {
        // Load the default content from centercontent.php if the input is empty
        $.ajax({
            url: 'centercocenter_content_two.php', // URL of your default content
            type: 'GET',
            success: function(response) {
                $("#centerconteid").html(response);
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error); // Handle AJAX errors
            }
        });
    }
}



function logout()
{
    window.location.href='/rythm/login/login.php';
}
function usernamegetsearchicon()
{
	var inputid=$("#form1").val();
	if(inputid!='')
	{
	//debugger;
	$.ajax({
        url: 'getameinsreach.php', // Replace with your server-side script URL
        type: 'POST',
        data: { namekey: inputid }, // Pass useriddd to the server
        success: function(getidnameinsearch) {
    console.warn(getidnameinsearch);
    if (getidnameinsearch != '') {
       
        $("#sreachenamedisplay").html(getidnameinsearch);
    }
},

        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
	}
	else
	{
		$("#sreachenamedisplay").hide();
	}
	
}

function usernameget(val)
{
	
	if(val!='')
	{
	//debugger;
	$.ajax({
        url: 'getameinsreach.php', // Replace with your server-side script URL
        type: 'POST',
        data: { namekey: val }, // Pass useriddd to the server
        success: function(getidnameinsearch) {
    console.warn(getidnameinsearch);
    if (getidnameinsearch != '') {
       
        $("#sreachenamedisplay").html(getidnameinsearch);
    }
},

        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
	}
}


function followeingload(dyidgett, useriddd) {
	//debugger;
    var $btn = $("#sugessfollobtn_" + dyidgett);
      
    // Check if the button is already in the "Following" state
    if ($btn.text().trim() === 'Following') {
        showPopupCard(dyidgett, useriddd);
        return; // Exit the function to prevent further execution
    }

    // Change the button text to "Loading..."
    $btn.html('<img src="/rythm/assets/loadinggif.gif" alt="Loading..." style="height:50px;width:50px;">'); 

    // Disable the button to prevent multiple clicks
    $btn.prop('disabled', true);
var timeoutId = setTimeout(function() {
    $.ajax({
        type: 'POST',
        url: 'followingsts.php',
        data: {
            followingsts: 1,
            user_id: useriddd
        },
        success: function(gotresponse) {
            if (gotresponse == 1) {
                $btn.text('Following').css('color', 'gray');
                // Bind the click event to show the pop-up card
                $btn.one('click', function() {
                    showPopupCard(dyidgett, useriddd);
                });
            } else {
                $btn.text('Follow').css('color', 'blue');
            }
        },
        error: function(xhr, status, error) {
            console.error(xhr, status, error);
            $btn.text('Follow'); // Revert back to original text on error
        },
        complete: function() {
            // Re-enable the button after the AJAX request completes
            $btn.prop('disabled', false);
        }
    });
	}, 2000); 
}





function showPopupCard(dyidgett, useriddd) {
	debugger;
	
	var dyiiidesett=$("#dyiiidesett").val(dyidgett);
	var useridsetinto=$("#useridsetinto").val(useriddd);
	
	
    // Create a div element for the pop-up card
    var popupHtml = '<div id="afterfollowingpopcard" class="afterfollowpop" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; overflow: auto;">' +
        '<div id="afterfollowingpopcard-content" class="afterfollowpop-content" style="position: fixed; top:30%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 0px solid #ccc; border-radius: 17px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);height:35vh;width:65vh;">' +
        '<img src="/rythm/assets/rsz_logo2.png" style="height:50px;width:50px;border-radius:50%;margin:0 auto;"><br><br>' +
		'<label id="usernamedisply" style="font-size:18px;"></label><br><br>'+
		'<hr><br>'+
		'<label onclick="unfollowfunc(' + dyidgett + ',' + useriddd + ')" style="color:red;font-size:18px;">Unfollow</label><br><br>'+
		'<hr><br>'+
        '<label onclick="closePopupfollowing()" style="color:black;font-size:18px;">cancle</label><br><br>' +
		'</div>' +
        '</div>';

    // Append the HTML content to the body
    $('body').append(popupHtml);

    // Show the popup card
    $('#afterfollowingpopcard').show();
	
	 $.ajax({
        url: 'fetche_following_name.php', // Replace with your server-side script URL
        type: 'POST',
        data: { userid: useriddd }, // Pass useriddd to the server
        success: function(getusername) {
			//console.warn(getusername);
			var labelName = "Unfollow @ " + getusername;
        $("#usernamedisply").text(labelName);
            // Handle the response from the server
            // You can update the content of the pop-up card here
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
	
	
	
	
	
	
	
	
}

function closePopupfollowing() {
    // Remove the pop-up card from the DOM
    $('#afterfollowingpopcard').hide();
}



function unfollowfunc(dyidgett,useriddd)
{
	//debugger;
	 $('#afterfollowingpopcard').hide();
	 var getdyiiidesett=$("#dyiiidesett").val();
	 var $btn = $("#sugessfollobtn_" + getdyiiidesett);
	 var useridsetinto=$("#useridsetinto").val();
	 

   // Change the button text to "Loading..."
    $btn.html('<img src="/rythm/assets/loadinggif.gif" alt="Loading..." style="height:50px;width:50px;">'); 

 var timeoutId = setTimeout(function() {
	 
		 $.ajax({
			url: 'unfollowdet.php', // Replace with your server-side script URL
			type: 'POST',
			data: { userid: useridsetinto }, // Pass useriddd to the server
			success: function(unflowwww) {
					if (unflowwww ==1) {
						console.warn(unflowwww);
					$btn.text('Follow').css('color', 'blue');
					// Bind the click event to show the pop-up card
					
                  } 
				else {
					$btn.text('Following').css('color', 'gray');
				   }
			},
			error: function(xhr, status, error) {
				// Handle errors
				console.error(xhr, status, error);
			}
		});

      }, 2000); 
}
</script>


















<!-- Add this inside the <body> tag, after the popup structure -->
<script>
    function showPopup(useridgettttt,flowdyif) {
		//debugger;
		//var flloworunfoolow=$("#flloworunfoolow_"+flowdyif).val();
		
		$.ajax({
			url: 'getfollowsts.php', // Replace with your server-side script URL
			type: 'POST',
			data: { userid: useridgettttt }, // Pass useriddd to the server
			success: function(followsts) {
					if (followsts !=1) {
						//alert(followsts);
						
						console.warn(followsts);
					var flloworunfoolow=$("#flloworunfoolow_" +flowdyif).val('Follow');
					// Bind the click event to show the pop-up card
					
                  } 
				else {
					var flloworunfoolow=$("#flloworunfoolow_" +flowdyif).val('UnFollow');
				   }
			},
			error: function(xhr, status, error) {
				// Handle errors
				console.error(xhr, status, error);
			}
		});
		
        var popup = document.getElementById('threedotpopup'+flowdyif);
        popup.style.display = 'flex';
    }

    function closePopup(flowdyif) {
		//debugger;
        var popup = document.getElementById('threedotpopup'+flowdyif);
        popup.style.display = 'none';
    }
	 
</script>


<!----------------------open suggestion click follow btn loading function----------------------------------------->


<script>


function openfollofunct(dynamiidddd, useriddd) {
	debugger;
	
	
	
	

    var $btn = $("#opensuggesfollobtn" + dynamiidddd);
    
    $btn.css("background-color", "deeppink");

    // Check if the button is already in the "Following" state
    if ($btn.text().trim() === 'Following') {
        opensugpocard(dynamiidddd,useriddd);
        return; 
    }

    
    $btn.html('<a href="#" style="text-decoration:none;color:black;"><i class="fa fa-spinner fa-spin"></i></a>'); 

    // Disable the button to prevent multiple clicks
    $btn.prop('disabled', true);
	
var timeoutId = setTimeout(function() {
    $.ajax({
        type: 'POST',
        url: 'followingsts.php',
        data: {
            followingsts: 1,
            user_id: useriddd
        },
        success: function(gotresponse) {
            if (gotresponse == 1) {
                $btn.text('Following').css('color', 'black');
                $btn.css("background-color", "lightgray");
				
				$btn.hover(
					function() { // Hover in
						$(this).css("background-color", "gray"); // Change background color to gray on hover in
					},
					function() { // Hover out
						$(this).css("background-color", "lightgray"); // Change background color back to lightgray on hover out
					}
				);
				
				
                $btn.one('click', function() {
					//alert('dfghjk');
                    opensugpocard(dynamiidddd,useriddd);
                });
            } else {
                $btn.text('Follow').css('color', 'black');
            }
        },
        error: function(xhr, status, error) {
            console.error(xhr, status, error);
            $btn.text('Follow'); // Revert back to original text on error
        },
        complete: function() {
            // Re-enable the button after the AJAX request completes
            $btn.prop('disabled', false);
        }
    });
	}, 2000); 
}




function opensugpocard(getdyiddd, useriddd) {
	//debugger;
	
	//alert(getdyiddd+"^^"+useriddd);
	var opensugdyidset=$("#opensugdyidset").val(getdyiddd);
	var opensuguseridset=$("#opensuguseridset").val(useriddd);
	
	
    // Create a div element for the pop-up card
    var popupHtml = '<div id="opensugfloww" class="opensugfloww" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; overflow: auto;">' +
        '<div id="opensugfloww-content" class="opensugfloww-content" style="position: fixed; top:30%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 0px solid #ccc; border-radius: 17px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);height:35vh;width:65vh;">' +
        '<img src="/rythm/assets/rsz_logo2.png" style="height:50px;width:50px;border-radius:50%;display:flex;margin:0 auto;"><br><br>' +
		'<label id="getusernameiny" style="font-size:18px;margin-left:160px;"></label><br><br>'+
		'<hr><br>'+
		'<label onclick="opensugunfloow(' + getdyiddd + ',' + useriddd + ')" style="color:red;font-size:18px;margin-left:200px;">Unfollow</label><br><br>'+
		'<hr><br>'+
        '<label onclick="opensugfloowclose()" style="color:black;font-size:18px;margin-left:210px;">Cancle</label><br><br>' +
		'</div>' +
        '</div>';

    // Append the HTML content to the body
    $('body').append(popupHtml);

    // Show the popup card
    $('#opensugfloww').show();
	
	 $.ajax({
        url: 'fetche_following_name.php', // Replace with your server-side script URL
        type: 'POST',
        data: { userid: useriddd }, // Pass useriddd to the server
        success: function(getusername) {
			console.warn(getusername);
			var labelName = "Unfollow @ " + getusername;
        $("#getusernameiny").text(labelName);
            // Handle the response from the server
            // You can update the content of the pop-up card here
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
	
	
	
	
	
	
	
	
}

function opensugfloowclose() {
    // Remove the pop-up card from the DOM
    $('#opensugfloww').hide();
}






function opensugunfloow(getdyiddd,useriddd)
{
	//debugger;
	 $('#opensugfloww').hide();
	 
	 var opensugdyidset=$("#opensugdyidset").val();
	var opensuguseridset=$("#opensuguseridset").val();
	
	 var $btn = $("#opensuggesfollobtn" + opensugdyidset);
	 
	 
//     $btn.css("background-color", "gray");
   // Change the button text to "Loading..."
    $btn.html('<a href="#" style="text-decoration:none;color:black;"><i class="fa fa-spinner fa-spin"></i></a>'); 

 var timeoutId = setTimeout(function() {
	 
		 $.ajax({
			url: 'unfollowdet.php', // Replace with your server-side script URL
			type: 'POST',
			data: { userid: opensuguseridset }, // Pass useriddd to the server
			success: function(openunfolow) {
					if (openunfolow ==1 ) {
						//console.warn(openunfolow);
							$btn.text('Follow').css('color', 'black');
						$btn.css("background-color", "pink");
						
						$btn.hover(
							function() { // Hover in
								$(this).css("background-color", "deeppink"); // Change background color to gray on hover in
							},
							function() { // Hover out
								$(this).css("background-color", "pink"); // Change background color back to lightgray on hover out
							}
						);
						//window.location.href='/rythm/homee.php';
				      //$('#seeallpopup').hide();
                  } 
				else {
					$btn.text('Following').css('color', 'gray');
				   }
			},
			error: function(xhr, status, error) {
				// Handle errors
				console.error(xhr, status, error);
			}
		});

      }, 1000); 
}






</script>



<!----------------------open suggestion click follow btn loading functionend ------------------------------------->

















<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- ... (your existing HTML code) ... -->


	
	



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
  <script>
   $(document).ready(function() {
      $(".emoji_act").emojioneArea({
        emojiPlaceholder: ":smile_cat:",
        searchPlaceholder: "Search",
        buttonTitle: "Use your TAB key to insert emoji faster",
        searchPosition: "bottom",
        pickerPosition: "bottom"
      });
    });
	
	
	function homesidebar()
	{
		window.location.href='/rythm/homee.php';
	}
	
	
    function notificationtogle(search, home, explore, reels, messanger, heart, add,profile,music_director,language,music,addevent,eventlist,Request_Profile_Verification,Payment_Track)
{
	//debugger;
	 var searchText = document.getElementById(search + 'Text');
    var homeText = document.getElementById(home + 'Text');
    var exploreText = document.getElementById(explore + 'Text');
    var reelsText = document.getElementById(reels + 'Text');
    var messengerText = document.getElementById(messanger + 'Text');
    var heartText = document.getElementById(heart + 'Text');
    var addText = document.getElementById(add + 'Text');
    var profileText = document.getElementById(profile + 'Text');
	var language=document.getElementById(language +'Text');
	var music_director=document.getElementById(music_director +'Text');
   	var music=document.getElementById(music +'Text');
	var addevent=document.getElementById(addevent +'Text');
	var eventlist=document.getElementById(eventlist +'Text');
	var Request_Profile_Verification=document.getElementById(Request_Profile_Verification +'Text');
	var Payment_Track=document.getElementById(Payment_Track +'Text');
	
	
	
	
	
	
	
	
    // Toggle visibility of search text element
    if (searchText.style.display === 'none') {
		thirdclssidebr();
        // Show the search text element
        searchText.style.display = 'inline';
        // Hide other text elements
        homeText.style.display = 'inline';
        exploreText.style.display = 'inline';
        reelsText.style.display = 'inline';
        messengerText.style.display = 'inline';
        heartText.style.display = 'inline';
        addText.style.display = 'inline';
        profileText.style.display = 'inline';
		language.style.display='inline';
		music_director.style.display='inline';
		music.style.display='inline';
		addevent.style.display='inline';
		eventlist.style.display='inline';
		Request_Profile_Verification.style.display='inline';
		Payment_Track.style.display='inline';
		
		
		
        // Reduce the sidebar width
        var sidebar = document.getElementById('sidebariddd');
        sidebar.style.width = '250px'; // Adjust the width as needed
    } else {
        // Hide the search text element
        searchText.style.display = 'none';
        // Show all other text elements
        homeText.style.display = 'none';
        exploreText.style.display = 'none';
        reelsText.style.display = 'none';
        messengerText.style.display = 'none';
        heartText.style.display = 'none';
        addText.style.display = 'none';
        profileText.style.display = 'none';
		language.style.display='none';
		music_director.style.display='none';
		music.style.display='none';
		addevent.style.display='none';
		eventlist.style.display='none';
		Request_Profile_Verification.style.display='none';
		Payment_Track.style.display='none';
		
		
        // Reset the sidebar width
        var sidebar = document.getElementById('sidebariddd');
        sidebar.style.width = '100px'; // Adjust the width as needed
		thirdddddopenSidebar();
		
		
    }
}

function thirdddddopenSidebar() {
	//debugger;
    document.getElementById("thirdsidebarddd").style.left = "80px";
    document.getElementById("thirdsidebarddd").style.width = "510px";
	
}

function thirdclssidebr() {
    document.getElementById("thirdsidebarddd").style.left = "-250px";
	document.getElementById("thirdsidebarddd").style.width = "0px";
	
	
       
		
}

	
	function toggleText(search, home, explore, reels, messanger, heart, add, profile,music_director,language,music,addevent,eventlist,Request_Profile_Verification,Payment_Track) {
		//debugger;
    // Get references to all text elements
    var searchText = document.getElementById(search + 'Text');
    var homeText = document.getElementById(home + 'Text');
    var exploreText = document.getElementById(explore + 'Text');
    var reelsText = document.getElementById(reels + 'Text');
    var messengerText = document.getElementById(messanger + 'Text');
    var heartText = document.getElementById(heart + 'Text');
    var addText = document.getElementById(add + 'Text');
    var profileText = document.getElementById(profile + 'Text');
	
	var language=document.getElementById(language +'Text');
	var music_director=document.getElementById(music_director +'Text');
   	var music=document.getElementById(music +'Text');
	var addevent=document.getElementById(addevent +'Text');
	var eventlist=document.getElementById(eventlist +'Text');
	var Request_Profile_Verification=document.getElementById(Request_Profile_Verification +'Text');
	var Payment_Track=document.getElementById(Payment_Track +'Text');
   
    // Toggle visibility of search text element
    if (searchText.style.display === 'none') {
		closeSidebar();
        // Show the search text element
        searchText.style.display = 'inline';
        // Hide other text elements
        homeText.style.display = 'inline';
        exploreText.style.display = 'inline';
        reelsText.style.display = 'inline';
        messengerText.style.display = 'inline';
        heartText.style.display = 'inline';
        addText.style.display = 'inline';
        profileText.style.display = 'inline';
		language.style.display='inline';
		music_director.style.display='inline';
		music.style.display='inline';
		addevent.style.display='inline';
		eventlist.style.display='inline';
		Request_Profile_Verification.style.display='inline';
		Payment_Track.style.display='inline';
        // Reduce the sidebar width
        var sidebar = document.getElementById('sidebariddd');
        sidebar.style.width = '250px'; // Adjust the width as needed
    } else {
        // Hide the search text element
        searchText.style.display = 'none';
        // Show all other text elements
        homeText.style.display = 'none';
        exploreText.style.display = 'none';
        reelsText.style.display = 'none';
        messengerText.style.display = 'none';
        heartText.style.display = 'none';
        addText.style.display = 'none';
        profileText.style.display = 'none';
		language.style.display='none';
		music_director.style.display='none';
		music.style.display='none';
		addevent.style.display='none';
		eventlist.style.display='none';
		Request_Profile_Verification.style.display='none';
		Payment_Track.style.display='none';
        // Reset the sidebar width
        var sidebar = document.getElementById('sidebariddd');
        sidebar.style.width = '100px'; // Adjust the width as needed
		openSidebar();
		
		
    }
}


function openSidebar() {
	//debugger;
    document.getElementById("secondarySidebar").style.left = "80px";
    document.getElementById("secondarySidebar").style.width = "450px";
	document.getElementById("form1").style.marginLeft = "25px";
	/* Adjust the left position to overlap the 
	main content */
}

function closeSidebar() {
    document.getElementById("secondarySidebar").style.left = "-250px";
	document.getElementById("secondarySidebar").style.width = "0px";
	document.getElementById("form1").style.marginLeft = "0px";
	
       
		
}

function explodee() {
   // debugger;
	//var centerconteid=$("#centerconteid").hide();
	var rightcontent=$("#rightcontent").hide();
	
    $.ajax({
        url: 'exploder.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(explodreer) {
            console.warn(explodreer);
			$('#centerconteid').html(explodreer);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
}




function reeelss() {
   // debugger;
	//var centerconteid=$("#centerconteid").hide();
	var rightcontent=$("#rightcontent").hide();
	
    $.ajax({
        url: 'reels.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(explodreer) {
            console.warn(explodreer);
			$('#centerconteid').html(explodreer);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
}


function showprofile()
{
	//debugger;
    var rightcontent=$("#rightcontent").hide();
	var centerconteid=$("#centerconteid").show();
  $.ajax({
            type: "POST",
            url: "profiledetails.php",
            success: function (data) {
               
               
                $("#centerconteid").html(data);
                //centerconteid.style.marginLeft="500px";
            }
        })

}
function showaccoun(id)
{
    var rightcontent=$("#rightcontent").hide();
	var centerconteid=$("#centerconteid").show();
  $.ajax({
            type: "POST",
            url: "account_details.php?id="+id,
            success: function (data) {
               
               
                $("#centerconteid").html(data);
                //centerconteid.style.marginLeft="500px";
            }
        })
}
function showdirectors()
{
    var rightcontent=$("#rightcontent").hide();
    var centerconteid=$("#centerconteid").val();

  $.ajax({
            type: "POST",
            url: "/rythm/professional_singer/music_directors/showdirectors.php",
            success: function (data) {
            $("#centerconteid").css("marginLeft", "450px");
                $("#centerconteid").html(data);
                //centerconteid.style.marginLeft="500px";
            }
        })
}
function createpost() {
   // debugger;
	//var centerconteid=$("#centerconteid").hide();
	var rightcontent=$("#rightcontent").hide();
	
    $.ajax({
        url: 'postercreation.php', // Replace with your server-side script URL
        type: 'POST',
        // Pass useriddd to the server
        success: function(explodreer) {
            console.warn(explodreer);
			$('#centerconteid').html(explodreer);
        },
        error: function(xhr, status, error) {
            // Handle errors
            console.error(xhr, status, error);
        }
    });
}

function showmusic()
{
    var rightcontent=$("#rightcontent").hide();
	
  $.ajax({
            type: "POST",
            url: "/rythm/professional_singer/music/music_view.php",
            success: function (data) {
                $("#centerconteid").css("marginLeft", "450px");
                $("#centerconteid").html(data);
            }
        })
}

function showlanguage()
{
    var rightcontent=$("#rightcontent").hide();
	
    $.ajax({
            type: "POST",
            url: "/rythm/professional_singer/language/language_shows.php",
            success: function (data) {
                $("#centerconteid").css("marginLeft", "450px");
                $("#centerconteid").html(data);
            }
        })
}
function showevent()
{
    var rightcontent=$("#rightcontent").hide();
	
    $.ajax({
            type: "POST",
            url: "/rythm/professional_singer/addevent.php",
            success: function (data) {
                $("#centerconteid").css("marginLeft", "450px");
                $("#centerconteid").html(data);
            }
        })
}

function showeventlist()
{
    var rightcontent=$("#rightcontent").hide();
	
    $.ajax({
            type: "POST",
            url: "/rythm/professional_singer/calendar/calendar_form.php",
            success: function (data) {
                $("#centerconteid").css("marginLeft", "450px");
                $("#centerconteid").html(data);
            }
        })
}
</script>

<style>
.secondary-sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px;
    background-color: #333;
    padding-top: 20px;
    transition: left 0.3s ease;
    z-index: 2; /* Ensure secondary sidebar stays above main content and sidebar */
}

.closebtn {
    padding: 10px;
    text-decoration: none;
    color: white;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
.third-sidebar {
    height: 100%;
    width: 50px;
    position: fixed;
    top: 0;
    left: -250px;
    background-color:white;
    padding-top: 20px;
    transition: left 0.3s ease;
    z-index: 2; /* Ensure secondary sidebar stays above main content and sidebar */
}

.thirdclsebtn {
    padding: 10px;
    text-decoration: none;
    color: white;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

/* Add a right margin to each icon */
.fa {
  margin-left: -12px;
  margin-right: 8px;
}










 .emoji_act {
      box-shadow: none;
      outline: none;
      border: none;
      padding: 10px; /* Optional: add padding to make it look better */
    }
    
    .emojionearea, .emojionearea.form-control {
    display: block;
    position: relative !important;
    width: 100%;
    height: auto;
    padding: 0;
    font-size: 14px;
    border: 0;
    background-color: #FFFFFF;
    /* border: 1px solid #CCCCCC; */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-transition: border-color 0.15s ease-in-out, -moz-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.emojionearea .emojionearea-editor {
    display: block;
    height: auto;
    min-height: 0em !important; 
    max-height: 15em;
    overflow: auto;
    padding: 6px 24px 6px 12px;
    line-height: 1.42857143;
    font-size: inherit;
    color: #555555;
    background-color: transparent;
    border: 0;
    cursor: text;
    margin-right: 1px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

	.emojionearea .emojionearea-button.active + .emojionearea-picker-position-bottom {
    margin-top: -50vh;
	margin-right:-20vh;
}




</style>

      
           <style>
          
.lableoffooter
{
    color:gray;
    font-size:12px;
    font-weight:600;
    
}
a.followlabel {
    font-weight: 600;
    font-size: 13px;
    text-decoration: none; /* Remove underlines from the link */
    color: blue; /* Set text color to white or desired color */
}

a.followlabel:hover {
    text-decoration: none; /* Remove underlines from the link */
    color: deeppink; /* Set text color to white or desired color */
}

        a.swtichlabel {
            font-weight: 600;
            font-size: 13px;
            color: blue;
            text-decoration: none;
        }

        a.swtichlabel:hover {
            color: deeppink; /* Change the color for the hover effect */
        }
        a.seeall
        {
           color:gray;
           text-decoration:none;
           font-size:17px; 
        }
        a.seeall:hover:
        {
            color:deeppink;
        }
        
        
        
.switchpopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
	 overflow: auto; 
}

.switchpopup-content {
	height:450px;
	width:430px;
    background: white;
    margin:135px auto;
    border-radius: 10px;
    text-align: center;
	  max-height: 150vh; 
	
}
  .loginbtnnn {
        width: 70%;
        padding: 10px;
        background-color: pink;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        display: block;
        margin: 0 auto;
    }
	.loginbtnnn:hover {
        width: 70%;
        padding: 10px;
        background-color: deeppink;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        display: block;
        margin: 0 auto;
    }
.followbtn
{
	    width: 20%;
		height:10%;
        padding: 10px;
        background-color: pink;
        color: black;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        display: block;
        margin: 0 auto;
}
.followbtn:hover
{
	background-color:deeppink;
}
.form-control {
    width: 70%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
    outline: none; 
}


.form-control:hover {
    border-color: #aaa;
}


.form-control:focus {
    border-color: #007bff; 
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);  
}

   .seeallpopup
   {
	   display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
	 overflow: auto; 
   }
   .seeallpopup-content {
	height:450px;
	width:550px;
    background: white;
    margin:135px auto;
    border-radius: 10px;
    text-align: center;
	max-height: 150vh; 
	
}
  



        
.afterfollowpop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
	 overflow: auto; 
}

.afterfollowpop-content {
	height:450px;
	width:430px;
    background: white;
    margin:135px auto;
    border-radius: 10px;
    text-align: center;
	  max-height: 150vh; 
	
}

  
        
    </style>

<script>
    // Function to display the pop-up card
    function showswitchPopCard() {
        //debugger;
        document.getElementById('switchpopup').style.display = 'block';
    }

    // Function to close the pop-up card
    function switchclosePopCard() {
        document.getElementById('switchpopup').style.display = 'none';
    }

    // Add event listener to the switch link to show the pop-up card
    document.querySelector('.swtichlabel').addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default link behavior
        showswitchPopCard(); // Call the function to display the pop-up card
    });
</script>

<script>
function seeallfollowers()
{
	
        var popup = document.getElementById('seeallpopup');
        popup.style.display = 'flex';
    

   
}
 function seeallPopCard() {
        var popup = document.getElementById('seeallpopup');
        popup.style.display = 'none';
    }
	
	
	
	
	
</script>