@extends('layouts.auth')

@section('title', 'Registrarse')

@section('content')
<div style="max-width: 600px m-auto">
<div class="relative flex flex-col justify-center h-screen overflow-hidden">
    <div class="w-full p-6 m-auto bg-white rounded-md shadow-md lg:max-w-lg">
        <h1 class="text-3xl font-semibold text-center text-purple-700">Registrarse</h1>
        @if($errors->any())
            {!! implode('', $errors->all('<strong class="text-red-200">:message</strong>')) !!}
        @endif

        <form method="POST" action="{{ route('register') }}" class="space-y-4">
            @csrf
            <div>
                <label class="label">
                    <span class="text-base label-text">Nombre usuario</span>
                </label>
                <input type="text" name="name" id="name"  placeholder="Nombre de usuario" class="form-control w-full input input-bordered input-primary" />
            </div>

            <div>
                <label class="label">
                    <span class="text-base label-text">Email</span>
                </label>
                <input type="email" name="email" id="email" placeholder="Email" class="form-control w-full input input-bordered input-primary" />
            </div>
            <div>
                <label class="label">
                    <span class="text-base label-text">Contraseña</span>
                </label>
                <input type="password" name="password" id="password" placeholder="Introducir contraseña" class="form-control w-full input input-bordered input-primary" />
            </div>
            <div>
                <label class="label">
                    <span class="text-base label-text">Confirmar contraseña</span>
                </label>
                <input type="password" name="password_confirmation" id="password_confirmation"  placeholder="Confirmación de contraseña" class="form-control w-full input input-bordered input-primary" />
            </div>

            <a href="{{ route('login') }}" class="text-xs text-gray-600 hover:underline hover:text-blue-600">Iniciar Sesión</a>
            <div>
                <button  type="submit" class="btn btn-primary">Registrarse</button>
            </div>
        </form>
    </div>
</div>
</div>
@endsection