<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
    <title>Profile Page</title>
</head>

<?php include 'had.php'; ?>
<?php include 'nav.php'; ?>

<body class="text-white min-h-screen flex flex-col items-center p-4 mx-4" style="background-color: #07031e; position: relative; top: 85px;">



    <div class="max-w-md w-full p-6 rounded-lg shadow-lg" style="background-color: #07031e;">

        <div class="text-center">
            <div class="relative inline-block" >
                <img id="profile-pic" 
                    src="<?= htmlspecialchars($user['profile_pic'] ?? 'https://via.placeholder.com/120') ?>" 
                    alt="Profile picture" 
                    class="w-32 h-32 rounded-full border-4 border-gray-700 object-cover">
                <form action="" method="POST" enctype="multipart/form-data" class="absolute bottom-2 right-2">
                    <label for="file-input" class="bg-blue-600 p-2 rounded-full cursor-pointer hover:bg-blue-700 transition">
                        <i class="fas fa-camera text-white"></i>
                    </label>
                    <input id="file-input" type="file" name="profile_pic" class="hidden" onchange="this.form.submit()">
                </form>
            </div>
            <div class="mt-4">
                <h2 class="text-2xl font-semibold inline-flex items-center">
                    <?= htmlspecialchars($user['name']) ?>
                    <?php if ($user['level'] == 2): ?>
                        <i class="fas fa-check-circle text-blue-500 ml-2 mt-2 text-sm" style="font-size: 18px;" title="Verified User"></i>


                    <?php endif; ?>
                </h2>
                
            </div>
        </div>

        <?php if ($error_message): ?>
            <p class="text-red-500 mt-4"><?= htmlspecialchars($error_message) ?></p>
        <?php endif; ?>
        <?php if ($success_message): ?>
            <p class="text-green-500 mt-4"><?= htmlspecialchars($success_message) ?></p>
        <?php endif; ?>

        <!-- Menu Section -->
        <div class="mt-8 space-y-4">
            <a href="redirect_to_whatsapp.php" target="_blank" class="flex items-center justify-between bg-gray-700 p-4 rounded-lg hover:bg-gray-600">
                <span>Admin WhatsApp</span>
                <i class="fas fa-chevron-right"></i>
            </a>
            <a href="redirect_to_telegram.php" target="_blank" class="flex items-center justify-between bg-gray-700 p-4 rounded-lg hover:bg-gray-600">
                <span>Admin Telegram</span>
                <i class="fas fa-chevron-right"></i>
            </a>
            <a href="redirect_to_telegram_group.php" target="_blank" class="flex items-center justify-between bg-gray-700 p-4 rounded-lg hover:bg-gray-600">
                <span>Telegram Group</span>
                <i class="fas fa-chevron-right"></i>
            </a>
            <a href="/livechat.php" class="flex items-center justify-between bg-gray-700 p-4 rounded-lg hover:bg-gray-600">
                <span>Live Chat</span>
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
    </div>
</body>
</html>