{{-- Onglet Réseau MLM --}}
<div class="row g-4">
    {{-- Statistiques Réseau --}}
    <div class="col-md-3">
        <div class="stat-card primary p-3 text-center">
            <div class="h2 mb-1 fw-bold text-primary">{{ $sponsors->count() ?? 0 }}</div>
            <small class="text-muted">Parrains (avec filleuls)</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card warning p-3 text-center">
            <div class="h2 mb-1 fw-bold text-warning">{{ $membersWithoutSponsor->count() ?? 0 }}</div>
            <small class="text-muted">Sans parrain</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card info p-3 text-center">
            <div class="h2 mb-1 fw-bold text-info">{{ $stats['members_with_sponsor'] ?? 0 }}</div>
            <small class="text-muted">Avec parrain</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card danger p-3 text-center">
            <div class="h2 mb-1 fw-bold text-danger">{{ $membersWithSponsorNoReferrals ?? 0 }}</div>
            <small class="text-muted">Parrainés sans filleuls</small>
        </div>
    </div>
    
    {{-- Distribution par niveau --}}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-layers me-2"></i>Distribution par Niveau</h5>
            </div>
            <div class="card-body">
                <canvas id="networkLevelsChart" height="250"></canvas>
            </div>
        </div>
    </div>
    
    {{-- Croissance du réseau --}}
    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-graph-up-arrow text-success me-2"></i>Croissance du Réseau (6 mois)</h5>
            </div>
            <div class="card-body">
                <canvas id="networkGrowthChart" height="200"></canvas>
            </div>
        </div>
    </div>
    
    {{-- Top Parrains --}}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-trophy text-warning me-2"></i>Top Parrains (par filleuls)</h5>
            </div>
            <div class="card-body p-0">
                @if(isset($sponsors) && $sponsors->isNotEmpty())
                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-hover mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>#</th>
                                    <th>Parrain</th>
                                    <th class="text-center">Filleuls</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($sponsors->take(20) as $index => $sponsor)
                                <tr>
                                    <td><span class="badge bg-{{ $index < 3 ? 'warning' : 'secondary' }}">{{ $index + 1 }}</span></td>
                                    <td>
                                        <strong>{{ $sponsor->name }}</strong>
                                        @if($sponsor->referral_code)
                                            <br><small class="text-muted">Code: {{ $sponsor->referral_code }}</small>
                                        @endif
                                    </td>
                                    <td class="text-center"><span class="badge bg-primary">{{ $sponsor->referrals_count }}</span></td>
                                    <td>
                                        @if($sponsor->is_active)
                                            <span class="badge bg-success">Actif</span>
                                        @else
                                            <span class="badge bg-danger">Inactif</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <p>Aucun parrain trouvé</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    {{-- Top Parrains par Commissions --}}
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-cash-stack text-success me-2"></i>Top Parrains (par commissions)</h5>
            </div>
            <div class="card-body p-0">
                @if(isset($topSponsorsByCommission) && $topSponsorsByCommission->isNotEmpty())
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Parrain</th>
                                    <th class="text-end">Commissions Totales</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($topSponsorsByCommission as $index => $sponsor)
                                <tr>
                                    <td><span class="badge bg-{{ $index < 3 ? 'warning' : 'secondary' }}">{{ $index + 1 }}</span></td>
                                    <td><strong>{{ $sponsor->name }}</strong></td>
                                    <td class="text-end">
                                        <span class="badge bg-success">{{ number_format($sponsor->commissions_sum_amount ?? 0, 0, ',', ' ') }} XOF</span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <p>Aucune donnée disponible</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    {{-- Membres sans parrain --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-white bg-warning bg-opacity-10">
                <h5 class="mb-0 text-warning"><i class="bi bi-person-x me-2"></i>Membres Sans Parrain ({{ $membersWithoutSponsor->count() }})</h5>
            </div>
            <div class="card-body p-0">
                @if(isset($membersWithoutSponsor) && $membersWithoutSponsor->isNotEmpty())
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table table-hover mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Membre</th>
                                    <th>Email</th>
                                    <th>Inscrit le</th>
                                    <th>Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($membersWithoutSponsor->take(30) as $member)
                                <tr>
                                    <td>{{ $member->name }}</td>
                                    <td>{{ $member->email }}</td>
                                    <td>{{ $member->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        @if($member->is_active)
                                            <span class="badge bg-success">Actif</span>
                                        @else
                                            <span class="badge bg-danger">Inactif</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-emoji-smile text-success" style="font-size: 2rem;"></i>
                        <p class="mt-2">Tous les membres ont un parrain !</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Distribution par niveau
    @if(isset($networkLevels))
    new Chart(document.getElementById('networkLevelsChart'), {
        type: 'doughnut',
        data: {
            labels: ['0 filleul', '1 filleul', '2 filleuls', '3 filleuls', '4 filleuls', '5 filleuls', '6+ filleuls'],
            datasets: [{
                data: [
                    {{ $networkLevels[0] ?? 0 }},
                    {{ $networkLevels[1] ?? 0 }},
                    {{ $networkLevels[2] ?? 0 }},
                    {{ $networkLevels[3] ?? 0 }},
                    {{ $networkLevels[4] ?? 0 }},
                    {{ $networkLevels[5] ?? 0 }},
                    {{ $networkLevels['6+'] ?? 0 }}
                ],
                backgroundColor: [
                    'rgba(107, 114, 128, 0.8)',
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(16, 185, 129, 0.8)',
                    'rgba(245, 158, 11, 0.8)',
                    'rgba(239, 68, 68, 0.8)',
                    'rgba(139, 92, 246, 0.8)',
                    'rgba(236, 72, 153, 0.8)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
    @endif

    // Croissance du réseau
    @if(isset($networkGrowth))
    new Chart(document.getElementById('networkGrowthChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode(array_column($networkGrowth, 'label')) !!},
            datasets: [{
                label: 'Nouveaux filleuls',
                data: {!! json_encode(array_column($networkGrowth, 'new_referrals')) !!},
                backgroundColor: 'rgba(79, 70, 229, 0.1)',
                borderColor: 'rgba(79, 70, 229, 1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
    @endif
</script>
@endpush
