@extends('layouts.influencer', ['title' => 'Metas e badges'])

@section('content')
<div class="space-y-6">
    <livewire:influencer.goal-progress />

    <div class="grid gap-6 lg:grid-cols-2">
        <div class="card">
            <h2 class="mb-4 text-lg font-bold">Regras ativas</h2>
            <div class="space-y-3">
                @foreach($rules as $rule)
                    <div class="rounded-2xl border border-slate-200 p-4">
                        <div class="flex justify-between gap-3"><strong>{{ $rule->name }}</strong><span>+{{ number_format((float)$rule->bonus_percentage,2,',','.') }}%</span></div>
                        <p class="mt-1 text-sm text-slate-500">Meta: R$ {{ number_format((float)$rule->threshold_value,2,',','.') }} em vendas pagas no mês.</p>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="card">
            <h2 class="mb-4 text-lg font-bold">Badges conquistadas</h2>
            <div class="flex flex-wrap gap-3">
                @forelse($influencer->achievements as $achievement)
                    <div class="rounded-2xl border border-slate-200 p-4"><div class="text-3xl">{{ $achievement->badge->icon }}</div><strong>{{ $achievement->badge->name }}</strong><p class="text-xs text-slate-500">{{ $achievement->achieved_at?->format('d/m/Y') }}</p></div>
                @empty
                    <p class="text-sm text-slate-500">Você ainda não conquistou badges.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection