@extends('app')

@section('titulo', 'Registro')

@section('content')
<div class="container">
    <div class="auth-form">
        <h2>Crear Cuenta</h2>

        @if ($errors->any())
            <div class="alert alert-danger">
                @foreach ($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div class="form-group">
                <label for="name">Nombre:</label>
                <input type="text" id="name" name="name" value="{{ old('name') }}" required>
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" required>
            </div>

            <div class="form-group">
                <label for="password">Contraseña:</label>
                <input type="password" id="password" name="password" required>
            </div>

            <div class="form-group">
                <label for="password_confirmation">Confirmar Contraseña:</label>
                <input type="password" id="password_confirmation" name="password_confirmation" required>
            </div>

            <button type="submit" class="btn-clash">Crear Cuenta</button>
        </form>

        <p class="text-center mt-4">
            ¿Ya tienes cuenta? <a href="{{ route('login') }}">Inicia sesión aquí</a>
        </p>
    </div>
</div>

<style>
    .auth-form {
        max-width: 400px;
        margin: 50px auto;
        background: #2c3e50;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(1, 139, 246, 0.3);
    }

    .auth-form h2 {
        color: #018BF6;
        margin-bottom: 20px;
        text-align: center;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #ecf0f1;
    }

    .form-group input {
        width: 100%;
        padding: 10px;
        border: 1px solid #018BF6;
        border-radius: 4px;
        background: #1c2331;
        color: #ecf0f1;
        box-sizing: border-box;
    }

    .form-group input:focus {
        outline: none;
        border-color: #d400ffff;
        box-shadow: 0 0 5px #d400ffff;
    }

    .alert {
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 4px;
    }

    .alert-danger {
        background: #c0392b;
        color: white;
    }

    .mt-4 {
        margin-top: 20px;
    }

    .text-center {
        text-align: center;
    }

    .text-center a {
        color: #018BF6;
        text-decoration: none;
    }

    .text-center a:hover {
        color: #d400ffff;
    }
</style>
@endsection