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

@section('content')
    @php
        $isEnglish = app()->getLocale() === 'en';
        $siteSettings = \App\Models\SiteSetting::current();
        $siteLogo = $siteSettings->logo_path ?: 'images/brand/raseednow-logo.png';
    @endphp

    <section class="gx-auth-shell" aria-labelledby="register-title">
        <div class="gx-auth-visual">
            <div class="gx-auth-visual-art">
                <img src="{{ asset('assets/images/account/08-login-visual-clean.png') }}" alt="واجهة ألعاب وجواهر لإنشاء حساب" fetchpriority="high">
            </div>
            <div class="gx-auth-visual-copy">
                <h2>{{ $isEnglish ? 'Start your top-up journey' : 'ابدأ تجربة شحن أسرع' }}</h2>
                <p>{{ $isEnglish ? 'Create your account once, then manage wallet, orders, rewards and favorite games from one place.' : 'أنشئ حسابك مرة واحدة وتحكم في المحفظة والطلبات والمكافآت وألعابك المفضلة من مكان واحد.' }}</p>
                <div class="gx-auth-benefits">
                    <span>محفظة آمنة</span>
                    <span>طلبات أسرع</span>
                    <span>مكافآت إحالة</span>
                </div>
            </div>
        </div>

        <div class="gx-auth-panel">
            <div class="gx-auth-logo">
                <img src="{{ asset($siteLogo) }}" alt="{{ $siteSettings->site_name_ar }}">
            </div>

            <header class="gx-auth-heading">
                <h1 id="register-title">{{ $isEnglish ? 'Create account' : 'إنشاء حساب' }}</h1>
                <p>{{ $isEnglish ? 'Fill in your details to start buying faster.' : 'املأ بياناتك للبدء في الشحن والشراء بسرعة.' }}</p>
            </header>

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

            @include('auth.partials.google-button')

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

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Name' : 'الاسم' }}</span>
                    <div class="gx-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" placeholder="{{ $isEnglish ? 'Your name' : 'اسمك' }}">
                    </div>
                </label>

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Email address' : 'البريد الإلكتروني' }}</span>
                    <div class="gx-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" placeholder="{{ $isEnglish ? 'Email address' : 'البريد الإلكتروني' }}">
                    </div>
                </label>

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Phone' : 'الهاتف' }}</span>
                    <div class="gx-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" placeholder="{{ $isEnglish ? 'Phone number' : 'رقم الجوال' }}">
                    </div>
                </label>

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Referral code' : 'كود إحالة اختياري' }}</span>
                    <div class="gx-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">
                    </div>
                </label>

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Password' : 'كلمة المرور' }}</span>
                    <div class="gx-auth-input" data-password-field>
                        <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" placeholder="{{ $isEnglish ? 'Strong password' : 'كلمة مرور قوية' }}">
                        <button type="button" class="gx-auth-eye" aria-label="{{ $isEnglish ? 'Show password' : 'إظهار كلمة المرور' }}">
                            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" stroke="currentColor" stroke-width="1.8"/><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.8"/></svg>
                        </button>
                    </div>
                </label>

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Confirm password' : 'تأكيد كلمة المرور' }}</span>
                    <div class="gx-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" placeholder="{{ $isEnglish ? 'Repeat password' : 'كرر كلمة المرور' }}">
                    </div>
                </label>

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

                <button class="gx-auth-submit" type="submit">{{ $isEnglish ? 'Create account' : 'إنشاء الحساب' }}</button>
                <a class="gx-auth-secondary" href="{{ route('login') }}">{{ $isEnglish ? 'Already have an account? Login' : 'لديك حساب بالفعل؟ تسجيل الدخول' }}</a>
            </form>
        </div>
    </section>
@endsection