<?php
// Conexão com o banco de dados
// Nota: Autenticação já verificada em dashboard/index.php
require_once __DIR__ . '/../../config/config_db.php';

// Recebe o intervalo selecionado (7, 14, 30 dias ou personalizado) via GET ou define como padrão "7 dias"
$intervalo_tipo = isset($_GET['intervalo_tipo']) ? $_GET['intervalo_tipo'] : 'padrao';
$intervalo_dias = isset($_GET['dias']) ? intval($_GET['dias']) : 7;

// Datas para filtro personalizado
$data_inicio = isset($_GET['data_inicio']) ? $_GET['data_inicio'] : null;
$data_fim = isset($_GET['data_fim']) ? $_GET['data_fim'] : null;

// Formata as datas para exibição
$period_display = '';
if ($intervalo_tipo === 'personalizado' && $data_inicio && $data_fim) {
    $data_inicio_obj = new DateTime($data_inicio);
    $data_fim_obj = new DateTime($data_fim);
    $period_display = "De " . $data_inicio_obj->format('d/m/Y') . " até " . $data_fim_obj->format('d/m/Y');
} else {
    $period_display = "Últimos " . $intervalo_dias . " dias";
}

// Recebe o produto selecionado via GET (ou "Todos os Produtos" como padrão)
$produto_descricao = isset($_GET['produto_descricao']) ? $_GET['produto_descricao'] : 'Todos os Produtos';

// Filtro condicional para o produto
$filtro_produto = $produto_descricao !== 'Todos os Produtos' ? "AND descricao = :produto_descricao" : "";

// Prepara a condição de data baseada no tipo de intervalo
$condicao_data = "";
$params = [];

if ($intervalo_tipo === 'personalizado' && $data_inicio && $data_fim) {
    $condicao_data = "AND created_at BETWEEN :data_inicio AND :data_fim";
    $params[':data_inicio'] = $data_inicio . ' 00:00:00';
    $params[':data_fim'] = $data_fim . ' 23:59:59';
} else {
    $condicao_data = "AND created_at >= NOW() - INTERVAL :intervalo DAY";
    $params[':intervalo'] = $intervalo_dias;
}

// Adiciona o parâmetro do produto se necessário
if ($produto_descricao !== 'Todos os Produtos') {
    $params[':produto_descricao'] = $produto_descricao;
}

// Consulta para calcular o total de vendas com status "Aprovado" (pedidos pagos)
$sql_total_vendas = "SELECT COUNT(*) AS total_vendas 
                     FROM transacoes 
                     WHERE status = 'Aprovado' 
                     $condicao_data 
                     $filtro_produto";
$stmt = $pdo->prepare($sql_total_vendas);
$stmt->execute($params);
$total_vendas = $stmt->fetch(PDO::FETCH_ASSOC)['total_vendas'] ?: 0;

// Consulta para calcular a receita (valor total das transações aprovadas, ou seja, pedidos pagos)
$sql_receita = "SELECT SUM(valor) AS total_receita 
                FROM transacoes 
                WHERE status = 'Aprovado' 
                $condicao_data 
                $filtro_produto";
$stmt = $pdo->prepare($sql_receita);
$stmt->execute($params);
$total_receita = $stmt->fetch(PDO::FETCH_ASSOC)['total_receita'] ?: 0;

// Consulta para calcular o total de pedidos gerados (faturamento total, independentemente do status)
$sql_total_pedidos = "SELECT SUM(valor) AS total_pedidos 
                      FROM transacoes 
                      WHERE 1=1 
                      $condicao_data 
                      $filtro_produto";
$stmt = $pdo->prepare($sql_total_pedidos);
$stmt->execute($params);
$total_pedidos = $stmt->fetch(PDO::FETCH_ASSOC)['total_pedidos'] ?: 0;

