
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 g-5 ms-md-5 me-md-5 mt-md-1">
    <?php
        include 'connect.php';
        $sql = "SELECT categoria FROM produtos p GROUP BY p.categoria;";
        $result = $TraceStockDB->query($sql);

        if ($result->rowCount() > 0) {
            while($row = $result->fetch(PDO::FETCH_ASSOC)) {
                $categoria = htmlspecialchars($row['categoria']);
                echo '
                <div class="col">
                    <div class="card shadow-sm h-100 category-card" onclick="OpenModal(this)" 
                        style="background-color: rgba(51, 51, 51, 1); padding:20px; cursor: pointer;" 
                        data-bs-toggle="modal" 
                        data-bs-target="#categoryModal" 
                        data-category="'.$categoria.'">
                        <div class="card-body text-center d-flex flex-column justify-content-center align-items-center" style="color:white;">
                            <h5 class="card-title">'.$categoria.'</h5>
                        </div>
                    </div>
                </div>';
            }
        } else {
            echo "<p>Nenhuma categoria encontrada.</p>";
        }
    ?>
</div>

<!-- Modal Bootstrap -->
<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-dark w-100 text-white">
            <div class="modal-header">
                <h5 class="modal-title" id="categoryModalLabel">Categoria</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p id="modalCategoryName"></p>
                    <div class="row">

                        <div class="col-md-4 border-end">
                            <div class="list-group bg-dark" id="list-tab" role="tablist">
                            <a class="list-group-item list-group-item-action active" id="list-adicionar-list" data-bs-toggle="list" href="#list-adicionar" role="tab">➕ Adicionar</a>
                            <a class="list-group-item list-group-item-action" id="list-remover-list" data-bs-toggle="list" href="#list-remover" role="tab">➖ Remover</a>
                            <a class="list-group-item list-group-item-action" id="list-stock-list" data-bs-toggle="list" href="#list-stock" role="tab">📋 Stock</a>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active p-3" id="list-adicionar" role="tabpanel">
                                    <div>
                                        <form id="form-geral-config">
                                            <h1>Teste 1</h1>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade p-3" id="list-remover" role="tabpanel">
                                    <div>
                                        <form id="form-geral-config">
                                            <h1>Teste 2</h1>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade p-3" id="list-stock" role="tabpanel">
                                    <div>
                                        <form id="form-geral-config">
                                            <h1>Teste 3</h1>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>