@extends('layouts.store', ['title' => 'تسجيل الدخول | RaseedNow'])

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

    <section class="rn-auth-page" aria-labelledby="login-title">
        <div class="rn-auth-card">
            <div class="rn-auth-badge">
                <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="2" stroke-linecap="round"/></svg>
            </div>

            <div class="rn-auth-heading">
                <h1 id="login-title">{{ $isEnglish ? 'Login' : 'تسجيل الدخول' }}</h1>
                <p>{{ $isEnglish ? 'Welcome back. Sign in to manage orders, wallet, and digital codes.' : 'مرحباً بعودتك! يرجى تسجيل الدخول إلى حسابك.' }}</p>
            </div>

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

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

                <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 autofocus autocomplete="email">
                    </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="current-password">
                    </span>
                </label>

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

                <button class="rn-auth-submit" type="submit">{{ $isEnglish ? 'Login' : 'تسجيل الدخول' }}</button>
            </form>

            <div class="rn-auth-divider"><span>{{ $isEnglish ? 'Or continue 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 ? 'No account yet?' : 'ليس لديك حساب؟' }} <a href="{{ route('register') }}">{{ $isEnglish ? 'Create account' : 'إنشاء حساب' }}</a></p>
        </div>
    </section>
@endsection