<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'AMWDeveloper ( AMWWEB v3.0 )']); ?>

<div class="flex flex-wrap gap-10 justify-center">
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_world.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Jogadores Online</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['charactersonline'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_accounts.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Contas criadas</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['accounts'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_accounts.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Personagens criado</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['characters'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_shield.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Guild's</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['guilds'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_account_bloack.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Contas banidas</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['accountsbanned'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_account_bloack.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Personagens banido</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['charactersbanned'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_vips.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Contas Vip</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['accountsvip'] ?></p>
        </div>
    </div>
    <div class="flex items-center p-2 rounded-lg bg-sky-600 w-64 max-lg:w-48 max-lg:block max-lg:text-center">
        <div class="p-4 rounded-lg bg-sky-900 max-lg:w-16 max-lg:mx-auto">
            <img src="<?= __filesadm('img/icons/c_support.png') ?>" alt="home">
        </div>
        <div class="pl-2">
            <p class="text-white p-1 text-[13px]">Chamados aberto</p>
            <p class="text-white pl-1 text-[22px]"><?= $amount['supports'] ?></p>
        </div>
    </div>
</div>

<div class="p-2 bg-gray-50 w-3/4 mt-6 mx-auto max-lg:w-full">
    <p class="text-gray-900 p-1 text-[13px] text-center">Valor total de doações: <span class="bg-sky-700 py-1 px-3 text-white rounded-lg">R$<?= $amount['payments']['total_deposit']?>.00</span></p>
    <canvas id="payments"></canvas>
</div>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('payments');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['<?= $amount['payments']['month_four']['date'] ?>', '<?= $amount['payments']['month_three']['date'] ?>', '<?= $amount['payments']['month_two']['date'] ?>', '<?= $amount['payments']['month_one']['date'] ?>'],
            datasets: [{
                label: 'Depósitos',
                data: [<?= $amount['payments']['month_four']['value'] ?>, <?= $amount['payments']['month_three']['value'] ?>, <?= $amount['payments']['month_two']['value'] ?>, <?= $amount['payments']['month_one']['value'] ?>],
                fill: false,
                borderColor: '#181d3d',
                tension: 0.1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>