@extends('layouts.app')

@section('title', __('general.register') . ' - ' . __('general.company_name'))

@section('content')
    <section class="auth-section"
        style="min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;">
        <div class="container" style="max-width: 1200px; margin: 0 auto;">
            <div class="auth-container" style="max-width: 650px; margin: 0 auto; width: 100%;">
                <div class="auth-card glass-morphism"
                    style="padding: 2.5rem; border-radius: 20px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);">
                    <div class="auth-header text-center" style="margin-bottom: 2rem;">
                        <div class="auth-logo" style="margin-bottom: 1.5rem;">
                            <div
                                style="width: 80px; height: 80px; background: linear-gradient(45deg, var(--primary-gold), var(--accent-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);">
                                <i class="fas fa-user-plus" style="font-size: 2rem; color: var(--primary-dark);"></i>
                            </div>
                        </div>
                        <h1 class="auth-title"
                            style="font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--primary-gold); margin-bottom: 0.5rem; font-weight: 700;">
                            {{ __('general.register') }}
                        </h1>
                        <p class="auth-subtitle" style="opacity: 0.8; color: rgba(255, 255, 255, 0.8); font-size: 1rem;">
                            {{ __('Join') }} {{ __('general.company_name') }} {{ __('for exclusive luxury car rentals') }}
                        </p>
                    </div>

                    @if ($errors->any())
                        <div
                            style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); border-radius: 10px; padding: 1rem; margin-bottom: 1.5rem;">
                            <ul style="list-style: none; margin: 0;">
                                @foreach ($errors->all() as $error)
                                    <li style="color: #ff6b6b;">{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <div class="form-row"
                            style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
                            <div class="form-group">
                                <label for="first_name" class="form-label"
                                    style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                    <i class="fas fa-user" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                    {{ __('general.first_name') }}
                                </label>
                                <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}"
                                    required class="form-input"
                                    style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                    placeholder="{{ __('First name') }}"
                                    onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                    onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                            </div>

                            <div class="form-group">
                                <label for="last_name" class="form-label"
                                    style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                    <i class="fas fa-user" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                    {{ __('general.last_name') }}
                                </label>
                                <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}" required
                                    class="form-input"
                                    style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                    placeholder="{{ __('Last name') }}"
                                    onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                    onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="email" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                <i class="fas fa-envelope" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                {{ __('general.email') }}
                            </label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" required
                                class="form-input"
                                style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                placeholder="{{ __('Enter your email') }}"
                                onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                        </div>

                        <div class="form-group" style="margin-bottom: 1.5rem;">
                            <label for="phone" class="form-label"
                                style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                <i class="fas fa-phone" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                {{ __('general.phone') }}
                            </label>
                            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" class="form-input"
                                style="width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                placeholder="{{ __('Phone number') }}"
                                onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                        </div>

                        <div class="form-row"
                            style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
                            <div class="form-group">
                                <label for="password" class="form-label"
                                    style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                    <i class="fas fa-lock" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                    {{ __('Password') }}
                                </label>
                                <div class="input-wrapper" style="position: relative;">
                                    <input type="password" id="password" name="password" required class="form-input"
                                        style="width: 100%; padding: 15px 50px 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                        placeholder="{{ __('Password') }}"
                                        onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                        onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                                    <button type="button" class="password-toggle" onclick="togglePassword('password')"
                                        style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 5px; transition: color 0.3s ease;"
                                        onmouseover="this.style.color='var(--primary-gold)'"
                                        onmouseout="this.style.color='rgba(255, 255, 255, 0.6)'">
                                        <i class="fas fa-eye" id="password-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="password_confirmation" class="form-label"
                                    style="display: block; margin-bottom: 0.75rem; color: var(--primary-gold); font-weight: 600; font-size: 0.95rem;">
                                    <i class="fas fa-lock" style="margin-left: 0.5rem; font-size: 0.9rem;"></i>
                                    {{ __('Confirm Password') }}
                                </label>
                                <div class="input-wrapper" style="position: relative;">
                                    <input type="password" id="password_confirmation" name="password_confirmation" required
                                        class="form-input"
                                        style="width: 100%; padding: 15px 50px 15px 20px; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: white; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px);"
                                        placeholder="{{ __('Confirm password') }}"
                                        onfocus="this.style.borderColor='var(--primary-gold)'; this.style.boxShadow='0 0 0 3px rgba(255, 215, 0, 0.1)'; this.style.background='rgba(255, 255, 255, 0.12)'"
                                        onblur="this.style.borderColor='rgba(255, 255, 255, 0.15)'; this.style.boxShadow='none'; this.style.background='rgba(255, 255, 255, 0.08)'">
                                    <button type="button" class="password-toggle"
                                        onclick="togglePassword('password_confirmation')"
                                        style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 5px; transition: color 0.3s ease;"
                                        onmouseover="this.style.color='var(--primary-gold)'"
                                        onmouseout="this.style.color='rgba(255, 255, 255, 0.6)'">
                                        <i class="fas fa-eye" id="password_confirmation-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div style="margin-bottom: 1.5rem;">
                            <label for="preferred_language"
                                style="display: block; margin-bottom: 0.5rem; color: var(--primary-gold); font-weight: 500;">
                                {{ __('general.language') }}
                            </label>
                            <select id="preferred_language" name="preferred_language" required
                                style="width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; color: var(--text-light); font-size: 1rem;">
                                <option value="en" {{ old('preferred_language') == 'en' ? 'selected' : '' }}>
                                    {{ __('general.english') }}
                                </option>
                                <option value="ar" {{ old('preferred_language') == 'ar' ? 'selected' : '' }}>
                                    {{ __('general.arabic') }}
                                </option>
                            </select>
                        </div>

                        <div style="margin-bottom: 2rem;">
                            <label style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" required style="margin-right: 0.5rem;">
                                <span style="font-size: 0.9rem; opacity: 0.8;">
                                    {{ __('general.agree_terms') }}
                                    <a href="#"
                                        style="color: var(--primary-gold); text-decoration: none;">{{ __('general.terms_conditions') }}</a>
                                </span>
                            </label>
                        </div>

                        <button type="submit" class="btn-primary"
                            style="width: 100%; margin-bottom: 1.5rem; padding: 15px;">
                            {{ __('general.register') }}
                        </button>
                    </form>

                    <div class="text-center">
                        <p style="opacity: 0.8; margin-bottom: 1rem;">{{ __('Already have an account?') }}</p>
                        <a href="{{ route('login') }}" class="btn-secondary">
                            {{ __('general.login') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @push('styles')
        <style>
            input:focus,
            select:focus {
                outline: none;
                border-color: var(--primary-gold) !important;
                box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
            }

            input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            select option {
                background: var(--primary-dark);
                color: var(--text-light);
            }

            input[type="checkbox"] {
                accent-color: var(--primary-gold);
            }

            /* Enhanced Responsive Design */
            @media (max-width: 768px) {
                .auth-section {
                    padding: 1rem 0.5rem !important;
                    min-height: 100vh !important;
                }

                .auth-card {
                    padding: 2rem 1.5rem !important;
                    margin: 0 !important;
                    border-radius: 15px !important;
                }

                .auth-title {
                    font-size: 1.8rem !important;
                }

                .auth-logo>div {
                    width: 60px !important;
                    height: 60px !important;
                }

                .auth-logo i {
                    font-size: 1.5rem !important;
                }

                .form-row {
                    grid-template-columns: 1fr !important;
                    gap: 1rem !important;
                }

                .form-input {
                    padding: 12px 16px !important;
                    font-size: 16px !important;
                    /* Prevents zoom on iOS */
                }

                .password-toggle {
                    left: 12px !important;
                }

                .auth-submit-btn {
                    padding: 14px 20px !important;
                    font-size: 1rem !important;
                }
            }

            @media (max-width: 480px) {
                .auth-card {
                    padding: 1.5rem 1rem !important;
                }

                .auth-title {
                    font-size: 1.6rem !important;
                }

                .form-group {
                    margin-bottom: 1.25rem !important;
                }

                .form-label {
                    font-size: 0.9rem !important;
                    margin-bottom: 0.5rem !important;
                }

                .form-input {
                    padding: 10px 14px !important;
                }

                .password-toggle {
                    left: 10px !important;
                }
            }

            /* Animation for form elements */
            .form-group {
                animation: slideInUp 0.6s ease-out;
            }

            .form-group:nth-child(1) {
                animation-delay: 0.1s;
            }

            .form-group:nth-child(2) {
                animation-delay: 0.2s;
            }

            .form-group:nth-child(3) {
                animation-delay: 0.3s;
            }

            .form-group:nth-child(4) {
                animation-delay: 0.4s;
            }

            .form-row {
                animation-delay: 0.5s;
            }

            .auth-submit-btn {
                animation-delay: 0.6s;
            }

            .auth-footer {
                animation-delay: 0.7s;
            }

            @keyframes slideInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            // Password toggle functionality
            function togglePassword(inputId) {
                const input = document.getElementById(inputId);
                const eye = document.getElementById(inputId + '-eye');

                if (input.type === 'password') {
                    input.type = 'text';
                    eye.classList.remove('fa-eye');
                    eye.classList.add('fa-eye-slash');
                } else {
                    input.type = 'password';
                    eye.classList.remove('fa-eye-slash');
                    eye.classList.add('fa-eye');
                }
            }

            // Form submission with loading state
            document.addEventListener('DOMContentLoaded', function () {
                const form = document.querySelector('.auth-form');
                const submitBtn = document.querySelector('.auth-submit-btn');

                if (form && submitBtn) {
                    form.addEventListener('submit', function (e) {
                        submitBtn.disabled = true;
                        submitBtn.innerHTML =
                            '<i class="fas fa-spinner fa-spin" style="margin-left: 0.5rem;"></i>{{ current_locale() === 'ar' ? 'جاري إنشاء الحساب...' : 'Creating account...' }}';
                    });
                }

                // Add focus effects to form inputs
                const inputs = document.querySelectorAll('.form-input');
                inputs.forEach(input => {
                    input.addEventListener('focus', function () {
                        this.parentElement.style.transform = 'scale(1.02)';
                    });

                    input.addEventListener('blur', function () {
                        this.parentElement.style.transform = 'scale(1)';
                    });
                });

                // Password strength indicator
                const passwordInput = document.getElementById('password');
                const confirmPasswordInput = document.getElementById('password_confirmation');

                if (passwordInput) {
                    passwordInput.addEventListener('input', function () {
                        checkPasswordStrength(this.value);
                    });
                }

                if (confirmPasswordInput) {
                    confirmPasswordInput.addEventListener('input', function () {
                        checkPasswordMatch();
                    });
                }

                function checkPasswordStrength(password) {
                    // Simple password strength check
                    let strength = 0;
                    if (password.length >= 8) strength++;
                    if (/[A-Z]/.test(password)) strength++;
                    if (/[a-z]/.test(password)) strength++;
                    if (/[0-9]/.test(password)) strength++;
                    if (/[^A-Za-z0-9]/.test(password)) strength++;

                    const strengthColors = ['#dc3545', '#fd7e14', '#ffc107', '#20c997', '#28a745'];
                    const strengthTexts = ['ضعيف جداً', 'ضعيف', 'متوسط', 'قوي', 'قوي جداً'];

                    passwordInput.style.borderColor = strengthColors[strength - 1] || 'rgba(255, 255, 255, 0.15)';
                }

                function checkPasswordMatch() {
                    const password = passwordInput.value;
                    const confirmPassword = confirmPasswordInput.value;

                    if (confirmPassword && password !== confirmPassword) {
                        confirmPasswordInput.style.borderColor = '#dc3545';
                    } else if (confirmPassword && password === confirmPassword) {
                        confirmPasswordInput.style.borderColor = '#28a745';
                    } else {
                        confirmPasswordInput.style.borderColor = 'rgba(255, 255, 255, 0.15)';
                    }
                }
            });
        </script>
    @endpush
@endsection