Clique no option do select para abrir o MODAL [closed]

tô tentando adicionar uma funcionalidade no meu codigo de modo que assim que eu clicar na opçao do select Falha Processamento, imediatamente apareça um modal com um textarea e dois botões salvar e cancelar mas somente a interface grafica no entanto tô tentando isso a muito tempo mas não conssigo ou melhor o codigo que eu crio pra tentar fazer isso ccria conflito com outros codigos e as coisas param de funcionar,

 function showDetails(type) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `pedidos.php?type=${type}`, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            let detailsContent = '';

            if (type === 'miniaturas') {
    detailsContent = `<div class="recentOrders">
        <div class="cardHeader">
            <h2>Lista de miniaturas para Imprimir</h2>
           
        </div>
        <table>
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Nota</td>
                    <td>Status</td>
                </tr>
            </thead>
            <tbody>`;
    
    data.forEach(row => {
        detailsContent += `<tr>
            <td>${row.nome_miniatura}</td>
            <td style="color: red;">${row.status === "Falha Processamento" ? "Erro na impressão" : ""}</td>
            <td>
                <form method="POST" action="/novo sistema/pedido/status/update_status.php">
                    <input type="hidden" name="id" value="${row.id}">
                    <select name="status" ${row.status === "Concluido" ? "disabled" : ""}>
                        <option value="Nao Concluido" ${row.status === "Nao Concluido" ? "selected" : ""}>Nao Concluido</option>
                        <option value="Concluido" ${row.status === "Concluido" ? "selected" : ""}>Concluido</option>
                        <option value="Montados" ${row.status === "Montados" ? "selected" : ""}>Pintado</option>
                    </select>
                    <button type="submit" ${row.status === "Concluido" ? "disabled" : ""}>Atualizar</button>
                </form>
            </td>
        </tr>`;
    });

    detailsContent += `</tbody></table></div> <div class="footer">
    <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
}




else if (type === 'guarda') {
    detailsContent = `<div class="recentOrders">
        <div class="cardHeader">
            <h2>Lista de miniaturas para Passar Tinta de Guarda</h2>
        </div>
        <table>
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Status</td>
                </tr>
            </thead>
            <tbody>`;
    
    data.forEach(row => {
        detailsContent += `<tr>
            <td>${row.nome_miniatura}</td>
            <td>
                <form method="POST" action="/novo sistema/pedido/status/update_status.php">
                    <input type="hidden" name="id" value="${row.id}">
                    <select name="status">
                        <option value="Guarda" ${row.status === 'Guarda' ? 'selected' : ''}>Guarda</option>
                        <option value="Falha" ${row.status === 'Falha' ? 'selected' : ''}>Falha</option>
                    </select>
                    <button type="submit">Atualizar</button>
                </form>
            </td>
        </tr>`;
    });

    detailsContent += `</tbody></table></div> <div class="footer">
    <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
}




 