// Consulta para obter as vendas no intervalo selecionado com status "Aprovado" (pedidos pagos)
$sql_receita_intervalo = "SELECT DATE(created_at) AS data, COUNT(*) AS vendas 
                          FROM transacoes 
                          WHERE status = 'Aprovado' 
                          $condicao_data 
                          $filtro_produto
                          GROUP BY DATE(created_at)";
$stmt = $pdo->prepare($sql_receita_intervalo);
$stmt->execute($params);
$receita_intervalo = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Inicializa o array de dias baseado no intervalo selecionado
$intervalo_datas = [];
if ($intervalo_tipo === 'personalizado' && $data_inicio && $data_fim) {
    // Para intervalo personalizado, use as datas selecionadas
    $inicio = new DateTime($data_inicio);
    $fim = new DateTime($data_fim);
    $fim->modify('+1 day'); // Para incluir o último dia
    
    $periodo = new DatePeriod(
        $inicio,
        new DateInterval('P1D'),
        $fim
    );
    
    foreach ($periodo as $dia) {
        $intervalo_datas[$dia->format('Y-m-d')] = 0;
    }
} else {
    // Para intervalos padrão (últimos X dias)
    $hoje = new DateTime();
    for ($i = $intervalo_dias - 1; $i >= 0; $i--) {
        $dia = clone $hoje;
        $dia->modify("-$i days");
        $intervalo_datas[$dia->format('Y-m-d')] = 0;
    }
}

// Atualiza os dados do intervalo com as vendas reais (apenas pedidos pagos)
foreach ($receita_intervalo as $venda) {
    $data = $venda['data'];
    $vendas = $venda['vendas'];
    if (isset($intervalo_datas[$data])) {
        $intervalo_datas[$data] = $vendas;
    }
}

// Formata os dados para exibição no gráfico
$labels = array_map(function ($data) {
    return (new DateTime($data))->format('d/m'); // Formata como dia/mês
}, array_keys($intervalo_datas));
$vendas = array_values($intervalo_datas);

// Consulta para listar os produtos (usando nomes da tabela `produtos`)
$sql_produtos = "SELECT DISTINCT nome FROM produtos ORDER BY nome ASC";
$stmt = $pdo->query($sql_produtos);
$produtos = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Consultas para calcular taxas de conversão por método de pagamento
// PIX - Número total de tentativas de pagamento por PIX
$sql_total_pix = "SELECT COUNT(*) AS total 
                 FROM transacoes 
                 WHERE tipo_pagamento = 'pix' 
                 $condicao_data 
                 $filtro_produto";
$stmt = $pdo->prepare($sql_total_pix);
$stmt->execute($params);
$total_pix = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?: 0;

// PIX - Número de pagamentos aprovados por PIX
$sql_aprovados_pix = "SELECT COUNT(*) AS total 
                      FROM transacoes 
                      WHERE tipo_pagamento = 'pix' 
                      AND status = 'Aprovado' 
                      $condicao_data 
                      $filtro_produto";
$stmt = $pdo->prepare($sql_aprovados_pix);
$stmt->execute($params);
$aprovados_pix = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?: 0;

// Cartão - Número total de tentativas de pagamento por cartão
$sql_total_cartao = "SELECT COUNT(*) AS total 
                     FROM transacoes 
                     WHERE (tipo_pagamento = 'credit_card' OR tipo_pagamento = 'Cartão de Crédito')
                     $condicao_data 
                     $filtro_produto";
$stmt = $pdo->prepare($sql_total_cartao);
$stmt->execute($params);
$total_cartao = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?: 0;

// Cartão - Número de pagamentos aprovados por cartão
$sql_aprovados_cartao = "SELECT COUNT(*) AS total 
                         FROM transacoes 
                         WHERE (tipo_pagamento = 'credit_card' OR tipo_pagamento = 'Cartão de Crédito')
                         AND status = 'Aprovado' 
                         $condicao_data 
                         $filtro_produto";
