@extends('layouts.guest')

@section('title', 'ورود')

@section('content')
    <div class="card-pad">
        <h2 class="font-semibold text-center mb-5">ورود به حساب کاربری</h2>

        <form method="POST" action="{{ route('login') }}" class="space-y-4">
            @csrf

            <div>
                <label class="field-label">شماره موبایل</label>
                <input type="text" name="mobile" value="{{ old('mobile') }}" dir="ltr" inputmode="numeric"
                       placeholder="09xxxxxxxxx" class="field-input" required autofocus>
                @error('mobile') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="field-label">رمز عبور</label>
                <input type="password" name="password" class="field-input" required>
                @error('password') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="field-label">کد امنیتی</label>
                <div class="flex items-center gap-2 mb-2">
                    <img src="{{ captcha_src() }}" alt="کد امنیتی" class="rounded-xl border border-slate-200 h-12">
                    <button type="button" onclick="this.previousElementSibling.src = '{{ url('captcha') }}?' + Date.now()"
                            class="text-xs text-steel-500 hover:text-steel-600">تغییر کد</button>
                </div>
                <input type="text" name="captcha" class="field-input" dir="ltr" required>
                @error('captcha') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <label class="flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" name="remember" class="rounded border-slate-300 text-ember-500 focus:ring-ember-500/30">
                مرا به خاطر بسپار
            </label>

            <button class="btn-primary w-full py-2.5">ورود</button>
        </form>

        <div class="text-center mt-5 pt-5 border-t border-slate-100 text-sm text-slate-500 space-y-2">
            <p>حساب کاربری ندارید؟</p>
            <div class="flex justify-center gap-4">
                <a href="{{ route('register.coach') }}" class="text-steel-500 hover:text-steel-600 font-medium">ثبت‌نام مربی</a>
                <a href="{{ route('register.athlete') }}" class="text-steel-500 hover:text-steel-600 font-medium">ثبت‌نام ورزشکار</a>
            </div>
        </div>
    </div>
@endsection