<main class="flex-1 p-4 bg-purple-50">
    <h1 class="text-xl font-semibold mb-2 text-[#333]">Program Afiliasi</h1>
    <span class="text-md text-gray-500 mb-4 block">Semua informasi mengenai program afiliasi bisa kamu lihat disini.</span>
    <?php
    // Define all cards and their configurations
    $allCards = [
        'approved_affiliate' => [
            'bg' => 'green',
            'title' => 'Disetujui',
            'info' => 'Jumlah Affiliate yang sudah disetujui.',
            'icon' => 'users',
            'data' => $approved_affiliate,
            'link' => base_url('admin/affiliate/manage?tab=approve')
        ],
        'pending_affiliate' => [
            'bg' => 'gray',
            'title' => 'Menunggu Persetujuan',
            'info' => 'Jumlah Affiliate yang menunggu persetujuan.',
            'icon' => 'users',
            'data' => $pending_affiliate,
            'link' => base_url('admin/affiliate/manage?tab=waiting')
        ],
        'rejected_affiliate' => [
            'bg' => 'red',
            'title' => 'Ditolak',
            'info' => 'Jumlah Affiliate yang tidak disetujui.',
            'icon' => 'users',
            'data' => $rejected_affiliate,
            'link' => base_url('admin/affiliate/manage?tab=rejected')
        ],
        'affiliate_transactions' => [
            'bg' => 'blue',
            'title' => 'Transaksi Affiliate',
            'info' => 'Jumlah transaksi yang berasal dari kode referral affiliate.',
            'icon' => 'shopping-cart',
            'data' => $affiliate_transactions,
            'link' => base_url('admin/affiliate/transactions')
        ],
        'paid_commission' => [
            'bg' => 'green',
            'title' => 'Komisi Dibayar',
            'info' => 'Jumlah komisi yang sudah dibayar.',
            'icon' => 'dollar-sign',
            'data' => 'Rp ' . number_format($paid_commission, 0, ',', '.'),
            'link' => base_url('admin/affiliate/commission?tab=paid')
        ],
        'top_affiliate' => [
            'bg' => 'green',
            'title' => 'Top Affiliate',
            'info' => 'Affiliate paling gacor.',
            'icon' => 'award',
            'data' => $top_affiliate,
            'is_string' => true,
            'link' => null
        ],

    ];

    // Define which cards are visible to each role
    $roleCards = [
        'super_admin' => [
            'approved_affiliate',
            'pending_affiliate',
            'rejected_affiliate',
            'affiliate_transactions',
            'paid_commission',
            'top_affiliate'
        ], // All cards
        'gsa' => [
            'approved_affiliate',
            'pending_affiliate',
            'rejected_affiliate',
            'affiliate_transactions',
            'paid_commission',
            'top_affiliate'
        ],
        'marketing' => [
            'approved_affiliate',
            'pending_affiliate',
            'rejected_affiliate',
            'affiliate_transactions',
            'paid_commission',
            'top_affiliate'
        ],
        'gudang' => [
            'approved_affiliate',
            'pending_affiliate',
            'rejected_affiliate',
            'affiliate_transactions',
            'paid_commission',
            'top_affiliate'
        ],
        'finance' => [
            'approved_affiliate',
            'pending_affiliate',
            'rejected_affiliate',
            'affiliate_transactions',
            'paid_commission',
            'top_affiliate'
        ]
    ];

    // Get cards for current role (if super_admin, show all cards)
    $cardsToShow = ($role === 'super_admin') ? $roleCards['super_admin'] : (isset($roleCards[$role]) ? $roleCards[$role] : []);
    ?>

    <?php if (!empty($cardsToShow)): ?>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php foreach ($cardsToShow as $cardKey): ?>
                <?php if (isset($allCards[$cardKey])): ?>
                    <?php $card = $allCards[$cardKey]; ?>
                    <div class="bg-white rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl hover:translate-y-px overflow-visible">
                        <div class="bg-<?= $card['bg'] ?>-100 p-3">
                            <div class="flex justify-between items-center">
                                <h3 class="font-medium text-<?= $card['bg'] ?>-800"><?= $card['title'] ?></h3>
                                <div class="relative group">
                                    <i data-feather="info" class="text-<?= $card['bg'] ?>-500 w-5 h-5"></i>
                                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 text-white text-sm rounded p-2 w-48 right-0 -mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 overflow-visible">
                                        <?= $card['info'] ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="flex items-center">
                                <div class="mr-4 bg-<?= $card['bg'] ?>-500 text-white p-3 rounded-full">
                                    <i data-feather="<?= $card['icon'] ?>" class="w-6 h-6"></i>
                                </div>
                                <div>
                                    <?php if (isset($card['is_string']) && $card['is_string']): ?>
                                        <div class="text-3xl font-bold"><?= $card['data'] ?></div>
                                    <?php else: ?>
                                        <span class="text-gray-500 text-sm">Total</span>
                                        <div class="text-3xl font-bold"><?= $card['data'] ?></div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php if ($card['link']): ?>
                                <a href="<?= $card['link'] ?>" class="mt-4 block text-center text-<?= $card['bg'] ?>-600 hover:text-<?= $card['bg'] ?>-800 text-sm font-medium">
                                    Lihat Semua <i data-feather="arrow-right" class="inline w-4 h-4"></i>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</main>