<?php
$page_title = 'Profile';
include 'includes/header.php';

// Get user data from session
$username = $_SESSION['username'] ?? 'Admin';
$email = $_SESSION['email'] ?? 'admin@example.com';
$full_name = $_SESSION['full_name'] ?? 'Administrator';
$join_date = $_SESSION['join_date'] ?? date('Y-m-d');
?>

<!-- Begin Page Content -->
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">User Profile</h1>
    </div>

    <!-- Content Row -->
    <div class="row">
        <div class="col-lg-4 mb-4">
            <!-- Profile Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-column align-items-center">
                    <div class="profile-image mb-3">
                        <img class="rounded-circle" src="https://ui-avatars.com/api/?name=<?= urlencode($full_name) ?>&background=4e73df&color=fff&size=150" alt="Profile Image">
                    </div>
                    <h5 class="font-weight-bold text-primary mb-1"><?= htmlspecialchars($full_name) ?></h5>
                    <p class="text-muted mb-1"><?= htmlspecialchars($username) ?></p>
                    <p class="text-muted small">Member since <?= date('M Y', strtotime($join_date)) ?></p>
                </div>
                <div class="card-body text-center">
                    <div class="row">
                        <div class="col-6 border-right">
                            <div class="text-uppercase text-muted small">Projects</div>
                            <div class="h5 font-weight-bold">24</div>
                        </div>
                        <div class="col-6">
                            <div class="text-uppercase text-muted small">Tasks</div>
                            <div class="h5 font-weight-bold">124</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- About Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">About</h6>
                </div>
                <div class="card-body">
                    <p class="mb-2"><i class="fas fa-envelope mr-2 text-gray-400"></i> <?= htmlspecialchars($email) ?></p>
                    <p class="mb-2"><i class="fas fa-phone mr-2 text-gray-400"></i> +1 (555) 123-4567</p>
                    <p class="mb-0"><i class="fas fa-map-marker-alt mr-2 text-gray-400"></i> New York, USA</p>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <!-- Account Details Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Account Details</h6>
                </div>
                <div class="card-body">
                    <form>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">First Name</label>
                                <input type="text" class="form-control" value="John">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Last Name</label>
                                <input type="text" class="form-control" value="Doe">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Username</label>
                            <input type="text" class="form-control" value="<?= htmlspecialchars($username) ?>">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Email address</label>
                            <input type="email" class="form-control" value="<?= htmlspecialchars($email) ?>">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Current Password</label>
                            <input type="password" class="form-control" placeholder="Enter current password">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">New Password</label>
                            <input type="password" class="form-control" placeholder="Enter new password">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Confirm New Password</label>
                            <input type="password" class="form-control" placeholder="Confirm new password">
                        </div>
                        <button type="submit" class="btn btn-primary">Update Profile</button>
                    </form>
                </div>
            </div>

            <!-- Activity Timeline -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="font-weight-bold">Project Completed</h6>
                                <p class="text-muted small mb-0">Just now - You've completed the dashboard design</p>
                                <small class="text-muted">2 minutes ago</small>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-marker bg-success"></div>
                            <div class="timeline-content">
                                <h6 class="font-weight-bold">New Task</h6>
                                <p class="text-muted small mb-0">You have 5 pending tasks to complete</p>
                                <small class="text-muted">1 hour ago</small>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-marker bg-info"></div>
                            <div class="timeline-content">
                                <h6 class="font-weight-bold">New Message</h6>
                                <p class="text-muted small mb-0">You have a new message from John</p>
                                <small class="text-muted">3 hours ago</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container-fluid -->

<!-- Add custom styles for the profile page -->
<style>
    .profile-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
        border: 5px solid #f8f9fc;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    }
    
    .profile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    
    .timeline-item {
        position: relative;
        padding-bottom: 20px;
        border-left: 2px solid #e3e6f0;
        padding-left: 20px;
    }
    
    .timeline-item:last-child {
        border-left-color: transparent;
    }
    
    .timeline-marker {
        position: absolute;
        left: -8px;
        top: 0;
        width: 14px;
        height: 14px;
        border-radius: 50%;
    }
    
    .timeline-content {
        padding-bottom: 10px;
    }
    
    .timeline-content h6 {
        margin-bottom: 5px;
    }
</style>

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