@extends('layouts.admin')
@section('title', 'Parejas')
@section('header', 'Parejas')

@section('content')
<div class="flex justify-between items-center mb-4">
    <span class="text-sm text-gray-500">{{ $parejas->total() }} parejas registradas</span>
    <a href="{{ route('admin.parejas.create') }}"
       class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg hover:bg-gray-700 transition">
        + Alta de pareja
    </a>
</div>

<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">Apodo</th>
                <th class="px-4 py-3 text-left">Jugadores</th>
                <th class="px-4 py-3 text-center">Nivel</th>
                <th class="px-4 py-3 text-center">Pos</th>
                <th class="px-4 py-3 text-center">Pts</th>
                <th class="px-4 py-3 text-center">Tokens</th>
                <th class="px-4 py-3 text-center">Status</th>
                <th class="px-4 py-3 text-center">Días sin jugar</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($parejas as $p)
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 font-semibold">{{ $p->apodo }}</td>
                <td class="px-4 py-3 text-gray-600">
                    {{ $p->jugador1->nombre }}<br>
                    <span class="text-xs text-gray-400">{{ $p->jugador2->nombre }}</span>
                </td>
                <td class="px-4 py-3 text-center">
                    @if($p->nivel)
                        <span class="px-2 py-0.5 rounded-full text-xs font-medium text-white"
                              style="background-color: {{ $p->nivel->color_hex }}">
                            {{ $p->nivel->nombre }}
                        </span>
                    @else
                        <span class="text-gray-400">—</span>
                    @endif
                </td>
                <td class="px-4 py-3 text-center">{{ $p->posicion_en_nivel ?? '—' }}</td>
                <td class="px-4 py-3 text-center font-semibold">{{ $p->puntos_total }}</td>
                <td class="px-4 py-3 text-center {{ $p->tokens <= 0 ? 'text-red-600 font-semibold' : '' }}">
                    {{ $p->tokens }}
                </td>
                <td class="px-4 py-3 text-center">
                    <span class="text-xs px-2 py-0.5 rounded-full
                        @if($p->status === 'activa') bg-green-100 text-green-700
                        @elseif($p->status === 'espera') bg-yellow-100 text-yellow-700
                        @else bg-red-100 text-red-700 @endif">
                        {{ $p->status }}
                    </span>
                </td>
                <td class="px-4 py-3 text-center {{ $p->dias_sin_jugar >= 7 ? 'text-orange-600 font-semibold' : '' }}">
                    {{ $p->dias_sin_jugar }}
                </td>
                <td class="px-4 py-3">
                    <a href="{{ route('admin.parejas.edit', $p) }}"
                       class="text-xs text-blue-600 hover:underline">Editar</a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9" class="px-4 py-8 text-center text-gray-400">No hay parejas registradas.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $parejas->links() }}</div>
@endsection