Listar dados do MySql no formato de TABELAS dentro das TABs Bootstrap

[henrybrion 0]

Caros, estou criando um sistema de listagem de produtos em que os mesmos sejam apresentados de acordo com sua categoria.

O sistema funciona da seguinte forma:

Os dados são cadastrados no BD "mercado" na tabela produtos contendo 4 campos (id, produto, categoria e preço) e as categorias são cadastradas na tabela categoria contendo 2 campos (id e categoria).

Na página produtos.php deve ser apresentado da seguinte forma:

As categorias são relacionadas em TABs e os produtos em Tabela, de acordo com sua categoria, ou seja se tenho a categoria "Bebidas" deve ser apresentado todas as Bebidas desta categoria na TAB Bebidas e assim por diante.

Porém não estou conseguindo fazer isso, só está sendo apresentado os produtos da primeira categoria e repetindo nas demais.

Segue o código que estou usando para construção:

 

Página Produtos.php

<div class="container">
			<h2>Lista de Produtos por Categoria</h2>
			<br><br>
			<?php include_once 'select_produtos.php'; ?>
			<ul class="nav nav-tabs nav-pills nav-justified">
				<?php echo $categorias_menu; ?>
			</ul>
			<div class="tab-content">
				<table class="table table-hover">
					<thead class="thead-dark">
						<tr>
						  <th scope="col">Código</th>
						  <th scope="col">Produto</th>
						  <th class=" text-center" scope="col">Valor</th>
						</tr>
					</thead>
					<tbody>
						<?php
						echo $lista_produtos; //faz a chamada para a variável no arquivo "select_produtos.php"
						?>
						</tr> 
					</tbody>
				</table>
			</div>
		</div>

Página Select_produtos.php

 

<?php

include_once 'conexao.php';

$categorias_sql = "SELECT * FROM categorias ORDER BY id ASC";
$categorias_result = mysqli_query( $connect, $categorias_sql );
$categorias_menu = '';

$produtos_query = "SELECT * FROM produtos ORDER BY produto ASC";
$produtos_result = mysqli_query( $connect, $produtos_query ) or die ("database error:". mysqli_error($connect));
$lista_produtos = '';
$i = 0;

//EXIBIR O MENU - ABAS - DE CADA CATEGORIA	
while ( $categorias = mysqli_fetch_array( $categorias_result ) ) {
	if ( $i == 0 ) {
		$categorias_menu .= '
		<li class="active">
			<a href="#' . $categorias[ "id" ] . '" data-toggle="tab" role="tab">' . $categorias[ "categoria" ] . '</a>
		</li>
		';
		$lista_produtos .= '
		<div id="' . $categorias[ "id" ] . '" class="tab-pane fade in active">
		';
	} else {
		$categorias_menu .= '
		<li>
			<a href="#' . $categorias[ "id" ] . '" data-toggle="tab" role="tab">' . $categorias[ "categoria" ] . '</a>
		</li>
		';
		$lista_produtos .= '
		<div id="' . $categorias[ "id" ] . '" class="tab-pane fade">
		';
	}
	$i++;	
	//Verfica se existem produtos na tabela
	if(!mysqli_num_rows($produtos_result)) {
		$lista_produtos .= '<br>Produto não encontrado!';
	}else{
		//LISTANDO PRODUTOS NO FORMATO DE TABELA
		while ( $sub_row = mysqli_fetch_array( $produtos_result ) ) {
			if($sub_row['categoria_id'] == $categorias['id']){
				$lista_produtos .= '<tr>';
				$lista_produtos .= '<td class="text-uppercase">' . utf8_encode($sub_row[ "id" ]) . '</td>';
				$lista_produtos .= '<td class="text-uppercase">' . utf8_encode($sub_row[ "produto" ]) . '</td>';
				$lista_produtos .= '<td class="text-uppercase text-center">R$ ' . $sub_row[ "preco" ] . '</td>';
			}
		}
	}
}
$lista_produtos .= '<div style="clear:both">';
?>

Onde está meu erro ou o que estou deixando de fazer aqui?

Segue imagem da tela como quero que fique.

 

Obrigado.