@extends('layouts.admin')
@section('title', 'Alta de Pareja')
@section('header', 'Alta de Pareja')

@section('content')
<div class="max-w-2xl">
<form method="POST" action="{{ route('admin.parejas.store') }}" class="space-y-6">
    @csrf

    <div class="bg-white rounded-xl shadow-sm border p-6">
        <h2 class="font-semibold text-gray-700 mb-4">Jugador 1</h2>
        <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
                <input type="text" name="nombre1" value="{{ old('nombre1') }}" required maxlength="100"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Teléfono (10 dígitos)</label>
                <input type="text" name="telefono1" value="{{ old('telefono1') }}" required maxlength="10" pattern="\d{10}"
                    placeholder="5512345678"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
                <p class="text-xs text-gray-400 mt-0.5">Será la contraseña inicial</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Correo</label>
                <input type="email" name="correo1" value="{{ old('correo1') }}" required
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border p-6">
        <h2 class="font-semibold text-gray-700 mb-4">Jugador 2</h2>
        <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
                <input type="text" name="nombre2" value="{{ old('nombre2') }}" required maxlength="100"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Teléfono (10 dígitos)</label>
                <input type="text" name="telefono2" value="{{ old('telefono2') }}" required maxlength="10" pattern="\d{10}"
                    placeholder="5598765432"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
                <p class="text-xs text-gray-400 mt-0.5">Será la contraseña inicial</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Correo</label>
                <input type="email" name="correo2" value="{{ old('correo2') }}" required
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border p-6">
        <h2 class="font-semibold text-gray-700 mb-4">Datos de la pareja</h2>
        <div class="grid grid-cols-3 gap-4">
            <div class="col-span-3">
                <label class="block text-sm font-medium text-gray-700 mb-1">Apodo (máx 15 caracteres — único)</label>
                <input type="text" name="apodo" value="{{ old('apodo') }}" required maxlength="15"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none"
                    placeholder="Ej: LosBravos">
                <p class="text-xs text-gray-400 mt-0.5">Es el usuario de acceso. Sin espacios ni caracteres especiales.</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Puntos iniciales</label>
                <input type="number" name="puntos" value="{{ old('puntos', 0) }}" required min="0"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
                <p class="text-xs text-gray-400 mt-0.5">Determina el nivel automáticamente</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tokens iniciales</label>
                <input type="number" name="tokens" value="{{ old('tokens', 0) }}" required min="0"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-gray-400 focus:outline-none">
            </div>
        </div>
    </div>

    <div class="flex gap-3">
        <button type="submit"
            class="bg-gray-900 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-gray-700 transition">
            Dar de alta
        </button>
        <a href="{{ route('admin.parejas.index') }}"
            class="bg-white border px-6 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition">
            Cancelar
        </a>
    </div>
</form>
</div>
@endsection