<div class="card" style="max-width:480px;">
  <div style="display:flex; align-items:center; gap:16px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f0f0f0;">
    <div style="width:56px; height:56px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; font-weight:700; flex-shrink:0;">
      <?= mb_strtoupper(mb_substr($usr->name, 0, 1)) ?>
    </div>
    <div>
      <div style="font-size:18px; font-weight:700;"><?= htmlspecialchars($usr->name) ?></div>
      <div style="font-size:13px; color:#888; margin-top:2px;">
        <?= $usr->role === 'admin' ? '👑 Administrator' : '👤 User' ?>
        &nbsp;·&nbsp;
        Login terakhir: <?= $usr->last_login ? date('d/m/Y H:i', strtotime($usr->last_login)) : '—' ?>
      </div>
    </div>
  </div>

  <?= form_open('account/update_profile') ?>

  <div class="form-group">
    <label>Nama Lengkap</label>
    <input type="text" name="name" class="form-control"
      value="<?= htmlspecialchars($usr->name) ?>" required>
  </div>

  <div class="form-group">
    <label>Username</label>
    <input type="text" name="username" class="form-control"
      value="<?= htmlspecialchars($usr->username) ?>" required autocomplete="off">
  </div>

  <div class="form-group">
    <label>Password Baru (kosongkan jika tidak ingin mengubah)</label>
    <div style="position:relative;">
      <input type="password" name="password" id="inp_pw" class="form-control"
        placeholder="Isi untuk mengubah password" autocomplete="new-password">
      <button type="button" onclick="togglePw()"
        style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#aaa;font-size:15px;" id="pwBtn">👁</button>
    </div>
  </div>

  <div class="alert alert-info" style="font-size:12px; padding:10px 12px;">
    ℹ️ Role Anda (<strong><?= $usr->role === 'admin' ? 'Admin' : 'User' ?></strong>) tidak dapat diubah sendiri. Hubungi admin.
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">💾 Simpan Profil</button>
    <a href="<?= site_url('receipt') ?>" class="btn btn-light">Batal</a>
  </div>

  <?= form_close() ?>
</div>
<script>
function togglePw() {
  const inp=document.getElementById('inp_pw'), btn=document.getElementById('pwBtn');
  if(inp.type==='password'){inp.type='text';btn.textContent='🙈';}else{inp.type='password';btn.textContent='👁';}
}
</script>
