@extends('layouts.app')

@section('title', 'KYC Verification')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="card mb-6">
        <h2 class="text-xl font-bold mb-2">KYC Verification</h2>
        <p class="text-gray-600 mb-4">
            To unlock all features and increase your transaction limits, please complete the following KYC verification steps.
        </p>
    </div>

    @if(session('success'))
        <div class="alert alert-success mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-error mb-4">
            {{ session('error') }}
        </div>
    @endif

    <div class="card mb-6">
        <h3 class="font-bold mb-2">Your KYC Status</h3>
        <table class="min-w-full text-sm">
            <thead>
                <tr>
                    <th class="text-left py-2">Type</th>
                    <th class="text-left py-2">Status</th>
                    <th class="text-left py-2">Last Updated</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($kycVerifications as $verification)
                    <tr>
                        <td class="py-2">{{ strtoupper($verification->type) }}</td>
                        <td class="py-2">
                            @if($verification->status === 'verified')
                                <span class="text-green-600 font-bold">Verified</span>
                            @elseif($verification->status === 'pending')
                                <span class="text-yellow-600 font-bold">Pending</span>
                            @elseif($verification->status === 'failed')
                                <span class="text-red-600 font-bold">Failed</span>
                            @else
                                <span class="text-gray-600">Not Submitted</span>
                            @endif
                        </td>
                        <td class="py-2">
                            {{ $verification->updated_at ? $verification->updated_at->diffForHumans() : '-' }}
                        </td>
                        <td class="py-2">
                            @if($verification->status !== 'verified')
                                @if($verification->type === 'bvn')
                                    <a href="{{ route('kyc.bvn') }}" class="btn-primary btn-xs">Verify BVN</a>
                                @elseif($verification->type === 'nin')
                                    <a href="{{ route('kyc.nin') }}" class="btn-primary btn-xs">Verify NIN</a>
                                @elseif($verification->type === 'document')
                                    <a href="{{ route('kyc.document') }}" class="btn-primary btn-xs">Upload Document</a>
                                @endif
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="text-center py-4 text-gray-500">No KYC verifications found. Please start your KYC process.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="card">
        <h3 class="font-bold mb-2">Get Started</h3>
        <p class="mb-4">Complete each step below to verify your identity:</p>
        <div class="flex flex-col gap-3">
            <a href="{{ route('kyc.bvn') }}" class="btn-primary w-fit">Verify BVN</a>
            <a href="{{ route('kyc.nin') }}" class="btn-primary w-fit">Verify NIN</a>
            <a href="{{ route('kyc.document') }}" class="btn-primary w-fit">Upload ID Document</a>
        </div>
    </div>
</div>
@endsection