<?php
session_start();
if(!isset($_SESSION['usuario'])) {
    header('Location: login.php');
    exit();
}
include 'conexao.php';

// Totais
$resProdutos = mysqli_query($conn, "SELECT COUNT(*) as total FROM produtos");
$total_produtos = $resProdutos ? mysqli_fetch_assoc($resProdutos)['total'] : 0;

// Total de itens em estoque (quantidade)
$resEstoque = mysqli_query($conn, "SELECT SUM(quantidade) as total_estoque FROM produtos");
$rowEstoque = $resEstoque ? mysqli_fetch_assoc($resEstoque) : null;
$total_estoque = $rowEstoque ? $rowEstoque['total_estoque'] : 0;

// Total vendido (soma da coluna total da tabela pedidos)
$resVendas = mysqli_query($conn, "SELECT SUM(total) as total_vendido FROM pedidos");
$rowVendas = $resVendas ? mysqli_fetch_assoc($resVendas) : null;
$total_vendido = $rowVendas && $rowVendas['total_vendido'] ? $rowVendas['total_vendido'] : 0;

// Total vendas HOJE
$hoje = date('Y-m-d');
$resVendasHoje = mysqli_query($conn, "SELECT SUM(total) as total_vendas_hoje FROM pedidos WHERE DATE(data) = '$hoje'");
$rowVendasHoje = $resVendasHoje ? mysqli_fetch_assoc($resVendasHoje) : null;
$total_vendas_hoje = $rowVendasHoje && $rowVendasHoje['total_vendas_hoje'] ? $rowVendasHoje['total_vendas_hoje'] : 0;

