@extends('layouts.admin')
@section('title', 'Tokens')
@section('header', 'Gestión de Tokens')

@section('content')

{{-- Alertas: sin tokens --}}
@if($sinTokens->count() > 0)
<div class="mb-6">
    <h2 class="font-semibold text-red-700 mb-3">🔴 Sin tokens ({{ $sinTokens->count() }})</h2>
    <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
        @foreach($sinTokens as $p)
        <div class="flex items-center justify-between px-4 py-3 border-b last:border-0">
            <div>
                <span class="font-semibold text-gray-800">{{ $p->apodo }}</span>
                <span class="text-sm text-red-600 ml-2 font-semibold">{{ $p->tokens }} tokens</span>
                <div class="text-xs text-gray-400">{{ $p->jugador1->nombre }} / {{ $p->jugador2->nombre }}</div>
            </div>
            <form method="POST" action="{{ route('admin.tokens.agregar', $p) }}" class="flex gap-2 items-center" x-data>
                @csrf
                <input type="number" name="cantidad" placeholder="Cantidad" required
                    class="w-24 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400">
                <input type="text" name="motivo" placeholder="Motivo" required
                    class="w-40 border rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400">
                <button class="bg-gray-900 text-white px-3 py-1 rounded text-sm hover:bg-gray-700 transition">
                    Agregar
                </button>
            </form>
        </div>
        @endforeach
    </div>
</div>
@endif

{{-- Movimientos recientes --}}
<h2 class="font-semibold text-gray-700 mb-3">Últimos movimientos</h2>
<div class="bg-white rounded-xl shadow-sm border overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b text-xs uppercase text-gray-500">
            <tr>
                <th class="px-4 py-3 text-left">Fecha</th>
                <th class="px-4 py-3 text-left">Pareja</th>
                <th class="px-4 py-3 text-center">Tipo</th>
                <th class="px-4 py-3 text-center">Cantidad</th>
                <th class="px-4 py-3 text-left">Motivo</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($movimientos as $m)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-2 text-gray-500">{{ $m->created_at->format('d/m H:i') }}</td>
                <td class="px-4 py-2 font-medium">{{ $m->pareja->apodo }}</td>
                <td class="px-4 py-2 text-center">
                    <span class="text-xs px-2 py-0.5 rounded-full
                        @if($m->tipo === 'compra') bg-green-100 text-green-700
                        @elseif($m->tipo === 'consumo') bg-red-100 text-red-700
                        @else bg-blue-100 text-blue-700 @endif">
                        {{ $m->tipo }}
                    </span>
                </td>
                <td class="px-4 py-2 text-center font-semibold {{ $m->cantidad > 0 ? 'text-green-600' : 'text-red-600' }}">
                    {{ $m->cantidad > 0 ? '+' : '' }}{{ $m->cantidad }}
                </td>
                <td class="px-4 py-2 text-gray-500 text-xs">{{ $m->motivo ?? '—' }}</td>
            </tr>
            @empty
            <tr><td colspan="5" class="px-4 py-6 text-center text-gray-400">Sin movimientos.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection