[Dúvida] Gerar um modal dinâmico (Laravel)

Olá Elisame, tudo bem? Espero que sim!

Para resolver o seu problema, você pode utilizar o conceito de modal dinâmico no Laravel. Em vez de criar um modal para cada produto, você pode criar um único modal e alterar o seu conteúdo e ID de acordo com o produto selecionado.

Você pode fazer isso utilizando JavaScript para manipular o modal. Quando o usuário clicar em um produto para excluir, você pode capturar o ID desse produto e alterar dinamicamente o conteúdo e o ID do modal. Assim, o modal será exibido com as informações corretas para aquele produto específico.

Após o usuário confirmar a exclusão, você pode fechar o modal e remover o código do modal da página. Para exibir a mensagem de sucesso ou erro, você pode utilizar um sistema de notificações do Laravel, como o Toastr ou o SweetAlert, por exemplo.

Aqui está um exemplo de como você pode implementar essa lógica:

// JavaScript
$('.excluir-produto').click(function() {
  var idProduto = $(this).data('id');
  
  // Altera o conteúdo e o ID do modal de acordo com o produto selecionado
  $('#modal-excluir-produto .modal-body').html('Tem certeza que deseja excluir o produto ' + idProduto + '?');
  $('#modal-excluir-produto').attr('data-id', idProduto);
  
  // Abre o modal
  $('#modal-excluir-produto').modal('show');
});

$('#modal-excluir-produto .btn-confirmar').click(function() {
  var idProduto = $('#modal-excluir-produto').attr('data-id');
  
  // Fecha o modal
  $('#modal-excluir-produto').modal('hide');
  
  // Remove o código do modal da página
  $('#modal-excluir-produto').remove();
  
  // Exibe a mensagem de sucesso ou erro
  // ...
});

No exemplo acima, estou assumindo que você está utilizando o Bootstrap para criar o modal. O botão "excluir" de cada produto deve ter a classe "excluir-produto" e um atributo "data-id" com o ID do produto correspondente. .

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição

Abraços e bons estudos!

Desculpe a demora na resposta! Eu acabei esquecendo de postar o código do modal que eu uso para essa confirmação...

@foreach ($todasCategorias as $categoria)
<!--- Editar Categoria Produto --->
<div class="modal fade" id="excluirCategoriaProduto-{{ $categoria->categoriaProdutoID }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title text-white" id="excluirCategoriaProduto">
                    Excluir Categoria "{{ $categoria->CategoriaProduto }}"
                </h5>
            </div>
            <div class="modal-body">
                <form action="{{ route('excluirCategoriaProduto', $categoria->categoriaProdutoID) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        <p>Ao excluir uma categoria, todos os produtos relacionados a essa categoria serão afetados.</p> 
                        <p>Alternativamente você pode mudar o nome dessa categoria para algo que se encaixe melhor com suas necessidades, basta clicar no ícone <i class="fa-regular fa-pen-to-square"></i>.</p>
                        <p>Se ainda assim, a categoria não for mais necessária, basta clicar no botão <strong>Excluir</strong>.</p> 
                        <span class="text-danger"><strong>Atenção</strong>: Essa ação não pode ser desfeita.</span>
                    </div>
                    <input type="hidden" value="{{ $categoria->categoriaProdutoID }}" name="categoriaProduto">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-bs-dismiss="modal">
                            <i class="fa-solid fa-xmark"></i>
                            <span class="d-none d-sm-block">Cancelar</span>
                        </button>
                        <button type="submit" class="btn btn-danger">
                            <i class="fa-solid fa-trash"></i>
                            <span class="d-none d-sm-block">Excluir</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach

Usando a lógica da postagem anterior, como eu poderia adaptar isso? Entendo muito pouco de JavaScript ainda.