@extends('layouts.madar-guest')

@section('title', 'إنشاء حساب')

@section('content')
<div class="w-full max-w-lg">
    <div class="glass-card p-8">
        <h1 class="text-center text-2xl font-extrabold">انضم إلى مدار</h1>
        <p class="mt-2 text-center text-sm text-zinc-400">منظومة ذكية لحياة رقمية أسهل</p>
        <form method="POST" action="{{ route('web.register.attempt') }}" class="mt-8 space-y-4">
            @csrf
            <div>
                <label class="mb-1 block text-xs text-zinc-400">الاسم الكامل</label>
                <input type="text" name="full_name" value="{{ old('full_name') }}" required class="madar-input">
                @error('full_name')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="mb-1 block text-xs text-zinc-400">اسم المستخدم</label>
                <input type="text" name="username" value="{{ old('username') }}" required class="madar-input">
                @error('username')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror
            </div>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-xs text-zinc-400">البريد (اختياري)</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="madar-input">
                    @error('email')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="mb-1 block text-xs text-zinc-400">الجوال (اختياري)</label>
                    <input type="text" name="phone" value="{{ old('phone') }}" class="madar-input">
                    @error('phone')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror
                </div>
            </div>
            <div>
                <label class="mb-1 block text-xs text-zinc-400">كلمة المرور</label>
                <input type="password" name="password" required class="madar-input">
                @error('password')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="mb-1 block text-xs text-zinc-400">تأكيد كلمة المرور</label>
                <input type="password" name="password_confirmation" required class="madar-input">
            </div>
            <div>
                <label class="mb-1 block text-xs text-zinc-400">كود دعوة (اختياري)</label>
                <input type="text" name="invited_by_code" value="{{ old('invited_by_code') }}" class="madar-input">
            </div>
            <button type="submit" class="neon-btn w-full">إنشاء حساب</button>
        </form>
        <p class="mt-6 text-center text-sm text-zinc-500">
            لديك حساب؟ <a href="{{ route('web.login') }}" class="font-bold text-cyan-400 hover:underline">تسجيل الدخول</a>
        </p>
    </div>
</div>
@endsection