<?php
require_once '../app/Controllers/sessions.php';
require_once '../app/Controllers/security_access.php';
require_once '../app/models/user.php';
require_once '../app/Controllers/controller_investments.php';
require '../app/Controllers/layouts.php';

// Puxar todos indicados LVL 2 do usuário logado
$stmtIndicatedsLvl2 = $pdo->prepare("SELECT * FROM comission_affiliates WHERE affiliate_id = :affiliate_id AND affiliate_lvl = '2' GROUP BY indicated_id");
$stmtIndicatedsLvl2->execute([
    ':affiliate_id' => $user['id']
]);
$resultIndicatedsLvl2 = $stmtIndicatedsLvl2->fetchAll(PDO::FETCH_ASSOC);

$toastMessage = $_SESSION['toastMessage'] ?? null;
$toastType = $_SESSION['toastType'] ?? null;
unset($_SESSION['toastMessage'], $_SESSION['toastType']);
?>
<?php if ($stmtThemesPlatformResult['theme_actual'] === 'brasileira') : ?>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Meus Indicados Nível 2 - <?= htmlspecialchars($stmtConfigsPlatformResult["name_platform"]) ?></title>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="./assets/css/build/tailwind.css" />
        <style>
            .spinner-ring {
                display: inline-block;
                width: 80px;
                height: 80px;
                border: 6px solid transparent;
                border-top-color: <?= htmlspecialchars($stmtConfigsPlatformResult["color_primary"]) ?>;
                /* azul Tailwind blue-600 */
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            button:hover {
                opacity: .9;
            }
        </style>
    </head>

    <body class="bg-gray-100 dark:bg-[#09090A] text-gray-900 dark:text-white font-poppins max-w-[600px] mx-auto">

        <?php if ($toastMessage) : ?>
            <?php if ($toastType === 'success') : ?>
                <div style="z-index:9999"
                    id="toast"
                    class="fixed bottom-4 right-4 z-50 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                    <span><?= htmlspecialchars($toastMessage) ?></span>
                </div>
            <?php elseif ($toastType === 'error') : ?>
                <div style="background-color: red;z-index:9999"
                    id="toast"
                    class="fixed bottom-4 right-4 z-50 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <span><?= htmlspecialchars($toastMessage) ?></span>
                </div>
            <?php endif; ?>
        <?php endif; ?>

        <div id="loading" class="fixed inset-0 flex items-center justify-center bg-white dark:bg-[#121214] z-50">
            <div class="spinner-ring"></div>
        </div>

        <header class="p-4 flex justify-between items-center shadow bg-white dark:bg-[#121214]">
            <h1 class="text-2xl font-bold"><?= htmlspecialchars($stmtConfigsPlatformResult["name_platform"]) ?></h1>
            <a href="payment.php" class="text-sm border px-3 py-1 rounded dark:border-white border-gray-800 font-bold">
                R$ <?= htmlspecialchars(number_format($user['balance'], 2, ',', '.')) ?>
            </a>
        </header>

        <main class="p-6 bg-white dark:bg-[#09090A] min-h-screen">
            <section class="text-center my-6">
                <h2 class="text-3xl font-bold mb-1">Meus Investimentos</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Acompanhe o rendimento dos seus investimentos em tempo real</p>
            </section>

            <section class="flex flex-col gap-4">
                <?php

                if (empty($resultIndicatedsLvl2)) {
                    echo "
                <div style='margin-top: 150px;margin-bottom: 150px' class='flex justify-center items-center'>
                <span class='text-center mt-8'>Você ainda não tem nenhum indicado de Nível 2.</span>
                </div>";
                }
                ?>
                <?php foreach ($resultIndicatedsLvl2 as $indicatedlvl2):
                    if ($inv['is_active'] != 1) continue;

                    $data_inicio = $inv['created_at'];
                    $dias_duracao = $inv['duration_days'];
                    $rendimento_total = $inv['total_return'];
                    $renda_diaria = $rendimento_total / $dias_duracao;

                    $dias_passados = min((int)((strtotime(date('Y-m-d')) - strtotime(date('Y-m-d', strtotime($data_inicio)))) / 86400), $dias_duracao);
                    $dias_ja_pagou = floor($inv['total_paid'] / $renda_diaria);
                    $dias_pendentes = $dias_passados - $dias_ja_pagou;
                    $valor_a_pagar_hoje = max(0, $dias_pendentes * $renda_diaria);

                    $porcentagem = min(100, ($inv['total_paid'] / $rendimento_total) * 100);
                    $valor_faltando = $rendimento_total - $inv['total_paid'];
                    $dias_restantes = $dias_duracao - $dias_passados;
                ?>
                    <div class="bg-white dark:bg-[#121214] p-4 rounded-lg shadow space-y-2 transition-all duration-300">
                        <img src="<?= $inv['img'] ?>" alt="Produto" class="w-16 h-16 rounded object-cover border border-gray-300 dark:border-gray-600">
                        <div class="flex justify-between items-center mb-1">
                            <h3 class="font-semibold text-lg"><?= htmlspecialchars($indicatedlvl2['phone']) ?></h3>
                            <?php if ($valor_a_pagar_hoje > 0): ?>
                                <span class="text-green-500 text-sm font-semibold">+R$ <?= number_format($valor_a_pagar_hoje, 2, ',', '.') ?> recebido hoje</span>
                            <?php else: ?>
                                <span class="text-gray-400 text-sm">Nenhum rendimento hoje</span>
                            <?php endif; ?>
                        </div>

                        <div class="flex items-center gap-4">
                            <div class="text-sm text-gray-700 dark:text-gray-300">
                                <p>Início: <strong><?= date('d/m/Y', strtotime($data_inicio)) ?></strong></p>
                                <p>Lucro diário: <strong>R$ <?= number_format($renda_diaria, 2, ',', '.') ?></strong></p>
                                <p>Total já recebido: <strong class="text-green-500">R$ <?= number_format($inv['total_paid'], 2, ',', '.') ?></strong></p>
                                <p>Falta receber: <strong>R$ <?= number_format($valor_faltando, 2, ',', '.') ?></strong></p>
                            </div>
                        </div>

                        <div class="w-full bg-gray-200 dark:bg-zinc-800 rounded-full h-2 mt-2">
                            <div class="bg-green-500 h-2 rounded-full transition-all" style="width: <?= $porcentagem ?>%"></div>
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1"><?= round($porcentagem, 1) ?>% concluído • <?= $dias_restantes ?> dias restantes</div>
                    </div>
                <?php endforeach; ?>


                <?php
                $stmtInvestmentsInativos = $pdo->prepare("SELECT * FROM investments WHERE user_id = :user_id AND is_active = 0");
                $stmtInvestmentsInativos->execute([':user_id' => $user['id']]);
                $investmentsInativos = $stmtInvestmentsInativos->fetchAll(PDO::FETCH_ASSOC);
                ?>

                <?php if (!empty($investmentsInativos)) : ?>
                    <h2 class="text-lg font-bold mt-6 text-gray-700 dark:text-gray-200">Investimentos Finalizados</h2>
                <?php endif; ?>

                <?php foreach ($investmentsInativos as $inv):

                    $data_inicio = $inv['created_at'];
                    $dias_duracao = $inv['duration_days'];
                    $rendimento_total = $inv['total_return'];
                    $renda_diaria = $rendimento_total / $dias_duracao;

                    $porcentagem = min(100, ($inv['total_paid'] / $rendimento_total) * 100);
                ?>
                    <div style="opacity: .6;" class="bg-white dark:bg-[#121214] p-4 rounded-lg shadow space-y-2 transition-all duration-300">
                        <img src="<?= $inv['img'] ?>" alt="Produto" class="w-16 h-16 rounded object-cover border border-gray-300 dark:border-gray-600">
                        <div class="flex justify-between items-center mb-1">
                            <h3 class="font-semibold text-lg"><?= htmlspecialchars($inv['name']) ?></h3>
                            <span class="text-red-500 text-sm font-medium">Finalizado</span>
                        </div>

                        <div class="flex items-center gap-4">
                            <div class="text-sm text-gray-700 dark:text-gray-300">
                                <p>Início: <strong><?= date('d/m/Y', strtotime($data_inicio)) ?></strong></p>
                                <p>Lucro diário: <strong>R$ <?= number_format($renda_diaria, 2, ',', '.') ?></strong></p>
                                <p>Total que rendeu: <strong class="text-green-500">R$ <?= number_format($inv['total_paid'], 2, ',', '.') ?></strong></p>
                            </div>
                        </div>

                        <div class="w-full bg-gray-200 dark:bg-zinc-800 rounded-full h-2 mt-2">
                            <div class="bg-green-500 h-2 rounded-full transition-all" style="width: <?= $porcentagem ?>%"></div>
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">100% concluído</div>
                    </div>
                <?php endforeach; ?>
            </section>

        </main>

        <footer class="p-4 text-center text-sm text-gray-400 dark:text-gray-600 bg-white dark:bg-[#09090A]">
            © 2025 InvestPro. Todos os direitos reservados.
        </footer>

        <script>
            if (localStorage.getItem('theme') === 'dark') {
                document.documentElement.classList.add('dark');
            }

            function toggleDark() {
                const html = document.documentElement;
                html.classList.toggle('dark');
                localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
            }

            window.addEventListener('load', () => {
                setTimeout(() => {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('main-content').classList.remove('hidden');
                }, 2000)
            });

            const toast = document.getElementById("toast");

            if (toast) {
                toast.classList.add("opacity-0");
                toast.style.transition = "opacity 0.4s ease";

                setTimeout(() => {
                    toast.classList.remove("opacity-0");
                    toast.classList.add("opacity-100");
                }, 100);

                setTimeout(() => {
                    toast.classList.add("opacity-0");
                    setTimeout(() => toast.remove(), 400);
                }, 5000);
            }
        </script>
        <?php include 'partials/menu-bottom.php'; ?>
    </body>

    </html>
<?php elseif ($stmtThemesPlatformResult['theme_actual'] === 'gringa') : ?>
    <!DOCTYPE html>
    <html lang="pt-BR">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>NÍVEL 2</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            @keyframes slide-up {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .animate-slide-up {
                animation: slide-up 0.3s ease-out;
            }
        </style>

    </head>

    <body class="bg-[#EEF2FF] min-h-screen flex flex-col" style="max-width: 500px;margin: 0 auto">

        <?php if ($toastMessage) : ?>
            <?php if ($toastType === 'success') : ?>
                <div style="z-index:9999"
                    id="toast"
                    class="fixed bottom-4 right-4 z-50 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                    <span><?= htmlspecialchars($toastMessage) ?></span>
                </div>
            <?php elseif ($toastType === 'error') : ?>
                <div style="background-color: red;z-index:9999"
                    id="toast"
                    class="fixed bottom-4 right-4 z-50 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <span><?= htmlspecialchars($toastMessage) ?></span>
                </div>
            <?php endif; ?>
        <?php endif; ?>

        <!-- Cabeçalho -->
        <header class="bg-gradient-to-b from-[#6C47FF] to-[#B4C4F8] p-4 text-white text-center">
            <h1 class="text-lg font-semibold">NÍVEL 2</h1>
        </header>

        <!-- Card Renda Acumulada -->
        <div class="bg-white rounded-xl shadow mx-4 mt-4 p-4 flex justify-between items-center text-sm">
            <div>
                <p class="text-gray-500">Desconto Total</p>
                <p class="text-red-500 font-bold text-lg">R$<?= htmlspecialchars($user['profit_investments']) ?></p>
            </div>
            <div class="text-center">
                <p class="text-gray-500">Quantidade</p>
                <p class="font-bold text-lg text-black"><?= htmlspecialchars(count($resultIndicatedsLvl2)) ?></p>
            </div>
        </div>

        <!-- Plano do Projeto -->
        <div class="flex items-center " style="margin-bottom: 30px;">

        </div>

        <?php if (empty($resultIndicatedsLvl2)) : ?>
            <div class="flex-1 flex flex-col items-center justify-start mt-10 px-6">
                <img src="assets/images/404.png" alt="404" class="w-40 h-40 opacity-60" />
                <p class="text-gray-500 mt-4">Não há dados de indicados Nível 2!</p>
            </div>
        <?php else : ?>
            <h2 class="text-lg font-bold mb-4 ml-4 text-gray-500">Indicados Nível 2 Ativos</h2>
            <?php foreach ($resultIndicatedsLvl2 as $inv) :
                $modalId = "modalDetalhes-" . $inv['id'];
            ?>
                <?php
                $stmt = $pdo->prepare("SELECT 
                SUM(investment_value) AS total_investments,
                SUM(liquid_affiliate) AS total_comission
                FROM comission_affiliates
                WHERE indicated_id = :indicated_id");

                $stmt->execute([':indicated_id' => $inv['indicated_id']]);
                $data = $stmt->fetch(PDO::FETCH_ASSOC);

                $total = $data['total_investments'] ?? 0;
                $totalComission = $data['total_comission'] ?? 0;

                ?>
                <!-- Card -->
                <div class="bg-[#EEF2FF] rounded-xl rounded-l-full p-3 ml-4 mr-4 flex items-center justify-between shadow mb-3" style="border-top-right-radius: 12px; border: 4px solid white">
                    <div class="flex items-center">
                        <img src="https://static.vecteezy.com/ti/vetor-gratis/p1/2205989-icone-do-perfil-do-usuario-vetor.jpg" class="w-12 h-12 mr-3 rounded-full" />
                        <div>
                            <h3 class="font-semibold text-sm text-black"><?= htmlspecialchars($inv['indicated_phone']) ?></h3>
                            <p class="text-xs text-gray-500">Total Investimentos: <strong>R$ <?= number_format($total, 2, ',', '.') ?></strong></p>
                            <div class="flex items-center">
                                <p class="text-orange-500 font-bold">Comissão: R$ <?= number_format($totalComission, 2, ',', '.') ?></p>
                                <img style="max-height: 20px; margin-left: 30px" src="assets/images/seta.png" alt="Seta" />
                            </div>
                        </div>
                    </div>
                    <button onclick="abrirModalDetalhes('<?= $modalId ?>')" style="background: linear-gradient(to left, #8B5CF9 0%, #57BDE0 100%); border-top-left-radius: 20px;" class="text-white px-4 py-2 rounded-lg text-xs">
                        Detalhes
                    </button>
                </div>

                <div id="modalDetalhes-<?= $inv['id'] ?>" class="fixed inset-0 z-50 bg-black/60 hidden flex items-end justify-center px-4" onclick="fecharModalDetalhes(event)">
                    <div class="bg-white rounded-t-3xl w-full max-w-md p-6 shadow-lg relative animate-slide-up" onclick="event.stopPropagation()">
                        <button onclick="fecharModalDetalhes(event)" class="absolute top-3 right-3 text-gray-400 hover:text-red-500 text-2xl font-bold">×</button>
                        <h3 class="text-xl font-bold mb-4 text-center"><?= htmlspecialchars($inv['indicated_phone']) ?></h3>
                        <ul class="text-sm space-y-2">
                            <li>Total Investimentos: <strong><?= number_format($total, 2, ',', '.') ?></strong></li>
                            <li>Total Comissão Recebida: <strong><?= number_format($totalComission, 2, ',', '.') ?></strong></li>

                        </ul>
                    </div>
                </div>
            <?php endforeach; ?>

        <?php endif; ?>

        <?php include 'partials/menu-bottom.php'; ?>

        <script>
            function abrirModalDetalhes(id) {
                document.getElementById(id)?.classList.remove('hidden');
            }

            function fecharModalDetalhes(event) {
                if (
                    event?.target?.classList?.contains('fixed') || // clicou no fundo escuro
                    event?.target?.closest('button')?.innerText === '×' // clicou no X
                ) {
                    document.querySelectorAll('.fixed.inset-0.z-50').forEach(modal => {
                        modal.classList.add('hidden');
                    });
                }
            }
        </script>
    </body>

    </html>

<?php elseif ($stmtThemesPlatformResult['theme_actual'] === 'gringa2') : ?>
    <!DOCTYPE html>
    <html lang="pt-BR">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>INDICADOS NÍVEL B</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            @keyframes slide-up {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }

            .animate-slide-up {
                animation: slide-up 0.3s ease-out;
            }
        </style>

    </head>

    <body class="bg-[#EEF2FF] min-h-screen flex flex-col" style="max-width: 500px;margin: 0 auto">

        <?php if ($toastMessage) : ?>
            <?php if ($toastType === 'success') : ?>
                <div style="z-index:9999"
                    id="toast"
                    class="fixed bottom-4 right-4 z-50 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                    <span><?= htmlspecialchars($toastMessage) ?></span>
                </div>
            <?php elseif ($toastType === 'error') : ?>
                <div style="background-color: red;z-index:9999"
                    id="toast"
                    class="fixed bottom-4 right-4 z-50 bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg animate-slide-in flex items-center gap-2 w-[90%] max-w-sm">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <span><?= htmlspecialchars($toastMessage) ?></span>
                </div>
            <?php endif; ?>
        <?php endif; ?>

        <!-- Header -->
        <header class="bg-white shadow-sm sticky top-0 z-40 flex items-center justify-between px-5 py-4 border-b border-slate-200">
            <a href="profile.php" class="text-slate-500 text-xl font-bold">&#8592;</a>
            <h1 class="text-lg font-bold text-slate-700 tracking-tight">Área de Nível B</h1>
            <div></div>
        </header>

        <!-- Card de Renda Atualizado -->
        <div class="bg-gradient-to-r from-blue-700 to-blue-700 text-white rounded-2xl mx-4 mt-6 shadow-lg p-5 flex items-center justify-between">
            <div>
                <p class="text-xs opacity-80 mb-1">Lucro Total Nível B</p>
                <p class="text-2xl font-bold">N/A</p>
            </div>
            <div class="text-right">
                <p class="text-xs opacity-80 mb-1">Qtd. Níveis B</p>
                <p class="text-xl font-bold"><?= htmlspecialchars(count($resultIndicatedsLvl2)) ?></p>
            </div>
        </div>

        <!-- Plano do Projeto -->
        <div class="flex items-center " style="margin-bottom: 30px;">

        </div>

        <?php if (empty($resultIndicatedsLvl2)) : ?>
            <div class="flex-1 flex flex-col items-center justify-start mt-10 px-6">
                <p class="text-gray-500 mt-4">Não há dados de indicados Nível B!</p>
            </div>
        <?php else : ?>
            <h2 class="text-lg font-bold mb-4 ml-4 text-gray-500">Indicateds (Nível B) Actives</h2>
            <?php foreach ($resultIndicatedsLvl2 as $inv) :
                $modalId = "modalDetalhes-" . $inv['id'];

                $stmt = $pdo->prepare("SELECT 
        SUM(investment_value) AS total_investments,
        SUM(liquid_affiliate) AS total_comission
        FROM comission_affiliates
        WHERE indicated_id = :indicated_id AND affiliate_lvl = 2");
                $stmt->execute([':indicated_id' => $inv['indicated_id']]);
                $data = $stmt->fetch(PDO::FETCH_ASSOC);

                $total = $data['total_investments'] ?? 0;
                $totalComission = $data['total_comission'] ?? 0;
            ?>
                <div class="bg-gradient-to-br from-white via-blue-50 to-blue-100 border border-blue-200 rounded-3xl p-5 shadow-lg mx-4 mt-4 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <img src="https://static.vecteezy.com/ti/vetor-gratis/p1/2205989-icone-do-perfil-do-usuario-vetor.jpg" class="w-20 h-20 rounded-2xl object-cover border-2 border-[#005E60] shadow-sm" />
                        <div class="space-y-1">
                            <h3 class="text-base font-bold text-[#005E60]"><?= htmlspecialchars($inv['indicated_phone']) ?></h3>
                            <p class="text-sm text-gray-600">Total Investido:</p>
                            <p class="text-lg font-semibold text-green-600">R$ <?= number_format($total, 2, ',', '.') ?></p>
                            <p class="text-xs text-gray-500 mt-1">Comissão Recebida</p>
                            <p class="text-base font-bold text-orange-500">R$ <?= number_format($totalComission, 2, ',', '.') ?></p>
                        </div>
                    </div>
                    <div>
                        <button onclick="abrirModalDetalhes('<?= $modalId ?>')"
                            class="bg-gradient-to-r from-blue-700 to-blue-700
 text-white px-4 py-2 text-sm rounded-full shadow-md hover:brightness-110 transition">
                            Ver
                        </button>
                    </div>
                </div>

                <!-- Modal -->
                <div id="<?= $modalId ?>" class="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm hidden items-center justify-center px-4">
                    <div class="modal-deco relative w-full max-w-md bg-white border-2 border-[#005E60] rounded-3xl p-6 animate-scale-fade-up shadow-2xl">
                        <button onclick="fecharModalDetalhes(event)" class="absolute top-3 right-3 text-gray-400 hover:text-red-500 text-2xl font-bold">&times;</button>
                        <h3 class="text-xl font-bold mb-4 text-center"><?= htmlspecialchars($inv['indicated_phone']) ?></h3>
                        <ul class="text-sm text-gray-700 space-y-2 mb-4">
                            <li>Total Investido: <strong>R$ <?= number_format($total, 2, ',', '.') ?></strong></li>
                            <li>Comissão Recebida: <strong class="text-orange-500">R$ <?= number_format($totalComission, 2, ',', '.') ?></strong></li>
                        </ul>
                    </div>
                </div>
            <?php endforeach; ?>


        <?php endif; ?>

        <?php include 'partials/menu-bottom.php'; ?>

        <script>
            function abrirModalDetalhes(id) {
                document.getElementById(id)?.classList.remove('hidden');
            }

            function fecharModalDetalhes(event) {
                if (
                    event?.target?.classList?.contains('fixed') || // clicou no fundo escuro
                    event?.target?.closest('button')?.innerText === '×' // clicou no X
                ) {
                    document.querySelectorAll('.fixed.inset-0.z-50').forEach(modal => {
                        modal.classList.add('hidden');
                    });
                }
            }
        </script>
    </body>

    </html>

<?php endif; ?>