.-.-.-.-.-

<?php
include '../includes/config.php';

if(!isset($_SESSION['user_id']) || $_SESSION['user_role'] != 'student') {
    header("Location: ../login.php");
    exit();
}

$user_id = $_SESSION['user_id'];
$success_message = '';
$error_message = '';

// Get current user data
$user_sql = "SELECT * FROM users WHERE id = ?";
$stmt = $conn->prepare($user_sql);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$user = $stmt->get_result()->fetch_assoc();

// Handle form submission
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = trim($_POST['name']);
    $email = trim($_POST['email']);
    $phone = trim($_POST['phone']);
    $institution = trim($_POST['institution']);
    $current_course = trim($_POST['current_course']);
    $location = trim($_POST['location']);
    $bio = trim($_POST['bio']);
    $date_of_birth = $_POST['date_of_birth'];
    $gender = $_POST['gender'];
    
    // Handle profile picture upload
    $profile_picture = $user['profile_picture']; // Keep existing if no new upload
    
    if(isset($_FILES['profile_picture']) && $_FILES['profile_picture']['error'] == 0) {
        $upload_dir = '../assets/images/profiles/';
        
        // Create directory if it doesn't exist
        if (!file_exists($upload_dir)) {
            mkdir($upload_dir, 0777, true);
        }
        
        $file_name = $_FILES['profile_picture']['name'];
        $file_tmp = $_FILES['profile_picture']['tmp_name'];
        $file_size = $_FILES['profile_picture']['size'];
        $file_type = $_FILES['profile_picture']['type'];
        
        // Get file extension
        $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
        
        // Allowed file types
        $allowed_extensions = array('jpg', 'jpeg', 'png', 'gif', 'webp');
        
        if (in_array($file_ext, $allowed_extensions)) {
            // Validate file size (2MB max)
            if ($file_size <= 2097152) {
                // Generate unique filename
                $new_file_name = 'profile_' . $user_id . '_' . time() . '.' . $file_ext;
                $file_path = $upload_dir . $new_file_name;
                
                // Move uploaded file
                if (move_uploaded_file($file_tmp, $file_path)) {
                    // Delete old profile picture if exists
                    if (!empty($user['profile_picture']) && file_exists('../' . $user['profile_picture'])) {
                        unlink('../' . $user['profile_picture']);
                    }
                    $profile_picture = 'assets/images/profiles/' . $new_file_name;
                } else {
                    $error_message = "Error uploading profile picture.";
                }
            } else {
                $error_message = "Profile picture size must be less than 2MB.";
            }
        } else {
            $error_message = "Invalid file type. Allowed: JPG, JPEG, PNG, GIF, WEBP";
        }
    }
    
    // Update user data
    $update_sql = "UPDATE users SET 
                  name = ?, email = ?, phone = ?, institution = ?, 
                  current_course = ?, location = ?, bio = ?, 
                  profile_picture = ?, date_of_birth = ?, gender = ?
                  WHERE id = ?";
    
    $stmt = $conn->prepare($update_sql);
    $stmt->bind_param("ssssssssssi", $name, $email, $phone, $institution, 
                     $current_course, $location, $bio, $profile_picture, 
                     $date_of_birth, $gender, $user_id);
    
    if($stmt->execute()) {
        $_SESSION['user_name'] = $name; // Update session name
        $success_message = "Profile updated successfully!";
        
        // Refresh user data
        $user_sql = "SELECT * FROM users WHERE id = ?";
        $stmt = $conn->prepare($user_sql);
        $stmt->bind_param("i", $user_id);
        $stmt->execute();
        $user = $stmt->get_result()->fetch_assoc();
    } else {
        $error_message = "Error updating profile: " . $conn->error;
    }
}

// Calculate profile completion percentage
$completion_fields = [
    'phone' => 15,
    'institution' => 15,
    'current_course' => 15,
    'location' => 15,
    'bio' => 15,
    'profile_picture' => 15,
    'date_of_birth' => 5,
    'gender' => 5
];

