@extends('layouts.vpm-mobile-app', ['active' => 'account'])

@section('title', 'Referrals')

@section('content')
<div class="vpm-referrals">
    <div class="vpm-referrals__intro">
        <h2 class="vpm-referrals__title">Referrals</h2>
        <p class="vpm-referrals__desc">
            View your 20% referral earnings from each deposit made by users you've referred. You can track your balance, check withdrawal eligibility, and easily share your referral link with others.
        </p>
    </div>

    <div class="vpm-referrals__grid">
        <div class="vpm-referrals__cards">
            <div class="vpm-referrals__card">
                <div class="vpm-referrals__card-body">
                    <p class="vpm-referrals__balance">{{ auth()->user()->formattedMoney($referralBalance) }}</p>
                    <a href="{{ route('app.withdrawals') }}" class="vpm-btn vpm-btn--primary vpm-btn--block vpm-referrals__withdraw">Withdraw</a>
                    <p class="vpm-referrals__card-label">Referral Balance</p>
                </div>
            </div>

            <div class="vpm-referrals__card">
                <div class="vpm-referrals__card-body">
                    <div class="vpm-referrals__link-row">
                        <button
                            type="button"
                            class="vpm-referrals__copy"
                            data-vpm-copy-target="#vpm-referral-url"
                            aria-label="Copy referral link"
                        >
                            <span class="material-icons notranslate" aria-hidden="true">content_copy</span>
                        </button>
                        <p id="vpm-referral-url" class="vpm-referrals__url">{{ $referralUrl }}</p>
                    </div>
                    <p class="vpm-referrals__card-label">Referral Link</p>
                </div>
            </div>
        </div>

        @if ($totalReferrals > 0)
            <div class="vpm-referrals__list-wrap">
                <h3 class="vpm-referrals__list-title">Your referrals</h3>
                <ul class="vpm-referrals__list">
                    @foreach ($referredUsers as $referred)
                        <li class="vpm-referrals__list-item">
                            <span class="vpm-referrals__list-name">{{ $referred->name }}</span>
                            <span class="vpm-referrals__list-date">{{ $referred->created_at->format('M j, Y') }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    @if ($totalReferrals === 0)
        <p class="vpm-referrals__empty">You have not made any referrals yet</p>
    @endif
</div>
@endsection