<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Profil Admin</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>

<body class="bg-gradient-to-br from-blue-400 via-white to-blue-200 min-h-screen py-10">

    <div class="max-w-lg mx-auto bg-white p-8 rounded-2xl shadow-xl border border-gray-200">
        <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">Profil Admin</h2>

        <!-- Profile Picture -->
        <div class="flex justify-center mb-6">
            <div class="w-36 h-36 bg-blue-400 flex justify-center items-center rounded-full border-4 border-white shadow-md">
                <img src="{{ asset('assets/admin/admin.jpg') }}" alt="Admin Picture" class="w-32 h-32 rounded-full object-cover">
            </div>
        </div>

        <!-- Admin Info -->
        <div class="space-y-5 text-sm sm:text-base">
            <div class="flex justify-between items-center border-b pb-2">
                <span class="text-gray-600 font-semibold">Nama</span>
                <span class="text-gray-800 font-medium">{{ Auth::user()->name }}</span>
            </div>
            <div class="flex justify-between items-center border-b pb-2">
                <span class="text-gray-600 font-semibold">Email</span>
                <span class="text-gray-800 font-medium">{{ Auth::user()->email }}</span>
            </div>
            <div class="flex justify-between items-center border-b pb-2">
                <span class="text-gray-600 font-semibold">Role</span>
                <span class="text-gray-800 font-medium capitalize">{{ Auth::user()->role }}</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-gray-600 font-semibold">Password</span>
                <span class="text-gray-800 font-medium">********</span>
            </div>
        </div>

        <!-- Buttons -->
        <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
            <a href="{{ route('admin.edit-profil') }}"
                class="bg-blue-500 hover:bg-blue-200 text-white px-6 py-3 rounded-full text-center shadow transition-all duration-200">
                <i class="fas fa-user-cog mr-2"></i>Edit Profil
            </a>
            <a href="{{ url('/dashboard-admin') }}"
                class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-full text-center shadow transition-all duration-200">
                <i class="fas fa-arrow-left mr-2"></i>Kembali ke Dashboard
            </a>
        </div>
    </div>

</body>

</html>
