@extends('layouts.guest')

@section('title', 'Qudrat AI Onboarding - خطوة ٣ من ٤')

@section('content')
<div class="container py-5 my-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-7">
            <div class="card p-4 border-0 shadow-lg rounded-4 animate-fade-up">
                <!-- Progress Indicator -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <span class="fw-bold text-primary">{{ __('شخصية الطالب') }}</span>
                    <span class="text-muted small">{{ __('الخطوة ٣ من ٤') }}</span>
                </div>
                <div class="progress mb-4" style="height: 6px;">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: 75%;"></div>
                </div>

                <h3 class="fw-bold text-dark mb-4 text-center">{{ __('اختر الصورة الرمزية الدافعة لك') }}</h3>
                
                <form action="{{ route('onboarding.step3.save') }}" method="POST">
                    @csrf
                    
                    <div class="row g-3 mb-5 text-center">
                        <div class="col-6 col-sm-3">
                            <label class="d-block p-3 border rounded-3 bg-white cursor-pointer hover-shadow">
                                <input type="radio" name="avatar" value="avatar-robot" class="form-check-input mb-3" checked>
                                <div class="badge-card-icon bg-info-subtle text-info fs-1">
                                    <i class="bi bi-robot"></i>
                                </div>
                                <div class="fw-bold small">الروبوت الذكي</div>
                            </label>
                        </div>
                        <div class="col-6 col-sm-3">
                            <label class="d-block p-3 border rounded-3 bg-white cursor-pointer hover-shadow">
                                <input type="radio" name="avatar" value="avatar-rocket" class="form-check-input mb-3">
                                <div class="badge-card-icon bg-success-subtle text-success fs-1">
                                    <i class="bi bi-rocket-takeoff"></i>
                                </div>
                                <div class="fw-bold small">الصاروخ المنطلق</div>
                            </label>
                        </div>
                        <div class="col-6 col-sm-3">
                            <label class="d-block p-3 border rounded-3 bg-white cursor-pointer hover-shadow">
                                <input type="radio" name="avatar" value="avatar-owl" class="form-check-input mb-3">
                                <div class="badge-card-icon bg-warning-subtle text-warning fs-1">
                                    <i class="bi bi-mortarboard"></i>
                                </div>
                                <div class="fw-bold small">البومة الحكيمة</div>
                            </label>
                        </div>
                        <div class="col-6 col-sm-3">
                            <label class="d-block p-3 border rounded-3 bg-white cursor-pointer hover-shadow">
                                <input type="radio" name="avatar" value="avatar-trophy" class="form-check-input mb-3">
                                <div class="badge-card-icon bg-danger-subtle text-danger fs-1">
                                    <i class="bi bi-trophy"></i>
                                </div>
                                <div class="fw-bold small">بطل المنصة</div>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-glow w-100 py-2.5">{{ __('التالي') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection