@extends('layouts.superadmin')

@section('title','غرفة الصقر — محرر أعضاء (Excel Editor)')
@section('page-title','🧾 محرر الأعضاء — Excel Sheet')

@section('content')
<div class="space-y-6">

  {{-- تنبيه نجاح --}}
  @if(session('success'))
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 text-emerald-800 px-4 py-3 text-sm">
      {{ session('success') }}
    </div>
  @endif

  {{-- فلتر نوع العضوية --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm p-4 border border-gray-200/60 dark:border-gray-700/60">
    <form method="GET" class="flex flex-col md:flex-row md:items-center gap-3">
      <div class="flex-1">
        <label class="block text-sm font-medium mb-1">نوع الأعضاء</label>
        <select name="membership_status"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800">
          <option value="">كل الأعضاء</option>
          @foreach($membershipTypes as $key => $label)
            <option value="{{ $key }}" @selected($membership == $key)>{{ $label }}</option>
          @endforeach
        </select>
      </div>

      <button type="submit"
              class="inline-flex items-center justify-center mt-1 md:mt-6 px-4 py-2 rounded-lg text-sm font-semibold
                     bg-gradient-to-r from-sky-500 to-emerald-500 text-white shadow">
        تحديث القائمة
      </button>
    </form>
  </div>

  {{-- جدول الإكسل --}}
  <form method="POST" action="{{ route('superadmin.members-sheet.bulk-update') }}">
    @csrf

    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-200/60 dark:border-gray-700/60 overflow-x-auto">
      <table class="min-w-full text-xs md:text-sm border-collapse">
        <thead class="bg-gray-50 dark:bg-gray-800">
          <tr class="text-gray-600 dark:text-gray-300">
            <th class="px-3 py-2 border-b text-right">ID</th>
            <th class="px-3 py-2 border-b text-right">الاسم</th>
            <th class="px-3 py-2 border-b text-right">اليوزر</th>
            <th class="px-3 py-2 border-b text-right">الإيميل</th>
            <th class="px-3 py-2 border-b text-right">نوع العضوية</th>
            <th class="px-3 py-2 border-b text-right">باسورد جديد (اختياري)</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          @forelse($users as $user)
            <tr class="hover:bg-sky-50/60 dark:hover:bg-gray-800/60">
              <td class="px-3 py-2 text-gray-500">{{ $user->id }}</td>

              {{-- الاسم --}}
              <td class="px-3 py-2">
                <input type="text"
                       name="users[{{ $user->id }}][name]"
                       value="{{ old("users.$user->id.name", $user->name) }}"
                       class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 text-xs md:text-sm">
              </td>

              {{-- اليوزر --}}
              <td class="px-3 py-2">
                <input type="text"
                       name="users[{{ $user->id }}][username]"
                       value="{{ old("users.$user->id.username", $user->username) }}"
                       class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 text-xs md:text-sm">
              </td>

              {{-- الإيميل --}}
              <td class="px-3 py-2">
                <input type="email"
                       name="users[{{ $user->id }}][email]"
                       value="{{ old("users.$user->id.email", $user->email) }}"
                       class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 text-xs md:text-sm">
              </td>

              {{-- نوع العضوية --}}
              <td class="px-3 py-2">
                <select name="users[{{ $user->id }}][membership_status]"
                        class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 text-xs md:text-sm">
                  @foreach($membershipTypes as $key => $label)
                    <option value="{{ $key }}" @selected($user->membership_status == $key)>{{ $label }}</option>
                  @endforeach
                </select>
              </td>

              {{-- باسورد جديد --}}
              <td class="px-3 py-2">
                <input type="text"
                       name="users[{{ $user->id }}][new_password]"
                       placeholder="اتركه فاضي لو ما بدك تغيّر"
                       class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-900 text-xs md:text-sm">
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="6" class="px-3 py-6 text-center text-gray-500">
                لا يوجد أعضاء حسب الفلتر الحالي.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    {{-- أزرار أسفل الجدول --}}
    <div class="mt-4 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <div>
        {{ $users->links() }}
      </div>
      <button type="submit"
              class="inline-flex items-center justify-center px-6 py-2.5 rounded-xl text-sm font-semibold
                     bg-gradient-to-r from-emerald-500 to-sky-500 text-white shadow">
        💾 حفظ جميع التعديلات
      </button>
    </div>
  </form>

</div>
@endsection