{% extends "layouts/dashboard.twig" %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Estatísticas de Afiliados</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="/admin/dashboard">Dashboard</a></li>
        <li class="breadcrumb-item active">Estatísticas</li>
    </ol>

    {% include '@affiliatesadmin/nav.twig' %}

    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">Total de Afiliados</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <h4 class="mb-0">{{ stats.total_affiliates ?? 0 }}</h4>
                    <i class="bi bi-people-fill fs-2 opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">Comissões Aprovadas</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <h4 class="mb-0">R$ {{ stats.total_commissions_approved ?? 0|number_format(2, ',', '.') }}</h4>
                    <i class="bi bi-cash-stack fs-2 opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">Cliques nos Banners</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <h4 class="mb-0">{{ stats.total_clicks ?? 0 }}</h4>
                    <i class="bi bi-mouse2 fs-2 opacity-50"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-info text-white mb-4">
                <div class="card-body">Conversão Média</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <h4 class="mb-0">{{ stats.conversion_rate ?? 0 }}%</h4>
                    <i class="bi bi-graph-up-arrow fs-2 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-graph-up me-1"></i>
            Gráfico de Ganhos por Mês
        </div>
        <div class="card-body">
            <canvas id="myAreaChart" width="100%" height="40"></canvas>
        </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var ctx = document.getElementById("myAreaChart");
            if (ctx) {
                var myLineChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                        datasets: [{
                            label: "Comissões (R$)",
                            lineTension: 0.3,
                            backgroundColor: "rgba(78, 115, 223, 0.05)",
                            borderColor: "rgba(78, 115, 223, 1)",
                            pointRadius: 3,
                            pointBackgroundColor: "rgba(78, 115, 223, 1)",
                            pointBorderColor: "rgba(78, 115, 223, 1)",
                            pointHoverRadius: 3,
                            pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                            pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                            pointHitRadius: 10,
                            pointBorderWidth: 2,
                            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // Dados reais viriam do controller
                        }],
                    },
                    options: {
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        });
    </script>
{% endblock %}