@extends('layouts.admin', ['title' => __('messages.admin_users')])

@section('content')
{{-- Filters --}}
<form method="GET" class="rounded-2xl bg-cardapp border border-white/5 p-3 mb-4 grid grid-cols-1 md:grid-cols-[1fr_auto_auto_auto] gap-2">
    <div class="relative">
        <input name="search" value="{{ request('search') }}" placeholder="{{ __('messages.search_users_ph') }}"
            class="w-full rounded-xl bg-bgapp border border-white/10 ps-10 pe-3 py-2.5 text-sm text-white focus:border-teal-500 focus:ring-2 focus:ring-teal-500/30" />
        <svg class="w-4 h-4 text-gray-500 absolute top-1/2 -translate-y-1/2 {{ app()->getLocale()==='ar' ? 'right-3' : 'left-3' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
    </div>
    <select name="plan" class="rounded-xl bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500">
        <option value="">{{ __('messages.all_plans') }}</option>
        <option value="free" @selected(request('plan')==='free')>Free</option>
        <option value="vip"  @selected(request('plan')==='vip')>VIP</option>
    </select>
    <select name="verified" class="rounded-xl bg-bgapp border border-white/10 px-3 py-2.5 text-sm text-white focus:border-teal-500">
        <option value="">{{ __('messages.all_verif') }}</option>
        <option value="yes" @selected(request('verified')==='yes')>{{ __('messages.verified_yes') }}</option>
        <option value="no"  @selected(request('verified')==='no')>{{ __('messages.verified_no') }}</option>
    </select>
    <button class="rounded-xl btn-teal px-4 py-2.5 text-sm">{{ __('messages.search') }}</button>
</form>

<div class="text-xs text-gray-400 mb-3">
    {{ $users->total() }} {{ __('messages.users') }}
</div>

