@extends('layouts.app')
@section('title','KYC Verification')
@push('styles')
<style>
.kyc-status-card{border-radius:16px;padding:1.75rem;margin-bottom:2rem;display:flex;align-items:center;gap:1.25rem;}
.kyc-status-card.none{background:rgba(255,255,255,.03);border:1px solid var(--border);}
.kyc-status-card.pending{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);}
.kyc-status-card.approved{background:rgba(76,175,80,.08);border:1px solid rgba(76,175,80,.25);}
.kyc-status-card.rejected{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);}
.kyc-icon{font-size:2.5rem;flex-shrink:0;}
.limit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem;}
.limit-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.25rem;text-align:center;}
.limit-val{font-size:1.5rem;font-weight:900;}
.limit-lbl{font-size:.78rem;color:var(--muted);margin-top:.25rem;}
</style>
@endpush
@section('content')
<div class="page-header">
  <h1>KYC Verification</h1>
  <p>Verify your identity to unlock higher withdrawal limits.</p>
</div>

<!-- STATUS CARD -->
@php $statusColors = ['none'=>'none','pending'=>'pending','approved'=>'approved','rejected'=>'rejected']; @endphp
<div class="kyc-status-card {{ $user->kyc_status }}">
  <div class="kyc-icon">
    @if($user->kyc_status === 'approved') 
    @elseif($user->kyc_status === 'pending') 
    @elseif($user->kyc_status === 'rejected') 
    @else 
    @endif
  </div>
  <div>
    <div style="font-weight:800;font-size:1.1rem;">
      @if($user->kyc_status === 'approved') Identity Verified
      @elseif($user->kyc_status === 'pending') Verification Under Review
      @elseif($user->kyc_status === 'rejected') Verification Rejected
      @else Not Verified
      @endif
    </div>
    <div style="color:var(--muted);font-size:.875rem;margin-top:.25rem;">
      @if($user->kyc_status === 'approved') Your identity is verified. You have full withdrawal access.
      @elseif($user->kyc_status === 'pending') Your documents are being reviewed. Usually within 24 hours.
      @elseif($user->kyc_status === 'rejected') {{ $kyc?->admin_note ?? 'Please resubmit with correct documents.' }}
      @else Submit your ID to unlock higher withdrawal limits.
      @endif
    </div>
  </div>
</div>

<!-- LIMITS -->
<div class="limit-grid">
  <div class="limit-card">
    <div class="limit-val" style="color:{{ $user->isKycApproved() ? 'var(--gl)' : '#fbbf24' }};">{{ number_format($user->withdrawal_limit) }} NC</div>
    <div class="limit-lbl">Your Withdrawal Limit</div>
  </div>
  <div class="limit-card">
    <div class="limit-val" style="color:var(--gl);">50,000 NC</div>
    <div class="limit-lbl">Limit After KYC Approval</div>
  </div>
</div>

@if(!$user->isKycApproved() && !$user->isKycPending())
<!-- SUBMISSION FORM -->
<div class="card">
  <div class="card-title"><i class="fas fa-id-card"></i> Submit Identity Documents</div>
  <form method="POST" action="{{ route('kyc.submit') }}" enctype="multipart/form-data">
    @csrf
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
      <div class="form-group">
        <label>ID Type</label>
        <select name="id_type" class="form-control" required>
          <option value="">Select ID type</option>
          <option value="nin">NIN (National ID)</option>
          <option value="bvn">BVN</option>
          <option value="passport">International Passport</option>
          <option value="drivers_license">Driver's License</option>
          <option value="voters_card">Voter's Card</option>
        </select>
      </div>
      <div class="form-group">
        <label>ID Number</label>
        <input type="text" name="id_number" class="form-control" placeholder="Enter your ID number" required>
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;">
      <div class="form-group">
        <label>ID Front <span style="color:#f87171;">*</span></label>
        <input type="file" name="id_front" class="form-control" accept="image/*" required>
        <small style="color:var(--muted);">Clear photo of front of ID</small>
      </div>
      <div class="form-group">
        <label>ID Back <span style="color:var(--muted);">(optional)</span></label>
        <input type="file" name="id_back" class="form-control" accept="image/*">
        <small style="color:var(--muted);">Back of ID if applicable</small>
      </div>
      <div class="form-group">
        <label>Selfie with ID <span style="color:var(--muted);">(optional)</span></label>
        <input type="file" name="selfie" class="form-control" accept="image/*">
        <small style="color:var(--muted);">Hold ID next to your face</small>
      </div>
    </div>

    <div style="background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);border-radius:10px;padding:1rem;margin-bottom:1.25rem;font-size:.85rem;color:rgba(255,255,255,.7);">
      <i class="fas fa-shield-alt" style="color:#fbbf24;"></i> Your documents are encrypted and stored securely. They are only used for identity verification and will not be shared with third parties.
    </div>

    <button type="submit" class="btn btn-green"><i class="fas fa-paper-plane"></i> Submit for Verification</button>
  </form>
</div>
@elseif($user->isKycPending())
<div class="card" style="text-align:center;padding:3rem;">
  <div style="font-size:3rem;margin-bottom:1rem;"></div>
  <div style="font-weight:700;font-size:1.1rem;margin-bottom:.5rem;">Under Review</div>
  <div style="color:var(--muted);">Your documents have been submitted and are being reviewed by our team. You will receive a notification once the review is complete.</div>
  @if($kyc)
  <div style="margin-top:1.5rem;font-size:.8rem;color:var(--muted);">Submitted: {{ $kyc->created_at->format('d M Y H:i') }}</div>
  @endif
</div>
@endif
@endsection