@extends('layouts.dashboard')
@section('title', t('إضافة عضو','Add Member'))
@section('page-title','➕ '.t('إضافة عضو جديد','Add New Member'))

@section('content')
<div style="max-width:640px">
  <div class="card">
    <div class="card-header">
      <h3>👤 {{ t('بيانات العضو الجديد','New Member Data') }}</h3>
      <a href="{{ route('admin.members') }}" class="btn btn-sm btn-outline">← {{ t('رجوع','Back') }}</a>
    </div>
    <div style="padding:24px">

      @if($errors->any())
      <div class="alert alert-error">
        @foreach($errors->all() as $err)<div>❌ {{ $err }}</div>@endforeach
      </div>
      @endif

      <form method="POST" action="{{ route('admin.members.store') }}">
        @csrf

        <div class="form-group">
          <label class="form-label">{{ t('الاسم الكامل','Full Name') }} *</label>
          <input type="text" name="name" class="form-input" value="{{ old('name') }}" required
                 placeholder="{{ t('محمد أحمد','John Doe') }}">
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">{{ t('البريد الإلكتروني','Email') }} *</label>
            <input type="email" name="email" class="form-input" value="{{ old('email') }}" required
                   placeholder="example@email.com">
          </div>
          <div class="form-group">
            <label class="form-label">{{ t('رقم الهاتف','Phone') }}</label>
            <input type="text" name="phone" class="form-input" value="{{ old('phone') }}"
                   placeholder="+20 1XX XXX XXXX">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">{{ t('كلمة المرور','Password') }} *</label>
            <input type="text" name="password" class="form-input" required
                   value="{{ old('password', Str::random(10)) }}"
                   placeholder="{{ t('6 أحرف على الأقل','Min 6 chars') }}">
            <div style="font-size:11px;color:#94a3b8;margin-top:4px">
              {{ t('يمكن تغييرها لاحقاً من العضو نفسه','Can be changed later by the member') }}
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">{{ t('الحالة','Status') }}</label>
            <select name="status" class="form-input">
              <option value="active">✅ {{ t('نشط','Active') }}</option>
              <option value="suspended">⛔ {{ t('موقوف','Suspended') }}</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">💳 {{ t('الخطة (اختياري)','Plan (Optional)') }}</label>
          <select name="plan_id" class="form-input">
            <option value="free">{{ t('مجاني - بدون اشتراك','Free - No Subscription') }}</option>
            @foreach($plans->where('id','!=','free') as $plan)
            <option value="{{ $plan->id }}">{{ $plan->name }} — ${{ number_format($plan->price,0) }}</option>
            @endforeach
          </select>
          <div style="font-size:11px;color:#94a3b8;margin-top:4px">
            {{ t('سيتم إنشاء license key تلقائياً عند اختيار خطة مدفوعة','A license key will be auto-generated for paid plans') }}
          </div>
        </div>

        <div style="display:flex;gap:12px;margin-top:8px">
          <button type="submit" class="btn btn-primary btn-lg">
            ➕ {{ t('إضافة العضو','Add Member') }}
          </button>
          <a href="{{ route('admin.members') }}" class="btn btn-outline btn-lg">
            {{ t('إلغاء','Cancel') }}
          </a>
        </div>
      </form>

    </div>
  </div>
</div>
@endsection