{{-- Professional Register Page - Bootstrap Implementation --}}
@extends('layouts.material-auth')

@section('title', 'Create Account - ' . config('app.name'))

@section('head')
    <meta name="description" content="Create your account to access our professional resume builder">
    <meta name="keywords" content="register, create account, resume builder, professional">
@endsection

@section('content')
<div class="register-container">
    {{-- Hero Background Section (Left) --}}
    <div class="hero-background">
        <div class="hero-overlay">
            <div class="hero-content">
                <div class="hero-icon">
                    <i class="bi bi-person-plus-fill large-icon"></i>
                </div>
                <h2 class="hero-title">Join Today</h2>
                <p class="hero-subtitle">Create your professional resume with our advanced builder tools</p>
                <div class="author-signature">
                    <small>🇩🇪 Made in Germany by David Valera Melendez</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Register Form Section (Right) --}}
    <div class="register-form-container">
        <div class="register-card">
            <div class="card-body">
                {{-- Form Header --}}
                <div class="form-header">
                    <div class="register-avatar">
                        <i class="bi bi-person-plus"></i>
                    </div>
                    <h2 class="form-title">Create Account</h2>
                    <p class="form-subtitle">Join us to build your professional resume</p>
                </div>

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

                    {{-- Registration Form --}}
                    <form method="POST" action="{{ route('register') }}" class="register-form" id="registerForm">
                        @csrf

                        {{-- Name Fields Row --}}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-field">
                                    <input type="text" 
                                           class="form-control material-input @error('first_name') is-invalid @enderror" 
                                           id="first_name" 
                                           name="first_name" 
                                           value="{{ old('first_name') }}"
                                           placeholder=" "
                                           required>
                                    <label for="first_name" class="form-label">First Name</label>
                                    @error('first_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-field">
                                    <input type="text" 
                                           class="form-control material-input @error('last_name') is-invalid @enderror" 
                                           id="last_name" 
                                           name="last_name" 
                                           value="{{ old('last_name') }}"
                                           placeholder=" "
                                           required>
                                    <label for="last_name" class="form-label">Last Name</label>
                                    @error('last_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Email Field --}}
                        <div class="form-field">
                            <input type="email" 
                                   class="form-control material-input @error('email') is-invalid @enderror" 
                                   id="email" 
                                   name="email" 
                                   value="{{ old('email') }}"
                                   placeholder=" "
                                   required>
                            <label for="email" class="form-label">Email Address</label>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Password Field --}}
                        <div class="form-field">
                            <input type="password" 
                                   class="form-control material-input @error('password') is-invalid @enderror" 
                                   id="password" 
                                   name="password" 
                                   placeholder=" "
                                   required>
                            <label for="password" class="form-label">Password</label>
                            <button type="button" class="password-toggle" id="passwordToggle">
                                <i class="bi bi-eye"></i>
                            </button>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="password-requirements" id="passwordRequirements" style="display: none;">
                                <small class="text-muted">
                                    Password must be at least 8 characters long
                                </small>
                            </div>
                        </div>

                        {{-- Confirm Password Field --}}
                        <div class="form-field">
                            <input type="password" 
                                   class="form-control material-input @error('password_confirmation') is-invalid @enderror" 
                                   id="password_confirmation" 
                                   name="password_confirmation" 
                                   placeholder=" "
                                   required>
                            <label for="password_confirmation" class="form-label">Confirm Password</label>
                            <button type="button" class="password-toggle" id="confirmPasswordToggle">
                                <i class="bi bi-eye"></i>
                            </button>
                            @error('password_confirmation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Terms and Conditions --}}
                        <div class="form-check">
                            <input type="checkbox" 
                                   class="form-check-input @error('terms') is-invalid @enderror" 
                                   id="terms" 
                                   name="terms" 
                                   value="1" 
                                   {{ old('terms') ? 'checked' : '' }}
                                   required>
                            <label class="form-check-label" for="terms">
                                I agree to the <a href="#" class="text-decoration-none">Terms of Service</a> and <a href="#" class="text-decoration-none">Privacy Policy</a>
                            </label>
                            @error('terms')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Newsletter Subscription --}}
                        <div class="form-check">
                            <input type="checkbox" 
                                   class="form-check-input" 
                                   id="newsletter" 
                                   name="newsletter" 
                                   value="1"
                                   {{ old('newsletter') ? 'checked' : '' }}>
                            <label class="form-check-label" for="newsletter">
                                Subscribe to our newsletter for resume tips and updates
                            </label>
                        </div>

                        {{-- Register Button --}}
                        <button type="submit" class="btn register-btn" id="registerBtn">
                            <span class="btn-text">Create Account</span>
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                        </button>
                    </form>

                    {{-- Divider --}}
                    <div class="divider">
                        <span>or register with</span>
                    </div>

                    {{-- Social Registration --}}
                    <div class="social-login">
                        <div class="social-buttons">
                            <button type="button" class="btn social-btn google-btn">
                                <i class="bi bi-google"></i>
                                Google
                            </button>
                            <button type="button" class="btn social-btn github-btn">
                                <i class="bi bi-github"></i>
                                GitHub
                            </button>
                        </div>
                    </div>

                    {{-- Login Link --}}
                    <div class="login-link">
                        <p>Already have an account? <a href="{{ route('login') }}" class="login-link-text">Sign in here</a></p>
                    </div>
                </div>
            </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password visibility toggles
    const passwordToggle = document.getElementById('passwordToggle');
    const confirmPasswordToggle = document.getElementById('confirmPasswordToggle');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('password_confirmation');
    const passwordRequirements = document.getElementById('passwordRequirements');

    // Password toggle functionality
    passwordToggle?.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.querySelector('i').classList.toggle('bi-eye');
        this.querySelector('i').classList.toggle('bi-eye-slash');
    });

    confirmPasswordToggle?.addEventListener('click', function() {
        const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        confirmPasswordInput.setAttribute('type', type);
        this.querySelector('i').classList.toggle('bi-eye');
        this.querySelector('i').classList.toggle('bi-eye-slash');
    });

    // Show password requirements on focus
    passwordInput?.addEventListener('focus', function() {
        passwordRequirements.style.display = 'block';
    });

    passwordInput?.addEventListener('blur', function() {
        if (this.value.length === 0) {
            passwordRequirements.style.display = 'none';
        }
    });

    // Form validation and submission
    const registerForm = document.getElementById('registerForm');
    const registerBtn = document.getElementById('registerBtn');

    registerForm?.addEventListener('submit', function(e) {
        // Add loading state
        registerBtn.disabled = true;
        registerBtn.querySelector('.btn-text').textContent = 'Creating Account...';
        registerBtn.querySelector('.spinner-border').classList.remove('d-none');
    });

    // Real-time validation
    const inputs = registerForm?.querySelectorAll('.material-input');
    inputs?.forEach(input => {
        input.addEventListener('blur', function() {
            validateField(this);
        });

        input.addEventListener('input', function() {
            if (this.classList.contains('is-invalid')) {
                validateField(this);
            }
        });
    });

    // Password confirmation validation
    confirmPasswordInput?.addEventListener('input', function() {
        if (passwordInput.value !== this.value) {
            this.classList.add('is-invalid');
            this.classList.remove('is-valid');
        } else if (this.value.length > 0) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        }
    });

    function validateField(field) {
        const value = field.value.trim();
        
        // Reset validation classes
        field.classList.remove('is-invalid', 'is-valid');
        
        if (field.hasAttribute('required') && !value) {
            field.classList.add('is-invalid');
            return false;
        }
        
        if (field.type === 'email' && value) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value)) {
                field.classList.add('is-invalid');
                return false;
            }
        }
        
        if (field.type === 'password' && value) {
            if (value.length < 8) {
                field.classList.add('is-invalid');
                return false;
            }
        }
        
        if (value) {
            field.classList.add('is-valid');
        }
        
        return true;
    }
});
</script>
@endpush
@endsection