@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="login-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 ? 'Top up your games fast and safely' : 'اشحن ألعابك بسرعة وأمان' }}</h2>
                <p>{{ $isEnglish ? 'A trusted, fast top-up experience for popular games with fair prices and 24/7 support.' : 'تجربة شحن موثوقة وسريعة لأشهر الألعاب وأسعار تنافسية ودعم على مدار الساعة.' }}</p>
                <div class="gx-auth-benefits">
                    <span>شحن فوري</span>
                    <span>آمن وموثوق</span>
                    <span>دعم 24/7</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="login-title">{{ $isEnglish ? 'Login' : 'تسجيل الدخول' }}</h1>
                <p>{{ $isEnglish ? 'Access your account and manage your wallet, orders and top-ups.' : 'سجّل دخولك للوصول إلى حسابك وشحن ألعابك بسهولة.' }}</p>
            </header>

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

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

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

                <label class="gx-auth-field">
                    <span>{{ $isEnglish ? 'Email or phone' : 'البريد الإلكتروني أو رقم الجوال' }}</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 autofocus autocomplete="email" placeholder="{{ $isEnglish ? 'Enter your email' : 'أدخل بريدك الإلكتروني' }}">
                    </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="current-password" placeholder="{{ $isEnglish ? 'Enter 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>

                <div class="gx-auth-row">
                    <label>
                        <input name="remember" type="checkbox" value="1">
                        <span>{{ $isEnglish ? 'Remember me' : 'تذكرني' }}</span>
                    </label>
                    <a href="{{ route('login') }}">{{ $isEnglish ? 'Forgot password?' : 'نسيت كلمة المرور؟' }}</a>
                </div>

                <button class="gx-auth-submit" type="submit">
                    {{ $isEnglish ? 'Login' : 'تسجيل الدخول' }}
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14m-5-5 5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>

                <a class="gx-auth-secondary" href="{{ route('register') }}">
                    {{ $isEnglish ? 'Create new account' : 'إنشاء حساب جديد' }}
                    <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="1.8" stroke-linecap="round"/></svg>
                </a>
            </form>
        </div>
    </section>
@endsection