@extends('layouts.member')

@section('title', 'Mon Réseau')
@section('page-title', 'Mon Réseau')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3 text-center">
            <p class="text-muted small mb-1">Filleuls directs</p>
            <h4 class="text-primary fw-700 mb-0">{{ $stats['level1_count'] }}</h4>
            <small class="text-success">{{ $stats['level1_active'] }} abonnés</small>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3 text-center">
            <p class="text-muted small mb-1">Niveau 2</p>
            <h4 class="text-info fw-700 mb-0">{{ $stats['level2_count'] }}</h4>
            <small class="text-success">{{ $stats['level2_active'] }} abonnés</small>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3 text-center">
            <p class="text-muted small mb-1">Total réseau</p>
            <h4 class="text-success fw-700 mb-0">{{ $stats['total_network'] }}</h4>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="stat-card modern shadow-sm border-0 rounded-3 text-center">
            <p class="text-muted small mb-1">Mes commissions totales</p>
            <h4 class="text-warning fw-700 mb-0">{{ number_format($stats['total_commissions'], 0, ',', ' ') }} XOF</h4>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card modern shadow-sm border-0 rounded-3">
            <div class="card-header bg-white d-flex justify-content-between align-items-center rounded-top-3">
                <h5 class="mb-0"><i class="bi bi-people text-primary me-2"></i>Filleuls directs (Niveau 1)</h5>
                <span class="badge bg-primary">{{ $level1->count() }}</span>
            </div>
            <div class="card-body">
                @if($level1->count() > 0)
                    <div class="mb-3 d-flex justify-content-end">
                        <input type="text" class="form-control form-control-sm w-50" id="searchLevel1" placeholder="Rechercher nom ou email">
                    </div>
                    <div class="table-responsive">
                        <table class="table table-modern table-hover mb-0" id="level1Table">
                            <thead class="table-light">
                                <tr>
                                    <th>Membre</th>
                                    <th>Code</th>
                                    <th>Inscription</th>
                                    <th>Commissions reçues</th>
                                    <th>Statut Abonnement</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($level1 as $member)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-light rounded-circle d-flex align-items-center justify-content-center me-2">
                                                <i class="bi bi-person text-muted"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $member->name }}</h6>
                                                <small class="text-muted">{{ $member->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <code class="bg-light px-2 py-1 rounded">{{ $member->member_code }}</code>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $member->created_at->format('d/m/Y') }}</small>
                                    </td>
                                    <td>
                                        <strong class="text-success">{{ number_format($member->commissions_received ?? 0, 0, ',', ' ') }} XOF</strong>
                                    </td>
                                    <td>
                                        @if($member->subscription_paid)
                                            <span class="badge bg-success">Abonné</span>
                                        @else
                                            <span class="badge bg-warning text-dark">Non abonné</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="bi bi-people fs-1 text-muted mb-3"></i>
                        <h5 class="text-muted">Aucun filleul direct</h5>
                        <p class="text-muted">Partagez votre code de parrainage pour développer votre réseau</p>
                        <div class="mt-3">
                            <strong>Votre code de parrainage :</strong>
                            <code class="bg-primary text-white px-3 py-2 rounded d-inline-block mt-2">{{ Auth::user()->member_code }}</code>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card modern shadow-sm border-0 rounded-3">
            <div class="card-header bg-white d-flex justify-content-between align-items-center rounded-top-3">
                <h5 class="mb-0"><i class="bi bi-diagram-2 text-info me-2"></i>Réseau secondaire (Niveau 2)</h5>
                <span class="badge bg-info">{{ $stats['level2_count'] }}</span>
            </div>
            <div class="card-body">
                @if($level2Members->isNotEmpty())
                    <div class="accordion" id="level2Accordion">
                        @foreach($level2Members as $sponsorId => $members)
                            @php $sponsor = $level1->firstWhere('id', $sponsorId); @endphp
                            @if($sponsor)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ $sponsorId }}">
                                        <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapse{{ $sponsorId }}"
                                            aria-expanded="false" aria-controls="collapse{{ $sponsorId }}">
                                            <i class="bi bi-person me-2"></i>
                                            {{ $sponsor->name }}
                                            <span class="badge bg-info ms-2">{{ $members->count() }} filleuls</span>
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $sponsorId }}" class="accordion-collapse collapse"
                                         aria-labelledby="heading{{ $sponsorId }}" data-bs-parent="#level2Accordion">
                                        <div class="accordion-body">
                                            <div class="table-responsive">
                                                <table class="table table-sm align-middle">
                                                    <thead>
                                                        <tr>
                                                            <th>Membre</th>
                                                            <th>Code</th>
                                                            <th>Commissions reçues</th>
                                                            <th>Statut Abonnement</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($members as $member)
                                                        <tr>
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <div class="avatar-xs bg-light rounded-circle d-flex align-items-center justify-content-center me-2">
                                                                        <i class="bi bi-person text-muted"></i>
                                                                    </div>
                                                                    <span>{{ $member->name }}</span>
                                                                </div>
                                                            </td>
                                                            <td><code class="bg-light px-1 py-0 rounded small">{{ $member->member_code }}</code></td>
                                                            <td><strong class="text-success small">{{ number_format($member->commissions_received ?? 0, 0, ',', ' ') }} XOF</strong></td>
                                                            <td>
                                                                @if($member->subscription_paid)
                                                                    <span class="badge bg-success small">Abonné</span>
                                                                @else
                                                                    <span class="badge bg-warning text-dark small">Non abonné</span>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="bi bi-diagram-2 fs-1 text-muted mb-3"></i>
                        <h5 class="text-muted">Aucun réseau secondaire</h5>
                        <p class="text-muted">Vos filleuls directs n'ont pas encore parrainé de membres</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card modern shadow-sm border-0 rounded-3 bg-light">
            <div class="card-body text-center">
                <h5 class="card-title mb-2"><i class="bi bi-share me-2"></i>Votre code de parrainage</h5>
                <p class="text-muted">Partagez ce code avec vos prospects pour développer votre réseau</p>
                <div class="d-flex justify-content-center align-items-center gap-3 flex-wrap">
                    <code class="bg-primary text-white px-4 py-3 rounded fs-4 font-monospace">{{ Auth::user()->member_code }}</code>
                    <button class="btn btn-outline-primary" onclick="copyReferralCode(event)">
                        <i class="bi bi-clipboard me-2"></i>Copier
                    </button>
                </div>
                <small class="text-muted mt-2 d-block">Lien de parrainage : {{ url('/member/register?ref=' . Auth::user()->member_code) }}</small>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function copyReferralCode(e) {
    const code = '{{ Auth::user()->member_code }}';
    const btn = e?.target?.closest('button') || e?.target;
    navigator.clipboard.writeText(code).then(function() {
        if (!btn) return;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check me-2"></i>Copié !';
        btn.classList.remove('btn-outline-primary');
        btn.classList.add('btn-success');
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-primary');
        }, 2000);
    }).catch(function(err) {
        console.error('Erreur lors de la copie: ', err);
        alert('Erreur lors de la copie du code');
    });
}

document.getElementById('searchLevel1')?.addEventListener('input', function(e) {
    const q = e.target.value.toLowerCase();
    document.querySelectorAll('#level1Table tbody tr').forEach(row => {
        const text = row.innerText.toLowerCase();
        row.style.display = text.includes(q) ? '' : 'none';
    });
});
</script>
@endpush