<!-- Private Message Modal -->
<div class="modalpvt" id="privateMessageModal">
<div class="modalpvt-content" id="modalContent">
<div class="modalpvt-header" id="modalHeader">
<h3><small><i class="material-icons">chat</i></small><span id="privateMessageUser">Username</span><font class="hide"><span id="privateMessageUserID"></span></font></h3>
<span class="close-btn" onclick="closeModal()">×</span>
</div>
<div class="modalpvt-body">
<div class="scrollable-section2">
<div id="Reload21"></div>
<div id="ajax-post-container"></div>
</div>
</div>

<!-- Footer with Private Plus Menu -->
<div class="modalpvt-footer chat-input hidereply">
<div class="plus-menu-private">
<div class="plus-icon-private" id="plusIconPrivate">
<i class="fas fa-plus"></i>
</div>
<div class="icon-options-private" id="iconOptionsPrivate1">
<div class="icon-button" title="Text">
<i class="fas fa-font"></i>
</div>
<div class="icon-button" title="Voice">
<i class="fas fa-microphone-alt"></i>
</div>
<div class="plus-icon2-private" id="plusIcon2Private">
<i class="fas fa-upload"></i>
</div>
<div class="icon-button" title="Image Upload" id="uploadPrivate" onclick="document.querySelector('#fileUploadPrivate').click()">
<i class="fas fa-image"></i>
</div>
</div>

<div class="icon-options-private" id="iconOptionsPrivate2">
<embed src="/uploadbtn?&uid=${userID}&view=pm&uname=${username}" width="250px" height="75px" style="float: right;" />
</div>
</div>

<div class="textarea-container hidereply">
<input type="file" id="fileUploadPrivate" style="display:none;">
<textarea id="messageInputPrivate" placeholder="Tap here to type..." rows="1"></textarea>
</div>

<button id="sendBtnPrivate" onclick="SendMessage2()" disabled>SEND (0/100)</button>
</div>
</div>
</div>

<style>
/* modalpvt Styling */
.modalpvt {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
z-index: 2000;
transition: all 0.2s ease-out; /* Smooth dragging */
}

.modalpvt-content {
background: white;
width: 300px;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: absolute;
}

.modalpvt-header {
background: #333;
color: white;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

.modalpvt-header h3 {
margin: 0;
font-size: 16px;
}

.modalpvt-header .close-btn {
cursor: pointer;
font-size: 18px;
}

.modalpvt-body {
padding: 20px;
text-align: center;
}

.modalpvt-body i {
font-size: 50px;
color: #ddd;
margin-bottom: 10px;
}

.modalpvt-footer {
padding: 10px;
border-top: 1px solid #ddd;
display: flex;
align-items: center;
}

.modalpvt-footer input {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}

.send-icon {
display: none;
cursor: pointer;
font-size: 20px;
color: #007bff;
margin-left: 10px;
}

#Reload21 {
scroll-behavior: smooth;
}

/* Common Styles for Plus Menu */
.plus-menu, .plus-menu-private {
position: relative;
}

.plus-icon, .plus-icon2, .plus-icon-private, .plus-icon2-private {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: 1px solid #ddd;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}

.plus-icon i, .plus-icon2 i, .plus-icon-private i, .plus-icon2-private i {
font-size: 18px;
color: #555;
}

.plus-icon:hover i, .plus-icon2:hover i, .plus-icon-private:hover i, .plus-icon2-private:hover i {
color: #000;
}

/* Icon Options for both Plus Menus */
.icon-options, .icon-options-private {
display: none;
position: absolute;
bottom: 50px; /* Positioning upward above the plus icon */
left: 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
flex-direction: row;
gap: 10px;
z-index: 100; /* Above other elements */
}

.icon-options.show, .icon-options-private.show {
display: flex;
}

/* Icon buttons inside the options */
.icon-button, .icon-button-private {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f8f9fa;
cursor: pointer;
}

.icon-button i, .icon-button-private i {
font-size: 18px;
color: #555;
}

.icon-button:hover i, .icon-button-private:hover i {
color: #000;
}

/* Scrollable Section */
.scrollable-section2 {
max-height: 30vh;
overflow-y: auto;
margin-top: 0px;
}
</style>

<script>
// Select elements for both plus menus
const plusIconPrivate = document.getElementById('plusIconPrivate');
const iconOptionsPrivate1 = document.getElementById('iconOptionsPrivate1');
const plusIcon2Private = document.getElementById('plusIcon2Private');
const iconOptionsPrivate2 = document.getElementById('iconOptionsPrivate2');

// Flag to track whether any menu is currently open
let isPrivateMenuOpen = false;
let isSecondPrivateMenuOpen = false;

// Toggle private plus icon menu (First menu)
plusIconPrivate.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent closing when clicking inside

// If the second menu is open, close it
if (isSecondPrivateMenuOpen) {
iconOptionsPrivate2.classList.remove('show');
isSecondPrivateMenuOpen = false; // Update the state
}

// Toggle the first menu
iconOptionsPrivate1.classList.toggle('show');
isPrivateMenuOpen = !isPrivateMenuOpen; // Update the state
});

// Toggle second private plus icon menu (Second menu)
plusIcon2Private.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent closing when clicking inside

// If the first menu is open, close it
if (isPrivateMenuOpen) {
iconOptionsPrivate1.classList.remove('show');
isPrivateMenuOpen = false; // Update the state
}

// Toggle the second menu
iconOptionsPrivate2.classList.toggle('show');
isSecondPrivateMenuOpen = !isSecondPrivateMenuOpen; // Update the state
});

// Close both menus when clicking anywhere outside
document.addEventListener('click', () => {
// Close both menus
if (isPrivateMenuOpen) {
iconOptionsPrivate1.classList.remove('show');
isPrivateMenuOpen = false; // Reset the state
}
if (isSecondPrivateMenuOpen) {
iconOptionsPrivate2.classList.remove('show');
isSecondPrivateMenuOpen = false; // Reset the state
}
});

// Prevent click inside the private menu from closing the menu
document.querySelectorAll('.plus-menu-private').forEach(menu => {
menu.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent closing the menu when clicking inside
});
});
</script>