@extends('layouts.app')
@section('title', 'Affiliate')

@section('content')
<div class="flex flex-wrap items-center justify-between gap-2">
    <h1 class="text-xl font-bold">Affiliate dashboard</h1>
    <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">✔ Verified Affiliate · ID {{ $user->affiliate_code }}</span>
</div>

<div class="mt-4 rounded-lg border border-slate-200 bg-white p-4" x-data="{ copied: false }">
    <h2 class="text-sm font-semibold">Your referral link</h2>
    <div class="mt-2 flex gap-2">
        <input type="text" readonly value="{{ $link }}" class="flex-1 rounded border border-slate-300 bg-slate-50 px-3 py-2 text-sm" x-ref="link">
        <button class="rounded bg-slate-900 px-3 py-2 text-sm font-semibold text-white"
                @click="navigator.clipboard.writeText($refs.link.value); copied = true; setTimeout(() => copied = false, 2000)"
                x-text="copied ? 'Copied' : 'Copy'"></button>
    </div>
    <p class="mt-2 text-xs text-slate-600">
        Commission: USD {{ number_format($rate, 2) }} per MT on completed deals, paid by Drixem under your verified name.
        It is never added to the mill price, and you cannot view or edit quotes.
    </p>
</div>

<div class="mt-4 grid grid-cols-3 gap-3 text-center">
    <div class="rounded-lg border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Referred accounts</p><p class="text-xl font-bold">{{ $referrals->count() }}</p></div>
    <div class="rounded-lg border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Payable (USD)</p><p class="text-xl font-bold text-amber-700">{{ number_format($payable, 2) }}</p></div>
    <div class="rounded-lg border border-slate-200 bg-white p-4"><p class="text-xs text-slate-500">Paid (USD)</p><p class="text-xl font-bold text-emerald-700">{{ number_format($paid, 2) }}</p></div>
</div>

<h2 class="mt-6 font-semibold">Commissions</h2>
<div class="mt-2 overflow-x-auto rounded-lg border border-slate-200 bg-white">
    <table class="w-full text-left text-sm">
        <thead class="bg-slate-50 text-xs uppercase text-slate-500"><tr><th class="p-3">Deal</th><th class="p-3">Volume (MT)</th><th class="p-3">Rate</th><th class="p-3">Amount (USD)</th><th class="p-3">Status</th></tr></thead>
        <tbody>
        @forelse ($commissions as $c)
            <tr class="border-t border-slate-100">
                <td class="p-3">{{ $c->dealRoom->reference }}</td>
                <td class="p-3">{{ number_format($c->volume_mt, 2) }}</td>
                <td class="p-3">{{ number_format($c->rate_usd_per_mt, 2) }}/MT</td>
                <td class="p-3 font-semibold">{{ number_format($c->amount_usd, 2) }}</td>
                <td class="p-3 uppercase">{{ $c->status }} @if ($c->paid_at) · {{ $c->paid_at->format('d M Y') }} @endif</td>
            </tr>
        @empty
            <tr><td colspan="5" class="p-6 text-center text-slate-500">No commissions yet. They appear when a referred deal completes.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

<h2 class="mt-6 font-semibold">Referred accounts</h2>
<ul class="mt-2 space-y-1 text-sm">
    @forelse ($referrals as $r)
        <li class="rounded border border-slate-200 bg-white px-3 py-2">{{ ucfirst($r->role) }} · {{ $r->country }} · joined {{ $r->created_at->format('d M Y') }} · <span class="uppercase text-slate-500">{{ $r->status }}</span></li>
    @empty
        <li class="text-slate-500">Nobody has signed up through your link yet.</li>
    @endforelse
</ul>
@endsection