@extends('layouts.app')
@section('title', __('Incentive dashboard'))
@section('content')
<section class="panel-card p-5 sm:p-7">
  <div class="flex flex-wrap items-end justify-between gap-4">
    <div><p class="text-sm font-semibold text-rose-600">{{ now()->format('F Y') }}</p><h2 class="mt-1 text-xl font-extrabold text-slate-900">{{ __('Your incentive progress') }}</h2></div>
    <div class="text-right"><p class="text-xs text-slate-500">{{ __(auth()->user()->isEmployee() ? 'This month approved lead sales' : 'This month approved personal sales') }}</p><p class="mt-1 text-2xl font-extrabold text-slate-900">৳{{ number_format($monthlySales, 2) }}</p></div>
  </div>
</section>
<section class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
  @forelse($rules as $rule)
    @php($progress = min(100, ($monthlySales / max(1, (float) $rule->threshold_amount)) * 100))
    <article class="panel-card p-5">
      <div class="flex items-start justify-between gap-3"><div><h3 class="font-bold text-slate-900">{{ $rule->name }}</h3><p class="mt-1 text-xs text-slate-500">{{ __(auth()->user()->isEmployee() ? 'Assigned lead sales threshold' : 'Personal sales threshold') }}</p></div><span class="rounded-xl bg-amber-50 p-2 text-amber-600"><x-nav-icon name="sparkles" class="h-5 w-5" /></span></div>
      <p class="mt-5 text-sm text-slate-500">{{ __('Target') }}: ৳{{ number_format($rule->threshold_amount, 2) }}</p>
      <div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-gradient-to-r from-orange-500 to-rose-500" style="width: {{ $progress }}%"></div></div>
      <div class="mt-3 flex items-center justify-between gap-2 text-xs"><span class="text-slate-500">{{ number_format($progress, 1) }}%</span><span class="font-bold text-emerald-700">{{ __('Reward') }} ৳{{ number_format($rule->reward_amount, 2) }}</span></div>
    </article>
  @empty
    <div class="panel-card p-8 text-center text-sm text-slate-500 sm:col-span-2 xl:col-span-3">{{ __('There are no active incentive rules.') }}</div>
  @endforelse
</section>
<p class="mt-4 text-xs text-slate-500">{{ __('Incentives are credited by an administrator after verifying your qualification.') }} {{ __('Paid this month') }}: ৳{{ number_format($paidIncentives, 2) }}</p>
@endsection