$stmt = $pdo->prepare($sql_aprovados_cartao);
$stmt->execute($params);
$aprovados_cartao = $stmt->fetch(PDO::FETCH_ASSOC)['total'] ?: 0;

// Cálculo das taxas de conversão por método de pagamento
$taxa_conversao_pix = ($total_pix > 0) ? ($aprovados_pix / $total_pix) * 100 : 0;
$taxa_conversao_cartao = ($total_cartao > 0) ? ($aprovados_cartao / $total_cartao) * 100 : 0;

// Cálculo da taxa de conversão geral
$total_aprovados = $aprovados_pix + $aprovados_cartao;
$total_tentativas = $total_pix + $total_cartao;
$taxa_conversao = ($total_tentativas > 0) ? ($total_aprovados / $total_tentativas) * 100 : 0;

// Cálculo do ticket médio
$ticket_medio = ($total_vendas > 0) ? $total_receita / $total_vendas : 0;
?>

<style>
    :root {
        /* Tema Padrão (Light) */
        --primary-color: #009846;
        --primary-light: #00A85A;
        --primary-dark: #007635;
        --accent-color: #FF5722;
        --success-color: #4CAF50;
        --warning-color: #FFC107;
        --danger-color: #F44336;
        --info-color: #2196F3;
        --text-primary: #212121;
        --text-secondary: #757575;
        --text-muted: #9E9E9E;
        --bg-light: #f4f4f4;
        --bg-white: var(--bg-card, #FFFFFF);
        --border-color: var(--border-color, #E0E0E0);
        --border-radius: 8px;
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
        --transition: all 0.3s ease;
        
        /* Cores de Gráficos */
        --chart-tooltip-bg: rgba(255, 255, 255, 0.9);
        --chart-tooltip-color: #212121;
        --chart-grid-color: rgba(224, 224, 224, 0.5);
        
        /* Cores de Pagamento */
        --pix-color: #009846;
        --cartao-color: #E91E63;
        --outros-color: #607D8B;
        --bg-progress-bar: #e0e0e0;
    }

    /* TEMA DARK (Sobrescreve as variáveis acima) */
    [data-theme="dark"] {
        --text-primary: #e0e0e0;
        --text-secondary: #9ca3af;
        --text-muted: #6b7280;
        
        --bg-light: var(--bg-body, #020617); /* Fundo Geral */
        --bg-white: var(--bg-card, #0f172a); /* Fundo Cards - Herda customização */
        
        --border-color: var(--border-color, #334155);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        
        /* Ajuste de gráficos para escuro */
        --chart-tooltip-bg: rgba(30, 41, 59, 0.95);
        --chart-tooltip-color: #ffffff;
        --chart-grid-color: rgba(255, 255, 255, 0.1);
        --bg-progress-bar: #1e293b;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
    }

    .dashboard-container {
        padding: 20px;
        background: var(--bg-dashboard, var(--bg-body, var(--bg-light, #f3f4f6)));
        min-height: 100vh;
        transition: background 0.3s ease;
    }

    .dashboard-header {
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        background-color: var(--bg-white);
        padding: 20px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-color);
    }

    .dashboard-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .dashboard-subtitle {
        color: var(--text-secondary);
        font-size: 14px;
        margin-top: 4px;
    }

    .filter-container {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }

    .filter-select {
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        font-size: 14px;
        color: var(--text-primary);
        background-color: var(--bg-white);
        outline: none;
        transition: var(--transition);
        min-width: 160px;
    }
    
    /* Correção do calendário no modo escuro */
    [data-theme="dark"] .filter-select::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }

    .filter-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(0, 152, 70, 0.1);
    }

    .filter-button {
        padding: 10px 20px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: var(--border-radius);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .filter-button:hover {
        background-color: var(--primary-dark);
    }

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 24px;
    }

    .stat-card {
        background-color: var(--bg-white);
        border-radius: var(--border-radius);
        padding: 20px;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid var(--border-color);
    }

    .stat-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .dashboard-section {
        margin-bottom: 24px;
    }

    .section-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }

    .stat-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    .stat-card-title {
        font-size: 14px;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .stat-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    .icon-sales { background-color: rgba(0, 152, 70, 0.1); color: var(--primary-color); }
    .icon-revenue { background-color: rgba(76, 175, 80, 0.1); color: var(--success-color); }
    .icon-orders { background-color: rgba(33, 150, 243, 0.1); color: var(--info-color); }
    .icon-conversion { background-color: rgba(255, 87, 34, 0.1); color: var(--accent-color); }
    .icon-ticket { background-color: rgba(255, 193, 7, 0.1); color: var(--warning-color); }

    .stat-card-value {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
    }

    .stat-card-description {
        font-size: 12px;
        color: var(--text-muted);
    }

    .chart-container {
        background-color: var(--bg-white);
        border-radius: var(--border-radius);
        padding: 24px;
        box-shadow: var(--shadow-sm);
        margin-bottom: 24px;
        border: 1px solid var(--border-color);
    }

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .chart-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .chart-period {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .chart-wrapper {
        position: relative;
        height: 350px;
        width: 100%;
    }

    /* Estilos específicos para o comparativo de conversão */
    .progress-bar-container { margin: 15px 0; }
    .progress-bar-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }
    .progress-bar-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
    }
    .progress-bar-value {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .progress-bar-bg {
        height: 8px;
        background-color: var(--bg-progress-bar);
        border-radius: 4px;
        overflow: hidden;
    }
    .progress-bar { height: 100%; border-radius: 4px; }
    .progress-bar-pix { background-color: var(--pix-color); }
    .progress-bar-cartao { background-color: var(--cartao-color); }
    .progress-bar-geral { background-color: var(--primary-color); }

    @media (max-width: 768px) {
        .dashboard-header {
            flex-direction: column;
            align-items: flex-start;
        }
        .filter-container {
            width: 100%;
        }
        .card-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="dashboard-container">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">Dashboard de Análises</h1>
            <p class="dashboard-subtitle">
                <?php if ($produto_descricao !== 'Todos os Produtos'): ?>
                    Análise de <?= htmlspecialchars($produto_descricao); ?> - <?= $period_display; ?>
                <?php else: ?>
                    Análise geral - <?= $period_display; ?>
                <?php endif; ?>
            </p>
        </div>
        <form method="GET" action="" class="filter-container">
            <select name="produto_descricao" class="filter-select">
                <option value="Todos os Produtos">Todos os Produtos</option>
                <?php foreach ($produtos as $produto): ?>
                    <option value="<?= htmlspecialchars($produto['nome']); ?>" <?= $produto_descricao === $produto['nome'] ? 'selected' : ''; ?>>
                        <?= htmlspecialchars($produto['nome']); ?>
                    </option>
                <?php endforeach; ?>
            </select>
            
            <select name="intervalo_tipo" id="intervalo_tipo" class="filter-select" onchange="toggleDateFilters()">
                <option value="padrao" <?= $intervalo_tipo == 'padrao' ? 'selected' : ''; ?>>Período predefinido</option>
                <option value="personalizado" <?= $intervalo_tipo == 'personalizado' ? 'selected' : ''; ?>>Período personalizado</option>
            </select>
            
            <div id="filtro_padrao" style="<?= $intervalo_tipo == 'personalizado' ? 'display:none;' : ''; ?>">
                <select name="dias" class="filter-select">
                    <option value="7" <?= $intervalo_dias == 7 ? 'selected' : ''; ?>>Últimos 7 dias</option>
                    <option value="14" <?= $intervalo_dias == 14 ? 'selected' : ''; ?>>Últimos 14 dias</option>
                    <option value="30" <?= $intervalo_dias == 30 ? 'selected' : ''; ?>>Últimos 30 dias</option>
                </select>
            </div>
            
            <div id="filtro_personalizado" style="<?= $intervalo_tipo == 'personalizado' ? 'display:flex;' : 'display:none;'; ?> gap: 10px;">
                <div>
                    <label for="data_inicio" style="display: block; font-size: 12px; margin-bottom: 4px; color: var(--text-secondary);">Data inicial</label>
                    <input type="date" id="data_inicio" name="data_inicio" class="filter-select" value="<?= $data_inicio ?? ''; ?>">
                </div>
                <div>
                    <label for="data_fim" style="display: block; font-size: 12px; margin-bottom: 4px; color: var(--text-secondary);">Data final</label>
                    <input type="date" id="data_fim" name="data_fim" class="filter-select" value="<?= $data_fim ?? ''; ?>">
                </div>
            </div>
            
            <button type="submit" class="filter-button">
                <i class="fas fa-filter"></i>
                Filtrar
            </button>
        </form>
    </div>

    <div class="card-grid">
        <div class="stat-card">
            <div class="stat-card-header">
                <h3 class="stat-card-title">Total de Vendas</h3>
                <div class="stat-card-icon icon-sales">
                    <i class="fas fa-shopping-cart"></i>
                </div>
            </div>
            <div class="stat-card-value"><?= $total_vendas; ?></div>
            <div class="stat-card-description">Pedidos com status "Aprovado"</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-header">
                <h3 class="stat-card-title">Receita Total</h3>
                <div class="stat-card-icon icon-revenue">
                    <i class="fas fa-dollar-sign"></i>
                </div>
            </div>
            <div class="stat-card-value">R$ <?= number_format($total_receita, 2, ',', '.'); ?></div>
            <div class="stat-card-description">Valor dos pedidos pagos</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-header">
                <h3 class="stat-card-title">Faturamento Total</h3>
                <div class="stat-card-icon icon-orders">
                    <i class="fas fa-receipt"></i>
                </div>
            </div>
            <div class="stat-card-value">R$ <?= number_format($total_pedidos, 2, ',', '.'); ?></div>
            <div class="stat-card-description">Valor de todos os pedidos gerados</div>
        </div>

        <div class="stat-card">
            <div class="stat-card-header">
                <h3 class="stat-card-title">Ticket Médio</h3>
                <div class="stat-card-icon icon-ticket">
                    <i class="fas fa-tag"></i>
                </div>
            </div>
            <div class="stat-card-value">R$ <?= number_format($ticket_medio, 2, ',', '.'); ?></div>
            <div class="stat-card-description">Valor médio por venda</div>
        </div>
    </div>
    
    <div class="dashboard-section">
        <h2 class="section-title">Taxas de Conversão</h2>
        <div class="card-grid">
            <div class="stat-card">
                <div class="stat-card-header">
                    <h3 class="stat-card-title">Conversão Geral</h3>
                    <div class="stat-card-icon icon-conversion">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
                <div class="stat-card-value"><?= number_format($taxa_conversao, 1, ',', '.'); ?>%</div>
                <div class="stat-card-description">
                    <?= $total_aprovados; ?> aprovados de <?= $total_tentativas; ?> tentativas
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-card-header">
                    <h3 class="stat-card-title">Conversão PIX</h3>
                    <div class="stat-card-icon" style="background-color: rgba(0, 152, 70, 0.1); color: var(--pix-color);">
                        <i class="fas fa-qrcode"></i>
                    </div>
                </div>
                <div class="stat-card-value"><?= number_format($taxa_conversao_pix, 1, ',', '.'); ?>%</div>
                <div class="stat-card-description">
                    <?= $aprovados_pix; ?> aprovados de <?= $total_pix; ?> tentativas
                </div>
            </div>

            <div class="stat-card">
                <div class="stat-card-header">
                    <h3 class="stat-card-title">Conversão Cartão</h3>
                    <div class="stat-card-icon" style="background-color: rgba(233, 30, 99, 0.1); color: var(--cartao-color);">
                        <i class="fas fa-credit-card"></i>
                    </div>
                </div>
                <div class="stat-card-value"><?= number_format($taxa_conversao_cartao, 1, ',', '.'); ?>%</div>
                <div class="stat-card-description">
                    <?= $aprovados_cartao; ?> aprovados de <?= $total_cartao; ?> tentativas
                </div>
            </div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-header">
            <h3 class="chart-title">Evolução de Vendas</h3>
            <span class="chart-period"><?= $period_display; ?></span>
        </div>
        <div class="chart-wrapper">
            <canvas id="salesChart"></canvas>
        </div>
    </div>
    
    <div class="dashboard-section">
        <h2 class="section-title">Distribuição por Método de Pagamento</h2>
        <div class="card-grid">
            <div class="chart-container" style="grid-column: span 2;">
                <div class="chart-header">
                    <h3 class="chart-title">Vendas por Método de Pagamento</h3>
                </div>
                <div class="chart-wrapper" style="height: 300px;">
                    <canvas id="paymentMethodChart"></canvas>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-card-header">
                    <h3 class="stat-card-title">Comparativo de Conversão</h3>
                </div>
                <div style="display: flex; flex-direction: column; height: 100%; justify-content: center;">
                    <div class="progress-bar-container">
                        <div class="progress-bar-label">
                            <span class="progress-bar-name">PIX</span>
                            <span class="progress-bar-value"><?= number_format($taxa_conversao_pix, 1); ?>%</span>
                        </div>
                        <div class="progress-bar-bg">
                            <div class="progress-bar progress-bar-pix" style="width: <?= min($taxa_conversao_pix, 100); ?>%;"></div>
                        </div>
                    </div>
                    
                    <div class="progress-bar-container">
                        <div class="progress-bar-label">
                            <span class="progress-bar-name">Cartão</span>
                            <span class="progress-bar-value"><?= number_format($taxa_conversao_cartao, 1); ?>%</span>
                        </div>
                        <div class="progress-bar-bg">
                            <div class="progress-bar progress-bar-cartao" style="width: <?= min($taxa_conversao_cartao, 100); ?>%;"></div>
                        </div>
                    </div>
                    
                    <div class="progress-bar-container">
                        <div class="progress-bar-label">
                            <span class="progress-bar-name">Geral</span>
                            <span class="progress-bar-value"><?= number_format($taxa_conversao, 1); ?>%</span>
                        </div>
                        <div class="progress-bar-bg">
                            <div class="progress-bar progress-bar-geral" style="width: <?= min($taxa_conversao, 100); ?>%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// SCRIPT DE CONEXÃO DO TEMA (DARK MODE)
(function() {
    const html = document.documentElement;
    // Tenta pegar o botão do index.php se estiver num iframe ou include
    const mainThemeBtn = window.parent.document.getElementById('themeBtn') || document.getElementById('themeBtn');

    function syncTheme() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            html.setAttribute('data-theme', 'dark');
        } else {
            html.removeAttribute('data-theme');
        }
    }

    // Aplica ao carregar
    syncTheme();

    // Ouve o clique no botão do menu principal
    if(mainThemeBtn) {
        mainThemeBtn.addEventListener('click', function() {
            setTimeout(syncTheme, 50);
        });
    }
})();

// Função para alternar entre filtros padrão e personalizados
function toggleDateFilters() {
    const intervaloTipo = document.getElementById('intervalo_tipo').value;
    const filtroPadrao = document.getElementById('filtro_padrao');
    const filtroPersonalizado = document.getElementById('filtro_personalizado');
    
    if (intervaloTipo === 'personalizado') {
        filtroPadrao.style.display = 'none';
        filtroPersonalizado.style.display = 'flex';
    } else {
        filtroPadrao.style.display = 'block';
        filtroPersonalizado.style.display = 'none';
    }
}

// Verifica se datas estão preenchidas antes de enviar o formulário
document.querySelector('form.filter-container').addEventListener('submit', function(e) {
    const intervaloTipo = document.getElementById('intervalo_tipo').value;
    
    if (intervaloTipo === 'personalizado') {
        const dataInicio = document.getElementById('data_inicio').value;
        const dataFim = document.getElementById('data_fim').value;
        
        if (!dataInicio || !dataFim) {
            e.preventDefault();
            alert('Por favor, preencha ambas as datas para o filtro personalizado.');
        } else {
            const inicio = new Date(dataInicio);
            const fim = new Date(dataFim);
            
            if (inicio > fim) {
                e.preventDefault();
                alert('A data inicial deve ser anterior ou igual à data final.');
            }
        }
    }
});

// Configuração do gráfico de vendas
const ctx = document.getElementById('salesChart').getContext('2d');

// Criar gradiente verde
function createGradient() {
    const gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(0, 152, 70, 0.2)');
    gradient.addColorStop(1, 'rgba(0, 152, 70, 0.02)');
    return gradient;
}

Chart.defaults.font.family = "'Montserrat', sans-serif";
Chart.defaults.font.size = 12;

// Dados do gráfico de vendas
const salesChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: <?= json_encode($labels); ?>,
        datasets: [{
            label: 'Vendas',
            data: <?= json_encode($vendas); ?>,
            backgroundColor: createGradient(),
            borderColor: '#009846',
            borderWidth: 2,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#FFFFFF',
            pointBorderColor: '#009846',
            pointBorderWidth: 2,
            pointRadius: 4,
            pointHoverRadius: 6,
            pointHoverBackgroundColor: '#009846',
            pointHoverBorderColor: '#FFFFFF',
            pointHoverBorderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                mode: 'index',
                intersect: false,
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                titleColor: '#212121',
                bodyColor: '#757575',
                borderColor: '#E0E0E0',
                borderWidth: 1,
                padding: 12,
                cornerRadius: 8,
                titleFont: {
                    size: 14,
                    weight: 'bold'
                },
                bodyFont: {
                    size: 13
                },
                callbacks: {
                    label: function(context) {
                        return `Vendas: ${context.raw}`;
                    }
                }
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false
        },
        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    color: '#9E9E9E',
                    font: {
                        size: 11
                    }
                }
            },
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(224, 224, 224, 0.5)',
                    drawBorder: false
                },
                ticks: {
                    stepSize: 1,
                    color: '#9E9E9E',
                    font: {
                        size: 11
                    },
                    callback: function(value) {
                        return value % 1 === 0 ? value : '';
                    }
                }
            }
        }
    }
});

// Dados para o gráfico de métodos de pagamento
const paymentMethodsCtx = document.getElementById('paymentMethodChart').getContext('2d');
const paymentMethodChart = new Chart(paymentMethodsCtx, {
    type: 'doughnut',
    data: {
        labels: ['PIX', 'Cartão de Crédito', 'Outros'],
        datasets: [{
            data: [<?= $aprovados_pix ?>, <?= $aprovados_cartao ?>, <?= $total_vendas - $aprovados_pix - $aprovados_cartao ?>],
            backgroundColor: ['#009846', '#E91E63', '#607D8B'],
            borderColor: ['#FFFFFF', '#FFFFFF', '#FFFFFF'],
            borderWidth: 2,
            hoverOffset: 10
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '65%',
        plugins: {
            legend: {
                position: 'right',
                labels: {
                    padding: 20,
                    color: '#212121',
                    font: {
                        size: 13,
                        weight: '500'
                    },
                    boxWidth: 15,
                    usePointStyle: true,
                    pointStyle: 'rectRounded'
                }
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
                        const value = context.raw;
                        const percentage = Math.round((value / total) * 100);
                        return `${context.label}: ${value} vendas (${percentage}%)`;
                    }
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                titleColor: '#212121',
                bodyColor: '#757575',
                borderColor: '#E0E0E0',
                borderWidth: 1
            }
        }
    }
});
</script>