document.addEventListener("click", function (event) {
        const dropdownMenu = document.querySelector(".dropdown-menu");

        if (event.target.closest(".dropdown")) {
            dropdownMenu.style.display = (dropdownMenu.style.display === "block") ? "none" : "block";
        } else if (!event.target.closest(".dropdown-menu")) {
            dropdownMenu.style.display = "none";
        }
    });

    document.addEventListener("click", function (event) {
        if (event.target.classList.contains("navbar-toggle")) {
            document.querySelectorAll(".collapse").forEach(function (collapseElement) {
                collapseElement.style.display = (getComputedStyle(collapseElement).display === "none") ? "block" : "none";
            });
        }
    });
    function toggleAnswer(collapseId) {
        var collapseElement = document.getElementById(collapseId);

        if (collapseElement.classList.contains('in')) {
            collapseElement.classList.remove('in');
        } else {
            collapseElement.classList.add('in');
        }
    }
    document.addEventListener("mouseup", function (e) {
        const resultSuggestContainer = document.getElementById("result-suggest-container");

        if (resultSuggestContainer && !resultSuggestContainer.contains(e.target)) {
            resultSuggestContainer.style.display = "none";
        }
    });

    document.addEventListener("click", function (event) {
        if (event.target.matches("ul.result_box li")) {
            var valattr = event.target.textContent;

            var txtUrl = document.getElementById("txt-url");
            if (txtUrl) txtUrl.value = valattr;

            var resultSuggestContainer = document.getElementById("result-suggest-container");
            if (resultSuggestContainer) resultSuggestContainer.style.display = "none";

            var converterBtn = document.querySelector("#btn-submit");
            if (converterBtn) converterBtn.click();
        }
    });

    document.addEventListener("mouseover", function (event) {
        if (event.target && event.target.classList && event.target.classList.contains("search_result")) {
            document.querySelectorAll('.result_box li.selected').forEach(item => item.classList.remove('selected'));
            event.target.classList.add('selected');
            var txtUrl = document.getElementById('txt-url');
            if (txtUrl) {
                txtUrl.value = event.target.textContent;
            }
        }
    });
    function handleResponse(data) {
        var suggestionBox = document.querySelector('#result-suggest-container');
        if (suggestionBox) { suggestionBox.innerHTML = ''; }

        var obj = data[1];
        if (obj && obj.length > 0) {
            var searchTxt = "<ul class='result_box'>";
            obj.forEach(value => {
                searchTxt += "<li class='search_result'>" + value[0] + "</li>";
            });
            searchTxt += "</ul>";
            suggestionBox.innerHTML = searchTxt;
            suggestionBox.style.display = 'block';
        }
    }
    document.getElementById("txt-url").addEventListener("keyup", function (e) {
        var inputLength = this.value.length;
        var code = e.keyCode || e.which;

        if (code >= 37 && code <= 40) { // Arrow key codes: 37 (left), 38 (up), 39 (right), 40 (down)
            var selectedElement = document.querySelector('.selected');
            var resultBoxItems = document.querySelectorAll('.result_box li');

            var index = selectedElement ? Array.from(resultBoxItems).indexOf(selectedElement) : -1;
            if (index === -1) index = 0;

            resultBoxItems.forEach(item => item.classList.remove('selected'));

            var new_index = code === 38 ? index - 1 : code === 40 ? index + 1 : index;
            if (resultBoxItems[new_index]) {
                resultBoxItems[new_index].classList.add('selected');
                this.value = resultBoxItems[new_index].textContent;
            }
        } else if (code === 13) { // Enter key
            var resultSuggestContainer = document.getElementById("result-suggest-container");
            if (resultSuggestContainer) resultSuggestContainer.style.display = "none";
        } else { // Other keys
            var inputValue = this.value;
            var url = "https://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=" + inputValue;

            var script = document.createElement('script');
            script.src = url + '&callback=handleResponse';
            document.body.appendChild(script);
        }
    });
    var searchBox = document.getElementById('txt-url');

    searchBox.addEventListener('paste', function () {
        setTimeout(function () {
            var inputValue = searchBox.value;
            if (isYouTubeURL(inputValue)) {
                document.getElementById('search-form').submit();
            }
        }, 100);
    });
    function isYouTubeURL(url) {
    return url.includes("youtube.com") || url.includes("youtu.be") || url.includes("www.youtube.com");
  }