else if (type === 'montar') {
                detailsContent = `<div class="recentOrders">
                    <div class="cardHeader">
                        <h2>Lista de miniaturas para Montar</h2>
                       
                    </div>
                    <table>
                        <thead>     
                            <tr>
                                <td>Name</td>
                                <td>Status</td>
                            </tr>
                        </thead>
                        <tbody>`;
                
                data.forEach(row => {
                    detailsContent += `<tr>
                        <td>${row.nome_miniatura}</td>
                        <td>
                            <form method="POST" action="/novo sistema/pedido/status/update_status.php">
                                <input type="hidden" name="id" value="${row.id}">
                                <select name="status" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento" ? "disabled" : ""}>
                                    <option value="Montado" ${row.status === "Montado" ? "selected" : ""}>Montado</option>
                                    <option value="Falha" ${row.status === "Falha" ? "selected" : ""}>Falha</option>
                                    <option value="Falha Processamento" ${row.status === "Falha Processamento" ? "selected" : ""}>Falha Processamento</option>
                                </select>
                                <button type="submit" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento"? "disabled" : ""}>Atualizar</button>
                            </form>
                        </td>
                    </tr>`;


                    
                });

                detailsContent += `</tbody></table></div> <div class="footer">
        <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
    </div>`;
            } 

             else if (type === 'caixas') {
    detailsContent = `<div class="recentOrders">
        <div class="cardHeader">
            <h2>Lista de caixas para Preparar</h2>
            
        </div>
        <table>
            <thead>
                <tr>
                    <td>Caixa</td>
                    <td>Miniatura</td>
                    <td>Status</td>
                </tr>
            </thead>
            <tbody>`;
    
    let caixa_numero = 1;

    // Itera sobre os dados recebidos
    data.forEach(row => {
        // Divide as miniaturas em uma lista, considerando a separação por 'n'
        const miniaturas = row.miniaturas.split('n');
        miniaturas.forEach(miniatura => {
            // Adiciona uma linha na tabela para cada miniatura
            detailsContent += `<tr>
                <td>Caixa ${caixa_numero} - ${row.nome_order}</td>
                <td>${miniatura}</td>
                <td>
                    <form method="POST" action="/novo sistema/pedido/status/update_status.php">
                        <input type="hidden" name="id" value="${row.id}">
                        <select name="status">
                            <option value="Pronto" ${row.status === "Pronto" ? "selected" : ""}>Pronto</option>
                            <option value="Falha" ${row.status === "Falha" ? "selected" : ""}>Falha</option>
                        </select>
                        <button type="submit">Atualizar</button>
                    </form>
                </td>
            </tr>`;
        });

        // Incrementa o número da caixa após adicionar todas as miniaturas
        caixa_numero++;
    });

    detailsContent += `</tbody></table></div> <div class="footer">
        <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
    </div>`;

    // Atualiza o conteúdo da página com o HTML gerado
    document.getElementById('details').innerHTML = detailsContent;
}

else if (type === 'Rasteiartudo') {
    detailsContent = `<div class="recentOrders">
        <div class="cardHeader">
            <h2>Lista de Caixas Rasteadas</h2>
           
        </div>
        <table>
            <thead>
                <tr>
                    <td>Caixas</td>
                    <td>Código de Rastreamento</td>
                    <td>Data</td>
                </tr>
            </thead>
            <tbody>`;
    
    let caixa_numero = 1;
    data.forEach(row => {
        detailsContent += `<tr>
            <td>Caixa ${caixa_numero} - ${row.nome_order}</td>
            <td>${row.codigo_rastreio}</td>
            <td>${row.data}</td>
        </tr>`;
        caixa_numero++;
    });

    detailsContent += `</tbody></table></div> 
    <div class="footer">
        <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
    </div>`;

    // Atualiza o conteúdo da página com o HTML gerado
    document.getElementById('details').innerHTML = detailsContent;
}











else if (type === 'progresso') {
    let selectedStatus = {};

     // Retrieve stored selected status on page load
  selectedStatus = JSON.parse(localStorage.getItem('selectedStatus')) || {};

    
    detailsContent = `<div class="recentOrders">
        <div class="cardHeader">
            <h2>Progresso das Caixas</h2>
        </div>
        <table>
            <thead>
                <tr>
                    <td>Caixas</td>
                    <td class="status-column">STP</td>
                    <td class="status-column">CTT Portugal</td>
                    <td class="status-column" style="text-align:left;">Finalizado</td>
                </tr>
            </thead>
            <tbody>`;

    let caixa_numero = 1;
    data.forEach(row => {
        let codigoRastreamento = row.codigo_rastreio ? 1 : 0;  // Se código de rastreio não for nulo, considera fase 1 como ativada
        
        // Define o status atual para a caixa
        let stpChecked = codigoRastreamento === 1 ? 'checked' : '';
        let cttChecked = codigoRastreamento === 2 ? 'checked' : '';
        let finalizadoChecked = codigoRastreamento === 3 ? 'checked' : '';
        
        detailsContent += `<tr>
            <td>Caixa ${caixa_numero} -» ${row.nome_order}</td>
            <td class="status-column"><input type="radio" name="status_${caixa_numero}" value="stp" ${stpChecked}></td>
            <td class="status-column"><input type="radio" name="status_${caixa_numero}" value="ctt" ${cttChecked}></td>
            <td class="status-column"><input type="radio" name="status_${caixa_numero}" value="finalizado" ${finalizadoChecked}  style="display: flex;
    justify-content: center;
    align-items: center;"></td>
        </tr>`;
        caixa_numero++;
    });

    detailsContent += `</tbody></table></div> 
    <div class="footer">
        <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
    </div>`;

    // Atualiza o conteúdo da página com o HTML gerado
    document.getElementById('details').innerHTML = detailsContent;
}

















 



 




        
    };
    xhr.send();


