@extends('layouts.app')

@section('title', 'إنشاء حساب - دكان موتورز')

@section('content')
    <div class="max-w-lg mx-auto px-4 py-12">
        <div class="dm-reveal bg-surface rounded-2xl border border-line p-8 shadow-sm">
            <h1 class="text-2xl font-extrabold text-fg mb-1">إنشاء حساب جديد</h1>
            <p class="text-sm text-muted mb-6">سجّل مجاناً وابدأ في نشر إعلاناتك</p>

            @if ($errors->any())
                <div class="mb-4 rounded-lg bg-red-500/10 border border-red-500/30 p-3 text-sm text-red-400">
                    <ul class="list-disc ps-4 space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('register') }}" class="space-y-4"
                  x-data="{ type: '{{ old('account_type', 'user') }}' }">
                @csrf

                {{-- Account type --}}
                <div>
                    <label class="dm-label">نوع الحساب</label>
                    <div class="grid grid-cols-2 gap-3">
                        <label :class="type === 'user' ? 'border-brand-400 bg-brand-400/10' : 'border-line2 bg-surface2'"
                               class="cursor-pointer rounded-xl border-2 p-4 text-center transition">
                            <input type="radio" name="account_type" value="user" x-model="type" class="hidden">
                            <svg class="w-7 h-7 mx-auto mb-2" :class="type === 'user' ? 'text-accent' : 'text-muted'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            <span class="block font-bold text-fg text-sm">فرد</span>
                            <span class="block text-xs text-muted mt-0.5">أبيع سيارتي الشخصية</span>
                        </label>
                        <label :class="type === 'dealer' ? 'border-brand-400 bg-brand-400/10' : 'border-line2 bg-surface2'"
                               class="cursor-pointer rounded-xl border-2 p-4 text-center transition">
                            <input type="radio" name="account_type" value="dealer" x-model="type" class="hidden">
                            <svg class="w-7 h-7 mx-auto mb-2" :class="type === 'dealer' ? 'text-accent' : 'text-muted'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3"/></svg>
                            <span class="block font-bold text-fg text-sm">معرض</span>
                            <span class="block text-xs text-muted mt-0.5">معرض أو تاجر سيارات</span>
                        </label>
                    </div>
                </div>

                <div>
                    <label class="dm-label" x-text="type === 'dealer' ? 'اسم المسؤول' : 'الاسم'">الاسم</label>
                    <input type="text" name="name" value="{{ old('name') }}" required autofocus class="dm-field">
                </div>

                {{-- Dealer-only fields --}}
                <div x-show="type === 'dealer'" x-cloak class="space-y-4">
                    <div>
                        <label class="dm-label">اسم المعرض</label>
                        <input type="text" name="dealer_name" value="{{ old('dealer_name') }}" class="dm-field" placeholder="مثال: معرض النصر للسيارات">
                    </div>
                    <div>
                        <label class="dm-label">محافظة المعرض</label>
                        <select name="governorate_id" class="dm-field dm-select">
                            <option value="">اختر المحافظة</option>
                            @foreach ($governorates as $g)
                                <option value="{{ $g->id }}" @selected(old('governorate_id') == $g->id)>{{ $g->name_ar }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="dm-label">نبذة عن المعرض <span class="text-faint font-normal">(اختياري)</span></label>
                        <textarea name="bio" rows="2" class="dm-field" placeholder="نبذة قصيرة تظهر في صفحة المعرض...">{{ old('bio') }}</textarea>
                    </div>
                </div>

                <div>
                    <label class="dm-label">البريد الإلكتروني</label>
                    <input type="email" name="email" value="{{ old('email') }}" required class="dm-field">
                </div>
                <div>
                    <label class="dm-label">رقم الهاتف</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" required dir="ltr" class="dm-field text-right">
                </div>
                <div>
                    <label class="dm-label">كلمة المرور</label>
                    <input type="password" name="password" required class="dm-field">
                </div>
                <div>
                    <label class="dm-label">تأكيد كلمة المرور</label>
                    <input type="password" name="password_confirmation" required class="dm-field">
                </div>

                <button type="submit" class="w-full rounded-xl bg-brand-400 px-4 py-3.5 text-sm font-bold text-black shadow-lg shadow-brand-400/20 hover:bg-brand-300 hover:-translate-y-0.5 transition">
                    إنشاء الحساب
                </button>
            </form>

            <p class="mt-6 text-center text-sm text-muted">
                لديك حساب بالفعل؟
                <a href="{{ route('login') }}" class="font-semibold text-accent hover:underline">سجّل الدخول</a>
            </p>
        </div>
    </div>
@endsection