<?php include 'views/header.php'; ?>
<div class="container-div">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3>Bienvenido usuario: <b><?php echo htmlspecialchars($username) ?></b></h3>
        <span class="text-muted" id="lastUpdate"></span>
    </div>
    
    <!-- Cards de Resumen -->
    <div class="row">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3 id="totalProductos">0</h3>
                    <p>Productos</p>
                </div>
                <div class="icon">
                    <i class="fa-solid fa-box"></i>
                </div>
                <a href="productos.php" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3 id="totalCategorias">0</h3>
                    <p>Categorías</p>
                </div>
                <div class="icon">
                    <i class="fa-solid fa-list"></i>
                </div>
                <a href="categorias.php" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3 id="totalMarcas">0</h3>
                    <p>Marcas</p>
                </div>
                <div class="icon">
                    <i class="fa-solid fa-tag"></i>
                </div>
                <a href="marcas.php" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3 id="totalDestacados">0</h3>
                    <p>Productos Destacados</p>
                </div>
                <div class="icon">
                    <i class="fa-solid fa-star"></i>
                </div>
                <a href="productos.php?destacados=1" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>

    <!-- Primera fila de Gráficos - SECCIÓN REMOVIDA: Productos por Mes -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Productos Destacados vs No Destacados</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height:300px;">
                        <canvas id="destacadosChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Productos por Categoría</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Distribución de productos por categoría">
                            <i class="fas fa-info-circle"></i>
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height:300px;">
                        <canvas id="categoriasPieChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Segunda fila de Gráficos -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Productos por Marca</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Distribución de productos por marca">
                            <i class="fas fa-info-circle"></i>
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height:300px;">
                        <canvas id="marcasChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Distribución por Rango de Precios</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Distribución de productos por rango de precios">
                            <i class="fas fa-info-circle"></i>
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height:300px;">
                        <canvas id="preciosChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tercera fila - Top productos -->
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Top 5 Productos por Precio</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <ul class="products-list product-list-in-card pl-2 pr-2" id="topProductosList">
                        <!-- Los productos se cargarán aquí dinámicamente -->
                        <li class="item placeholder-glow">
                            <div class="product-img">
                                <div class="placeholder col-12 h-100"></div>
                            </div>
                            <div class="product-info">
                                <span class="product-title placeholder col-7"></span>
                                <span class="product-description placeholder col-5"></span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="card-footer text-center">
                    <a href="productos.php" class="uppercase">Ver todos los productos</a>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <!-- Espacio para otro widget o gráfico futuro -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Estadísticas Adicionales</h3>
                </div>
                <div class="card-body text-center">
                    <p class="text-muted">Próximamente más estadísticas</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de últimos productos -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Últimos Productos Agregados</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <table id="productosTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Imagen</th>
                                <th>Nombre</th>
                                <th>Precio</th>
                                <th>SKU</th>
                                <th>Categoría</th>
                                <th>Marca</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Los datos se cargarán dinámicamente -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include 'views/footer.php'; ?>