@extends('layouts.vpm-dashboard', ['active' => 'identity', 'area' => 'admin'])

@section('title', 'Identity (KYC)')
@section('page_title', 'Identity (KYC)')
@section('page_subtitle', 'Review client identity documents')

@section('content')
<div class="vpm-list-page">
    <x-vpm.action-hero
        title="Identity verification queue"
        text="Approve or reject government ID submissions before clients can trade or withdraw (when KYC is enabled in settings)."
    />

    <div class="vpm-dash-grid vpm-dash-grid--2">
        <div class="vpm-metric-card">
            <p class="vpm-metric-card__label">Pending review</p>
            <p class="vpm-num vpm-metric-card__value">{{ $pendingCount }}</p>
        </div>
        <div class="vpm-metric-card">
            <p class="vpm-metric-card__label">Recently reviewed</p>
            <p class="vpm-num vpm-metric-card__value">{{ $recent->count() }}</p>
        </div>
    </div>

    <section class="vpm-panel">
        <div class="vpm-panel__head">
            <h2 class="vpm-panel__title">Pending submissions</h2>
        </div>

        @if ($pending->isEmpty())
            <p class="vpm-empty-hint vpm-panel__body">No identity documents waiting for review.</p>
        @else
            <div class="vpm-table-wrap">
                <table class="vpm-table vpm-table--terminal">
                    <thead>
                        <tr>
                            <th scope="col">Client</th>
                            <th scope="col">Country</th>
                            <th scope="col">Submitted</th>
                            <th scope="col">Document</th>
                            <th scope="col" class="vpm-table__actions"><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pending as $client)
                            <tr>
                                <td>
                                    <strong>{{ $client->name }}</strong><br>
                                    <span class="vpm-field__hint">{{ $client->email }}</span>
                                </td>
                                <td>{{ $client->country }}</td>
                                <td class="vpm-num">{{ $client->updated_at->diffForHumans() }}</td>
                                <td>
                                    <a href="{{ route('admin.identity.document', $client) }}" class="vpm-i-link">Download</a>
                                </td>
                                <td class="vpm-table__actions">
                                    <div class="vpm-inline-actions">
                                        <form method="POST" action="{{ route('admin.identity.approve', $client) }}" class="vpm-inline-form">
                                            @csrf
                                            <x-vpm.button type="submit" variant="primary" class="vpm-btn--sm">Approve</x-vpm.button>
                                        </form>
                                        <details class="vpm-identity-reject">
                                            <summary class="vpm-btn vpm-btn--ghost vpm-btn--sm">Reject</summary>
                                            <form method="POST" action="{{ route('admin.identity.reject', $client) }}" class="vpm-identity-reject__form">
                                                @csrf
                                                <label class="vpm-field">
                                                    <span class="vpm-field__label">Reason (shown to client)</span>
                                                    <textarea name="reason" class="vpm-input" rows="3" required maxlength="1000" placeholder="Document is unclear, expired, etc."></textarea>
                                                </label>
                                                <x-vpm.button type="submit" variant="ghost" class="vpm-btn--sm">Confirm reject</x-vpm.button>
                                            </form>
                                        </details>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    @if ($recent->isNotEmpty())
        <section class="vpm-panel vpm-mt-2">
            <div class="vpm-panel__head">
                <h2 class="vpm-panel__title">Recently reviewed</h2>
            </div>
            <div class="vpm-table-wrap">
                <table class="vpm-table vpm-table--terminal">
                    <thead>
                        <tr>
                            <th scope="col">Client</th>
                            <th scope="col">Status</th>
                            <th scope="col">Reviewed</th>
                            <th scope="col">Document</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recent as $client)
                            <tr>
                                <td>{{ $client->name }}<br><span class="vpm-field__hint">{{ $client->email }}</span></td>
                                <td>
                                    <span class="vpm-badge vpm-badge--{{ $client->identity_verification_status === 'approved' ? 'up' : 'down' }}">
                                        {{ $client->identityStatusLabel() }}
                                    </span>
                                </td>
                                <td class="vpm-num">{{ $client->updated_at->diffForHumans() }}</td>
                                <td>
                                    @if ($client->identity_document_path)
                                        <a href="{{ route('admin.identity.document', $client) }}" class="vpm-i-link">Download</a>
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</div>
@endsection