﻿<x-guest-layout>
    <div class="mb-6 text-center">
        <h1 class="text-2l font-bold text-secondary-600">{{ __('إنشاء حساب جديد') }}</h1>
        <p class="text-gray-600">{{ __('أدخل بياناتك لإنشاء حساب جديد') }}</p>
    </div>

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

        <!-- Name -->
        <div>
            <x-input-label for="name" :value="__('الاسم')" class="text-primary-700 font-medium" />
            <x-text-input id="name" class="block mt-1 w-full form-control" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
            <x-input-error :messages="$errors->get('name')" class="mt-2" />
        </div>

        <!-- Email Address -->
        <div class="mt-4">
            <x-input-label for="email" :value="__('البريد الإلكتروني')" class="text-primary-700 font-medium" />
            <x-text-input id="email" class="block mt-1 w-full form-control" type="email" name="email" :value="old('email')" required autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('كلمة المرور')" class="text-primary-700 font-medium" />

            <x-text-input id="password" class="block mt-1 w-full form-control"
                            type="password"
                            name="password"
                            required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Confirm Password -->
        <div class="mt-4">
            <x-input-label for="password_confirmation" :value="__('تأكيد كلمة المرور')" class="text-primary-700 font-medium" />

            <x-text-input id="password_confirmation" class="block mt-1 w-full form-control"
                            type="password"
                            name="password_confirmation" required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
        </div>

        <!-- Phone Number with Country Code -->
        <div class="mt-4">
            <x-input-label for="phone" :value="__('رقم الهاتف')" class="text-primary-700 font-medium" />
            
            <div class="flex gap-2 mt-1">
                <!-- Country Select -->
                <select id="country_code" name="country_code" class="block w-40 form-control" required>
                    <option value="">اختر الدولة</option>
                    <option value="SA" {{ old('country_code') == 'SA' ? 'selected' : '' }}>السعودية (+966)</option>
                    <option value="AE" {{ old('country_code') == 'AE' ? 'selected' : '' }}>الإمارات (+971)</option>
                    <option value="KW" {{ old('country_code') == 'KW' ? 'selected' : '' }}>الكويت (+965)</option>
                    <option value="QA" {{ old('country_code') == 'QA' ? 'selected' : '' }}>قطر (+974)</option>
                    <option value="BH" {{ old('country_code') == 'BH' ? 'selected' : '' }}>البحرين (+973)</option>
                    <option value="OM" {{ old('country_code') == 'OM' ? 'selected' : '' }}>عمان (+968)</option>
                    <option value="JO" {{ old('country_code') == 'JO' ? 'selected' : '' }}>الأردن (+962)</option>
                    <option value="EG" {{ old('country_code') == 'EG' ? 'selected' : '' }}>مصر (+20)</option>
                    <option value="GB" {{ old('country_code') == 'GB' ? 'selected' : '' }}>بريطانيا (+44)</option>
                    <option value="US" {{ old('country_code') == 'US' ? 'selected' : '' }}>أمريكا (+1)</option>
                </select>

                <!-- Phone Number Input -->
                <x-text-input id="phone" class="block w-full form-control" 
                    type="tel" 
                    name="phone" 
                    placeholder="أدخل رقم الهاتف" 
                    :value="old('phone')" required />
            </div>
            
            <x-input-error :messages="$errors->get('phone')" class="mt-2" />
            <x-input-error :messages="$errors->get('country_code')" class="mt-2" />
        </div>

        <div class="flex items-center justify-between mt-6">
            <a class="text-sm text-primary-600 hover:text-primary-800 transition-colors duration-200" href="{{ route('login') }}">
                {{ __('لديك حساب بالفعل؟') }}
            </a>

            <button type="submit" class="btn-secondary p-6 py-3 text-base rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6z" />
                    <path d="M16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z" />
                </svg>
                {{ __('إنشاء الحساب') }}
            </button>
        </div>
    </form>
</x-guest-layout>
