<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include ('header.php');
$page_title = $site_data['web_name'] . " | Profile";

$error_message = '';
$success_message = '';

if (isset($_POST['submit'])) {
    $full_name = trim($_POST['name']);
    $phone = trim($_POST['phone']);
    if (empty($full_name)) {
        $error_message = "Full name cannot be empty";
    } elseif (!empty($phone) && !preg_match('/^\+?[0-9]{7,15}$/', $phone)) {
        $error_message = "Please enter a valid phone number";
    } else {
        try {
            $pdo->prepare("UPDATE users SET full_name = :full_name, phone = :phone, updated_at = NOW() WHERE id = :user_id")
                ->execute(['full_name'=>$full_name,'phone'=>!empty($phone)?$phone:null,'user_id'=>$user['id']]);
            $success_message = "Profile updated successfully!";
            $stmt = $pdo->prepare("SELECT id, username, email, full_name, phone, balance, referral_code, referral_balance, total_referred, total_earnings, is_admin, created_at FROM users WHERE id = :user_id");
            $stmt->bindParam(':user_id', $_SESSION['user_id'], PDO::PARAM_INT);
            $stmt->execute();
            $user = $stmt->fetch(PDO::FETCH_ASSOC);
        } catch (PDOException $e) {
            $error_message = "Error updating profile. Please try again.";
        }
    }
}

if (isset($_POST['update'])) {
    $password1 = $_POST['password1'];
    $password2 = $_POST['password2'];
    if (empty($password1) || empty($password2)) {
        $error_message = "Both password fields are required";
    } elseif ($password1 !== $password2) {
        $error_message = "Passwords do not match";
    } elseif (strlen($password1) < 6) {
        $error_message = "Password must be at least 6 characters long";
    } else {
        try {
            $pdo->prepare("UPDATE users SET password = :password, updated_at = NOW() WHERE id = :user_id")
                ->execute(['password'=>password_hash($password1, PASSWORD_DEFAULT),'user_id'=>$user['id']]);
            $success_message = "Password updated successfully!";
        } catch (PDOException $e) {
            $error_message = "Error updating password. Please try again.";
        }
    }
}
?>
<title><?php echo $page_title; ?></title>

<style>
/* ── Animations ── */
@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}

/* ── Cards ── */
.prof-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    box-shadow:var(--card-shadow);
    border-radius:16px;
    padding:20px;
    margin-bottom:14px;
}
.stat-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    box-shadow:var(--card-shadow);
    border-radius:13px;
    padding:14px;
}

/* ── Form fields ── */
.prof-field input{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1.5px solid var(--card-border);
    background:var(--btn-bg);
    color:var(--hd-title);
    font-size:.9rem;       /* slightly larger for mobile tap targets */
    outline:none;
    transition:border-color .2s;
    box-sizing:border-box;
    -webkit-appearance:none; /* removes iOS inner shadow */
}
.prof-field input:focus{border-color:#6b23c2}
.prof-field input[readonly]{opacity:.6;cursor:not-allowed}

/* ── Stats grid ── */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:14px;
}

/* ── Two-column form grid ── */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

