@extends('layouts.admin')
@section('title','Einlösungen')
@section('content')
@if($pending->count())
<h2 class="font-semibold text-slate-800 mb-4">⏳ Warten auf Freigabe</h2>
<div class="space-y-3 mb-8">
@foreach($pending as $red)
<div class="bg-white rounded-xl shadow-sm border border-amber-200 p-5 flex items-center justify-between gap-4">
  <div class="flex items-center gap-4">
    <span class="text-3xl">{{ $red->reward->icon }}</span>
    <div>
      <div class="font-semibold text-slate-800">{{ $red->user->name }} möchte: {{ $red->reward->name }}</div>
      <div class="text-sm text-slate-500">🪙 {{ $red->points_spent }} Münzen · {{ $red->created_at->diffForHumans() }}</div>
    </div>
  </div>
  <div class="flex gap-2 shrink-0">
    <form method="POST" action="{{ route('admin.redemptions.approve',$red) }}">
      @csrf @method('PATCH')
      <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium">✅ Freigeben</button>
    </form>
    <form method="POST" action="{{ route('admin.redemptions.reject',$red) }}" x-data x-on:submit.prevent="if(confirm('Ablehnen?')) $el.submit()">
      @csrf @method('PATCH')
      <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium">❌ Ablehnen</button>
    </form>
  </div>
</div>
@endforeach
</div>
@else
<div class="bg-green-50 border border-green-200 rounded-xl p-5 mb-8 text-green-700 font-medium">✅ Keine offenen Einlösungen.</div>
@endif
<h2 class="font-semibold text-slate-800 mb-4">📋 Verlauf</h2>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 border-b border-slate-200">
      <tr>
        <th class="text-left px-4 py-3 font-medium text-slate-600">Kind</th>
        <th class="text-left px-4 py-3 font-medium text-slate-600">Belohnung</th>
        <th class="text-center px-4 py-3 font-medium text-slate-600">Status</th>
        <th class="text-right px-4 py-3 font-medium text-slate-600">Münzen</th>
        <th class="text-right px-4 py-3 font-medium text-slate-600">Datum</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
    @forelse($resolved as $red)
    <tr>
      <td class="px-4 py-3 font-medium text-slate-700">{{ $red->user->name }}</td>
      <td class="px-4 py-3">{{ $red->reward->icon }} {{ $red->reward->name }}</td>
      <td class="px-4 py-3 text-center">
        <span class="{{ $red->status==='approved' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }} px-2 py-0.5 rounded-full text-xs font-medium">
          {{ $red->status==='approved' ? 'Freigegeben' : 'Abgelehnt' }}
        </span>
      </td>
      <td class="px-4 py-3 text-right text-amber-600 font-medium">🪙 {{ $red->points_spent }}</td>
      <td class="px-4 py-3 text-right text-slate-400 text-xs">{{ $red->created_at->format('d.m.Y') }}</td>
    </tr>
    @empty
    <tr><td colspan="5" class="px-4 py-6 text-center text-slate-400">Noch keine Einlösungen.</td></tr>
    @endforelse
    </tbody>
  </table>
</div>
@endsection