(function() {

var jsonData = 'https://awards.physiology.org/SearchData';

const htmlString = `
<div id="search-main">
    <h2>Search Corresponding Authors' Institutional Subscription to Confirm Open Access Eligibility</h2>
    <div id="search-container">
        <input type="search" id="search-box" placeholder="Search Institution...">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
             viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
        </svg>

        <div id="suggestions"></div>
    </div>

    <div id="links-container"></div>
</div>
`;

const cssString = `

body {
background: #eee;
color: #1f1f1f;
font-family: Muli Subset, sans-serif;
font-size: 14px;
font-size: .875rem;
line-height: 1.4;
word-wrap: break-word;
min-height: 100vh;
}

#search-container {
            position: relative;
            /* For positioning the suggestions */
            margin: auto;
}

        #search-box {
            width: 100%;
            padding: .625rem .5rem;
            border: 1px solid #cbcccd;
            box-sizing: border-box;
            /* Include padding and border in element's total width and height */
            padding-left: 30px;
            /* Adjust as needed */
            position: relative;
            /* Needed for absolute positioning of the icon */
            font-size: 1rem;
        }

        #search-main svg {
            position: absolute;
            left: 0.5rem;
            /* Adjust position as needed */
            top: 50%;
            transform: translateY(-50%);
            /* Vertically center the icon */
            pointer-events: none;
            /* Prevent the icon from capturing click events */
        }

        #suggestions {
            position: absolute;
            /* So it overlays other content */
            top: 100%;
            /* Position below the input */
            left: 0;
            width: 100%;
            border: 1px solid #ccc;
            border-top: none;
            /* Don't double the border */
            background-color: #fff;
            max-height: 200px;
            /* Limit height and add scroll */
            overflow-y: auto;
            z-index: 1;
            /* Ensure it's on top */
        }

        #search-main .suggestion {
            padding: 10px;
            cursor: pointer;
        }

        #suggestions .suggestion:hover {
            background-color: #f0f0f0;
        }

        .headertext {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        #links-container {
            margin: auto;
line-height: 1.6rem;
        }

            #links-container a.alink {
                display: block;
                margin-right: .3125rem;
                margin-left: .3125rem;
                padding-bottom: 0.25rem;
                color: #2d788e;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                word-wrap: break-word;
                text-decoration: none;
                cursor: pointer;
                line-height: 1.6rem;
            }

        #links-container {
            margin-top: 20px;
        }

        #search-main .link-section {
            /* Style for each section of links */
            margin-bottom: 20px;
            /* Space between sections */
        }

            #search-main .link-section h3 {
                /* Style for the header */
                margin-bottom: 10px;
                font-size: 1.25rem;
                font-weight: 800;
                color: #212121;
            }

            #search-main .link-section a {
                display: block;
                margin-bottom: 5px;
            }
`;

     // Create the search box elements
  const searchContainer = document.createElement('div');
    searchContainer.innerHTML = htmlString;

 const style = document.createElement('style');
  style.textContent = cssString;

 searchContainer.appendChild(style);

    // Insert the search box into the page (e.g., at the beginning of the body)
    //document.body.insertBefore(searchContainer, document.body.firstChild);


    const script = document.currentScript;
    script.parentNode.insertBefore(searchContainer, script);

//all script----------



    const searchBox = document.getElementById('search-box');
    const suggestions = document.getElementById('suggestions');
    const linksContainer = document.getElementById('links-container');

    let timeoutId;

    searchBox.addEventListener('input', () => {
        console.log("searchBox", searchBox.value);

    clearTimeout(timeoutId);


    timeoutId = setTimeout(() => {

            console.log("searchBox2", searchBox.value);

const inputValue = searchBox.value.toLowerCase();
            suggestions.innerHTML = '';
            linksContainer.innerHTML = '';

            if (inputValue.length < 3) {
                return; // Don't show suggestions if input is empty
            }

            fetch(jsonData+'?q=' + searchBox.value)
                .then(response => response.json())
                .then(jsonData => {
                    var data1 = jsonData;

                    console.log("fetch", searchBox.value, data1);
                    data1.forEach(item => {
                        const suggestion = document.createElement('div');
                        suggestion.classList.add('suggestion');
                        suggestion.textContent = item.name;
                        suggestion.setAttribute("mcid", item.id);

                        suggestion.addEventListener('click', () => {
                            searchBox.value = item.name;
                            suggestions.innerHTML = '';
                            displayLinks(item.id);
                        });
                        suggestions.appendChild(suggestion);
                    });

                })
                .catch(error => {
                    console.error("Error fetching data:", error);
                    // Handle error, e.g., display a message to the user
                    suggestions.innerHTML = "<div class='suggestion'>Error loading data.</div>";
                });
 }, 1000);
        });

        function displayLinks(selectedItem) {
            console.log("displayLinks", selectedItem);
            linksContainer.innerHTML = ''; // Clear previous links and header

            fetch(jsonData + '?s=' + selectedItem)
                .then(response => response.json())
                .then(jsonData => {
                    var links = jsonData;

                    if (links != null && links.length > 0) {
                        const rez = document.createElement('div');


                        links.forEach(item => {

    if (item.text.length>0) {
                            const header = document.createElement('div');
                            header.id = "headertext"+new Date().getTime();
                            header.classList.add("headertext");
                            header.innerHTML = item.text; // Or a more descriptive header if needed
                            rez.appendChild(header);
}
                            const link = document.createElement('a');
                            link.classList.add('alink');
                            link.href = item.url;
                            link.textContent = item.name;
                            link.target = "_blank";
                            rez.appendChild(link);
                        });

                         linksContainer.prepend(rez);
                    }
                    else {

                        const errordiv = document.createElement('div');
                        errordiv.innerHTML = `Your institution does not have a subscription to an <a href="https://journals.physiology.org/subscription-packages" target="_new"></a>APS Journal Package. To publish your work as Open Access with a Creative Commons license, please contact your library or work directly with <a href="mailto:subscriptions@physiology.org">APS to request a subscription</a>. APS has created this template to assist you in your outreach. <a href="https://journals.physiology.org/mailer" target="_new">https://journals.physiology.org/mailer</a>`;
                        linksContainer.appendChild(errordiv);
                    }

                })
                .catch(error => {
                    console.error("Error fetching data:", error);

                    const errordiv = document.createElement('div');
                    errordiv.textContent = "Error fetching data.";
                    linksContainer.appendChild(errordiv);

                });

        }

//----------all script

    })();