@extends('layouts.authLayout')

@section('title', 'Register')


@section('content')
    <div class="d-flex justify-content-center container mb-5">
        <div class="col-12 col-lg-6 row p-4 rounded-4 divRegistro">
            <div class="text-center mb-4">
                <a href="{{ route('mainPage') }}">
                    <img src="{{ asset('img/dailyStudyLogo.png') }}" alt="DailyStudy Logo" class="img-fluid" style="max-height: 100px;">
                </a>
            </div>
            <h2 class="text-center w-100 mb-4">Create new user</h2>
            <form action="{{ route('auth.signup.submit') }}" method="POST" class="w-100">
                @csrf
                <div class="row">
                    <!-- Columna 1: Nombre, Apellido, Username -->
                    <div class="col-md-6 mb-3">
                        <!-- Campo Nombre -->
                        <label for="name" class="form-label">Name</label>
                        <br>
                        <input type="text" class="auth-input w-100" id="name" name="name" value="{{ old('name') }}">
                        @error('name')
                            <p class="error" style="color: red;">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <!-- Campo Apellido -->
                        <label for="surname" class="form-label">Surname</label>
                        <input type="text" class="auth-input w-100" id="surname" name="surname" value="{{ old('surname') }}">
                        @error('surname')
                            <p class="error" style="color: red;">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <!-- Campo Username -->
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="auth-input w-100" id="username" name="username" value="{{ old('username') }}">
                        @error('username')
                            <p class="error" style="color: red;">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <!-- Campo Email -->
                        <label for="email" class="form-label">Email</label>
                        <br>
                        <input type="email" class="auth-input w-100" id="email" name="email" value="{{ old('email') }}">
                        @error('email')
                            <p class="error" style="color: red;">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-3">
                        <!-- Campo Contraseña -->
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="auth-input w-100" id="password" name="password">
                        <i class="bi bi-eye-slash" id="togglePassword2"></i>
                        @error('password')
                            <p class="error" style="color: red;">{{ $message }}</p>
                        @enderror
                    </div>
        
                    <div class="col-md-6 mb-3">
                        <!-- Campo Repetir Contraseña -->
                        <label for="password_confirmation" class="form-label">Repeat password</label>
                        <input type="password" class="auth-input w-100" id="password_confirmation" name="password confirmation">
                        <i class="bi bi-eye-slash" id="togglePassword3"></i>
                        @error('password_confirmation')
                            <p class="error" style="color: red;">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                
                <!-- Botón de Enviar -->
                <div class="text-center pt-4 mb-3">
                    <button type="submit" class="btn btn1">Register</button>
                </div>
            </form>
            <p>Already have an account? Log in <a href="{{ route('login') }}">here</a></p>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/register.js') }}"></script>
@endsection