@extends('layouts.dashboard')
@section('title', t('تعديل','Edit').' — '.$member->name)
@section('page-title','✏️ '.t('تعديل بيانات العضو','Edit Member Data'))

@section('styles')
<style>
.edit-tabs { display:flex; gap:4px; margin-bottom:20px; background:#f8fafc; border-radius:12px; padding:6px; flex-wrap:wrap; }
.edit-tab  { flex:1; min-width:120px; padding:10px 16px; border:none; background:transparent; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; color:#64748b; transition:all .2s; }
.edit-tab.active { background:#fff; color:#2563eb; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.edit-panel { display:none; }
.edit-panel.active { display:block; }
</style>
@endsection

@section('content')
<div style="max-width:780px">

  {{-- Header --}}
  <div style="background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:14px;padding:24px;margin-bottom:20px;color:#fff;display:flex;align-items:center;gap:16px">
    <img src="{{ $member->avatarUrl() }}" style="width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.3);object-fit:cover">
    <div style="flex:1">
      <div style="font-size:20px;font-weight:800">{{ $member->name }}</div>
      <div style="opacity:.8;font-size:13px;margin-top:2px">{{ $member->email }}</div>
      <div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap">
        <span class="badge {{ $member->status==='active'?'badge-green':'badge-red' }}">{{ $member->status==='active'?'✅ نشط':'⛔ موقوف' }}</span>
        @if($member->subscription && $member->subscription->isActive())
        <span class="badge badge-blue">💳 {{ $member->subscription->plan->name }}</span>
        @else
        <span class="badge badge-gray">مجاني</span>
        @endif
        <span style="opacity:.7;font-size:12px">{{ t('منذ','Since') }} {{ $member->created_at->format('Y-m-d') }}</span>
      </div>
    </div>
    <a href="{{ route('admin.members.show',$member->id) }}" class="btn btn-ghost-white btn-sm">← {{ t('رجوع','Back') }}</a>
  </div>

  {{-- Tabs --}}
  <div class="edit-tabs">
    <button class="edit-tab active" onclick="switchTab('info',this)">👤 {{ t('البيانات الشخصية','Personal Info') }}</button>
    <button class="edit-tab" onclick="switchTab('password',this)">🔐 {{ t('كلمة المرور','Password') }}</button>
    <button class="edit-tab" onclick="switchTab('subscription',this)">💳 {{ t('الاشتراك','Subscription') }}</button>
  </div>

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

  {{-- ═══ TAB 1: Personal Info ═══ --}}
  <div class="edit-panel active" id="tab-info">
    <div class="card">
      <div class="card-header"><h3>👤 {{ t('المعلومات الشخصية','Personal Information') }}</h3></div>
      <form method="POST" action="{{ route('admin.members.update',$member->id) }}" enctype="multipart/form-data" style="padding:24px">
        @csrf @method('PUT')
        <input type="hidden" name="tab" value="info">

        <div style="text-align:center;margin-bottom:20px">
          <img src="{{ $member->avatarUrl() }}" id="avatar-preview" style="width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid #e2e8f0;cursor:pointer" onclick="document.getElementById('avatar-input').click()">
          <div style="font-size:12px;color:#94a3b8;margin-top:6px">{{ t('انقر على الصورة لتغييرها','Click to change photo') }}</div>
          <input type="file" id="avatar-input" name="avatar" accept="image/*" style="display:none" onchange="previewAvatar(this)">
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">{{ t('الاسم الكامل','Full Name') }} *</label>
            <input type="text" name="name" class="form-input" value="{{ old('name',$member->name) }}" required>
          </div>
          <div class="form-group">
            <label class="form-label">{{ t('رقم الهاتف','Phone') }}</label>
            <input type="text" name="phone" class="form-input" value="{{ old('phone',$member->phone) }}">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">{{ t('البريد الإلكتروني','Email') }} *</label>
          <input type="email" name="email" class="form-input" value="{{ old('email',$member->email) }}" required>
        </div>

        <div class="form-group">
          <label class="form-label">{{ t('نبذة','Bio') }}</label>
          <textarea name="bio" class="form-input" rows="3" placeholder="{{ t('نبذة قصيرة...','Short bio...') }}">{{ old('bio',$member->bio) }}</textarea>
        </div>

        <div class="form-group">
          <label class="form-label">{{ t('الحالة','Status') }}</label>
          <div style="display:flex;gap:10px">
            <label style="display:flex;align-items:center;gap:8px;padding:12px 20px;border:2px solid {{ $member->status==='active'?'#16a34a':'#e2e8f0' }};border-radius:10px;cursor:pointer;flex:1;background:{{ $member->status==='active'?'#f0fdf4':'#fff' }}">
              <input type="radio" name="status" value="active" {{ $member->status==='active'?'checked':'' }} style="width:16px;height:16px">
              <span style="font-weight:600;color:{{ $member->status==='active'?'#16a34a':'#64748b' }}">✅ {{ t('نشط','Active') }}</span>
            </label>
            <label style="display:flex;align-items:center;gap:8px;padding:12px 20px;border:2px solid {{ $member->status==='suspended'?'#dc2626':'#e2e8f0' }};border-radius:10px;cursor:pointer;flex:1;background:{{ $member->status==='suspended'?'#fef2f2':'#fff' }}">
              <input type="radio" name="status" value="suspended" {{ $member->status==='suspended'?'checked':'' }} style="width:16px;height:16px">
              <span style="font-weight:600;color:{{ $member->status==='suspended'?'#dc2626':'#64748b' }}">⛔ {{ t('موقوف','Suspended') }}</span>
            </label>
          </div>
        </div>

        <div style="display:flex;gap:10px;margin-top:8px">
          <button type="submit" class="btn btn-primary btn-lg">💾 {{ t('حفظ البيانات','Save Info') }}</button>
          <a href="{{ route('admin.members') }}" class="btn btn-outline btn-lg">{{ t('إلغاء','Cancel') }}</a>
        </div>
      </form>
    </div>
  </div>

  {{-- ═══ TAB 2: Password ═══ --}}
  <div class="edit-panel" id="tab-password">
    <div class="card">
      <div class="card-header"><h3>🔐 {{ t('تغيير كلمة المرور','Change Password') }}</h3></div>
      <form method="POST" action="{{ route('admin.members.update',$member->id) }}" style="padding:24px">
        @csrf @method('PUT')
        <input type="hidden" name="tab" value="password">
        <input type="hidden" name="name" value="{{ $member->name }}">
        <input type="hidden" name="email" value="{{ $member->email }}">
        <input type="hidden" name="status" value="{{ $member->status }}">

        <div class="form-group">
          <label class="form-label">{{ t('كلمة المرور الجديدة','New Password') }} *</label>
          <div class="input-with-icon">
            <input type="password" name="password" id="new-pass" class="form-input" required minlength="6" placeholder="{{ t('6 أحرف على الأقل','Min 6 characters') }}">
            <button type="button" class="toggle-pass" onclick="var p=document.getElementById('new-pass');p.type=p.type==='password'?'text':'password'">👁️</button>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">{{ t('تأكيد كلمة المرور','Confirm Password') }} *</label>
          <input type="password" name="password_confirmation" class="form-input" required placeholder="{{ t('أعد كتابة كلمة المرور','Repeat password') }}">
        </div>

        {{-- Quick generate password --}}
        <div class="form-group">
          <button type="button" class="btn btn-outline btn-sm" onclick="generatePass()">🎲 {{ t('توليد كلمة مرور عشوائية','Generate Random Password') }}</button>
        </div>

        <div id="generated-pass" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px;margin-bottom:16px">
          <div style="font-size:12px;color:#16a34a;margin-bottom:4px">{{ t('كلمة المرور المولدة','Generated password') }}:</div>
          <div style="display:flex;align-items:center;gap:8px">
            <code id="gen-pass-text" style="font-size:16px;letter-spacing:2px;color:#166534"></code>
            <button type="button" onclick="copyGenPass()" class="btn btn-sm btn-outline" style="font-size:11px">📋 {{ t('نسخ','Copy') }}</button>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-lg">🔑 {{ t('تغيير كلمة المرور','Change Password') }}</button>
      </form>
    </div>
  </div>

  {{-- ═══ TAB 3: Subscription ═══ --}}
  <div class="edit-panel" id="tab-subscription">

    {{-- Current subscription --}}
    @if($member->subscription && $member->subscription->isActive())
    <div class="card" style="margin-bottom:16px;border:2px solid #bbf7d0">
      <div class="card-header" style="background:#f0fdf4">
        <h3 style="color:#16a34a">✅ {{ t('الاشتراك الحالي','Current Subscription') }}</h3>
        <span class="badge badge-green">{{ t('نشط','Active') }}</span>
      </div>
      <table class="info-table">
        <tr><td>{{ t('الخطة','Plan') }}</td><td><strong>{{ $member->subscription->plan->name }}</strong></td></tr>
        <tr><td>{{ t('License Key','License Key') }}</td>
          <td><code style="font-size:12px">{{ $member->subscription->license_key }}</code>
            <button onclick="navigator.clipboard.writeText('{{ $member->subscription->license_key }}');this.textContent='✅'" class="btn btn-sm btn-outline" style="font-size:11px;margin-right:6px">📋</button>
          </td>
        </tr>
        <tr><td>{{ t('المواقع المسموحة','Sites') }}</td><td>{{ $member->subscription->sites_allowed }}</td></tr>
        <tr><td>{{ t('تنتهي','Expires') }}</td>
          <td>
            @if($member->subscription->expires_at)
              {{ $member->subscription->expires_at }}
              @if(\Carbon\Carbon::parse($member->subscription->expires_at)->isPast())
                <span class="badge badge-red">{{ t('منتهية!','Expired!') }}</span>
              @endif
            @else
              <span style="color:#7c3aed">♾️ {{ t('مدى الحياة','Lifetime') }}</span>
            @endif
          </td>
        </tr>
      </table>
      <div style="padding:14px 18px;display:flex;gap:8px;flex-wrap:wrap">
        <a href="{{ route('admin.subscriptions.show',$member->subscription->id) }}" class="btn btn-primary btn-sm">
          ⚙️ {{ t('إدارة الاشتراك الكامل','Manage Full Subscription') }}
        </a>
        <form method="POST" action="{{ route('admin.subscriptions.suspend',$member->subscription->id) }}" style="display:inline">@csrf
          <button class="btn btn-sm" style="background:#fef3c7;color:#d97706;border:none"
            onclick="return confirm('{{ t('تعليق الاشتراك؟','Suspend subscription?') }}')">⛔ {{ t('تعليق','Suspend') }}</button>
        </form>
      </div>
    </div>
    @else
    <div class="alert alert-warning">⚠️ {{ t('لا يوجد اشتراك نشط حالياً','No active subscription currently') }}</div>
    @endif

    {{-- Add / Change subscription --}}
    <div class="card">
      <div class="card-header"><h3>⬆️ {{ t('إضافة / تغيير الاشتراك','Add / Change Subscription') }}</h3></div>
      <form method="POST" action="{{ route('admin.members.subscribe',$member->id) }}" style="padding:24px">
        @csrf
        <div class="form-group">
          <label class="form-label">{{ t('الخطة الجديدة','New Plan') }}</label>
          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px">
            @foreach($plans->where('id','!=','free') as $plan)
            <label style="border:2px solid #e2e8f0;border-radius:12px;padding:14px;cursor:pointer;text-align:center;transition:.15s" class="plan-option">
              <input type="radio" name="plan_id" value="{{ $plan->id }}" style="display:none" onchange="selectPlan(this)">
              <div style="font-size:20px;margin-bottom:4px">
                @if($plan->id==='monthly')💳@elseif($plan->id==='quarterly')📅@elseif($plan->id==='yearly')🌟@elseif($plan->id==='lifetime')♾️@endif
              </div>
              <div style="font-weight:700;font-size:14px">{{ $plan->name }}</div>
              <div style="font-size:13px;color:#2563eb;font-weight:700">${{ number_format($plan->price,0) }}</div>
              <div style="font-size:11px;color:#94a3b8">{{ $plan->sites }} {{ t('مواقع','sites') }} | {{ $plan->days > 0 ? $plan->days.t(' يوم',' days') : t('مدى الحياة','Lifetime') }}</div>
            </label>
            @endforeach
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">{{ t('عدد المواقع المخصص','Custom Sites Allowed') }}</label>
            <input type="number" name="sites_override" class="form-input" placeholder="{{ t('اتركه فارغاً للقيمة الافتراضية للخطة','Leave empty for plan default') }}" min="1" max="100">
          </div>
          <div class="form-group">
            <label class="form-label">{{ t('تاريخ انتهاء مخصص','Custom Expiry Date') }}</label>
            <input type="date" name="expires_override" class="form-input">
            <div style="font-size:11px;color:#94a3b8;margin-top:3px">{{ t('اتركه فارغاً للحساب التلقائي','Leave empty for auto-calculate') }}</div>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-lg btn-block">
          ✅ {{ t('تطبيق الاشتراك الجديد','Apply New Subscription') }}
        </button>
        <div class="alert alert-info" style="margin-top:12px">
          💡 {{ t('سيتم إلغاء الاشتراك الحالي وإنشاء اشتراك جديد تلقائياً','Current subscription will be cancelled and a new one created automatically') }}
        </div>
      </form>
    </div>

  </div>

</div>
@endsection

@section('scripts')
<script>
function switchTab(name, btn) {
  document.querySelectorAll('.edit-panel').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.edit-tab').forEach(b => b.classList.remove('active'));
  document.getElementById('tab-' + name).classList.add('active');
  btn.classList.add('active');
}

// Check which tab to show based on URL hash or session
@if(session('active_tab'))
document.querySelector('[onclick*="{{ session('active_tab') }}"]')?.click();
@endif

// Avatar preview
function previewAvatar(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) { document.getElementById('avatar-preview').src = e.target.result; };
    reader.readAsDataURL(input.files[0]);
  }
}

// Generate password
function generatePass() {
  var chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789@#!';
  var pass = '';
  for (var i = 0; i < 12; i++) pass += chars[Math.floor(Math.random() * chars.length)];
  document.getElementById('new-pass').value = pass;
  document.getElementById('new-pass').type = 'text';
  document.getElementById('gen-pass-text').textContent = pass;
  document.getElementById('generated-pass').style.display = 'block';
}

function copyGenPass() {
  var pass = document.getElementById('gen-pass-text').textContent;
  navigator.clipboard.writeText(pass).then(() => showToast('✅ تم النسخ'));
}

// Plan selection highlight
function selectPlan(radio) {
  document.querySelectorAll('.plan-option').forEach(function(lbl) {
    lbl.style.borderColor = '#e2e8f0';
    lbl.style.background  = '#fff';
  });
  radio.closest('.plan-option').style.borderColor = '#2563eb';
  radio.closest('.plan-option').style.background  = '#eff6ff';
}
</script>
@endsection