File Manager
Viewing File: verify.blade.php
@extends('layouts.dasht')
@section('title', $title)
@section('content')
<div class="min-h-screen bg-white dark:bg-gray-900" x-cloak>
<!-- Simple Header -->
<div class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
<div class="max-w-4xl mx-auto px-6 py-8">
<div class="text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300 rounded-full text-sm font-medium mb-4">
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
Verification Required
</div>
<h1 class="text-2xl font-medium text-gray-900 dark:text-white mb-2">KYC Verification</h1>
<p class="text-gray-600 dark:text-gray-400 max-w-lg mx-auto">
Complete your identity verification to unlock all platform features
</p>
</div>
</div>
</div>
<!-- Alert Messages -->
<x-danger-alert/>
<x-success-alert/>
<div class="max-w-4xl mx-auto px-6 py-8">
<!-- Main Verification Card -->
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 mb-6"
x-data="{ showDetails: false }" x-cloak>
<!-- Card Content -->
<div class="p-6 text-center">
<!-- Icon -->
<div class="w-16 h-16 bg-yellow-50 dark:bg-yellow-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<!-- Title -->
<h2 class="text-xl font-medium text-gray-900 dark:text-white mb-3">
Identity Verification Required
</h2>
<!-- Description -->
<p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto mb-6">
Complete your KYC verification to comply with regulations and access all features.
</p>
<!-- Status and Action -->
<div class="flex flex-col items-center gap-4">
@if (Auth::user()->account_verify == 'Verified')
<div class="inline-flex items-center gap-2 px-4 py-2 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 rounded-lg">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="font-medium">Verified</span>
</div>
<p class="text-sm text-green-600 dark:text-green-400">
Your account has been successfully verified!
</p>
@elseif (Auth::user()->account_verify == 'Under review')
<button disabled
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg font-medium cursor-not-allowed">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
</svg>
Under Review
</button>
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-center">
<p class="text-sm text-blue-700 dark:text-blue-300">
Your documents are being reviewed. Please wait for our team to process your verification.
</p>
</div>
@else
<a href="{{ route('kycform') }}"
class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
Complete Verification
</a>
<!-- Quick Info Toggle -->
<button @click="showDetails = !showDetails"
class="text-sm text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<span x-text="showDetails ? 'Hide Details' : 'Learn More'"></span>
<svg class="w-4 h-4 inline ml-1 transition-transform" :class="showDetails ? 'rotate-180' : ''" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
@endif
</div>
<!-- Expandable Details -->
<div x-show="showDetails" x-transition class="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg text-left">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">What is KYC Verification?</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="space-y-3">
<div class="flex items-start gap-3">
<div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white text-sm">Security & Compliance</h4>
<p class="text-xs text-gray-600 dark:text-gray-400">Ensures platform security and regulatory compliance</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<svg class="w-3 h-3 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white text-sm">Identity Protection</h4>
<p class="text-xs text-gray-600 dark:text-gray-400">Protects your identity and prevents fraud</p>
</div>
</div>
</div>
<div class="space-y-3">
<div class="flex items-start gap-3">
<div class="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white text-sm">Full Access</h4>
<p class="text-xs text-gray-600 dark:text-gray-400">Unlock all trading and investment features</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-6 h-6 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
<svg class="w-3 h-3 text-orange-600 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-white text-sm">Quick Process</h4>
<p class="text-xs text-gray-600 dark:text-gray-400">Simple 3-step verification process</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Support Card -->
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800" x-cloak>
<div class="p-6">
<div class="flex flex-col lg:flex-row items-center gap-6">
<!-- Icon -->
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
</div>
</div>
<!-- Content -->
<div class="flex-1 text-center lg:text-left">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
Need Help?
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Our support team is ready to assist you with the verification process.
</p>
<!-- Support Features -->
<div class="flex flex-wrap gap-4 justify-center lg:justify-start text-sm text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"></path>
</svg>
Live Chat
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
Email Support
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
</svg>
24/7 Available
</div>
</div>
</div>
<!-- Action Button -->
<div class="flex-shrink-0">
<a href="{{ route('support') }}"
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
Get Support
</a>
</div>
</div>
</div>
</div>
</div>
</div>
@push('scripts')
<style>
[x-cloak] {
display: none !important;
}
</style>
@endpush
@endsection