
document.addEventListener("DOMContentLoaded", function () {
    const dropdown = document.querySelector(".recommended-dropdown");
    const selectedOption = document.querySelector(".show_select_option");
    const dropdownList = document.querySelector(".dropdown-list");

    // Toggle dropdown list visibility
    selectedOption.addEventListener("click", function () {
        dropdownList.style.display = dropdownList.style.display === "none" ? "block" : "none";
    });

    // Handle option selection
    dropdownList.addEventListener("click", function (event) {
        if (event.target.tagName === "LI") {
            selectedOption.innerHTML = `${event.target.textContent}<img src="IMAGES\\icons\\chevron.svg" alt="">`;
            dropdownList.style.display = "none";
        }
    });

    // Close the dropdown if the user clicks outside of it
    window.addEventListener("click", function (event) {
        if (!dropdown.contains(event.target)) {
            dropdownList.style.display = "none";
        }
    });
});


// ================   organizers slider js  =====================

const prev = document.getElementById('prev-btn');
const next = document.getElementById('next-btn');
const list = document.getElementById('item-list');

const itemWidth = 200;
const padding = 10;

prev.addEventListener('click', () => {
    list.scrollLeft -= itemWidth + padding
})

next.addEventListener('click', () => {
    list.scrollLeft += itemWidth + padding
})


// ============= read more =============
function myFunction() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");

    if (dots.style.display === "none") {
        dots.style.display = "inline";
        btnText.innerHTML = "Show more";
        moreText.style.display = "none";
    } else {
        dots.style.display = "none";
        btnText.innerHTML = "Show less";
        moreText.style.display = "inline";
    }
}

// ==============  hide the popup for events  ======================

document.addEventListener("DOMContentLoaded", function () {
    // Show the popup after 1 seconds
    setTimeout(showPopup, 1000);
});

function showPopup() {
    var popup = document.querySelector('.event_details_popup');
    if (popup) {
        popup.style.display = 'block';
    }
}

function closeMessagePopup() {
    var popup = document.querySelector('.event_details_popup');
    if (popup) {
        popup.style.display = 'none';
    }
}


// =====================

function transferFunction() {
    var ticket_popup = document.querySelector('.transfer-ticket-modal');
    if (ticket_popup) {
        ticket_popup.style.display = "block";
    }
}

// function showticketsuccess() {
//     var ticket_popup = document.querySelector('.transfer-ticket-modal');
//     if (ticket_popup) {
//         var form_tic = ticket_popup.querySelector('.transfer-details');
//         var transfer_success = ticket_popup.querySelector('.transfer-success');

//         if (form_tic && transfer_success) {
//             form_tic.style.display = "none";
//             transfer_success.style.display = "block";
//         }
//     }
// }

function closeTicket() {
    var ticket_popup = document.querySelector('.transfer-ticket-modal');
    if (ticket_popup) {
        ticket_popup.style.display = "none";
    }
}


function success_transfer() {
    var ts_de = document.querySelector('.transfer-details');
    var td_sh = document.querySelector('.transfer-success');
    ts_de.style.display = "none";
    td_sh.style.display = "block";
}


function accept_request() {
    var ticket_popup = document.querySelector('.accept-request-modal');
    if (ticket_popup) {
        ticket_popup.style.display = "block";
    }
}

function closeRequest() {
    var ticket_popup = document.querySelector('.accept-request-modal');
    if (ticket_popup) {
        ticket_popup.style.display = "none";
    }
}


// ============  setting edit box  ========

function edit_deta() {
    var ed_btn = document.querySelector('#edit-btn');
    var details_show_box = document.querySelector('.details-show-box');
    var edit_box = document.querySelector('.edit-box');

    if (ed_btn) {
        details_show_box.style.display = "none";
        edit_box.style.display = "block";
        ed_btn.style.display = "none";
    }

}

function close_edit_box() {
    var ed_btn = document.querySelector('#edit-btn');
    var details_show_box = document.querySelector('.details-show-box');
    var edit_box = document.querySelector('.edit-box');

    if (ed_btn) {
        details_show_box.style.display = "block";
        edit_box.style.display = "none";
        ed_btn.style.display = "block";
    }
}



// ============== add the active class is the setting list  ============

function activateMenuItem(menuId) {

    // Hide all menus
    var allMenus = document.querySelectorAll('.menus-section');
    allMenus.forEach(function (menu) {
        menu.style.display = 'block'; // Change 'block' to 'none' to hide the menus
    });

    // Remove 'active' class from all li elements
    var allMenuItems = document.querySelectorAll('.menus-section li');
    allMenuItems.forEach(function (menuItem) {
        menuItem.classList.remove('active');
    });

    // Show the selected menu
    document.getElementById(menuId).style.display = 'none';


    // Add 'active' class to the clicked li element
    var clickedMenuItem = document.querySelector('[onclick="activateMenuItem(\'' + menuId + '\')"]');
    clickedMenuItem.classList.add('active');

    document.getElementById(menuId).style.display = 'block';
}



