@extends('layouts.admin', ['title' => 'Profile', 'currentPage' => 'dashboard', 'breadcrumbs' => [ ['title' => 'Profile'] ]])

@section('content')
<div class="max-w-3xl mx-auto p-6">
    <div class="bg-white rounded-2xl shadow-lg p-6 flex items-center gap-4">
        <img id="profAvatar" src="" alt="Avatar" class="w-16 h-16 rounded-full bg-gray-100">
        <div>
            <div id="profName" class="text-xl font-bold text-gray-800">Loading...</div>
            <div id="profEmail" class="text-sm text-gray-500"></div>
        </div>
        <button id="refreshBtn" class="ml-auto px-3 py-2 text-sm border rounded-lg hover:bg-gray-50">Refresh from Canvas</button>
    </div>
</div>
@endsection

@push('head')
<script>
async function loadProfile(force){
    const res = await fetch('/admin/api/profile'+(force?'?t='+(Date.now()):''), { credentials: 'same-origin' });
    const p = await res.json();
    document.getElementById('profName').textContent = p.name || 'Unknown';
    document.getElementById('profEmail').textContent = p.email || '';
    const av = document.getElementById('profAvatar');
    if (p.avatar) av.src = p.avatar;
}
document.addEventListener('DOMContentLoaded', function(){
    loadProfile(false);
    document.getElementById('refreshBtn').addEventListener('click', ()=>loadProfile(true));
});
</script>
@endpush