@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin': $layout = 'layouts.superadmin'; break;
        case 'advisor':     $layout = 'layouts.advisor'; break;
        case 'admin':
        case 'moderator':   $layout = 'layouts.admin'; break;
        default:            $layout = 'layouts.member';
    }
@endphp

@extends($layout)
@section('title','لوحة التحديثات')

@section('content')
<div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-6 rtl space-y-6">

  @if(session('success'))
    <div class="p-3 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm">
      {{ session('success') }}
    </div>
  @endif
  @if(session('error'))
    <div class="p-3 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-sm">
      {{ session('error') }}
    </div>
  @endif

  {{-- create --}}
  <div class="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow p-5 sm:p-6">
    <h2 class="text-lg font-extrabold text-slate-900 dark:text-white mb-3">➕ إضافة تحديث جديد</h2>

    <form method="POST" action="{{ route('site-updates.admin.store') }}" enctype="multipart/form-data"
          class="grid grid-cols-1 md:grid-cols-2 gap-3">
      @csrf

      <div>
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">Version</label>
        <input name="version" value="{{ $nextVersion }}" type="number" min="1"
               class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
      </div>

      <div>
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">الفئة (Audience)</label>
        <select name="audience_type"
                class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
          <option value="all">الكل</option>
          <option value="members">الأعضاء فقط</option>
          <option value="staff">الإدارة فقط</option>
          <option value="custom">مخصص (membership_status)</option>
        </select>
        <div class="text-[11px] text-slate-500 mt-1">
          custom مثال: member, official-member, moderator
        </div>
        <input name="audience_membership_raw" placeholder="member, official-member"
               class="mt-2 w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm">
      </div>

      <div class="md:col-span-2">
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">العنوان</label>
        <input name="title" required
               class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
      </div>

      <div class="md:col-span-2">
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">الهدف (اختياري)</label>
        <input name="goal"
               class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
      </div>

      <div class="md:col-span-2">
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">المحتوى</label>
        <textarea name="body" rows="5" required
                  class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2"></textarea>
      </div>

      <div>
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">صورة (اختياري)</label>
        <input name="image" type="file" accept="image/*"
               class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
      </div>

      <div>
        <label class="text-xs font-bold text-slate-600 dark:text-slate-300">رابط الشروط (اختياري)</label>
        <input name="terms_url" placeholder="https://..."
               class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
      </div>

      <div class="flex items-center gap-2">
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" name="is_active" value="1" checked>
          <span>مفعل</span>
        </label>
        <label class="flex items-center gap-2 text-sm">
          <input type="checkbox" name="require_terms" value="1" checked>
          <span>يتطلب موافقة شروط</span>
        </label>
      </div>

      <div class="md:col-span-2">
        <button class="px-5 py-2.5 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold">
          حفظ التحديث ✅
        </button>
      </div>
    </form>
  </div>

  {{-- list --}}
  <div class="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow overflow-hidden">
    <div class="p-5 border-b border-slate-200 dark:border-slate-800">
      <h2 class="text-lg font-extrabold text-slate-900 dark:text-white">📋 التحديثات الحالية</h2>
    </div>

    <div class="divide-y divide-slate-200 dark:divide-slate-800">
      @forelse($updates as $u)
        <div class="p-5">
          <div class="flex flex-wrap items-center justify-between gap-2">
            <div class="min-w-0">
              <div class="text-[11px] text-slate-500">#{{ $u->id }} • v{{ $u->version }}</div>
              <div class="font-extrabold text-slate-900 dark:text-white">{{ $u->title }}</div>
              <div class="text-[12px] text-slate-500 mt-1">
                Audience: <b>{{ $u->audience_type }}</b>
                @if($u->audience_type === 'custom' && is_array($u->audience_membership))
                  — ({{ implode(', ', $u->audience_membership) }})
                @endif
              </div>
            </div>

            <div class="flex items-center gap-2">
              <form method="POST" action="{{ route('site-updates.admin.toggle', $u) }}">
                @csrf
                <button class="px-3 py-1.5 rounded-xl text-sm font-bold
                    {{ $u->is_active ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-700' }}">
                  {{ $u->is_active ? 'مفعل' : 'موقف' }}
                </button>
              </form>

              <form method="POST" action="{{ route('site-updates.admin.destroy', $u) }}"
                    onsubmit="return confirm('حذف التحديث؟');">
                @csrf @method('DELETE')
                <button class="px-3 py-1.5 rounded-xl bg-rose-100 text-rose-800 text-sm font-bold">حذف</button>
              </form>
            </div>
          </div>

          @if($u->image_path)
            <div class="mt-3 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700">
              <img src="{{ asset($u->image_path) }}" class="w-full max-h-52 object-cover" alt="">
            </div>
          @endif

          <details class="mt-3">
            <summary class="cursor-pointer text-sm font-bold text-sky-700 dark:text-sky-300">تعديل</summary>

            <form class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3"
                  method="POST" action="{{ route('site-updates.admin.update', $u) }}" enctype="multipart/form-data">
              @csrf @method('PUT')

              <input name="version" value="{{ $u->version }}" type="number" min="1"
                     class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">

              <select name="audience_type"
                      class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">
                @foreach(['all'=>'الكل','members'=>'الأعضاء','staff'=>'الإدارة','custom'=>'مخصص'] as $k=>$v)
                  <option value="{{ $k }}" @selected($u->audience_type===$k)>{{ $v }}</option>
                @endforeach
              </select>

              <input name="audience_membership_raw"
                     value="{{ is_array($u->audience_membership) ? implode(', ', $u->audience_membership) : '' }}"
                     placeholder="member, official-member"
                     class="md:col-span-2 w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm">

              <input name="title" value="{{ $u->title }}"
                     class="md:col-span-2 w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">

              <input name="goal" value="{{ $u->goal }}"
                     class="md:col-span-2 w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">

              <textarea name="body" rows="4"
                        class="md:col-span-2 w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">{{ $u->body }}</textarea>

              <input name="terms_url" value="{{ $u->terms_url }}"
                     class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2"
                     placeholder="terms url">

              <input name="image" type="file" accept="image/*"
                     class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2">

              <div class="flex items-center gap-3 md:col-span-2 text-sm">
                <label class="flex items-center gap-2">
                  <input type="checkbox" name="is_active" value="1" @checked($u->is_active)>
                  <span>مفعل</span>
                </label>
                <label class="flex items-center gap-2">
                  <input type="checkbox" name="require_terms" value="1" @checked($u->require_terms)>
                  <span>يتطلب موافقة شروط</span>
                </label>
                <label class="flex items-center gap-2">
                  <input type="checkbox" name="remove_image" value="1">
                  <span>حذف الصورة</span>
                </label>
              </div>

              <button class="md:col-span-2 px-4 py-2.5 rounded-2xl bg-sky-600 hover:bg-sky-700 text-white font-extrabold">
                حفظ التعديل ✅
              </button>
            </form>
          </details>
        </div>
      @empty
        <div class="p-6 text-center text-slate-500">لا يوجد تحديثات.</div>
      @endforelse
    </div>
  </div>

</div>
@endsection