@extends('layouts.user')

@section('page-title', __('Referrals'))

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <p class="text-sm text-gray-500">{{ __('Total Earnings') }}</p>
        <p class="text-2xl font-bold text-green-600 mt-1">{{ currency($totalEarnings) }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <p class="text-sm text-gray-500">{{ __('Active Referrals') }}</p>
        <p class="text-2xl font-bold text-indigo-600 mt-1">{{ number_format($referralCount) }}</p>
    </div>
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <p class="text-sm text-gray-500">{{ __('Your Commission') }}</p>
        <p class="text-2xl font-bold text-purple-600 mt-1">{{ auth()->user()->referral_commission }}%</p>
    </div>
</div>

<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
    <h3 class="font-semibold mb-2">{{ __('Your Referral Link') }}</h3>
    <div class="flex gap-2">
        <input type="text" readonly value="{{ $referralLink }}" id="referral-link"
               class="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-300 rounded-lg text-sm font-mono">
        <button type="button" onclick="copyLink()" class="px-4 py-2.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('Copy') }}</button>
    </div>
    <p class="text-xs text-gray-500 mt-2">{{ __('Earn commission on every order placed by your referrals.') }}</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="p-4 border-b border-gray-200"><h3 class="font-semibold">{{ __('Your Referrals') }}</h3></div>
        <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
            @forelse($referrals as $referral)
                <div class="flex items-center gap-3 p-4">
                    <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center font-semibold text-indigo-600">
                        {{ substr($referral->name, 0, 1) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-medium text-sm truncate">{{ $referral->name }}</p>
                        <p class="text-xs text-gray-400">{{ $referral->created_at->format('M d, Y') }}</p>
                    </div>
                    <span class="text-xs text-gray-500">{{ $referral->orders_count }} orders</span>
                </div>
            @empty
                <p class="p-8 text-center text-sm text-gray-500">{{ __('No referrals yet') }}</p>
            @endforelse
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="p-4 border-b border-gray-200"><h3 class="font-semibold">{{ __('Earnings History') }}</h3></div>
        <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
            @forelse($earnings as $earning)
                <div class="flex items-center gap-3 p-4">
                    <div class="flex-1 min-w-0">
                        <p class="font-medium text-sm truncate">{{ $earning->referredUser?->name ?? 'Unknown' }}</p>
                        <p class="text-xs text-gray-400">{{ $earning->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    <span class="font-semibold text-green-600 text-sm">+{{ currency($earning->amount) }}</span>
                </div>
            @empty
                <p class="p-8 text-center text-sm text-gray-500">{{ __('No earnings yet') }}</p>
            @endforelse
        </div>
    </div>
</div>

<script>
function copyLink() {
    const input = document.getElementById('referral-link');
    input.select();
    navigator.clipboard.writeText(input.value);
}
</script>
@endsection