/* ── Profile hero ── */
.prof-hero-inner{
    display:flex;
    align-items:center;
    gap:14px;
}
.prof-avatar{
    width:64px;
    height:64px;
    border-radius:16px;
    background:rgba(255,255,255,.15);
    border:2px solid rgba(255,255,255,.2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    font-weight:700;
    color:white;
    flex-shrink:0;
}

/* ── Buttons ── */
.btn-save{
    width:100%;
    background:linear-gradient(135deg,#4D148C,#6b23c2);
    color:white;
    font-weight:700;
    padding:14px;          /* taller hit area */
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-size:.9rem;
    box-shadow:0 4px 14px rgba(77,20,140,.25);
    margin-top:4px;
    -webkit-tap-highlight-color:transparent;
}
.btn-update{
    width:100%;
    background:linear-gradient(135deg,#334155,#1e293b);
    color:white;
    font-weight:700;
    padding:14px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    font-size:.9rem;
    margin-top:4px;
    -webkit-tap-highlight-color:transparent;
}
.copy-btn{
    padding:0 14px;
    border-radius:8px;
    background:var(--btn-bg);
    border:1px solid var(--card-border);
    color:var(--text-primary);
    cursor:pointer;
    flex-shrink:0;
    min-height:44px;       /* minimum touch target */
    -webkit-tap-highlight-color:transparent;
}
.pw-toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    cursor:pointer;
    color:var(--text-muted);
    min-width:44px;        /* easier to tap */
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-tap-highlight-color:transparent;
}

/* ════════════════════════════════════════
   MOBILE  ≤ 640 px
════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Stack the two form cards vertically */
    .form-grid{
        grid-template-columns:1fr;
    }

    /* Stat numbers a touch smaller so they don't overflow */
    .stat-val{
        font-size:.92rem !important;
    }
    .stat-label{
        font-size:.58rem !important;
    }

    /* Give the hero card a bit more breathing room */
    .prof-hero-inner{
        flex-wrap:wrap;
    }

    /* Slightly reduce card padding on very small screens */
    .prof-card{
        padding:16px;
    }

    /* Make the section title more readable */
    .section-title{
        font-size:.82rem !important;
    }
}
</style>

<div class="max-w-4xl mx-auto px-2">

<?php if ($error_message): ?>
<div class="anim anim-1 mb-4" style="background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;">
    <i class="fas fa-circle-exclamation text-red-500 flex-shrink-0"></i>
    <p style="font-size:.82rem;color:#dc2626;"><?php echo htmlspecialchars($error_message); ?></p>
</div>
<?php endif; ?>
<?php if ($success_message): ?>
<div class="anim anim-1 mb-4" style="background:rgba(77,20,140,.06);border:1px solid rgba(77,20,140,.18);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;">
    <i class="fas fa-circle-check text-purple-500 flex-shrink-0"></i>
    <p style="font-size:.82rem;color:#4D148C;"><?php echo htmlspecialchars($success_message); ?></p>
</div>
<?php endif; ?>

<!-- Profile Hero -->
<div class="anim anim-1" style="background:linear-gradient(145deg,#2d0a5e 0%,#3b0f6b 40%,#4D148C 80%,#6b23c2 100%);border:1px solid rgba(255,102,0,.15);border-radius:20px;padding:20px;position:relative;overflow:hidden;margin-bottom:14px;">
    <div style="position:absolute;width:140px;height:140px;border-radius:50%;filter:blur(50px);background:radial-gradient(circle,rgba(255,102,0,.15),transparent);top:-30px;right:-30px;pointer-events:none;"></div>
    <div class="prof-hero-inner" style="position:relative;z-index:1;">
        <div class="prof-avatar">
            <?php echo strtoupper(substr($user['username'],0,2)); ?>
        </div>
        <div>
            <p style="font-weight:800;font-size:1.1rem;color:white;"><?php echo htmlspecialchars($user['full_name'] ?: $user['username']); ?></p>
            <p style="font-size:.78rem;color:rgba(255,255,255,.55);margin-top:2px;"><?php echo htmlspecialchars($user['email']); ?></p>
            <p style="font-size:.68rem;color:rgba(255,255,255,.4);margin-top:2px;">Member since <?php echo date('F Y', strtotime($user['created_at'])); ?></p>
        </div>
    </div>
</div>

<!-- Stats -->
<div class="anim anim-1 stats-grid">
    <!--
    <div class="stat-card">
        <div style="display:flex;align-items:center;gap:7px;margin-bottom:7px;">
            <div style="width:28px;height:28px;border-radius:7px;background:rgba(77,20,140,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><i class="fas fa-wallet text-purple-600 text-xs"></i></div>
            <p class="stat-label" style="font-size:.62rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;">Balance</p>
        </div>
        <p class="stat-val" style="font-size:1.1rem;font-weight:800;color:var(--text-primary);font-family:monospace;">₦<?php echo number_format($user['main_balance'],2); ?></p>
    </div>
    -->
    <div class="stat-card">
        <div style="display:flex;align-items:center;gap:7px;margin-bottom:7px;">
            <div style="width:28px;height:28px;border-radius:7px;background:rgba(168,85,247,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><i class="fas fa-coins text-purple-600 text-xs"></i></div>
            <p class="stat-label" style="font-size:.62rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;">Referral Bal.</p>
        </div>
        <p class="stat-val" style="font-size:1.1rem;font-weight:800;color:var(--text-primary);font-family:monospace;">₦<?php echo number_format($user['referral_balance'],2); ?></p>
    </div>
    <div class="stat-card">
        <div style="display:flex;align-items:center;gap:7px;margin-bottom:7px;">
            <div style="width:28px;height:28px;border-radius:7px;background:rgba(59,130,246,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;"><i class="fas fa-money-bill-trend-up text-blue-600 text-xs"></i></div>
            <p class="stat-label" style="font-size:.62rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;">Total Earned</p>
        </div>
        <p class="stat-val" style="font-size:1.1rem;font-weight:800;color:var(--text-primary);font-family:monospace;">₦<?php echo number_format($user['total_earnings'],2); ?></p>
    </div>
</div>

<!-- Forms: 2-col on desktop, 1-col on mobile -->
<div class="form-grid">

<!-- Profile Details -->
<div class="prof-card anim anim-2">
    <p class="section-title" style="font-weight:700;font-size:.88rem;color:var(--text-primary);margin-bottom:16px;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;flex-shrink:0;"><i class="fas fa-user" style="font-size:.72rem;color:#4D148C;"></i></span>
        Profile Details
    </p>
    <form method="POST" style="display:flex;flex-direction:column;gap:12px;">
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">Username</label>
            <input type="text" value="<?php echo htmlspecialchars($user['username']); ?>" readonly>
            <p style="font-size:.68rem;color:var(--text-muted);margin-top:3px;">Cannot be changed</p>
        </div>
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">Full Name</label>
            <input type="text" name="name" value="<?php echo htmlspecialchars($user['full_name']); ?>" placeholder="Enter your full name">
        </div>
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">Email Address</label>
            <input type="email" value="<?php echo htmlspecialchars($user['email']); ?>" readonly>
            <p style="font-size:.68rem;color:var(--text-muted);margin-top:3px;">Cannot be changed</p>
        </div>
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">Phone Number</label>
            <input type="tel" name="phone" value="<?php echo htmlspecialchars($user['phone'] ?? ''); ?>" placeholder="e.g. +2349065236144">
        </div>
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">Referral Code</label>
            <div style="display:flex;gap:6px;">
                <input type="text" id="refCode" value="<?php echo htmlspecialchars($user['referral_code']); ?>" readonly style="flex:1;font-family:monospace;">
                <button type="button" class="copy-btn" onclick="copyRefCode()"><i class="fas fa-copy text-xs"></i></button>
            </div>
        </div>
        <button type="submit" name="submit" class="btn-save">Save Changes</button>
    </form>
</div>

<!-- Security -->
<div class="prof-card anim anim-3">
    <p class="section-title" style="font-weight:700;font-size:.88rem;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;gap:8px;">
        <span style="width:28px;height:28px;border-radius:8px;background:rgba(239,68,68,.08);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;"><i class="fas fa-lock" style="font-size:.72rem;color:#dc2626;"></i></span>
        Security
    </p>
    <form method="POST" style="display:flex;flex-direction:column;gap:12px;">
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">New Password</label>
            <div style="position:relative;">
                <input type="password" name="password1" id="password1" required placeholder="Enter new password" style="width:100%;padding-right:48px;box-sizing:border-box;">
                <button type="button" class="pw-toggle" onclick="togglePassword('password1')">
                    <i class="fas fa-eye text-sm" id="eye-password1"></i>
                </button>
            </div>
            <p style="font-size:.68rem;color:var(--text-muted);margin-top:3px;">Minimum 6 characters</p>
        </div>
        <div class="prof-field">
            <label style="display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);margin-bottom:5px;">Confirm Password</label>
            <div style="position:relative;">
                <input type="password" name="password2" id="password2" required placeholder="Confirm new password" style="width:100%;padding-right:48px;box-sizing:border-box;">
                <button type="button" class="pw-toggle" onclick="togglePassword('password2')">
                    <i class="fas fa-eye text-sm" id="eye-password2"></i>
                </button>
            </div>
        </div>
        <div style="background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);border-radius:10px;padding:11px;">
            <div style="display:flex;gap:10px;">
                <i class="fas fa-shield-halved text-amber-600 text-base mt-0.5 flex-shrink-0"></i>
                <div>
                    <p style="font-size:.78rem;font-weight:600;color:#92640a;margin-bottom:5px;">Password Tips</p>
                    <ul style="font-size:.68rem;color:#a16207;line-height:1.8;">
                        <li>• Use a mix of letters, numbers &amp; symbols</li>
                        <li>• Avoid personal information</li>
                        <li>• Don't reuse passwords from other sites</li>
                    </ul>
                </div>
            </div>
        </div>
        <button type="submit" name="update" class="btn-update">Update Password</button>
    </form>
</div>

</div><!-- /form-grid -->

</div><!-- /max-w -->

<script>
function copyRefCode(){
    navigator.clipboard.writeText(document.getElementById('refCode').value)
        .then(()=>alert('Referral code copied!'));
}
function togglePassword(fieldId){
    const f=document.getElementById(fieldId),e=document.getElementById('eye-'+fieldId);
    if(f.type==='password'){f.type='text';e.classList.replace('fa-eye','fa-eye-slash');}
    else{f.type='password';e.classList.replace('fa-eye-slash','fa-eye');}
}
</script>

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