<section class="rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden" x-data="{ editing: null, form: {} }">
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-white/5">
                    <th class="text-start px-3 py-3">#</th>
                    <th class="text-start px-3 py-3">{{ __('messages.name') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.email') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.whatsapp_lbl') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.star_id_lbl') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.plan') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.your_points') }}</th>
                    <th class="text-start px-3 py-3">⭐</th>
                    <th class="text-start px-3 py-3">👑</th>
                    <th class="text-start px-3 py-3">{{ __('messages.date') }}</th>
                    <th class="text-end px-3 py-3">&nbsp;</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($users as $u)
                    <tr class="hover:bg-white/[.03]">
                        <td class="px-3 py-3 text-gray-500 text-xs">#{{ $u->id }}</td>
                        <td class="px-3 py-3">
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white text-xs font-bold flex items-center justify-center">
                                    {{ mb_substr($u->name, 0, 1) }}
                                </div>
                                <div class="font-semibold text-white">{{ $u->name }}</div>
                            </div>
                        </td>
                        <td class="px-3 py-3 text-gray-400 text-xs">{{ $u->email }}</td>
                        <td class="px-3 py-3 text-gray-400 font-mono text-xs" dir="ltr">{{ $u->whatsapp ?: '—' }}</td>
                        <td class="px-3 py-3 text-gray-400 font-mono text-xs" dir="ltr">{{ $u->star_account_id ?: '—' }}</td>
                        <td class="px-3 py-3">
                            @if($u->plan === 'vip')
                                <span class="px-2 py-0.5 rounded-md bg-teal-500/15 text-teal-300 text-xs font-bold">VIP</span>
                            @else
                                <span class="px-2 py-0.5 rounded-md bg-white/5 text-gray-300 text-xs font-bold">Free</span>
                            @endif
                        </td>
                        <td class="px-3 py-3 font-bold text-teal-300">{{ $u->points }}</td>
                        <td class="px-3 py-3">
                            @if($u->star_verified)
                                <span class="text-emerald-400 text-base">✓</span>
                            @else
                                <span class="text-gray-600 text-base">—</span>
                            @endif
                        </td>
                        <td class="px-3 py-3">
                            @if($u->is_admin)
                                <span class="text-teal-400 text-base">👑</span>
                            @else
                                <span class="text-gray-600 text-base">—</span>
                            @endif
                        </td>
                        <td class="px-3 py-3 text-gray-400 text-xs">{{ $u->created_at?->format('Y-m-d') }}</td>
                        <td class="px-3 py-3">
                            <div class="flex items-center justify-end gap-2">
                                <button type="button"
                                    data-user='{{ json_encode([
                                        "plan" => $u->plan,
                                        "points" => (int) $u->points,
                                        "star_verified" => (bool) $u->star_verified,
                                        "is_admin" => (bool) $u->is_admin,
                                        "whatsapp" => $u->whatsapp ?? "",
                                        "star_account_id" => $u->star_account_id ?? "",
                                    ], JSON_HEX_APOS|JSON_UNESCAPED_UNICODE) }}'
                                    @click="editing = {{ $u->id }}; form = JSON.parse($el.dataset.user)"
                                    class="px-2 py-1 rounded-md bg-white/5 hover:bg-white/10 text-xs font-bold text-gray-200 border border-white/10">✏️</button>
                                @if(! $u->is_admin)
                                    <form method="POST" action="{{ route('admin.users.destroy', $u) }}" onsubmit="return confirm('{{ __('messages.delete') }}?');">
                                        @csrf @method('DELETE')
                                        <button class="px-2 py-1 rounded-md bg-red-500/15 hover:bg-red-500/25 text-xs font-bold text-red-300 border border-red-500/20">🗑️</button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="11" class="px-3 py-10 text-center text-gray-400">{{ __('messages.no_users') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3 border-t border-white/5">
        {{ $users->links() }}
    </div>

    {{-- Edit modal --}}
    <div x-show="editing !== null" x-cloak x-transition.opacity
         class="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4"
         @click.self="editing = null">
        @foreach($users as $u)
            <template x-if="editing === {{ $u->id }}">
                <form method="POST" action="{{ route('admin.users.update', $u) }}"
                      class="w-full max-w-lg rounded-2xl glass border border-teal-500/30 p-5 sm:p-6 shadow-2xl">
                    @csrf @method('PATCH')
                    <h3 class="font-bold text-white text-base mb-1">{{ __('messages.edit_user') }}</h3>
                    <p class="text-xs text-gray-400 mb-4">{{ $u->name }} — {{ $u->email }}</p>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <label class="block">
                            <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.plan') }}</span>
                            <select name="plan" x-model="form.plan" class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2 text-sm text-white">
                                <option value="free">Free</option>
                                <option value="vip">VIP</option>
                            </select>
                        </label>
                        <label class="block">
                            <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.your_points') }}</span>
                            <input type="number" name="points" min="0" x-model="form.points"
                                class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2 text-sm text-white" />
                        </label>
                        <label class="block sm:col-span-2">
                            <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.whatsapp_lbl') }}</span>
                            <input type="text" name="whatsapp" x-model="form.whatsapp" dir="ltr"
                                class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2 text-sm text-white" />
                        </label>
                        <label class="block sm:col-span-2">
                            <span class="block text-xs font-semibold text-gray-300 mb-1.5">{{ __('messages.star_id_lbl') }}</span>
                            <input type="text" name="star_account_id" x-model="form.star_account_id" dir="ltr"
                                class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2 text-sm text-white" />
                        </label>

                        <label class="flex items-center gap-2 cursor-pointer select-none">
                            <input type="hidden" name="star_verified" value="0" />
                            <input type="checkbox" name="star_verified" value="1" x-model="form.star_verified"
                                class="rounded border-white/20 bg-bgapp text-emerald-500 focus:ring-emerald-500" />
                            <span class="text-sm text-gray-200">{{ __('messages.verified_account') }}</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer select-none">
                            <input type="hidden" name="is_admin" value="0" />
                            <input type="checkbox" name="is_admin" value="1" x-model="form.is_admin"
                                class="rounded border-white/20 bg-bgapp text-teal-500 focus:ring-teal-500" />
                            <span class="text-sm text-gray-200">{{ __('messages.admin_role') }}</span>
                        </label>
                    </div>

                    <div class="flex justify-end gap-2 mt-5">
                        <button type="button" @click="editing = null" class="px-3 py-1.5 rounded-lg bg-white/5 text-gray-200 text-sm hover:bg-white/10">{{ __('messages.cancel') }}</button>
                        <button class="px-4 py-1.5 rounded-lg btn-teal text-sm">{{ __('messages.save_changes') }}</button>
                    </div>
                </form>
            </template>
        @endforeach
    </div>
</section>
@endsection