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

@section('content')
@php $current = request('status', ''); @endphp
<div class="flex items-center gap-2 overflow-x-auto scrollbar-hide mb-4">
    @foreach([['', __('messages.filter_all')], ['pending', __('messages.status_pending_chip')], ['approved', __('messages.status_approved_chip')], ['rejected', __('messages.status_rejected_chip')]] as [$val, $label])
        <a href="{{ route('admin.verifications', ['status' => $val ?: null]) }}"
           class="shrink-0 px-3.5 py-1.5 rounded-xl text-xs font-bold transition whitespace-nowrap
                  {{ $current === $val ? 'bg-teal-500 text-[#0a0f1e]' : 'bg-white/5 text-gray-200 hover:bg-white/10 border border-white/5' }}">
            {{ $label }}
        </a>
    @endforeach
</div>

<section class="rounded-2xl bg-cardapp border border-white/5 shadow-md overflow-hidden">
    <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">{{ __('messages.users') }}</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.submitted_at') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.status_pending') }}</th>
                    <th class="text-start px-3 py-3">{{ __('messages.notes') }}</th>
                    <th class="text-end px-3 py-3">&nbsp;</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5">
                @forelse($verifications as $v)
                    <tr class="hover:bg-white/[.03]" x-data="{ rejectOpen: false }">
                        <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-violet-500 to-violet-700 text-white text-xs font-bold flex items-center justify-center">
                                    {{ mb_substr(optional($v->user)->name ?? '?', 0, 1) }}
                                </div>
                                <div>
                                    <div class="font-semibold text-white">{{ optional($v->user)->name ?? '—' }}</div>
                                    <div class="text-xs text-gray-400">{{ optional($v->user)->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-3 py-3 font-mono text-xs text-gray-200" dir="ltr">{{ $v->whatsapp }}</td>
                        <td class="px-3 py-3 font-mono text-xs text-gray-200" dir="ltr">{{ $v->star_account_id }}</td>
                        <td class="px-3 py-3 text-gray-400 text-xs">{{ $v->created_at?->format('Y-m-d H:i') }}</td>
                        <td class="px-3 py-3">
                            @switch($v->status)
                                @case('approved')
                                    <span class="px-2 py-0.5 rounded-md bg-emerald-500/15 text-emerald-300 text-xs font-bold">✓ {{ __('messages.status_approved_chip') }}</span>
                                    @break
                                @case('rejected')
                                    <span class="px-2 py-0.5 rounded-md bg-red-500/15 text-red-300 text-xs font-bold">✗ {{ __('messages.status_rejected_chip') }}</span>
                                    @break
                                @default
                                    <span class="px-2 py-0.5 rounded-md bg-teal-500/15 text-teal-300 text-xs font-bold">… {{ __('messages.status_pending_chip') }}</span>
                            @endswitch
                        </td>
                        <td class="px-3 py-3 text-gray-400 text-xs max-w-[200px] truncate">{{ $v->admin_notes ?: '—' }}</td>
                        <td class="px-3 py-3">
                            @if($v->status === 'pending')
                                <div class="flex items-center justify-end gap-2 relative">
                                    <form method="POST" action="{{ route('admin.verif.approve', $v) }}">
                                        @csrf
                                        <button class="px-2.5 py-1 rounded-md bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25 text-xs font-bold transition">{{ __('messages.approve') }}</button>
                                    </form>
                                    <button @click="rejectOpen = true" class="px-2.5 py-1 rounded-md bg-red-500/15 text-red-300 hover:bg-red-500/25 text-xs font-bold transition">{{ __('messages.reject') }}</button>

                                    {{-- Reject modal --}}
                                    <div x-show="rejectOpen" 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="rejectOpen = false">
                                        <form method="POST" action="{{ route('admin.verif.reject', $v) }}" class="w-full max-w-md rounded-2xl glass border border-red-500/30 p-5 shadow-2xl">
                                            @csrf
                                            <h3 class="font-bold text-white text-base mb-1">{{ __('messages.reject_request') }}</h3>
                                            <p class="text-xs text-gray-400 mb-4">{{ optional($v->user)->name }}</p>
                                            <textarea name="notes" rows="3" placeholder="{{ __('messages.reject_reason_ph') }}"
                                                class="w-full rounded-lg bg-bgapp border border-white/10 px-3 py-2 text-sm text-white focus:border-red-500 focus:ring-2 focus:ring-red-500/30"></textarea>
                                            <div class="flex justify-end gap-2 mt-4">
                                                <button type="button" @click="rejectOpen = false" class="px-3 py-1.5 rounded-md bg-white/5 text-gray-200 text-xs hover:bg-white/10">{{ __('messages.cancel') }}</button>
                                                <button class="px-3 py-1.5 rounded-md bg-red-500 hover:bg-red-400 text-white text-xs font-bold">{{ __('messages.confirm_reject') }}</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            @else
                                <div class="text-end text-xs text-gray-500">—</div>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-3 py-10 text-center text-gray-400">{{ __('messages.no_verifications') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="px-4 py-3 border-t border-white/5">{{ $verifications->links() }}</div>
</section>
@endsection