@extends('layouts.user', ['heading' => 'Referral Links / रेफरल'])

@section('content')
    @php
        $leftLink = url('/register-user').'?sponsor='.auth()->user()->referral_code.'&leg=left';
        $rightLink = url('/register-user').'?sponsor='.auth()->user()->referral_code.'&leg=right';
        $autoLink = url('/register-user').'?sponsor='.auth()->user()->referral_code.'&leg=auto';
    @endphp

    <div class="rounded-2xl bg-white p-4 shadow">
        <div class="text-sm text-slate-500">Sponsor ID</div>
        <div class="font-semibold">{{ auth()->user()->member_code }}</div>
        <div class="mt-1 text-xs text-slate-500">Upline: {{ auth()->user()->sponsor?->name ?? 'N/A' }}</div>
    </div>

    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
        <div class="rounded-xl border p-3">
            <div class="text-xs text-slate-500">Left Join Link</div>
            <div class="break-all text-xs font-mono">{{ $leftLink }}</div>
            <div class="mt-2 flex gap-2">
                <button class="rounded bg-slate-900 px-3 py-1 text-xs text-white copy-btn" data-link="{{ $leftLink }}">Copy</button>
                <a class="rounded bg-emerald-600 px-3 py-1 text-xs text-white" href="https://wa.me/?text={{ urlencode($leftLink) }}">WhatsApp</a>
            </div>
            <img class="mt-2" src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode($leftLink) }}" alt="QR">
        </div>
        <div class="rounded-xl border p-3">
            <div class="text-xs text-slate-500">Right Join Link</div>
            <div class="break-all text-xs font-mono">{{ $rightLink }}</div>
            <div class="mt-2 flex gap-2">
                <button class="rounded bg-slate-900 px-3 py-1 text-xs text-white copy-btn" data-link="{{ $rightLink }}">Copy</button>
                <a class="rounded bg-emerald-600 px-3 py-1 text-xs text-white" href="https://wa.me/?text={{ urlencode($rightLink) }}">WhatsApp</a>
            </div>
            <img class="mt-2" src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode($rightLink) }}" alt="QR">
        </div>
        <div class="rounded-xl border p-3">
            <div class="text-xs text-slate-500">Auto Placement Link</div>
            <div class="break-all text-xs font-mono">{{ $autoLink }}</div>
            <div class="mt-2 flex gap-2">
                <button class="rounded bg-slate-900 px-3 py-1 text-xs text-white copy-btn" data-link="{{ $autoLink }}">Copy</button>
                <a class="rounded bg-emerald-600 px-3 py-1 text-xs text-white" href="https://wa.me/?text={{ urlencode($autoLink) }}">WhatsApp</a>
            </div>
            <img class="mt-2" src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data={{ urlencode($autoLink) }}" alt="QR">
        </div>
    </div>

    <script>
        document.querySelectorAll('.copy-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                navigator.clipboard.writeText(btn.dataset.link || '');
                btn.textContent = 'Copied';
                setTimeout(() => btn.textContent = 'Copy', 1200);
            });
        });
    </script>
@endsection