@extends('layouts.store', ['title' => 'إنشاء حساب | RaseedNow'])

@section('content')
    @php($isEnglish = app()->getLocale() === 'en')

    <section class="rn-auth-page" aria-labelledby="register-title">
        <div class="rn-auth-card rn-auth-card--wide">
            <div class="rn-auth-badge">
                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M16 21v-1.5a4.5 4.5 0 0 0-4.5-4.5h-5A4.5 4.5 0 0 0 2 19.5V21M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm10-2v6m3-3h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </div>

            <div class="rn-auth-heading">
                <h1 id="register-title">{{ $isEnglish ? 'Create account' : 'إنشاء حساب' }}</h1>
                <p>{{ $isEnglish ? 'Create your account to start buying faster.' : 'أنشئ حسابك للبدء.' }}</p>
            </div>

            @if($errors->any())
                <div class="lc-alert danger">{{ $errors->first() }}</div>
            @endif

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

                <label class="rn-auth-field">
                    <span>{{ $isEnglish ? 'Name' : 'الاسم' }}</span>
                    <span class="rn-auth-input">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm7 9a7 7 0 0 0-14 0" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        <input name="name" value="{{ old('name') }}" type="text" required autofocus autocomplete="name">
                    </span>
                </label>

                <label class="rn-auth-field">
                    <span>{{ $isEnglish ? 'Email address' : 'البريد الإلكتروني' }}</span>
                    <span class="rn-auth-input">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6h16v12H4V6Zm0 1 8 6 8-6" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        <input name="email" value="{{ old('email') }}" type="email" required autocomplete="email">
                    </span>
                </label>

                <label class="rn-auth-field">
                    <span>{{ $isEnglish ? 'Phone' : 'الهاتف' }}</span>
                    <span class="rn-auth-input">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 4h10v16H7V4Zm4 13h2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                        <input name="phone" value="{{ old('phone') }}" type="text" autocomplete="tel">
                    </span>
                </label>

                <label class="rn-auth-field">
                    <span>{{ $isEnglish ? 'Referral code' : 'كود إحالة اختياري' }}</span>
                    <span class="rn-auth-input">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 12h16M12 4v16M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                        <input name="referral_code" value="{{ old('referral_code', request('ref')) }}" type="text" placeholder="RNABC123">
                    </span>
                </label>

                <label class="rn-auth-field">
                    <span>{{ $isEnglish ? 'Password' : 'كلمة المرور' }}</span>
                    <span class="rn-auth-input">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 10V8a5 5 0 0 1 10 0v2m-11 0h12v10H6V10Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        <input name="password" type="password" required autocomplete="new-password">
                    </span>
                </label>

                <label class="rn-auth-field">
                    <span>{{ $isEnglish ? 'Confirm password' : 'تأكيد كلمة المرور' }}</span>
                    <span class="rn-auth-input">
                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 12.5 11 15l5-6M6 4h12v16H6V4Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <input name="password_confirmation" type="password" required autocomplete="new-password">
                    </span>
                </label>

                <label class="rn-auth-terms">
                    <input type="checkbox" required>
                    <span>{{ $isEnglish ? 'I agree to the terms and privacy policy.' : 'أوافق على شروط الخدمة وسياسة الخصوصية.' }}</span>
                </label>

                <button class="rn-auth-submit" type="submit">{{ $isEnglish ? 'Create account' : 'إنشاء حساب' }}</button>
            </form>

            <div class="rn-auth-divider"><span>{{ $isEnglish ? 'Or sign up with' : 'أو سجل باستخدام' }}</span></div>

            <div class="rn-social-login">
                <button type="button" aria-label="Google">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285f4" d="M22 12.2c0-.8-.1-1.5-.2-2.2H12v4.1h5.6a4.8 4.8 0 0 1-2.1 3.2v2.7H19c2-1.9 3-4.6 3-7.8Z"/><path fill="#34a853" d="M12 22c2.8 0 5.2-.9 6.9-2.5l-3.4-2.7c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.8-4.3H2.7v2.8A10 10 0 0 0 12 22Z"/><path fill="#fbbc05" d="M6.2 13.5A6 6 0 0 1 6 12c0-.5.1-1 .2-1.5V7.7H2.7a10 10 0 0 0 0 8.6l3.5-2.8Z"/><path fill="#ea4335" d="M12 6.2c1.5 0 2.9.5 4 1.6L19 4.9A10 10 0 0 0 2.7 7.7l3.5 2.8C7 8 9.3 6.2 12 6.2Z"/></svg>
                    Google
                </button>
                <button type="button" aria-label="Facebook">
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="#1877f2" d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.2c-1.2 0-1.6.8-1.6 1.5V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12Z"/></svg>
                    Facebook
                </button>
            </div>

            <p class="rn-auth-switch">{{ $isEnglish ? 'Already have an account?' : 'لديك حساب بالفعل؟' }} <a href="{{ route('login') }}">{{ $isEnglish ? 'Login' : 'تسجيل الدخول' }}</a></p>
        </div>
    </section>
@endsection