@extends('auth.body.main')

@section('container')
<div class="container">
    <div class="row align-items-center justify-content-center height-self-center">
        <div class="col-lg-6 col-md-8 col-sm-10">
            <div class="card auth-card shadow-lg border-0 rounded-lg" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);">
                <div class="card-body p-4">
                    <div class="p-3">
                        <div class="text-center mb-4">
                            <h2 class="mb-2 font-weight-bold text-dark" style="letter-spacing: -0.5px;">Aurora POS</h2>
                            <p class="text-muted font-size-14">Cree una cuenta para comenzar</p>
                        </div>

                        <form method="POST" action="{{ route('register') }}">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="floating-label form-group">
                                        <input class="floating-input form-control @error('name') is-invalid @enderror" type="text" placeholder=" " name="name" autocomplete="off" value="{{ old('name') }}" required>
                                        <label>Nombre completo</label>
                                    </div>
                                    @error('name')
                                    <div class="mb-4" style="margin-top: -20px">
                                        <div class="text-danger small">{{ $message }}</div>
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-lg-12">
                                    <div class="floating-label form-group">
                                        <input class="floating-input form-control @error('username') is-invalid @enderror" type="text" placeholder=" " name="username" autocomplete="off" value="{{ old('username') }}"  required>
                                        <label>Nombre de usuario</label>
                                    </div>
                                    @error('username')
                                    <div class="mb-4" style="margin-top: -20px">
                                        <div class="text-danger small">{{ $message }}</div>
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-lg-12">
                                    <div class="floating-label form-group">
                                        <input class="floating-input form-control @error('email') is-invalid @enderror" type="email" placeholder=" " name="email" autocomplete="off" value="{{ old('email') }}" required>
                                        <label>Email</label>
                                    </div>
                                    @error('email')
                                    <div class="mb-4" style="margin-top: -20px">
                                        <div class="text-danger small">{{ $message }}</div>
                                    </div>
                                    @enderror
                                </div>

                                <div class="col-lg-6">
                                    <div class="floating-label form-group">
                                        <input class="floating-input form-control @error('password') is-invalid @enderror" type="password" placeholder=" "  name="password" autocomplete="off" required>
                                        <label>Contraseña</label>
                                    </div>
                                    @error('password')
                                    <div class="mb-4" style="margin-top: -20px">
                                        <div class="text-danger small">{{ $message }}</div>
                                    </div>
                                    @enderror
                                </div>
                                <div class="col-lg-6">
                                    <div class="floating-label form-group">
                                        <input class="floating-input form-control" type="password" placeholder=" " name="password_confirmation" autocomplete="off" required>
                                        <label>Confirmar Contraseña</label>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block py-2 font-weight-bold">Crear Cuenta</button>
                            
                            <div class="text-center mt-4">
                                <p class="mb-0 text-muted font-size-13">
                                    ¿Ya tienes una cuenta? <a href="{{ route('login') }}" class="text-primary font-weight-bold">Iniciar Sesión</a>
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection