<!DOCTYPE html>
<html>
<head>
    <title>My Profile</title>
    <link rel="stylesheet" href="{{ asset('css/employee.css') }}">
</head>

<body style="background:#f4f6f9;">

<div class="content" style="
max-width:700px;
margin:60px auto;
">

<div class="card" style="
padding:35px;
border-radius:20px;
background:white;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
">

<!-- PROFILE IMAGE -->
<div style="
text-align:center;
margin-bottom:30px;
">

@if(auth()->user()->profile_photo)

<img src="{{ asset('storage/' . auth()->user()->profile_photo) }}"
style="
width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
border:4px solid #16a34a;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
">

@else

<div style="
width:110px;
height:110px;
border-radius:50%;
background:#dcfce7;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:700;
color:#166534;
margin:auto;
border:4px solid #16a34a;
">
{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
</div>

@endif

<h2 style="
margin-top:18px;
font-size:36px;
font-weight:700;
color:#166534;
">
My Profile
</h2>

<p style="
color:#64748b;
margin-top:8px;
">
Manage your account information
</p>

</div>

<!-- INFO -->
<div style="margin-bottom:22px;">

<p style="
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:6px;
">
NAME
</p>

<div style="
background:#f8fafc;
padding:14px 16px;
border-radius:12px;
font-size:16px;
font-weight:600;
">
{{ auth()->user()->name }}
</div>

</div>


<div style="margin-bottom:22px;">

<p style="
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:6px;
">
EMAIL
</p>

<div style="
background:#f8fafc;
padding:14px 16px;
border-radius:12px;
font-size:16px;
font-weight:600;
">
{{ auth()->user()->email }}
</div>

</div>


<div style="margin-bottom:30px;">

<p style="
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:6px;
">
ROLE
</p>

<div style="
display:inline-block;
background:#dcfce7;
color:#166534;
padding:10px 16px;
border-radius:999px;
font-size:14px;
font-weight:700;
">
🛡 {{ ucfirst(auth()->user()->role) }}
</div>

</div>


<!-- BUTTONS -->
<div style="
display:flex;
flex-direction:column;
gap:14px;
">

<a href="/change-password"
style="
background:#f8fafc;
color:#111827;
padding:14px;
border-radius:12px;
text-decoration:none;
font-weight:700;
text-align:center;
border:1px solid #e5e7eb;
">
Change Password
</a>

<a href="javascript:history.back()"
style="
background:#16a34a;
color:white;
padding:14px;
border-radius:12px;
text-decoration:none;
font-weight:700;
text-align:center;
box-shadow:0 4px 10px rgba(22,163,74,0.20);
">
⬅ Back
</a>

</div>

</div>

</div>

</body>
</html>