$resSemFoto = mysqli_query($conn, "SELECT COUNT(*) as sem_foto FROM produtos WHERE foto IS NULL OR foto = ''");
$total_sem_foto = $resSemFoto ? mysqli_fetch_assoc($resSemFoto)['sem_foto'] : 0;
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Dashboard - Mercadinho Pajeú</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Google Fonts & Material Icons -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Tema escuro customizado -->
    <link rel="shortcut icon" href="logo.png"/>
    <style>
        body {
            font-family: 'Roboto', Arial, sans-serif;
            margin: 0;
            background: #1a2332;
            color: #fff;
        }
        .sidebar {
            position: fixed;
            left: 0; top: 0; bottom: 0;
            width: 240px;
            background: linear-gradient(180deg, #A20000 0%, #8B0000 100%);
            border-right: 1px solid #8B0000;
            z-index: 100;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .sidebar .logo-area {
            display: flex;
            align-items: center;
            padding: 24px 28px 20px 28px;
            border-bottom: 1px solid #ffc107;
        }
        .sidebar .logo-area img {
            width: 44px; height: 44px; object-fit: contain;
            border-radius: 8px; margin-right: 14px; background: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
        .sidebar .logo-title {
            font-weight: 700; font-size: 1.22em; color: #ffc107;
            letter-spacing: 1px;
        }
        .sidebar nav {
            flex: 1;
        }
        .sidebar ul {
            padding: 0; margin: 0; list-style: none;
        }
        .sidebar li {
            margin: 7px 0;
        }
        .sidebar a {
            display: flex; align-items: center;
            color: #fff;
            text-decoration: none;
            padding: 12px 30px;
            font-size: 1.07em;
            border-left: 4px solid transparent;
            transition: background 0.18s, border-color 0.18s, color 0.18s;
        }
        .sidebar a.active, .sidebar a:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #ffc107;
            border-left: 4px solid #ffc107;
        }
        .sidebar .material-icons {
            margin-right: 18px;
            font-size: 23px;
        }
        .sidebar .user-box {
            padding: 22px 24px 16px 24px;
            border-top: 1px solid #ffc107;
            background: #8B0000;
            text-align: center;
        }
        .sidebar .user-box strong {
            color: #fff;
            font-size: 1.08em;
            font-weight: 500;
        }
        .sidebar .user-box small {
            color: #ffc107; font-size: 0.98em;
        }
        .main-content {
            margin-left: 240px;
            min-height: 100vh;
            background: #191c24;
        }
        .appbar {
            background: #A20000;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 7px 0 rgba(0,0,0,0.3);
            padding: 0 32px;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .appbar .title {
            font-weight: 500;
            color: #ffc107;
            font-size: 1.13em;
        }
        .appbar .material-icons {
            color: #ffc107;
            vertical-align: middle;
        }
        .dashboard-header {
            margin: 36px 0 20px 0;
            font-size: 1.4em;
            color: #fff;
            font-weight: 500;
            letter-spacing: 0.5px;
            padding-left: 18px;
        }
        .cards-row {
            display: flex;
            gap: 32px;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin: 0 0 38px 16px;
        }
        .card {
            background: linear-gradient(135deg, #8B0000 0%, #A20000 100%);
            border-radius: 14px;
            box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(162, 0, 0, 0.2);
            padding: 26px 32px 20px 28px;
            min-width: 230px;
            max-width: 300px;
            flex: 1 1 230px;
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            transition: box-shadow 0.2s;
        }
        .card:active {
            box-shadow: inset 4px 4px 10px rgba(0,0,0,0.4), inset -4px -4px 10px rgba(162, 0, 0, 0.2);
        }
        .card .icon-wrap.prod { background: #550000; color: #ffc107; }
        .card .icon-wrap.cod  { background: #550000; color: #ffc107; }
        .card .icon-wrap.val  { background: #550000; color: #ffc107; }
        .card .icon-wrap.sem  { background: #550000; color: #ffc107; }
        .card .card-value.prod { color: #fff; }
        .card .card-value.cod { color: #fff; }
        .card .card-value.val { color: #fff; }
        .card .card-value.semfoto { color: #fff; }
        .card .icon-wrap {
            border-radius: 50%;
            width: 54px; height: 54px;
            display: flex; align-items: center; justify-content: center;
            margin-right: 24px;
            font-size: 2.1em;
        }
        .card .card-info {
            flex: 1;
        }
        .card .card-title {
            color: #eee;
            font-size: 1em;
            font-weight: 400;
            margin-bottom: 5px;
        }
        .card .card-value {
            font-size: 2.05em;
            font-weight: 600;
        }
        @media (max-width: 1100px) {
            .main-content { margin-left: 0; }
            .sidebar { position: static; width: 100%; height: auto; border-right: none; box-shadow: none;}
            .cards-row { margin-left: 0; }
        }
        @media (max-width: 850px) {
            .cards-row { flex-direction: column; gap: 0; }
            .card { max-width: 100%; }
        }
        @media (max-width: 700px) {
            .appbar { padding: 0 10px; }
            .dashboard-header { font-size: 1.08em; padding-left: 7px; margin:24px 0 14px 0;}
            .card { padding: 18px 10px 12px 12px; }
        }
    </style>
</head>
<body>
    <aside class="sidebar">
        <div class="logo-area">
            <img src="logo.png" alt="Logo">
            <span class="logo-title">Mercadinho Pajeú</span>
        </div>
        <nav>
            <ul>
                <li><a href="dashboard.php" class="active"><span class="material-icons">dashboard</span>Dashboard</a></li>
                <li><a href="produtos.php"><span class="material-icons">edit</span>Editar Produtos</a></li>
                
                <li><a href="pedidos.php"><span class="material-icons">list_alt</span>Pedidos</a></li>
                <li><a href="logout.php"><span class="material-icons">logout</span>Sair</a></li>
            </ul>
        </nav>
        <div class="user-box">
            <strong><?php echo htmlspecialchars($_SESSION['usuario']); ?></strong><br>
            <small>Administrador</small>
        </div>
    </aside>
    <div class="main-content">
        <header class="appbar">
            <span class="title">Painel Administrativo</span>
            <span class="material-icons">account_circle</span>
        </header>
        <div class="dashboard-header">
            Bem-vindo, <strong><?php echo htmlspecialchars($_SESSION['usuario']); ?></strong>!
        </div>
        <div class="cards-row">
            <div class="card">
                <div class="icon-wrap prod">
                    <span class="material-icons">inventory_2</span>
                </div>
                <div class="card-info">
                    <div class="card-title">Total de Produtos</div>
                    <div class="card-value prod"><?php echo $total_produtos; ?></div>
                </div>
            </div>
            <div class="card">
                <div class="icon-wrap cod">
                    <span class="material-icons">qr_code</span>
                </div>
                <div class="card-info">
                    <div class="card-title">Total Vendas Hoje<br><small>(<?php echo date('d/m/Y'); ?>)</small></div>
                    <div class="card-value cod">R$ <?php echo number_format($total_vendas_hoje, 2, ',', '.'); ?></div>
                </div>
            </div>
            <div class="card">
                <div class="icon-wrap val">
                    <span class="material-icons">attach_money</span>
                </div>
                <div class="card-info">
                    <div class="card-title">Total Vendido</div>
                    <div class="card-value val">R$ <?php echo number_format($total_vendido, 2, ',', '.'); ?></div>
                </div>
            </div>
            <div class="card">
                <div class="icon-wrap sem">
                    <span class="material-icons">image_not_supported</span>
                </div>
                <div class="card-info">
                    <div class="card-title">Produtos sem Foto</div>
                    <div class="card-value semfoto"><?php echo $total_sem_foto; ?></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>