@extends('layouts.app')

@section('content')
<style>
:root {
    --blulinc-black: #000000;
    --blulinc-blue: #015cff;
    --blulinc-gray: #c1c1c1;
    --blulinc-light-gray: #f8f9fa;
    --blulinc-light-blue: #e6f2ff;
    --blulinc-bg-blue: #f0f7ff;
}

.blulinc-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--blulinc-bg-blue) 0%, var(--blulinc-light-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.blulinc-form-container {
    width: 100%;
    max-width: 500px;
}

.blulinc-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(1, 92, 255, 0.15);
    overflow: hidden;
    border: 2px solid #e1ecf7;
}

.blulinc-card-header {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    color: white;
    padding: 24px 32px;
    text-align: center;
}

.blulinc-card-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
}

.blulinc-card-body {
    padding: 32px;
}

.blulinc-form-group {
    margin-bottom: 24px;
}

.blulinc-form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--blulinc-black);
    font-weight: 600;
    font-size: 14px;
}

.blulinc-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1ecf7;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s ease;
    background-color: white;
    box-sizing: border-box;
}

.blulinc-form-control:focus {
    outline: none;
    border-color: var(--blulinc-blue);
    box-shadow: 0 0 0 3px rgba(1, 92, 255, 0.1);
}

.blulinc-btn-primary {
    background: linear-gradient(135deg, var(--blulinc-blue) 0%, #0147d9 100%);
    border: none;
    color: white;
    border-radius: 12px;
    font-weight: 700;
    padding: 16px 32px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(1, 92, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.blulinc-btn-primary:hover {
    background: linear-gradient(135deg, #0147d9 0%, #0133b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 92, 255, 0.35);
    color: white;
}

.blulinc-btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    border: none;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    padding: 16px 32px;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.blulinc-btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

.button-group {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.blulinc-invalid-feedback {
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}

/* Estilos para campos de contraseña */
.blulinc-password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.blulinc-password-input {
    padding-right: 45px;
    border: 2px solid #e1ecf7;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.blulinc-password-input:focus {
    border-color: var(--blulinc-blue);
    box-shadow: 0 0 0 3px rgba(1, 92, 255, 0.1);
}

.blulinc-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--blulinc-gray);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blulinc-password-toggle:hover {
    color: var(--blulinc-blue);
    background-color: rgba(1, 92, 255, 0.1);
}

.blulinc-password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}
</style>

<div class="blulinc-container">
    <div class="blulinc-form-container">
        <div class="blulinc-card">
            <div class="blulinc-card-header">
                <h4><i class="bi bi-person-plus me-2"></i>{{ __('Register') }}</h4>
            </div>
            <div class="blulinc-card-body">
                <form method="POST" action="{{ route('register') }}">
                    @csrf

                    <div class="blulinc-form-group">
                        <label for="name" class="blulinc-form-label">
                            <i class="bi bi-person me-1"></i>{{ __('Name') }}
                        </label>
                        <input id="name" type="text" class="blulinc-form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus placeholder="Enter your full name">

                        @error('name')
                            <span class="blulinc-invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="blulinc-form-group">
                        <label for="email" class="blulinc-form-label">
                            <i class="bi bi-envelope me-1"></i>{{ __('Email Address') }}
                        </label>
                        <input id="email" type="email" class="blulinc-form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="Enter your email address">

                        @error('email')
                            <span class="blulinc-invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="blulinc-form-group">
                        <label for="password" class="blulinc-form-label">
                            <i class="bi bi-lock me-1"></i>{{ __('Password') }}
                        </label>
                        <div class="blulinc-password-container">
                            <input id="password" type="password" class="blulinc-form-control blulinc-password-input @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" placeholder="Enter your password">
                            <button type="button" class="blulinc-password-toggle" onclick="togglePassword('password')">
                                <i class="bi bi-eye" id="password-icon"></i>
                            </button>
                        </div>

                        @error('password')
                            <span class="blulinc-invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="blulinc-form-group">
                        <label for="password-confirm" class="blulinc-form-label">
                            <i class="bi bi-lock-fill me-1"></i>{{ __('Confirm Password') }}
                        </label>
                        <div class="blulinc-password-container">
                            <input id="password-confirm" type="password" class="blulinc-form-control blulinc-password-input" name="password_confirmation" required autocomplete="new-password" placeholder="Confirm your password">
                            <button type="button" class="blulinc-password-toggle" onclick="togglePassword('password-confirm')">
                                <i class="bi bi-eye" id="password-confirm-icon"></i>
                            </button>
                        </div>
                    </div>

                    <div class="button-group">
                        <button type="submit" class="blulinc-btn-primary">
                            <i class="bi bi-check-circle me-2"></i>{{ __('Register') }}
                        </button>
                        <a href="{{ route('login') }}" class="blulinc-btn-secondary">
                            <i class="bi bi-arrow-left me-2"></i>Back to Login
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Función para mostrar/ocultar contraseña
function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const icon = document.getElementById(inputId + '-icon');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    }
}
</script>
@endsection