// ============  confirm number popup  ===========


document.addEventListener("DOMContentLoaded", function () {
    // Show the popup after 1 second
    setTimeout(showConfirmPopup, 1000);
});

function showConfirmPopup() {
    var Spopup = document.querySelector('.confirm-number-popup');
    if (Spopup) {
        Spopup.style.display = 'block';
    }
}

function closeConfirmPopup() {
    var Spopup = document.querySelector('.confirm-number-popup');
    if (Spopup) {
        Spopup.style.display = 'none';
    }
}

function showConfirm() {
    var ty_ph = document.querySelector('#typ-pho');
    var conf_pho = document.querySelector('#confi-pho');
    var tick_suc = document.querySelector('#confir-tick');

    conf_pho.style.display = "block";
    ty_ph.style.display = "none";
    tick_suc.style.display = "none";
}

function tickConfirm() {
    var ty_ph = document.querySelector('#typ-pho');
    var conf_pho = document.querySelector('#confi-pho');
    var tick_suc = document.querySelector('#confir-tick');

    conf_pho.style.display = "none";
    ty_ph.style.display = "none";
    tick_suc.style.display = "block";

}




function chatStart() {
    var chat_header = document.querySelector('.chat_header');
    var chat_option = document.querySelector('#chat_option');
    var after_chat = document.querySelector('#afterstartChat');
    var chatbox = document.querySelector('#chatbox');

    after_chat.style.display = "block";
    chat_header.style.display = "none";
    chat_option.style.display = "none";
    chatbox.style.display = "block";
}




// ===========  article select js  ==========

function selectarticleFor() {
    var sel_art = document.querySelector('#select_article_id');
    var art_1 = document.querySelector('#article_heading_1');
    var art_2 = document.querySelector('#article_heading_2');
    if (sel_art.value === "attending") {
        art_1.style.display = "block";
        art_2.style.display = "none";
    } else if (sel_art.value === "event_organizer") {
        art_1.style.display = "none";
        art_2.style.display = "block";
    }
}










// =============== find events filter dropdown   ========
function Currecny_header_popup() {
    var curr_cun_pop = document.querySelector('.header_currency_popup');
    curr_cun_pop.style.display = "block";
}

function close_curr_pop() {
    var curr_cun_pop = document.querySelector('.header_currency_popup');
    curr_cun_pop.style.display = "none";
}


// ======= profile js  ======

function showUserMessage_Pop() {
    var showmes = document.querySelector('.send-message-popup');
    showmes.style.display = "block";
}

function closeProfMessagePopup() {
    var showmes = document.querySelector('.send-message-popup');
    showmes.style.display = "none";
}

function sendfun(event) {
    event.preventDefault();
    var showmes = document.querySelector('.send-message-popup');
    showmes.style.display = "none";
    var success_msg = document.querySelector('.success_msg');
    success_msg.style.display = "block";
}



// =====================  select from one to another  ====

function bellNotify() {
    var bellPop = document.getElementById('enable_notification');
    bellPop.style.display = bellPop.style.display === "none" ? "block" : "none";
}

function getTicketPop() {
    var getTicPop = document.getElementById('getTicketPop');
    getTicPop.style.display = "block";
}

function closeMessagePopupTick() {
    var getTicPop = document.getElementById('getTicketPop');
    getTicPop.style.display = "none";
    
    
    var closeNotify = document.getElementById('enable_notification');
    closeNotify.style.display = "none";
}



// ==========================

function ShowLocationBtn() {
    var location_btn_fix = document.querySelector(".location_fixed_btn");
    var loc_pop = document.querySelector(".location_content_pop");

    location_btn_fix.style.display = "none";
    loc_pop.style.display = "block";
}



// ======================   AddPhoneNumberVali =========

    // Function to update the position of the location button based on scroll
    function updateLocationButtonPosition() {
        var locationButton = document.getElementById('chat-icon');
        var footer = document.querySelector('hero');
        var buttonRect = locationButton.getBoundingClientRect();
        var footerRect = footer.getBoundingClientRect();

        if (buttonRect.top + buttonRect.height >= footerRect.top) {
            locationButton.classList.add('fixed');
            locationButton.style.transform = 'translateY(100%)';
        } else {
            locationButton.classList.remove('fixed');
            locationButton.style.transform = 'translateY(%)';
        }
    }

    // Function to show location button (you can replace this with your actual function)
    function ShowLocationBtns() {
        var chatIconSVG = document.getElementById('chatIconSVG');
        chatIconSVG.style.fill = '#ff0000'; 
    }

    // Attach the scroll event listener
    window.addEventListener('scroll', updateLocationButtonPosition);

    // Call the function on page load
    window.onload = function() {
        updateLocationButtonPosition();
    };