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

@section('content')
<div class="space-y-3">
    @foreach($niveles as $nivel)
    <div class="bg-white rounded-xl shadow-sm border p-4 flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <div class="w-5 h-5 rounded-full flex-shrink-0" style="background-color: {{ $nivel->color_hex }}"></div>
            <div>
                <div class="font-semibold text-gray-800 capitalize">{{ $nivel->nombre }}</div>
                <div class="text-xs text-gray-400">Orden {{ $nivel->orden }}</div>
            </div>
        </div>

        <div class="flex items-center gap-6 text-sm">
            <div class="text-center">
                <div class="font-semibold text-gray-800">{{ $nivel->parejas_activas }} / {{ $nivel->nombre === 'espera' ? '∞' : $nivel->max_parejas }}</div>
                <div class="text-xs text-gray-400">Parejas</div>
            </div>

            <div class="flex items-center gap-2">
                @if($nivel->bloqueado)
                    <span class="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full">Bloqueado</span>
                    <form method="POST" action="{{ route('admin.niveles.abrir', $nivel) }}">
                        @csrf
                        <button class="text-xs bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 transition">
                            Abrir nivel
                        </button>
                    </form>
                @elseif($nivel->nombre !== 'espera')
                    <span class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Activo</span>
                    <form method="POST" action="{{ route('admin.niveles.bloquear', $nivel) }}">
                        @csrf
                        <button onclick="return confirm('¿Bloquear nivel {{ $nivel->nombre }}?')"
                            class="text-xs bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-gray-300 transition">
                            Bloquear
                        </button>
                    </form>
                @else
                    <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">Sala de espera</span>
                @endif

                @if($nivel->nombre !== 'espera')
                <form method="POST" action="{{ route('admin.niveles.capacidad', $nivel) }}" class="flex items-center gap-1" x-data>
                    @csrf
                    <input type="number" name="capacidad" value="{{ $nivel->max_parejas }}" min="1" max="100"
                        class="w-14 border rounded px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-gray-400">
                    <button class="text-xs bg-indigo-600 text-white px-2 py-1 rounded hover:bg-indigo-700 transition">
                        Capacidad
                    </button>
                </form>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-xl p-4 text-sm text-yellow-800">
    <strong>Regla fundamental:</strong> Al abrir un nivel bloqueado o cambiar capacidades, se ejecuta automáticamente el recálculo completo de posiciones con efecto cascada.
</div>
@endsection