@extends('layouts.app')
@section('title', __('Referral link'))
@section('content')
<div class="space-y-6">
    <section class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-orange-700 via-rose-700 to-pink-800 p-6 text-white shadow-xl shadow-rose-950/15 sm:p-8">
        <div class="relative z-10 max-w-2xl">
            <p class="text-xs font-bold uppercase tracking-[.2em] text-orange-100">{{ __('Grow your network') }}</p>
            <h2 class="mt-2 text-2xl font-extrabold sm:text-3xl">{{ __('Referral link') }}</h2>
            <p class="mt-2 text-sm leading-6 text-white/80">{{ __('Share your invite link and view referrals') }}</p>
        </div>
        <div class="pointer-events-none absolute -right-8 -top-16 h-56 w-56 rounded-full border border-white/15"></div>
    </section>

    <section class="panel-card p-5 sm:p-7">
        <div class="flex items-start gap-4">
            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-orange-50 text-orange-700"><x-nav-icon name="user" class="h-6 w-6" /></span>
            <div class="min-w-0 flex-1">
                <h3 class="font-extrabold text-slate-900">{{ __('Your personal invite link') }}</h3>
                <p class="mt-1 text-sm leading-6 text-slate-500">{{ __('Share this link with your referral code. New accounts are created by an administrator.') }}</p>
                <input aria-label="{{ __('Referral link') }}" readonly value="{{ $referralUrl }}" class="field-control mt-4 select-all text-sm" onclick="this.select()">
                <p class="mt-2 text-xs text-slate-400">{{ __('Tap or click the link to select it, then copy and share it.') }}</p>
            </div>
        </div>
    </section>

    <section class="panel-card overflow-hidden">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-5 sm:px-6">
            <div>
                <h3 class="font-extrabold text-slate-900">{{ __('People invited by you') }}</h3>
                <p class="mt-1 text-xs text-slate-500">{{ __('Accounts sponsored by your referral ID.') }}</p>
            </div>
            <span class="rounded-full bg-orange-50 px-3 py-1.5 text-xs font-extrabold text-orange-700">{{ number_format($referrals->total()) }} {{ __('referrals') }}</span>
        </div>
        @forelse($referrals as $referral)
            <div class="flex items-center gap-3 border-b border-slate-100 px-5 py-4 last:border-0 sm:px-6">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-orange-100 to-rose-100 text-sm font-extrabold text-rose-800">{{ strtoupper(substr($referral->member?->name ?? '?', 0, 1)) }}</span>
                <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-bold text-slate-900">{{ $referral->member?->name ?? __('Unknown member') }}</p>
                    <p class="mt-1 truncate text-xs text-slate-500">{{ $referral->member?->member_id }}</p>
                </div>
                <span class="rounded-full px-3 py-1 text-xs font-bold {{ $referral->member?->is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">{{ $referral->member?->is_active ? __('Active') : __('Inactive') }}</span>
            </div>
        @empty
            <div class="px-6 py-12 text-center">
                <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-orange-50 text-orange-700"><x-nav-icon name="users" class="h-6 w-6" /></span>
                <p class="mt-4 text-sm font-bold text-slate-700">{{ __('No referrals yet') }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ __('Share your invite link to see new referrals here.') }}</p>
            </div>
        @endforelse
        @if($referrals->hasPages())
            <div class="border-t border-slate-100 px-5 py-4 sm:px-6">{{ $referrals->links() }}</div>
        @endif
    </section>
</div>
@endsection