@extends('layouts.auth')

@section('content')
<div class="register-wrapper">
    <div class="register-container">
        <div class="register-card">
            <div class="register-header">
                <h3 class="register-title">{{ __('Create Your Account') }}</h3>
                <p class="register-subtitle">{{ __('Join Flexcom Today') }}</p>
            </div>

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

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="name" 
                                   type="text" 
                                   class="@error('name') is-invalid @enderror"
                                   name="name" 
                                   value="{{ old('name') }}" 
                                   required 
                                   autocomplete="name" 
                                   autofocus
                                   placeholder=" ">
                            <label for="name">
                                <i class="bi bi-person"></i>
                                {{ __('Full Name') }}
                            </label>
                            @error('name')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="email" 
                                   type="email" 
                                   class="@error('email') is-invalid @enderror"
                                   name="email" 
                                   value="{{ old('email') }}" 
                                   required 
                                   autocomplete="email"
                                   placeholder=" ">
                            <label for="email">
                                <i class="bi bi-envelope"></i>
                                {{ __('Email Address') }}
                            </label>
                            @error('email')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <select id="role" 
                                    class="form-select @error('role') is-invalid @enderror" 
                                    name="role" 
                                    required>
                                <option value="" disabled selected>{{ __('Select Role') }}</option>
                                <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                                <option value="manager" {{ old('role') == 'manager' ? 'selected' : '' }}>Manager</option>
                                <option value="staff" {{ old('role') == 'staff' ? 'selected' : '' }}>Staff</option>
                            </select>
                            <label for="role">
                                <i class="bi bi-briefcase"></i>
                                {{ __('Role') }}
                            </label>
                            @error('role')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="password" 
                                   type="password" 
                                   class="@error('password') is-invalid @enderror"
                                   name="password" 
                                   required 
                                   autocomplete="new-password"
                                   placeholder=" ">
                            <label for="password">
                                <i class="bi bi-lock"></i>
                                {{ __('Password') }}
                            </label>
                            <button type="button" class="password-toggle" onclick="togglePassword()">
                                <i class="bi bi-eye-slash" id="toggleIcon"></i>
                            </button>
                            @error('password')
                                <span class="error-message" role="alert">
                                    <i class="bi bi-exclamation-circle"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-floating">
                            <input id="password-confirm" 
                                   type="password" 
                                   class="form-control"
                                   name="password_confirmation" 
                                   required 
                                   autocomplete="new-password"
                                   placeholder=" ">
                            <label for="password-confirm">
                                <i class="bi bi-check-circle"></i>
                                {{ __('Confirm Password') }}
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="register-button">
                        <span>{{ __('Register') }}</span>
                        <i class="bi bi-arrow-right"></i>
                    </button>

                    <div class="register-footer">
                        <p class="login-text">
                            {{ __("Already have an account?") }}
                            <a href="{{ route('login') }}" class="login-link">{{ __('Sign in') }}</a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleIcon = document.getElementById('toggleIcon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('bi-eye-slash');
        toggleIcon.classList.add('bi-eye');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('bi-eye');
        toggleIcon.classList.add('bi-eye-slash');
    }
}
</script>
@endpush
@endsection