@extends('layouts.admin')
@section('title', __('admin.nav_role_verifications'))

@section('admin_content')
<h1 class="mb-6 font-display text-2xl font-bold">{{ __('admin.role_verifications_title') }}</h1>

<div class="space-y-2">
    @forelse ($pending as $item)
        <div class="card flex items-center justify-between p-4">
            <div>
                <p class="font-semibold">{{ $item['user']->fullName() }}</p>
                <p class="text-sm text-ink/50">{{ $item['user']->email }} — {{ __('admin.requesting') }}: {{ $item['role']->name_en }}</p>
            </div>
            <div class="flex items-center gap-2">
                <form action="{{ route('admin.role-verifications.approve', ['user' => $item['user'], 'role' => $item['role']->slug]) }}" method="POST">
                    @csrf
                    <button class="rounded-md bg-green-600 px-3 py-1.5 text-sm text-white hover:bg-green-700">{{ __('admin.approve') }}</button>
                </form>
                <button type="button" data-toggle-target="rej-{{ $item['user']->id }}-{{ $item['role']->slug }}" class="rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700">{{ __('admin.reject') }}</button>
            </div>
        </div>
        <form id="rej-{{ $item['user']->id }}-{{ $item['role']->slug }}" action="{{ route('admin.role-verifications.reject', ['user' => $item['user'], 'role' => $item['role']->slug]) }}" method="POST" class="hidden -mt-1 flex gap-2 pl-4">
            @csrf
            <input type="text" name="reason" placeholder="{{ __('admin.reason') }}" required class="flex-1 rounded-md border border-ink/15 px-3 py-1.5 text-sm">
            <button class="rounded-md bg-red-600 px-3 py-1.5 text-sm text-white">{{ __('admin.confirm') }}</button>
        </form>
    @empty
        <p class="text-ink/40">{{ __('admin.no_pending') }}</p>
    @endforelse
</div>
@endsection