<?php
session_start();
$page_title = 'Personal Info';
$active_nav = 'profile';
include("includes/header.php");
$uid = (int)$_SESSION['user_id'];

$error = $success = "";

$stmt = $conn->prepare("SELECT * FROM users WHERE id=?");
$stmt->bind_param("i", $uid);
$stmt->execute();
$u = $stmt->get_result()->fetch_assoc();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name  = trim($_POST['name'] ?? '');
    $phone = trim($_POST['phone'] ?? '');

    if (!$name) {
        $error = "Name is required.";
    } else {
        $up = $conn->prepare("UPDATE users SET name=?, phone=?, updated_at=NOW() WHERE id=?");
        $up->bind_param("ssi", $name, $phone, $uid);
        if ($up->execute()) {
            $_SESSION['user_name'] = $name;
            $success = "Your details have been updated.";
            $stmt->execute();
            $u = $stmt->get_result()->fetch_assoc();
        } else {
            $error = "Could not save your changes. Please try again.";
        }
    }
}

$avatar_path = $u['avatar'] ? 'uploads/avatars/' . $u['avatar'] : '';
$has_avatar  = $avatar_path && file_exists(__DIR__ . '/' . $avatar_path);
?>

<style>
.app-topbar { display: none; }
.main-content { padding-top: calc(env(safe-area-inset-top) + 6px); }
.pi-wrap { max-width: 600px; margin: 0 auto; }

.sub-topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 18px; }
.sub-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sub-topbar .sub-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-bg); flex-shrink: 0; }
.sub-topbar .sub-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.sub-topbar .icon-btn { color: var(--primary); }

.pi-avatar-block { text-align: center; margin-bottom: 26px; }
.pi-avatar-wrap { position: relative; width: 104px; height: 104px; margin: 0 auto 10px; }
.pi-avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--primary-bg); }
.pi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-avatar .pa-initials { color: #fff; font-size: 2rem; font-weight: 800; }
.pi-cam-btn { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pi-cam-btn:active { background: var(--primary-dark); }
.pi-change-link { background: none; border: none; color: var(--primary); font-family: var(--font); font-weight: 700; font-size: .88rem; cursor: pointer; padding: 4px 8px; }

.pi-field { margin-bottom: 18px; }
.pi-field label { display: block; font-size: .86rem; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.pi-input { width: 100%; height: 54px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; padding: 0 16px; font-size: max(16px, .95rem); color: var(--text); font-family: var(--font); outline: none; transition: border-color .2s, box-shadow .2s; }
.pi-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(34,90,227,.1); }
.pi-input:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
.pi-hint { font-size: .74rem; color: var(--text-light); margin-top: 6px; }

.pi-verified { display: flex; gap: 12px; align-items: flex-start; background: var(--primary-bg); border-radius: 14px; padding: 14px 16px; margin: 4px 0 26px; }
.pi-verified svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.pi-verified .pv-title { font-weight: 700; font-size: .9rem; color: var(--primary); }
.pi-verified .pv-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }

.pi-save { width: 100%; height: 56px; border: none; border-radius: 16px; background: var(--primary); color: #fff; font-family: var(--font); font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 22px rgba(34,90,227,.3); }
.pi-save:active { background: var(--primary-dark); }
</style>

<div class="pi-wrap">

  <div class="sub-topbar">
    <div class="sub-topbar-left">
      <a href="profile.php" class="sub-back" aria-label="Back">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0l7 7M5 12l7-7"/></svg>
      </a>
      <span class="sub-title">Personal Info</span>
    </div>
    <a href="help_center.php" class="icon-btn" title="Help">
      <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 115.83 1c0 2-3 2-3 4"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    </a>
  </div>

  <?php if ($error): ?><div class="alert alert-error" style="margin-bottom:16px"><?php echo htmlspecialchars($error); ?></div><?php endif; ?>
  <?php if ($success): ?>
  <div class="alert alert-success" style="margin-bottom:16px">
    <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
    <?php echo $success; ?>
  </div>
  <?php endif; ?>

  <div class="pi-avatar-block">
    <div class="pi-avatar-wrap">
      <div class="pi-avatar" id="avatarPreview">
        <?php if ($has_avatar): ?>
          <img src="<?php echo htmlspecialchars($avatar_path); ?>" alt="">
        <?php else: ?>
          <span class="pa-initials"><?php echo $__initials; ?></span>
        <?php endif; ?>
      </div>
      <button type="button" class="pi-cam-btn" onclick="document.getElementById('avatarInput').click()" aria-label="Change profile picture">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
      </button>
    </div>
    <button type="button" class="pi-change-link" onclick="document.getElementById('avatarInput').click()">Change profile picture</button>
  </div>

  <form method="POST">
    <div class="pi-field">
      <label>Full Name</label>
      <input type="text" name="name" class="pi-input" value="<?php echo htmlspecialchars($u['name']); ?>" required>
    </div>
    <div class="pi-field">
      <label>Email Address</label>
      <input type="email" class="pi-input" value="<?php echo htmlspecialchars($u['email']); ?>" disabled>
      <div class="pi-hint">Email can't be changed here — contact admin if it needs updating.</div>
    </div>
    <div class="pi-field">
      <label>Phone Number</label>
      <input type="tel" name="phone" class="pi-input" value="<?php echo htmlspecialchars($u['phone'] ?? ''); ?>" placeholder="+234 800 000 0000">
    </div>

    <div class="pi-verified">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 2.4 3.4-.6.6 3.4L21 12l-2.6 2.4.6 3.4-3.4.6L12 22l-2.4-2.6-3.4.6-.6-3.4L3 12l2.6-2.4-.6-3.4 3.4.6z"/><polyline points="9 12 11.5 14.5 16 9.5"/></svg>
      <div>
        <div class="pv-title">Identity Verified</div>
        <div class="pv-desc">Your personal data is encrypted and secure.</div>
      </div>
    </div>

    <button type="submit" class="pi-save">Save Changes</button>
  </form>
</div>

<?php include("includes/avatar_cropper.php"); ?>

<?php include("includes/footer.php"); ?>
