const painel_serviços_icon = document.getElementById('saida');

function renderService(service) {
    const { nome, Imagem, id_server, resposta_popup, resposta_script, resposta_estilo } = service;
    const serviceDiv = document.createElement('div');
    serviceDiv.classList.add('painel');
    serviceDiv.id = id_server;

    serviceDiv.innerHTML = `
<div class="Colun_1">
<img src="${Imagem}" alt="">
</div>
<div class="Colun_2">
<h2>${nome}</h2>
</div>
`;

    painel_serviços_icon.appendChild(serviceDiv);

    serviceDiv.addEventListener('click', () => {
        popup(resposta_popup, resposta_script, resposta_estilo);
    });
}

function renderAllServices() {
    painel_serviços_icon.innerHTML = '';

    // Renderiza os serviços de Ser_Itguys
    for (const service of Object.values(Data_Center.Ser_Itguys)) {
        renderService(service);
    }

    // Renderiza os serviços de Ser_User
    for (const service of Object.values(Data_Center.Ser_User)) {
        renderService(service);
    }
}

// Inicializa a renderização
renderAllServices();

function popup(resposta, script, estilo) {
    const painel_serviços = document.getElementById('painel_Servico');
    painel_serviços.innerHTML = `
<section>
<div class='colun_1'>
    <button id='fechar'>
        X
    </button>
</div>
<div class='colun_2'>
    ${resposta}
</div>
</section>
`;

    // Remover estilos e scripts anteriores
    const existingStyles = document.querySelectorAll('style');
    existingStyles.forEach(style => style.remove());
    const existingScripts = document.querySelectorAll('script[data-dynamic]');
    existingScripts.forEach(script => script.remove());

    // Injetar estilo se houver
    if (estilo) {
        const style = document.createElement('style');
        style.innerHTML = estilo;
        document.head.appendChild(style);
    }

    // Injetar script se houver
    if (script) {
        const scriptElement = document.createElement('script');
        scriptElement.setAttribute('data-dynamic', '');
        scriptElement.src = script;
        document.body.appendChild(scriptElement);
    }

    const button_servi = document.getElementById('fechar');
    button_servi.addEventListener('click', fecharPopup);

    function fecharPopup() {
        painel_serviços.style.display = "none";
    }

    painel_serviços.style.display = "flex";
}

const button_pesquisa = document.getElementById('button_pesqui');
const input_pesquisa = document.getElementById('pesquisa');

button_pesquisa.addEventListener('click', pesquisar);
input_pesquisa.addEventListener('keypress', function (event) {
    if (event.key === 'Enter') {
        pesquisar();
    }
});

function pesquisar() {
    const query = input_pesquisa.value.toLowerCase();
    painel_serviços_icon.innerHTML = '';

    // Filtra e renderiza os serviços
    for (const service of Object.values(Data_Center.Ser_Itguys).concat(Object.values(Data_Center.Ser_User))) {
        if (service.nome.toLowerCase().includes(query)) {
            renderService(service);
        }
    }
}