@extends('layouts.app')
@section('content')
<div class="flex justify-center items-center min-h-screen bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-8">
    <div class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-10 border border-gray-100 dark:border-gray-700">
        <div class="flex flex-col items-center mb-8">
            <div class="w-16 h-16 rounded-full bg-orange-100 dark:bg-orange-900 flex items-center justify-center mb-3">
                <svg class="w-8 h-8 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            </div>
            <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 tracking-tight">{{ __('general.register') }}</h2>
            <p class="text-gray-500 dark:text-gray-400 text-center mt-2">{{ __('general.create_account_to_continue') ?? 'Create your account to continue' }}</p>
        </div>
        <form method="POST" action="{{ route('register') }}" class="space-y-5" id="registerForm" novalidate>
            @csrf
            <div class="mb-2">
                <label for="username" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.username') }} *</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-user"></i></span>
                    <input id="username" type="text" name="username" value="{{ old('username') }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                </div>
                @error('username')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="first_name" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.first_name') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-user-tag"></i></span>
                        <input id="first_name" type="text" name="first_name" value="{{ old('first_name') }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('first_name')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
                <div>
                    <label for="last_name" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.last_name') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-user-tag"></i></span>
                        <input id="last_name" type="text" name="last_name" value="{{ old('last_name') }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('last_name')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
            </div>
            <div class="mb-2">
                <label for="email" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.email') }} *</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-envelope"></i></span>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                </div>
                @error('email')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
            </div>
            <div class="mb-2">
                <label for="phone" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.mobile_number') }} *</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-phone"></i></span>
                    <span class="absolute left-12 top-1/2 -translate-y-1/2 text-gray-400 select-none">+994</span>
                    <input id="phone" type="text" name="phone" value="{{ old('phone') ? ltrim(preg_replace('/^(\+994|994|0)/', '', old('phone'))) : '' }}" required class="w-full pl-24 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white" maxlength="12" pattern="[0-9 ]{12}" inputmode="numeric" autocomplete="off" style="ime-mode:disabled;" oninput="formatPhoneInput(this)">
                    <span id="phone-warning" class="text-xs text-red-500 absolute left-0 -bottom-5"></span>
                </div>
                @error('phone')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="gender" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.gender') }} *</label>
                    <select id="gender" name="gender" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                        <option value="">{{ __('general.select_gender') }}</option>
                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>{{ __('general.male') }}</option>
                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>{{ __('general.female') }}</option>
                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>{{ __('general.other') }}</option>
                    </select>
                    @error('gender')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
                <div>
                    <label for="dob" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.date_of_birth') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-calendar-alt"></i></span>
                        <input id="dob" type="date" name="dob" value="{{ old('dob') }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                    </div>
                    @error('dob')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="language" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.language') }}</label>
                    <select id="language" name="language" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                        <option value="">{{ __('general.select_language') }}</option>
                        <option value="az" {{ old('language') == 'az' ? 'selected' : '' }}>Azərbaycan dili</option>
                        <option value="en" {{ old('language') == 'en' ? 'selected' : '' }}>English</option>
                        <option value="ru" {{ old('language') == 'ru' ? 'selected' : '' }}>Русский</option>
                    </select>
                    @error('language')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
                <div>
                <label for="city" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.city') }} *</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-city"></i></span>
                        <input id="city" type="text" name="city" value="{{ old('city') }}" required class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white" placeholder="{{ __('general.city') }}">
                    </div>
                    @error('city')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="password" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.password') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-lock"></i></span>
                        <input id="password" type="password" name="password" required class="w-full pl-10 pr-10 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                        <button type="button" onclick="togglePassword('password', this)" tabindex="-1" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-orange-500 focus:outline-none">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                    @error('password')<span class="text-red-500 text-sm">{{ $message }}</span>@enderror
                </div>
                <div>
                    <label for="password_confirmation" class="block text-gray-700 dark:text-gray-300 mb-1">{{ __('general.confirm_password') }} *</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500"><i class="fas fa-lock"></i></span>
                        <input id="password_confirmation" type="password" name="password_confirmation" required class="w-full pl-10 pr-10 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-700 dark:text-white">
                        <button type="button" onclick="togglePassword('password_confirmation', this)" tabindex="-1" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-orange-500 focus:outline-none">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
    
            </div>
            <p class="text-xs text-gray-700 dark:text-gray-300 mt-1">
                {{ __('general.password_requirements') }}
            </p>
            <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-4 rounded-lg shadow-lg mt-4 transition-all duration-200 transform hover:scale-105">{{ __('general.register') }}</button>
        </form>
        <div class="mt-8 text-center">
            <span class="text-gray-600 dark:text-gray-300">{{ __('general.already_have_account') }}</span>
            <a href="{{ route('login') }}" class="text-orange-600 hover:text-orange-700 hover:underline ml-1 font-semibold">{{ __('general.login') }}</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function togglePassword(fieldId, btn) {
    const input = document.getElementById(fieldId);
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
function formatPhoneInput(input) {
    let digits = input.value.replace(/\D/g, '');
    if (digits.length > 9) digits = digits.slice(0, 9);
    let formatted = '';
    if (digits.length > 0) formatted += digits.slice(0, 2);
    if (digits.length > 2) formatted += ' ' + digits.slice(2, 5);
    if (digits.length > 5) formatted += ' ' + digits.slice(5, 7);
    if (digits.length > 7) formatted += ' ' + digits.slice(7, 9);
    input.value = formatted;
    if (digits.length > 9) {
        document.getElementById('phone-warning').textContent = 'Ən çox 9 rəqəm daxil edə bilərsiniz';
    } else {
        document.getElementById('phone-warning').textContent = '';
    }
}
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('registerForm');
    if (!form) return;
    const locale = '{{ app()->getLocale() }}';
    const messages = {
        az: 'Zəhmət olmasa bu sahəni doldurun.',
        en: 'Please fill out this field.',
        ru: 'Пожалуйста, заполните это поле.'
    };
    form.addEventListener('submit', function(e) {
        let valid = true;
        form.querySelectorAll('[required]').forEach(function(input) {
            if (!input.value) {
                valid = false;
                input.classList.add('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (!msg) {
                    msg = document.createElement('span');
                    msg.className = 'text-red-500 text-sm custom-required-msg';
                    input.parentNode.appendChild(msg);
                }
                msg.textContent = messages[locale] || messages['en'];
            } else {
                input.classList.remove('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (msg) msg.remove();
            }
        });
        if (!valid) e.preventDefault();

        const phoneInput = document.getElementById('phone');
        // Remove spaces and prepend +994
        let digits = phoneInput.value.replace(/\D/g, '');
        if (digits && !digits.startsWith('994')) {
            digits = '994' + digits;
        }
        phoneInput.value = '+' + digits;
    });

    form.querySelectorAll('[required]').forEach(function(input) {
        input.addEventListener('input', function() {
            if (input.value) {
                input.classList.remove('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (msg) msg.remove();
            }
        });
        input.addEventListener('change', function() {
            if (input.value) {
                input.classList.remove('border-red-500');
                let msg = input.parentNode.querySelector('.custom-required-msg');
                if (msg) msg.remove();
            }
        });
    });
});
</script>
@endpush