@extends('layouts.app')
@section('title', __('Matching bonus'))
@section('content')
<div class="space-y-6">
    <section class="matching-bonus-hero relative overflow-hidden rounded-3xl p-6 text-white shadow-xl shadow-emerald-950/15 sm:p-8">
        <div class="relative z-10 max-w-2xl">
            <p class="text-xs font-bold uppercase tracking-[.2em] text-emerald-200">{{ __('Binary rewards') }}</p>
            <h2 class="mt-2 text-2xl font-extrabold sm:text-3xl">{{ __('Matching bonus') }}</h2>
            <p class="mt-2 text-sm leading-6 text-emerald-100/80">{{ __('Follow your paid matching rewards and see how balanced team volume contributes to your next milestone.') }}</p>
        </div>
        <span class="absolute -right-5 -top-6 flex h-32 w-32 items-center justify-center rounded-full border border-white/15 bg-white/5 text-emerald-100/80">
            <x-nav-icon name="transfer" class="h-14 w-14" />
        </span>
    </section>

    <section class="grid gap-4 sm:grid-cols-2">
        <article class="panel-card p-5 sm:p-6">
            <p class="text-sm font-semibold text-slate-500">{{ __('Total matching bonus') }}</p>
            <p class="mt-2 text-3xl font-black tracking-tight text-slate-900">৳{{ number_format($totalMatchingBonus, 2) }}</p>
            <p class="mt-2 text-xs text-slate-500">{{ __('All paid matching bonus transactions') }}</p>
        </article>
        <article class="panel-card border-emerald-100 bg-gradient-to-br from-white to-emerald-50/70 p-5 sm:p-6">
            <p class="text-sm font-semibold text-emerald-700">{{ __('This month matching bonus') }}</p>
            <p class="mt-2 text-3xl font-black tracking-tight text-emerald-900">৳{{ number_format($monthlyMatchingBonus, 2) }}</p>
            <p class="mt-2 text-xs text-emerald-700/70">{{ now()->translatedFormat('F Y') }}</p>
        </article>
    </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">{{ __('Matching bonus history') }}</h3>
                <p class="mt-1 text-xs text-slate-500">{{ __('Only paid matching rewards are shown here.') }}</p>
            </div>
            <a href="{{ route('team.performance') }}" class="text-sm font-bold text-blue-700">{{ __('View team performance') }} →</a>
        </div>
        @forelse($matchingTransactions as $transaction)
            <div class="flex items-center justify-between gap-4 border-b border-slate-100 px-5 py-4 last:border-0 sm:px-6">
                <div class="flex min-w-0 items-center gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700"><x-nav-icon name="transfer" class="h-5 w-5" /></span>
                    <div class="min-w-0">
                        <p class="truncate text-sm font-bold text-slate-900">{{ __('Matching bonus') }}</p>
                        <p class="mt-1 text-xs text-slate-500">{{ $transaction->created_at->format('M d, Y · h:i A') }}</p>
                    </div>
                </div>
                <p class="shrink-0 text-sm font-extrabold text-emerald-700">+৳{{ number_format((float) $transaction->amount, 2) }}</p>
            </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-emerald-50 text-emerald-700"><x-nav-icon name="transfer" class="h-6 w-6" /></span>
                <p class="mt-4 text-sm font-bold text-slate-700">{{ __('No matching bonus payouts yet') }}</p>
                <p class="mt-1 text-xs text-slate-500">{{ __('Paid matching rewards will appear here when your team qualifies.') }}</p>
            </div>
        @endforelse
        @if($matchingTransactions->hasPages())
            <div class="border-t border-slate-100 px-5 py-4 sm:px-6">{{ $matchingTransactions->links() }}</div>
        @endif
    </section>
</div>
@endsection