<div><script>
const form = document.getElementById(&quot;search-form&quot;);
const resultsDiv = document.getElementById(&quot;results&quot;);

document.getElementById(&quot;search-btn&quot;).addEventListener(&quot;click&quot;, () =&gt; {
    const nameLength = parseInt(document.getElementById(&quot;name-length&quot;).value) || null;
    const identifiedLetters = document.getElementById(&quot;identified-letters&quot;).value.toLowerCase().split(&quot;,&quot;).map(l =&gt; l.trim()).filter(l =&gt; l);
    const firstLetter = document.getElementById(&quot;first-letter&quot;).value.toLowerCase() || null;
    const lastLetter = document.getElementById(&quot;last-letter&quot;).value.toLowerCase() || null;
    const purpose = document.getElementById(&quot;purpose&quot;).value.toLowerCase();
    const dosageInterval = parseInt(document.getElementById(&quot;dosage-interval&quot;).value) || null;
    const formFilter = document.getElementById(&quot;form&quot;).value.toLowerCase();
    const selectedClass = document.getElementById(&quot;classes&quot;).value.toLowerCase();

    if (!nameLength &amp;&amp; !identifiedLetters.length &amp;&amp; !firstLetter &amp;&amp; !lastLetter &amp;&amp; !purpose &amp;&amp; !dosageInterval &amp;&amp; !formFilter &amp;&amp; !selectedClass) {
        resultsDiv.innerHTML = &quot;<h2>Resultados:</h2><p>Por favor, preencha pelo menos um filtro.</p>&quot;;
        return;
    }

    const filteredMedications = medications.filter(med =&gt; {
        return (
            (!nameLength || med.quantity.some(q =&gt; q === nameLength)) &amp;&amp;  // Verificar se algum nome tem o comprimento solicitado
            (!identifiedLetters.length || identifiedLetters.every(l =&gt; med.name.some(name =&gt; name.toLowerCase().includes(l)))) &amp;&amp;  // Verificar em todos os nomes
            (!firstLetter || med.name.some(name =&gt; name.toLowerCase().startsWith(firstLetter))) &amp;&amp;
            (!lastLetter || med.name.some(name =&gt; name.toLowerCase().endsWith(lastLetter))) &amp;&amp;
            (!purpose || med.purpose.some(p =&gt; p.toLowerCase() === purpose)) &amp;&amp;
            (!dosageInterval || med.intervals.includes(dosageInterval)) &amp;&amp;
            (!formFilter || med.forms.some(f =&gt; f.toLowerCase().includes(formFilter))) &amp;&amp;
            (!selectedClass || med.groups.some(group =&gt; group.toLowerCase() === selectedClass))  // Verificar se o medicamento pertence ao grupo terapêutico selecionado
        );
    });

    resultsDiv.innerHTML = &quot;&quot;;

    if (filteredMedications.length &gt; 20) {
        resultsDiv.innerHTML += `<p>* <strong>A busca foi limitada a 20 resultados</strong>.</p>`;
    }

    const limitedResults = filteredMedications.slice(0, 20);

    resultsDiv.innerHTML += `<p>* Por segurança, a ordem da posologia não está organizada por forma farmacêutica, respeite a prescrição médica.</p><p>* Do total de ${medications.length} medicamentos cadastrados, ${filteredMedications.length} atendem aos critérios do filtro.</p>`;

    if (limitedResults.length === 0) {
        resultsDiv.innerHTML += &quot;<p>Nenhum medicamento encontrado com os critérios informados.</p>&quot;;
        return;
    }

    const table = document.createElement(&quot;table&quot;);
    const thead = document.createElement(&quot;thead&quot;);
    const headerRow = document.createElement(&quot;tr&quot;);

    [&quot;Nome&quot;, &quot;Finalidade&quot;, &quot;Intervalos Posológicos&quot;, &quot;Forma Farmacêutica&quot;, &quot;Preço Médio&quot;].forEach(text =&gt; {
        const th = document.createElement(&quot;th&quot;);
        th.textContent = text;
        headerRow.appendChild(th);
    });

    thead.appendChild(headerRow);
    table.appendChild(thead);

    const tbody = document.createElement(&quot;tbody&quot;);

    limitedResults.forEach(med =&gt; {
        const tr = document.createElement(&quot;tr&quot;);

        const tdName = document.createElement(&quot;td&quot;);
        tdName.textContent = med.name.join(&quot;, &quot;);  // Exibir todos os nomes
        tr.appendChild(tdName);

        const tdPurpose = document.createElement(&quot;td&quot;);
        tdPurpose.textContent = med.purpose.join(&quot;, &quot;);
        tr.appendChild(tdPurpose);

        const tdInterval = document.createElement(&quot;td&quot;);
        tdInterval.textContent = med.intervals.map(interval =&gt; `${interval}x${interval}h`).join(&quot;, &quot;);
        tr.appendChild(tdInterval);

        const tdForms = document.createElement(&quot;td&quot;);
        tdForms.textContent = med.forms.join(&quot;, &quot;);
        tr.appendChild(tdForms);

        const tdPrice = document.createElement(&quot;td&quot;);
        const priceBtn = document.createElement(&quot;button&quot;);
        priceBtn.textContent = &quot;Consultar&quot;;
        priceBtn.onclick = () =&gt; window.open(med.priceLink, &quot;_blank&quot;);
        tdPrice.appendChild(priceBtn);
        tr.appendChild(tdPrice);

        tbody.appendChild(tr);
    });

    table.appendChild(tbody);
    resultsDiv.appendChild(table);
});

// Menu Toggle
const menuIcon = document.getElementById(&quot;menu-icon&quot;);
menuIcon.addEventListener(&quot;click&quot;, () =&gt; {
    const navbar = document.getElementById(&quot;navbar&quot;);
    navbar.classList.toggle(&quot;show&quot;);
});

// Section Navigation
const navLinks = document.querySelectorAll(&#39;a[data-section]&#39;);
const sections = document.querySelectorAll(&#39;.container&#39;);

function showSection(sectionId) {
    sections.forEach(section =&gt; {
        if (section.id === sectionId) {
            section.classList.remove(&#39;hidden&#39;);
        } else {
            section.classList.add(&#39;hidden&#39;);
        }
    });
}

navLinks.forEach(link =&gt; {
    link.addEventListener(&quot;click&quot;, (e) =&gt; {
        e.preventDefault();
        const sectionId = link.getAttribute(&quot;data-section&quot;) + &quot;-section&quot;;
        showSection(sectionId);
    });
});

showSection(&quot;home-section&quot;);

</script></div>