Sindbad~EG File Manager

<?php
require_once 'config/config.php';
checkLogin();

$pageTitle = "My Profile - " . APP_NAME;
$success = '';
$error = '';

$db = Database::getInstance()->getConnection();
$userId = $_SESSION['user_id'];

// Get user data
$stmt = $db->prepare("SELECT * FROM users WHERE id = :id");
$stmt->execute(['id' => $userId]);
$user = $stmt->fetch();

// Handle profile update
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['update_profile'])) {
        $fullName = sanitize($_POST['full_name']);
        $email = sanitize($_POST['email']);
        $phone = sanitize($_POST['phone']);
        
        $auth = new Auth();
        $result = $auth->updateProfile($userId, [
            'full_name' => $fullName,
            'email' => $email,
            'phone' => $phone
        ]);
        
        if ($result['success']) {
            $success = $result['message'];
            $user['full_name'] = $fullName;
            $user['email'] = $email;
            $user['phone'] = $phone;
        } else {
            $error = $result['message'];
        }
    } elseif (isset($_POST['change_password'])) {
        $oldPassword = $_POST['old_password'];
        $newPassword = $_POST['new_password'];
        $confirmPassword = $_POST['confirm_password'];
        
        if ($newPassword !== $confirmPassword) {
            $error = 'New passwords do not match';
        } elseif (strlen($newPassword) < 6) {
            $error = 'Password must be at least 6 characters';
        } else {
            $auth = new Auth();
            $result = $auth->changePassword($userId, $oldPassword, $newPassword);
            
            if ($result['success']) {
                $success = $result['message'];
            } else {
                $error = $result['message'];
            }
        }
    }
}

include 'includes/header.php';
?>

<?php include 'includes/sidebar.php'; ?>

<!-- Main Content -->
<main class="flex-1 md:ml-64 mt-16">
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <!-- Page Header -->
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-800">
                <i class="fas fa-user-circle mr-2 text-blue-500"></i>My Profile
            </h1>
            <p class="text-gray-600 mt-2">Manage your account settings and preferences</p>
        </div>
        
        <!-- Success/Error Messages -->
        <?php if (!empty($success)): ?>
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6 flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                <span><?php echo htmlspecialchars($success); ?></span>
            </div>
        <?php endif; ?>
        
        <?php if (!empty($error)): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6 flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <span><?php echo htmlspecialchars($error); ?></span>
            </div>
        <?php endif; ?>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Profile Card -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <div class="text-center">
                        <div class="relative inline-block">
                            <img src="<?php echo !empty($user['profile_photo']) ? BASE_URL . 'uploads/profiles/' . $user['profile_photo'] : BASE_URL . 'assets/images/default-avatar.png'; ?>" 
                                 alt="Profile" 
                                 class="w-32 h-32 rounded-full mx-auto border-4 border-blue-200 object-cover">
                            <button class="absolute bottom-0 right-0 bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600 transition">
                                <i class="fas fa-camera"></i>
                            </button>
                        </div>
                        
                        <h2 class="text-xl font-bold text-gray-800 mt-4"><?php echo htmlspecialchars($user['full_name']); ?></h2>
                        <p class="text-gray-600">@<?php echo htmlspecialchars($user['username']); ?></p>
                        
                        <div class="mt-4 space-y-2">
                            <div class="bg-gradient-to-r from-blue-100 to-yellow-100 rounded-lg p-3">
                                <p class="text-sm text-gray-600">Access Level</p>
                                <p class="font-semibold text-gray-800 capitalize"><?php echo htmlspecialchars($user['access_level']); ?></p>
                            </div>
                            
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="text-sm text-gray-600">Last Login</p>
                                <p class="font-semibold text-gray-800">
                                    <?php echo $user['last_login'] ? formatDate($user['last_login'], 'M d, Y H:i') : 'Never'; ?>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Profile Settings -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-lg">
                    <!-- Tabs -->
                    <div class="border-b border-gray-200">
                        <nav class="flex">
                            <button onclick="switchTab('profile')" 
                                    class="tab-btn px-6 py-4 font-medium border-b-2 border-blue-500 text-blue-600">
                                <i class="fas fa-user mr-2"></i>Profile Information
                            </button>
                            <button onclick="switchTab('password')" 
                                    class="tab-btn px-6 py-4 font-medium text-gray-600 hover:text-blue-600 border-b-2 border-transparent">
                                <i class="fas fa-lock mr-2"></i>Change Password
                            </button>
                        </nav>
                    </div>
                    
                    <!-- Profile Tab -->
                    <div id="profileTab" class="p-6">
                        <form method="POST" action="">
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                                    <input type="text" 
                                           name="full_name" 
                                           value="<?php echo htmlspecialchars($user['full_name']); ?>" 
                                           required
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
                                    <input type="email" 
                                           name="email" 
                                           value="<?php echo htmlspecialchars($user['email']); ?>" 
                                           required
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
                                    <input type="tel" 
                                           name="phone" 
                                           value="<?php echo htmlspecialchars($user['phone']); ?>" 
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Username</label>
                                    <input type="text" 
                                           value="<?php echo htmlspecialchars($user['username']); ?>" 
                                           disabled
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 cursor-not-allowed">
                                    <p class="text-sm text-gray-500 mt-1">Username cannot be changed</p>
                                </div>
                            </div>
                            
                            <div class="mt-6 flex justify-end">
                                <button type="submit" 
                                        name="update_profile"
                                        class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-lg hover:from-blue-600 hover:to-blue-700 transition">
                                    <i class="fas fa-save mr-2"></i>Save Changes
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Password Tab -->
                    <div id="passwordTab" class="p-6 hidden">
                        <form method="POST" action="">
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Current Password</label>
                                    <input type="password" 
                                           name="old_password" 
                                           required
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">New Password</label>
                                    <input type="password" 
                                           name="new_password" 
                                           required
                                           minlength="6"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <p class="text-sm text-gray-500 mt-1">Minimum 6 characters</p>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Confirm New Password</label>
                                    <input type="password" 
                                           name="confirm_password" 
                                           required
                                           minlength="6"
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                            </div>
                            
                            <div class="mt-6 flex justify-end">
                                <button type="submit" 
                                        name="change_password"
                                        class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-6 py-2 rounded-lg hover:from-blue-600 hover:to-blue-700 transition">
                                    <i class="fas fa-key mr-2"></i>Change Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function switchTab(tab) {
        // Hide all tabs
        document.getElementById('profileTab').classList.add('hidden');
        document.getElementById('passwordTab').classList.add('hidden');
        
        // Remove active state from all buttons
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-blue-500', 'text-blue-600');
            btn.classList.add('border-transparent', 'text-gray-600');
        });
        
        // Show selected tab
        if (tab === 'profile') {
            document.getElementById('profileTab').classList.remove('hidden');
            event.target.closest('.tab-btn').classList.add('border-blue-500', 'text-blue-600');
            event.target.closest('.tab-btn').classList.remove('border-transparent', 'text-gray-600');
        } else if (tab === 'password') {
            document.getElementById('passwordTab').classList.remove('hidden');
            event.target.closest('.tab-btn').classList.add('border-blue-500', 'text-blue-600');
            event.target.closest('.tab-btn').classList.remove('border-transparent', 'text-gray-600');
        }
    }
</script>

</main>

<?php include 'includes/footer.php'; ?>