<!-- Modal HTML -->
<div id="falhaModal" style="display: none;">
    <div style="background-color: #f1f1f1; padding: 20px; border-radius: 10px; width: 300px; margin: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <h3>Informe o motivo da falha</h3>
        <textarea id="falhaMotivo" rows="4" style="width: 100%;"></textarea>
        <br><br>
        <button id="salvarFalha">Salvar</button>
        <button id="cancelarFalha">Cancelar</button>
    </div>
    <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;" id="modalOverlay"></div>
</div>

<!-- Seu select existente -->
<select id="statusSelect">
    <option value="sucesso">Sucesso</option>
    <option value="falha">Falha Processamento</option>
    <!-- Outras opções -->
</select>

<!-- Script JS para mostrar o modal -->
<script>
    document.getElementById('statusSelect').addEventListener('change', function() {
        var selectedOption = this.value;
        if (selectedOption === 'falha') {
            document.getElementById('falhaModal').style.display = 'block';
        }
    });

    document.getElementById('salvarFalha').addEventListener('click', function() {
        var motivo = document.getElementById('falhaMotivo').value;
        if (motivo.trim() === '') {
            alert('Por favor, informe o motivo da falha.');
        } else {
            console.log('Motivo da falha salvo:', motivo);
            document.getElementById('falhaModal').style.display = 'none';
        }
    });

    document.getElementById('cancelarFalha').addEventListener('click', function() {
        document.getElementById('falhaModal').style.display = 'none';
    });

    document.getElementById('modalOverlay').addEventListener('click', function() {
        document.getElementById('falhaModal').style.display = 'none';
    });
</script>


```   testei isso separadamente funcionou perfeitamente, mas o problema é que quando eu tento adaptar a este trecho do codigo aqui, não funciona e ainda interfere no funcionamento de outros

else if (type === ‘montar’) {
detailsContent = `

Lista de miniaturas para Montar

                </div>
                <table>
                    <thead>     
                        <tr>
                            <td>Name</td>
                            <td>Status</td>
                        </tr>
                    </thead>
                    <tbody>`;
            
            data.forEach(row => {
                detailsContent += `<tr>
                    <td>${row.nome_miniatura}</td>
                    <td>
                        <form method="POST" action="/novo sistema/pedido/status/update_status.php">
                            <input type="hidden" name="id" value="${row.id}">
                            <select name="status" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento" ? "disabled" : ""}>
                                <option value="Montado" ${row.status === "Montado" ? "selected" : ""}>Montado</option>
                                <option value="Falha" ${row.status === "Falha" ? "selected" : ""}>Falha</option>
                                <option value="Falha Processamento" ${row.status === "Falha Processamento" ? "selected" : ""}>Falha Processamento</option>
                            </select>
                            <button type="submit" ${row.status === "Montado" || row.status === "Falha" || row.status === "Falha Processamento"? "disabled" : ""}>Atualizar</button>
                        </form>
                    </td>
                </tr>`;


                
            });

            detailsContent += `</tbody></table></div> <div class="footer">
    <p>&copy; 2024 Sistema Interno - Todos os direitos reservados.</p>
</div>`;
        }