<?php require_once __DIR__.'/layout/header.php'; ?>
<?php require_once __DIR__.'/layout/sidebar.php'; ?>

<style>

.main {
  margin-left: 200px;
  padding: 24px;
}

.card {
  background: #fff;
  padding: 20px;
  max-width: 600px;
}

.label {
  font-weight: bold;
  margin-top: 12px;
}

.value {
  margin-top: 4px;
}

</style>


<main class="main">

<h1>User Profile</h1>

<div class="card" id="profile">
Loading…
</div>

</main>


<script>

const params=new URLSearchParams(window.location.search)

const userId=params.get('id')


/* ================= CSRF ================= */

let CSRF_TOKEN=null

fetch('/auth/csrf_token.php',{credentials:'include'})
.then(r=>r.json())
.then(d=>CSRF_TOKEN=d.csrf_token)


function csrfFetch(url,options={}){

return fetch(url,{

...options,

credentials:'include',

headers:{
...(options.headers||{}),
'X-CSRF-Token':CSRF_TOKEN
}

})

}


if(!userId){

document.getElementById('profile').innerText='Invalid user'

throw new Error('Missing user id')

}


fetch(`/users/view.php?id=${userId}`,{credentials:'same-origin'})

.then(r=>r.json())

.then(res=>{

if(res.status!=='success'){

throw new Error(res.message||'Load failed')

}

const u=res.data

document.getElementById('profile').innerHTML=`

<div class="label">Email</div>
<div class="value">${u.email}</div>

<div class="label">Company</div>
<div class="value">${u.company_name??'-'}</div>

<div class="label">Role</div>
<div class="value">${u.role_key}</div>

<div class="label">Status</div>
<div class="value">${u.status}</div>

<div class="label">Email Verified</div>
<div class="value">${u.email_verified?'Yes':'No'}</div>

`

})

.catch(err=>{

console.error(err)

document.getElementById('profile').innerText='Failed to load user profile'

})

</script>


<?php require_once __DIR__.'/layout/footer.php'; ?>