<?php include "views/templates/header.php";?>
<style>
        .card-header {
            display: flex;
            justify-content: space-between;
        }
        .page-content {
            display: none;
        }
        .active-page {
            display: block;
        }
    </style>
<div class="container mt-2">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title page-toggle btn" data-target="page1" onclick="toggleTable(this)" >Actualizar Productos</h5>
                    <h5 class="card-title page-toggle btn" data-target="page2" onclick="toggleTable(this)" >Productos por agotar</h5>
                </div>
                <div class="card-body">
                    <div class="page-content active-page" id="page1">
                        <div class="table-responsive">
                            <table class="table table-light" id="tblProductosActualizar" style="width:100%">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>id</th>
                                        <th>Codigo</th>
                                        <th>Imagen</th>
                                        <th>Producto</th>
                                        <th>Precio</th>
                                        <th>Stock</th>
                                        <th>estado</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Contenido de la tabla 1 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="page-content" id="page2">
                        <!-- Contenido de la tabla 2 -->
                        <p>Contenido de la página 'Productos por agotar' aquí.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    function toggleTable(element) {
        var target = element.getAttribute("data-target");
        $(".page-content").removeClass("active-page");
        $("#" + target).addClass("active-page");
    }
</script>

<?php include "views/templates/footer.php"; ?>