<?php
include('header.php');
$page_title  = WEB_NAME . " | KYC Verification";
$page_title2 = "KYC Verification";
$current_page = 'kyc';

// Check existing KYC status
$kyc = null;
try {
    $stmt = $pdo->prepare("SELECT * FROM kyc_verifications WHERE user_id = :uid ORDER BY id DESC LIMIT 1");
    $stmt->execute(['uid' => $user['id']]);
    $kyc = $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // Table might not exist yet
}

$kyc_status = $kyc['status'] ?? 'none'; // none, pending, approved, rejected
?>
<title><?php echo htmlspecialchars($page_title); ?></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.anim{opacity:0;animation:fadeUp .45s ease-out forwards}
.anim-1{animation-delay:.05s}.anim-2{animation-delay:.12s}.anim-3{animation-delay:.19s}
.kyc-hero{background:linear-gradient(145deg,#2d0a5e 0%,#3b0f6b 40%,#4D148C 80%,#4D148C 100%);border:1px solid rgba(245,158,11,.15);border-radius:20px;padding:20px;position:relative;overflow:hidden;margin-bottom:14px}
.kyc-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:16px;padding:20px;margin-bottom:14px}
.kyc-input{width:100%;padding:12px 14px;background:var(--btn-bg);color:var(--hd-title);border-radius:10px;border:1.5px solid var(--card-border);outline:none;font-size:.85rem;transition:border-color .2s}
.kyc-input:focus{border-color:#6b23c2}
.kyc-btn{width:100%;background:linear-gradient(135deg,#4D148C,#6b23c2);color:white;font-weight:700;padding:13px;border-radius:10px;border:none;cursor:pointer;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px rgba(77,20,140,.28)}
.kyc-btn:disabled{opacity:.5;cursor:not-allowed}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;font-size:.75rem;font-weight:700}
</style>

<div class="max-w-lg mx-auto">

<!-- Hero -->
<div class="kyc-hero anim anim-1">
    <div style="position:relative;z-index:1;">
        <h2 style="font-size:1.1rem;font-weight:800;color:white;margin-bottom:4px;display:flex;align-items:center;gap:8px;">
            <i class="fas fa-shield-halved text-emerald-300 text-base"></i>KYC Verification
        </h2>
        <p style="color:rgba(255,255,255,.55);font-size:.78rem;">Complete identity verification to enable withdrawals.</p>
    </div>
</div>

<?php if ($kyc_status === 'approved'): ?>
<!-- Approved -->
<div class="anim anim-2" style="background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.2);border-radius:16px;padding:24px;text-align:center;">
    <div style="width:56px;height:56px;border-radius:50%;background:rgba(16,185,129,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
        <i class="fas fa-circle-check" style="font-size:1.6rem;color:#059669;"></i>
    </div>
    <h3 style="font-weight:700;font-size:1rem;color:#059669;margin-bottom:6px;">KYC Verified</h3>
    <p style="font-size:.8rem;color:var(--text-muted);margin-bottom:16px;">Your identity has been verified. You can now make withdrawals.</p>
    <a href="withdraw" style="display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:linear-gradient(135deg,#4D148C,#6b23c2);color:white;font-weight:700;font-size:.82rem;border-radius:10px;text-decoration:none;">
        <i class="fas fa-money-bill-transfer"></i>Go to Withdraw
    </a>
</div>

<?php elseif ($kyc_status === 'pending'): ?>
<!-- Pending -->
<div class="anim anim-2" style="background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);border-radius:16px;padding:24px;text-align:center;">
    <div style="width:56px;height:56px;border-radius:50%;background:rgba(245,158,11,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
        <i class="fas fa-clock" style="font-size:1.6rem;color:#d97706;"></i>
    </div>
    <h3 style="font-weight:700;font-size:1rem;color:#d97706;margin-bottom:6px;">Verification Pending</h3>
    <p style="font-size:.8rem;color:var(--text-muted);margin-bottom:8px;">Your KYC submission is under review. This usually takes 1-24 hours.</p>
    <p style="font-size:.75rem;color:var(--text-muted);">Submitted: <?php echo date('M d, Y h:i A', strtotime($kyc['created_at'])); ?></p>
</div>

<?php elseif ($kyc_status === 'rejected'): ?>
<!-- Rejected -->
<div class="anim anim-2" style="background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);border-radius:16px;padding:24px;text-align:center;margin-bottom:14px;">
    <div style="width:56px;height:56px;border-radius:50%;background:rgba(239,68,68,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
        <i class="fas fa-times-circle" style="font-size:1.6rem;color:#dc2626;"></i>
    </div>
    <h3 style="font-weight:700;font-size:1rem;color:#dc2626;margin-bottom:6px;">Verification Rejected</h3>
    <p style="font-size:.8rem;color:var(--text-muted);margin-bottom:8px;"><?php echo htmlspecialchars($kyc['admin_note'] ?? 'Your submission was rejected. Please resubmit with correct details.'); ?></p>
</div>
<!-- Show form again for resubmission -->
<?php endif; ?>

<?php if ($kyc_status === 'none' || $kyc_status === 'rejected'): ?>
<!-- KYC Form -->
<div class="kyc-card anim anim-3">
    <h3 style="font-weight:700;font-size:.88rem;color:var(--text-primary);margin-bottom:18px;display:flex;align-items:center;gap:8px;">
        <span style="width:28px;height:28px;border-radius:8px;background:rgba(77,20,140,.1);display:inline-flex;align-items:center;justify-content:center;">
            <i class="fas fa-id-card" style="font-size:.72rem;color:#4D148C;"></i>
        </span>
        Submit Your Details
    </h3>

    <form id="kycForm" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:14px;">
        <div>
            <label style="display:block;font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;">Full Name (as on ID)</label>
            <input type="text" name="full_name" class="kyc-input" placeholder="Enter your full legal name" value="<?php echo htmlspecialchars($user['full_name'] ?? ''); ?>" required>
        </div>

        <div>
            <label style="display:block;font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;">Date of Birth</label>
            <input type="date" name="dob" class="kyc-input" required>
        </div>

        <div>
            <label style="display:block;font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;">BVN (Bank Verification Number) <span style="font-size:.7rem;color:var(--text-muted);font-weight:400;">— or provide NIN below</span></label>
            <input type="text" name="bvn" class="kyc-input" placeholder="22012345678" maxlength="11" pattern="[0-9]{11}">
            <p style="font-size:.7rem;color:var(--text-muted);margin-top:4px;">11-digit number. Dial *565*0# on your registered line to get it.</p>
        </div>

        <div>
            <label style="display:block;font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;">NIN (National Identification Number) <span style="font-size:.7rem;color:var(--text-muted);font-weight:400;">— or provide BVN above</span></label>
            <input type="text" name="nin" class="kyc-input" placeholder="12345678901" maxlength="11" pattern="[0-9]{11}">
            <p style="font-size:.7rem;color:var(--text-muted);margin-top:4px;">11-digit number. Dial *346# to get your NIN.</p>
        </div>

        <div>
            <label style="display:block;font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;">ID Card Photo <span style="font-size:.7rem;color:var(--text-muted);font-weight:400;">(NIN slip, Voter's card, Driver's license, or Int'l passport)</span></label>
            <input type="file" name="id_card" class="kyc-input" accept="image/*,.pdf" required style="padding:10px;">
            <p style="font-size:.7rem;color:var(--text-muted);margin-top:4px;">Upload a clear photo of your valid ID. Max 5MB. (JPG, PNG, PDF)</p>
        </div>

        <div>
            <label style="display:block;font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;">Selfie Photo <span style="font-size:.7rem;color:var(--text-muted);font-weight:400;">(holding your ID card)</span></label>
            <input type="file" name="selfie" class="kyc-input" accept="image/*" required style="padding:10px;">
            <p style="font-size:.7rem;color:var(--text-muted);margin-top:4px;">Take a clear selfie holding your ID card next to your face. Max 5MB.</p>
        </div>

        <div style="background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);border-radius:10px;padding:12px;display:flex;align-items:flex-start;gap:10px;">
            <i class="fas fa-lock" style="color:#2563eb;margin-top:2px;"></i>
            <p style="font-size:.72rem;color:var(--text-muted);line-height:1.5;">Your information is encrypted and stored securely. It will only be used for identity verification purposes.</p>
        </div>

        <button type="submit" class="kyc-btn" id="kycSubmitBtn">
            <i class="fas fa-paper-plane"></i> Submit for Verification
        </button>
    </form>
</div>
<?php endif; ?>

</div>

<script>
$('#kycForm').on('submit', function(e) {
    e.preventDefault();
    var btn = $('#kycSubmitBtn');
    btn.prop('disabled', true).html('<span style="display:inline-block;width:14px;height:14px;border:2px solid white;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;"></span> Submitting...');

    var formData = new FormData(this);
    formData.append('action', 'submit_kyc');

    $.ajax({
        url: 'ajax/kyc_handler.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function(res) {
            if (res.status === '1') {
                alert(res.msg);
                location.reload();
            } else {
                alert(res.msg || 'Submission failed.');
                btn.prop('disabled', false).html('<i class="fas fa-paper-plane"></i> Submit for Verification');
            }
        },
        error: function() {
            alert('An error occurred. Please try again.');
            btn.prop('disabled', false).html('<i class="fas fa-paper-plane"></i> Submit for Verification');
        }
    });
});
</script>

<?php include('footer.php'); ?>