$profile_completion = 0;
foreach($completion_fields as $field => $weight) {
    if(!empty($user[$field])) {
        $profile_completion += $weight;
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Profile - Student Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <style>
        .profile-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .profile-card:hover {
            transform: translateY(-5px);
        }
        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px 15px 0 0;
            padding: 2rem;
            text-align: center;
        }
        .profile-picture {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            margin: 0 auto 1rem;
            display: block;
        }
        .profile-completion {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        .completion-progress {
            height: 10px;
            background: rgba(255,255,255,0.3);
            border-radius: 5px;
            overflow: hidden;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .profile-section {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .section-title {
            color: #2c3e50;
            border-bottom: 2px solid #667eea;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 0.75rem 2rem;
            font-weight: 600;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        .profile-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .stat-card {
            background: white;
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            border-left: 4px solid #667eea;
        }
        .file-upload {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        .file-upload-btn {
            background: #28a745;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .file-upload-btn:hover {
            background: #218838;
        }
        .file-upload input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        .missing-field {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 0.5rem;
            margin: 0.25rem 0;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="../index.php">eLearning</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="dashboard.php">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="my-courses.php">My Courses</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="progress.php">Progress</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="certificates.php">Certificates</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="profile.php">Profile</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> <?php echo $_SESSION['user_name']; ?>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="profile.php">Profile</a></li>
                            <li><a class="dropdown-item" href="settings.php">Settings</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="../logout.php">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<div class="container-fluid py-4">
        <div class="row">
            
            <div class="col-lg-3 mb-4">
                <div class="card profile-card">
                    <div class="card-body text-center">
                        <img src="<?php echo !empty($user['profile_picture']) ? '../' . $user['profile_picture'] : 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiBmaWxsPSIjN2Y4Y2E2Ii8+CjxwYXRoIGQ9Ik03NSA3N0M4Mi43MzE5IDc3IDg5IDcwLjczMTkgODkgNjNDODkgNTUuMjY4MSA4Mi43MzE5IDQ5IDc1IDQ5QzY3LjI2ODEgNDkgNjEgNTUuMjY4MSA2MSA2M0M2MSA3MC43MzE5IDY3LjI2ODEgNzcgNzUgNzdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNDggOTdDMzQgOTcgNDIgMTE1IDc1IDExNUMxMDggMTE1IDExNiA5NyAxMDIgOTdDOTYgOTcgOTAgMTAzIDc1IDEwM0M2MCAxMDMgNTQgOTcgNDggOTdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'; ?>" 
                             alt="Profile Picture" class="profile-picture" id="profilePreview">
                        <h5><?php echo htmlspecialchars($user['name']); ?></h5>
                        <p class="text-muted">Student</p>
                        <div class="file-upload mb-3">
                            <label class="file-upload-btn">
                                <i class="bi bi-camera me-1"></i>Change Photo
                                <input type="file" name="profile_picture" id="profilePicture" accept="image/*">
                            </label>
                        </div>
                        <div class="profile-stats">
                            <div class="stat-card">
                                <h6 class="mb-1">Member Since</h6>
                                <small class="text-muted"><?php echo date('M Y', strtotime($user['created_at'])); ?></small>
                            </div>
                            <div class="stat-card">
                                <h6 class="mb-1">Last Updated</h6>
                                <small class="text-muted"><?php echo !empty($user['updated_at']) ? date('M j, Y', strtotime($user['updated_at'])) : 'Never'; ?></small>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card profile-card mt-4">
                    <div class="card-body">
                        <h6 class="card-title">Profile Completion</h6>
                        <div class="completion-progress mb-2">
                            <div class="progress-bar bg-success" style="width: <?php echo $profile_completion; ?>%"></div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted"><?php echo $profile_completion; ?>% Complete</small>
                            <small class="text-muted"><?php echo (100 - $profile_completion); ?>% to go</small>
                        </div>
                        
                        <?php if($profile_completion < 100): ?>
                        <div class="mt-3">
                            <small class="text-muted d-block mb-2">Complete these fields:</small>
                            <?php if(empty($user['phone'])): ?>
                                <div class="missing-field">
                                    <i class="bi bi-telephone me-2"></i>Phone Number
                                </div>
                            <?php endif; ?>
                            <?php if(empty($user['institution'])): ?>
                                <div class="missing-field">
                                    <i class="bi bi-building me-2"></i>Institution
                                </div>
                            <?php endif; ?>
                            <?php if(empty($user['current_course'])): ?>
                                <div class="missing-field">
                                    <i class="bi bi-book me-2"></i>Current Course
                                </div>
                            <?php endif; ?>
                            <?php if(empty($user['location'])): ?>
                                <div class="missing-field">
                                    <i class="bi bi-geo-alt me-2"></i>Location
                                </div>
                            <?php endif; ?>
                        </div>
                        <?php else: ?>
                        <div class="text-center mt-3">
                            <i class="bi bi-check-circle-fill text-success fs-4"></i>
                            <p class="text-success mb-0 mt-2">Profile Complete!</p>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>

<div class="col-lg-9">
                <div class="card profile-card">
                    <div class="profile-header">
                        <h3><i class="bi bi-person-gear me-2"></i>My Profile</h3>
                        <p class="mb-0">Manage your personal information and preferences</p>
                    </div>

<form method="POST" enctype="multipart/form-data" id="profileForm">
                            
                            <div class="profile-section">
                                <h4 class="section-title">
                                    <i class="bi bi-person-vcard me-2"></i>Personal Information
                                </h4>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Full Name *</label>
                                        <input type="text" class="form-control" name="name" 
                                               value="<?php echo htmlspecialchars($user['name']); ?>" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Email Address *</label>
                                        <input type="email" class="form-control" name="email" 
                                               value="<?php echo htmlspecialchars($user['email']); ?>" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Phone Number</label>
                                        <input type="tel" class="form-control" name="phone" 
                                               value="<?php echo htmlspecialchars($user['phone'] ?? ''); ?>"
                                               placeholder="+254 712 345 678">
                                        <small class="form-text text-muted">We'll never share your phone number.</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Date of Birth</label>
                                        <input type="date" class="form-control" name="date_of_birth" 
                                               value="<?php echo $user['date_of_birth'] ?? ''; ?>">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Gender</label>
                                        <select class="form-select" name="gender">
                                            <option value="">Select Gender</option>
                                            <option value="male" <?php echo ($user['gender'] ?? '') == 'male' ? 'selected' : ''; ?>>Male</option>
                                            <option value="female" <?php echo ($user['gender'] ?? '') == 'female' ? 'selected' : ''; ?>>Female</option>
                                            <option value="other" <?php echo ($user['gender'] ?? '') == 'other' ? 'selected' : ''; ?>>Other</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

<div class="profile-section">
                                <h4 class="section-title">
                                    <i class="bi bi-mortarboard me-2"></i>Education Information
                                </h4>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Institution/University</label>
                                        <input type="text" class="form-control" name="institution" 
                                               value="<?php echo htmlspecialchars($user['institution'] ?? ''); ?>"
                                               placeholder="e.g., University of Nairobi">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Current Course/Program</label>
                                        <input type="text" class="form-control" name="current_course" 
                                               value="<?php echo htmlspecialchars($user['current_course'] ?? ''); ?>"
                                               placeholder="e.g., Computer Science">
                                    </div>
                                </div>
                            </div>

<div class="profile-section">
                                <h4 class="section-title">
                                    <i class="bi bi-geo-alt me-2"></i>Location Information
                                </h4>
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Location</label>
                                        <input type="text" class="form-control" name="location" 
                                               value="<?php echo htmlspecialchars($user['location'] ?? ''); ?>"
                                               placeholder="e.g., Nairobi, Kenya">
                                        <small class="form-text text-muted">Your city and country</small>
                                    </div>
                                </div>
                            </div>

<div class="profile-section">
                                <h4 class="section-title">
                                    <i class="bi bi-file-text me-2"></i>About Me
                                </h4>
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Bio</label>
                                        <textarea class="form-control" name="bio" rows="4" 
                                                  placeholder="Tell us about yourself, your interests, and your goals..."><?php echo htmlspecialchars($user['bio'] ?? ''); ?></textarea>
                                        <small class="form-text text-muted">Write a short description about yourself.</small>
                                    </div>
                                </div>
                            </div>

<div class="row mt-4">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between">
                                        <a href="dashboard.php" class="btn btn-outline-secondary">
                                            <i class="bi bi-arrow-left me-1"></i>Back to Dashboard
                                        </a>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-check-circle me-1"></i>Update Profile
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Form validation
            const profileForm = document.getElementById('profileForm');
            profileForm.addEventListener('submit', function(e) {
                const email = document.querySelector('input[name="email"]').value;
                const phone = document.querySelector('input[name="phone"]').value;
                
                // Basic email validation
                if (!isValidEmail(email)) {
                    e.preventDefault();
                    alert('Please enter a valid email address.');
                    return false;
                }
                
                // Phone validation (if provided)
                if (phone && !isValidPhone(phone)) {
                    e.preventDefault();
                    alert('Please enter a valid phone number.');
                    return false;
                }
            });

function isValidEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }

function isValidPhone(phone) {
                // Basic phone validation - adjust regex based on your needs
                const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/;
                return phoneRegex.test(phone.replace(/\s/g, ''));
            }

// Auto-save draft (optional feature)
            let autoSaveTimeout;
            const formInputs = profileForm.querySelectorAll('input, textarea, select');
            
            formInputs.forEach(input => {
                input.addEventListener('input', function() {
                    clearTimeout(autoSaveTimeout);
                    autoSaveTimeout = setTimeout(() => {
                        // You could implement auto-save functionality here
                        console.log('Form changed - ready for auto-save');
                    }, 2000);
                });
            });

// Show character count for bio
            const bioTextarea = document.querySelector('textarea[name="bio"]');
            if (bioTextarea) {
                const charCount = document.createElement('small');
                charCount.className = 'form-text text-muted text-end d-block';
                charCount.textContent = `Characters: ${bioTextarea.value.length}/500`;
                
                bioTextarea.parentNode.appendChild(charCount);
                
                bioTextarea.addEventListener('input', function() {
                    charCount.textContent = `Characters: ${this.value.length}/500`;
                    if (this.value.length > 500) {
                        charCount.classList.add('text-danger');
                    } else {
                        charCount.classList.remove('text-danger');
                    }
                });
            }

// Add loading state to submit button
            profileForm.addEventListener('submit', function() {
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="bi bi-arrow-repeat spinner-border spinner-border-sm me-1"></i> Updating...';
                submitBtn.disabled = true;
                
                // Re-enable button after 5 seconds (in case of error)
                setTimeout(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                }, 5000);
            });
        });
    </script>
</body>
</html>

/home/users/unlimited/www/codeskitter_storage/../nigeria.codeskitter.site/student/profile.php