@extends('layouts.guest')

@section('title', 'ثبت‌نام ورزشکار')

@section('content')
    <div class="card-pad">
        <div class="flex items-center justify-center gap-1.5 mb-5">
            <span class="badge-steel"><x-icon name="user" class="w-3.5 h-3.5" /> ثبت‌نام ورزشکار</span>
        </div>

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

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label class="field-label">نام</label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" class="field-input" required>
                    @error('first_name') <p class="field-error">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="field-label">نام خانوادگی</label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" class="field-input" required>
                    @error('last_name') <p class="field-error">{{ $message }}</p> @enderror
                </div>
            </div>

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

            <div>
                <label class="field-label">ایمیل <span class="text-slate-400 font-normal">(اختیاری — برای بازیابی رمز عبور)</span></label>
                <input type="email" name="email" value="{{ old('email') }}" dir="ltr" class="field-input">
                @error('email') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <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>
                    <input type="password" name="password_confirmation" class="field-input" required>
                </div>
            </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>

            <button class="btn-primary w-full py-2.5">ثبت‌نام</button>
        </form>

        <p class="text-center mt-5 pt-5 border-t border-slate-100 text-sm text-slate-500">
            قبلاً ثبت‌نام کرده‌اید؟ <a href="{{ route('login') }}" class="text-steel-500 hover:text-steel-600 font-medium">ورود</a>
        </p>
    </div>
@endsection