@extends('layouts.portal')

@section('title', 'ورود و ثبت‌نام | گواهینو')

@section('content')
<section class="auth-shell">
    <div class="auth-intro">
        <span class="eyebrow"><i></i> ورود امن و سریع</span>
        <h1>یک قدم تا شروع<br><em>تمرین هوشمند</em></h1>
        <p>اگر قبلاً عضو نشده‌اید، با تأیید شماره موبایل حساب شما خودکار ساخته می‌شود.</p>
        <div class="auth-benefits">
            <span><b>۶۰۰</b> سؤال بازسازی‌شده</span>
            <span><b>۲۰</b> کاردکس کامل</span>
            <span><b>۲</b> دقیقه اعتبار کد</span>
        </div>
    </div>
    <div class="auth-card">
        <div class="auth-tabs" role="tablist">
            <button class="{{ old('identifier') ? '' : 'active' }}" type="button" data-auth-tab="otp">کد یک‌بارمصرف</button>
            <button class="{{ old('identifier') ? 'active' : '' }}" type="button" data-auth-tab="password">ورود با رمز</button>
        </div>
        <div class="auth-panel {{ old('identifier') ? '' : 'active' }}" data-auth-panel="otp">
            @if ($otpMobile)
                <h2>کد تأیید را وارد کنید</h2>
                <p class="muted">کد پنج‌رقمی ارسال‌شده به <b dir="ltr">{{ $otpMobile }}</b></p>
                @if ($debugCode)
                    <div class="debug-code">کد آزمایشی محیط محلی: <b dir="ltr">{{ $debugCode }}</b></div>
                @endif
                <form class="stack-form" action="{{ route('auth.otp.verify') }}" method="post">
                    @csrf
                    <input type="hidden" name="mobile" value="{{ $otpMobile }}">
                    <label for="code">کد تأیید</label>
                    <input id="code" class="code-input" name="code" value="{{ old('code') }}" inputmode="numeric" maxlength="5" autocomplete="one-time-code" required autofocus>
                    @error('code')<small class="field-error">{{ $message }}</small>@enderror
                    <button class="primary-button full" type="submit">تأیید و ورود</button>
                </form>
                <form class="inline-form" action="{{ route('auth.otp.request') }}" method="post">
                    @csrf
                    <input type="hidden" name="mobile" value="{{ $otpMobile }}">
                    <button class="text-button" type="submit">ارسال دوباره کد</button>
                </form>
            @else
                <h2>ورود یا ساخت حساب</h2>
                <p class="muted">شماره موبایل خود را وارد کنید؛ کد تأیید برایتان پیامک می‌شود.</p>
                <form class="stack-form" action="{{ route('auth.otp.request') }}" method="post">
                    @csrf
                    <label for="mobile">شماره موبایل</label>
                    <input id="mobile" name="mobile" value="{{ old('mobile') }}" dir="ltr" inputmode="tel" placeholder="0912 123 4567" autocomplete="tel" required autofocus>
                    @error('mobile')<small class="field-error">{{ $message }}</small>@enderror
                    <button class="primary-button full" type="submit">دریافت کد ورود</button>
                </form>
            @endif
        </div>
        <div class="auth-panel {{ old('identifier') ? 'active' : '' }}" data-auth-panel="password">
            <h2>ورود با رمز عبور</h2>
            <p class="muted">ایمیل یا شماره موبایل و رمزی که در پروفایل تعریف کرده‌اید.</p>
            <form class="stack-form" action="{{ route('auth.password') }}" method="post">
                @csrf
                <label for="identifier">ایمیل یا شماره موبایل</label>
                <input id="identifier" name="identifier" value="{{ old('identifier') }}" dir="ltr" autocomplete="username" required>
                @error('identifier')<small class="field-error">{{ $message }}</small>@enderror
                <label for="password">رمز عبور</label>
                <input id="password" type="password" name="password" dir="ltr" autocomplete="current-password" required>
                <label class="check-row"><input type="checkbox" name="remember" value="1"> مرا به خاطر بسپار</label>
                <button class="primary-button full" type="submit">ورود به گواهینو</button>
            </form>
        </div>
    </div>
</section>
@endsection