@extends('layouts.child')
@section('content')
<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-indigo-700">🎁 Belohnungen</h1>
  <div class="bg-amber-100 text-amber-700 font-black rounded-full px-4 py-2">🪙 {{ auth()->user()->points }}</div>
</div>

<div class="grid gap-4 mb-8">
@foreach($rewards as $r)
@php $canAfford = auth()->user()->points >= $r->points_cost @endphp
<div class="bg-white rounded-2xl shadow-sm border {{ $canAfford ? 'border-slate-200 hover:border-indigo-300' : 'border-slate-100 opacity-60' }} p-5 transition-all">
  <div class="flex items-center justify-between gap-4">
    <div class="flex items-center gap-4">
      <span class="text-4xl">{{ $r->icon }}</span>
      <div>
        <div class="font-bold text-slate-800 text-base">{{ $r->name }}</div>
        @if($r->description)<div class="text-sm text-slate-500">{{ $r->description }}</div>@endif
        @if($r->minutes)<div class="text-xs text-slate-400 mt-0.5">⏱ {{ $r->minutes }} Minuten</div>@endif
      </div>
    </div>
    <div class="text-right shrink-0">
      <div class="font-black text-amber-600 text-lg">🪙 {{ $r->points_cost }}</div>
      @if($canAfford)
      <form method="POST" action="{{ route('rewards.redeem', $r) }}" onsubmit="return confirm('Möchtest du {{ $r->name }} für {{ $r->points_cost }} Münzen einlösen?')">
        @csrf
        <button class="mt-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-4 py-2 rounded-xl text-sm transition-colors">
          Einlösen
        </button>
      </form>
      @else
      <div class="mt-2 text-xs text-slate-400 font-medium">Noch {{ $r->points_cost - auth()->user()->points }} fehlen</div>
      @endif
    </div>
  </div>
</div>
@endforeach
</div>

@if($history->count())
<h2 class="font-bold text-slate-700 text-lg mb-4">📋 Meine Einlösungen</h2>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
@foreach($history as $red)
<div class="flex items-center justify-between px-5 py-3 {{ !$loop->last ? 'border-b border-slate-100' : '' }}">
  <div class="flex items-center gap-3">
    <span class="text-xl">{{ $red->reward->icon }}</span>
    <div>
      <div class="text-sm font-medium text-slate-700">{{ $red->reward->name }}</div>
      <div class="text-xs text-slate-400">{{ $red->created_at->format('d.m.Y') }}</div>
    </div>
  </div>
  <span class="text-xs font-bold px-2.5 py-1 rounded-full
    {{ $red->status==='approved' ? 'bg-green-100 text-green-700' :
       ($red->status==='rejected' ? 'bg-red-100 text-red-600' : 'bg-amber-100 text-amber-700') }}">
    {{ $red->status==='approved' ? '✅ Freigegeben' : ($red->status==='rejected' ? '❌ Abgelehnt' : '⏳ Warten...') }}
  </span>
</div>
@endforeach
</div>
@endif
@endsection