<?php
// profile.php - Premium Animated Profile Page
require_once 'includes/config.php';

if(!isLoggedIn()) {
    header('Location: auth.php');
    exit;
}

$user_id = $_SESSION['user_id'];
$user = getUserData($pdo, $user_id);

$error = '';
$success = '';

// ==================== HANDLE AVATAR UPLOAD ====================
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_avatar'])) {
    if(isset($_FILES['avatar']) && $_FILES['avatar']['error'] === 0) {
        $file = $_FILES['avatar'];
        $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
        $allowed = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
        
        if(!in_array($ext, $allowed)) {
            $error = 'শুধুমাত্র JPG, PNG, GIF, WebP ফাইল অনুমোদিত';
        } elseif($file['size'] > 2097152) {
            $error = 'ফাইল সাইজ 2MB এর বেশি হতে পারবে না';
        } else {
            $upload_dir = 'uploads/avatars/';
            if(!is_dir($upload_dir)) mkdir($upload_dir, 0777, true);
            
            // Delete old avatar
            $old = $user['avatar'] ?? '';
            if(!empty($old) && $old != 'default-avatar.png' && file_exists($upload_dir . $old)) {
                unlink($upload_dir . $old);
            }
            
            $new_name = 'user_' . $user_id . '_' . time() . '.' . $ext;
            
            if(move_uploaded_file($file['tmp_name'], $upload_dir . $new_name)) {
                $pdo->prepare("UPDATE users SET avatar = ? WHERE id = ?")->execute([$new_name, $user_id]);
                $success = 'প্রোফাইল ছবি সফলভাবে আপডেট হয়েছে! 🎉';
                $user['avatar'] = $new_name;
            } else {
                $error = 'ছবি আপলোড ব্যর্থ হয়েছে';
            }
        }
    }
}

// ==================== HANDLE PROFILE UPDATE ====================
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['update_profile'])) {
    $full_name = trim($_POST['full_name'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $bio = trim($_POST['bio'] ?? '');
    
    if(empty($full_name)) {
        $error = 'নাম প্রয়োজন';
    } else {
        $pdo->prepare("UPDATE users SET full_name = ?, phone = ?, bio = ? WHERE id = ?")
            ->execute([$full_name, $phone, $bio, $user_id]);
        $_SESSION['user_name'] = $full_name;
        $success = 'প্রোফাইল তথ্য আপডেট হয়েছে! ✨';
        $user = getUserData($pdo, $user_id);
    }
}

// ==================== HANDLE PASSWORD CHANGE ====================
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['change_password'])) {
    $current = $_POST['current_password'] ?? '';
    $new = $_POST['new_password'] ?? '';
    $confirm = $_POST['confirm_password'] ?? '';
    
    if(empty($current) || empty($new) || empty($confirm)) {
        $error = 'সকল ফিল্ড পূরণ করুন';
    } elseif($new !== $confirm) {
        $error = 'নতুন পাসওয়ার্ড মিলছে না';
    } elseif(strlen($new) < 6) {
        $error = 'পাসওয়ার্ড কমপক্ষে ৬ অক্ষর';
    } elseif(!password_verify($current, $user['password'])) {
        $error = 'বর্তমান পাসওয়ার্ড ভুল';
    } else {
        $pdo->prepare("UPDATE users SET password = ? WHERE id = ?")
            ->execute([password_hash($new, PASSWORD_DEFAULT), $user_id]);
        $success = 'পাসওয়ার্ড পরিবর্তন হয়েছে! 🔐';
    }
}

// Avatar URL
$avatar_url = 'uploads/avatars/default-avatar.png';
if(!empty($user['avatar']) && file_exists('uploads/avatars/' . $user['avatar'])) {
    $avatar_url = 'uploads/avatars/' . $user['avatar'] . '?v=' . time();
} elseif(!file_exists('uploads/avatars/default-avatar.png')) {
    $avatar_url = 'https://ui-avatars.com/api/?name=' . urlencode($user['full_name'] ?? 'U') . '&background=6C5CE7&color=fff&size=200&font-size=0.5';
}

// Stats
$enrolled = $pdo->prepare("SELECT COUNT(*) FROM enrollments WHERE user_id = ? AND payment_status = 'completed'");
$enrolled->execute([$user_id]);
$course_count = $enrolled->fetchColumn();

$completed = $pdo->prepare("SELECT COUNT(*) FROM lesson_progress WHERE user_id = ? AND completed = 1");
$completed->execute([$user_id]);
$lesson_count = $completed->fetchColumn();
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>প্রোফাইল - <?= h($user['full_name']) ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary: #6C5CE7;
            --secondary: #FF6B6B;
            --accent: #4ECDC4;
            --dark: #1a1a2e;
            --light: #f8f9ff;
            --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
            --shadow-md: 0 5px 25px rgba(0,0,0,0.12);
            --shadow-lg: 0 15px 45px rgba(0,0,0,0.15);
            --shadow-xl: 0 25px 65px rgba(0,0,0,0.2);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background: #f0f2f8;
            font-family: 'Segoe UI', 'Hind Siliguri', 'Noto Sans Bengali', Arial, sans-serif;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        /* Animated Background */
        .bg-shapes {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: floatShape 20s infinite ease-in-out;
        }
        
        .shape:nth-child(1) { width: 400px; height: 400px; background: #667eea; top: -100px; left: -100px; animation-delay: 0s; }
        .shape:nth-child(2) { width: 300px; height: 300px; background: #f5576c; bottom: -50px; right: -50px; animation-delay: 5s; }
        .shape:nth-child(3) { width: 200px; height: 200px; background: #4facfe; top: 50%; right: 10%; animation-delay: 10s; }
        .shape:nth-child(4) { width: 250px; height: 250px; background: #43e97b; bottom: 20%; left: 5%; animation-delay: 15s; }
        
        @keyframes floatShape {
            0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
            25% { transform: translate(30px, -30px) rotate(90deg) scale(1.1); }
            50% { transform: translate(-20px, -50px) rotate(180deg) scale(0.9); }
            75% { transform: translate(-40px, 20px) rotate(270deg) scale(1.05); }
        }
        
        /* Navbar */
        .navbar {
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: var(--shadow-sm);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }
        
        .navbar-brand {
            font-weight: 800;
            font-size: 1.4rem;
            background: var(--gradient-1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
        }
        
        /* Container */
        .container { max-width: 900px; margin: 0 auto; padding: 30px 20px; position: relative; z-index: 1; }
        
        /* Profile Header Card */
        .profile-header {
            background: white;
            border-radius: 30px;
            padding: 50px 40px;
            text-align: center;
            box-shadow: var(--shadow-lg);
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
            animation: slideDown 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .profile-header::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 200px;
            background: var(--gradient-1);
            border-radius: 30px 30px 0 0;
        }
        
        .profile-header::after {
            content: '';
            position: absolute;
            top: 180px; left: 50%;
            transform: translateX(-50%);
            width: 140px; height: 140px;
            background: white;
            border-radius: 50%;
        }
        
        .avatar-wrapper {
            position: relative;
            z-index: 2;
            display: inline-block;
            margin-top: -30px;
        }
        
        .avatar-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 6px solid white;
            box-shadow: var(--shadow-xl);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            animation: pulse 3s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(108,92,231,0.4); }
            50% { box-shadow: 0 0 0 25px rgba(108,92,231,0); }
        }
        
        .avatar-img:hover {
            transform: scale(1.08) rotate(5deg);
            border-color: var(--secondary);
            box-shadow: 0 20px 50px rgba(255,107,107,0.4);
            animation: none;
        }
        
        .avatar-edit-badge {
            position: absolute;
            bottom: 15px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: var(--gradient-2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-md);
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        
        .avatar-edit-badge:hover {
            transform: scale(1.2);
            box-shadow: var(--shadow-lg);
        }
        
        .profile-name {
            font-size: 1.8rem;
            font-weight: 800;
            margin: 20px 0 5px;
            color: var(--dark);
            position: relative;
            z-index: 2;
        }
        
        .profile-role {
            display: inline-block;
            padding: 6px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
        }
        
        .role-admin { background: var(--gradient-1); color: white; }
        .role-student { background: var(--gradient-4); color: #1a5c3a; }
        
        .profile-email {
            color: #888;
            font-size: 0.95rem;
            position: relative;
            z-index: 2;
        }
        
        /* Stats Row */
        .stats-row {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 20px;
            position: relative;
            z-index: 2;
        }
        
        .stat-item {
            background: #f8f9ff;
            border-radius: 20px;
            padding: 15px 25px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: default;
            min-width: 100px;
        }
        
        .stat-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            background: white;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            background: var(--gradient-1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: #888;
            font-weight: 500;
        }
        
        /* Cards */
        .card {
            background: white;
            border-radius: 25px;
            padding: 35px;
            box-shadow: var(--shadow-sm);
            margin-bottom: 25px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid transparent;
            animation: fadeInUp 0.6s ease;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card:hover {
            box-shadow: var(--shadow-xl);
            border-color: rgba(108,92,231,0.1);
            transform: translateY(-3px);
        }
        
        .card-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .card-icon {
            width: 45px;
            height: 45px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
        }
        
        .icon-purple { background: var(--gradient-1); }
        .icon-pink { background: var(--gradient-2); }
        .icon-blue { background: var(--gradient-3); }
        .icon-green { background: var(--gradient-4); }
        
        /* Form Styles */
        .form-group { margin-bottom: 20px; }
        .form-label { 
            font-weight: 600; 
            font-size: 0.9rem; 
            margin-bottom: 8px; 
            display: block;
            color: #444;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #e8eaef;
            border-radius: 15px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background: #fafbfd;
            font-family: inherit;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(108,92,231,0.08);
            background: white;
            outline: none;
        }
        
        .form-control:hover {
            border-color: #d0d3dd;
        }
        
        .input-group {
            display: flex;
            border-radius: 15px;
            overflow: hidden;
        }
        
        .input-group-text {
            background: #f8f9ff;
            border: 2px solid #e8eaef;
            border-right: none;
            padding: 14px 15px;
            color: var(--primary);
            font-size: 1rem;
        }
        
        .input-group .form-control {
            border-left: none;
        }
        
        /* Buttons */
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: -100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: 0.5s;
        }
        
        .btn:hover::after { left: 100%; }
        .btn:hover { transform: translateY(-3px); }
        .btn:active { transform: translateY(-1px); }
        
        .btn-primary { background: var(--gradient-1); color: white; }
        .btn-primary:hover { box-shadow: 0 10px 30px rgba(108,92,231,0.35); }
        .btn-success { background: var(--gradient-4); color: #1a5c3a; }
        .btn-success:hover { box-shadow: 0 10px 30px rgba(67,233,123,0.35); }
        .btn-outline { background: white; color: var(--primary); border: 2px solid var(--primary); }
        .btn-outline:hover { background: var(--primary); color: white; }
        .btn-sm { padding: 8px 20px; font-size: 0.8rem; }
        
        /* Alerts */
        .alert {
            padding: 16px 20px;
            border-radius: 15px;
            margin-bottom: 20px;
            font-weight: 500;
            animation: shake 0.5s ease;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-8px); }
            75% { transform: translateX(8px); }
        }
        
        .alert-danger { background: #fff0f0; color: #c33; border: 1px solid #fcc; }
        .alert-success { background: #f0fff4; color: #2d7d46; border: 1px solid #cfc; }
        
        /* File Upload */
        .upload-actions { display: none; margin-top: 15px; text-align: center; }
        .upload-actions.show { display: block; animation: fadeInUp 0.4s ease; }
        .file-name { font-size: 0.85rem; color: #666; margin-bottom: 10px; }
        
        /* Responsive */
        @media (max-width: 768px) {
            .profile-header { padding: 30px 20px; }
            .avatar-img { width: 120px; height: 120px; }
            .profile-name { font-size: 1.4rem; }
            .card { padding: 25px 20px; }
            .stats-row { gap: 10px; }
            .stat-item { min-width: 80px; padding: 12px 15px; }
        }
        
        /* Floating Labels Animation */
        .floating-label {
            position: relative;
        }
        
        .floating-label input:focus ~ label,
        .floating-label input:not(:placeholder-shown) ~ label {
            top: -10px;
            left: 15px;
            font-size: 0.75rem;
            background: white;
            padding: 0 8px;
            color: var(--primary);
        }
    </style>
</head>
<body>

<!-- Animated Background Shapes -->
<div class="bg-shapes">
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
</div>

<!-- Navbar -->
<nav class="navbar">
    <div class="container" style="display:flex;justify-content:space-between;align-items:center;padding:0 20px;">
        <a href="index.php" class="navbar-brand">
            <i class="fas fa-graduation-cap me-2"></i>বাংলা LMS
        </a>
        <div style="display:flex;gap:10px;">
            <a href="dashboard.php" class="btn btn-outline btn-sm">ড্যাশবোর্ড</a>
            <a href="logout.php" class="btn btn-sm" style="background:#ff4757;color:white;">লগআউট</a>
        </div>
    </div>
</nav>

<div class="container">
    
    <!-- Messages -->
    <?php if($error): ?>
        <div class="alert alert-danger"><i class="fas fa-exclamation-triangle me-2"></i><?= $error ?></div>
    <?php endif; ?>
    <?php if($success): ?>
        <div class="alert alert-success"><i class="fas fa-check-circle me-2"></i><?= $success ?></div>
    <?php endif; ?>
    
    <!-- Profile Header -->
    <div class="profile-header">
        <form method="POST" enctype="multipart/form-data" id="avatarForm">
            <input type="hidden" name="update_avatar" value="1">
            
            <div class="avatar-wrapper">
                <img src="<?= $avatar_url ?>" class="avatar-img" id="avatarPreview"
                     alt="Profile" onclick="document.getElementById('avatarInput').click()"
                     onerror="this.src='https://ui-avatars.com/api/?name=<?= urlencode($user['full_name'] ?? 'U') ?>&background=6C5CE7&color=fff&size=200'">
                <label for="avatarInput" class="avatar-edit-badge">
                    <i class="fas fa-camera"></i>
                </label>
            </div>
            
            <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display:none;" 
                   onchange="handleAvatarSelect(this)">
            
            <div class="upload-actions" id="uploadActions">
                <p class="file-name" id="fileName"></p>
                <button type="submit" class="btn btn-success"><i class="fas fa-check me-1"></i> সংরক্ষণ</button>
                <button type="button" class="btn btn-outline" onclick="cancelAvatar()"><i class="fas fa-times me-1"></i> বাতিল</button>
            </div>
        </form>
        
        <h2 class="profile-name"><?= h($user['full_name']) ?></h2>
        <span class="profile-role <?= ($user['role'] ?? '') == 'admin' ? 'role-admin' : 'role-student' ?>">
            <?= ($user['role'] ?? 'student') == 'admin' ? '👑 অ্যাডমিন' : '🎓 শিক্ষার্থী' ?>
        </span>
        <p class="profile-email"><i class="far fa-envelope me-2"></i><?= h($user['email']) ?></p>
        <?php if(!empty($user['phone'])): ?>
            <p class="profile-email"><i class="fas fa-phone me-2"></i><?= h($user['phone']) ?></p>
        <?php endif; ?>
        
        <!-- Stats -->
        <div class="stats-row">
            <div class="stat-item">
                <div class="stat-value"><?= $course_count ?></div>
                <div class="stat-label">এনরোল্ড কোর্স</div>
            </div>
            <div class="stat-item">
                <div class="stat-value"><?= $lesson_count ?></div>
                <div class="stat-label">সম্পন্ন লেসন</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">0</div>
                <div class="stat-label">সার্টিফিকেট</div>
            </div>
        </div>
    </div>
    
    <!-- Profile Info Card -->
    <div class="card" data-aos="fade-up">
        <div class="card-title">
            <div class="card-icon icon-purple"><i class="fas fa-user-edit"></i></div>
            প্রোফাইল তথ্য
        </div>
        
        <form method="POST">
            <input type="hidden" name="update_profile" value="1">
            
            <div class="row" style="display:flex;gap:20px;flex-wrap:wrap;">
                <div class="form-group" style="flex:1;min-width:250px;">
                    <label class="form-label">পূর্ণ নাম *</label>
                    <input type="text" name="full_name" class="form-control" 
                           value="<?= h($user['full_name']) ?>" required>
                </div>
                
                <div class="form-group" style="flex:1;min-width:250px;">
                    <label class="form-label">ইমেইল</label>
                    <input type="email" class="form-control" value="<?= h($user['email']) ?>" disabled>
                    <small style="color:#888;">ইমেইল পরিবর্তনযোগ্য নয়</small>
                </div>
                
                <div class="form-group" style="flex:1;min-width:250px;">
                    <label class="form-label">ফোন নম্বর</label>
                    <div class="input-group">
                        <span class="input-group-text">📱</span>
                        <input type="text" name="phone" class="form-control" 
                               value="<?= h($user['phone']) ?>" placeholder="01XXXXXXXXX">
                    </div>
                </div>
                
                <div class="form-group" style="width:100%;">
                    <label class="form-label">বায়ো</label>
                    <textarea name="bio" class="form-control" rows="3" 
                              placeholder="আপনার সম্পর্কে কিছু লিখুন... ✍️"><?= h($user['bio']) ?></textarea>
                </div>
            </div>
            
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i> তথ্য আপডেট করুন
            </button>
        </form>
    </div>
    
    <!-- Password Card -->
    <div class="card" data-aos="fade-up" data-aos-delay="100">
        <div class="card-title">
            <div class="card-icon icon-pink"><i class="fas fa-shield-alt"></i></div>
            পাসওয়ার্ড পরিবর্তন
        </div>
        
        <form method="POST">
            <input type="hidden" name="change_password" value="1">
            
            <div class="row" style="display:flex;gap:20px;flex-wrap:wrap;">
                <div class="form-group" style="flex:1;min-width:200px;">
                    <label class="form-label">বর্তমান পাসওয়ার্ড</label>
                    <div class="input-group">
                        <span class="input-group-text">🔑</span>
                        <input type="password" name="current_password" class="form-control" 
                               placeholder="বর্তমান পাসওয়ার্ড" required>
                    </div>
                </div>
                
                <div class="form-group" style="flex:1;min-width:200px;">
                    <label class="form-label">নতুন পাসওয়ার্ড</label>
                    <div class="input-group">
                        <span class="input-group-text">🔒</span>
                        <input type="password" name="new_password" class="form-control" 
                               placeholder="কমপক্ষে ৬ অক্ষর" required minlength="6">
                    </div>
                </div>
                
                <div class="form-group" style="flex:1;min-width:200px;">
                    <label class="form-label">পাসওয়ার্ড নিশ্চিত করুন</label>
                    <div class="input-group">
                        <span class="input-group-text">✅</span>
                        <input type="password" name="confirm_password" class="form-control" 
                               placeholder="আবার লিখুন" required>
                    </div>
                </div>
            </div>
            
            <button type="submit" class="btn btn-primary" style="background:var(--gradient-2);">
                <i class="fas fa-key me-1"></i> পাসওয়ার্ড পরিবর্তন করুন
            </button>
        </form>
    </div>
</div>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 800, easing: 'ease-in-out', once: true });

function handleAvatarSelect(input) {
    if(input.files && input.files[0]) {
        const file = input.files[0];
        const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
        
        if(!allowed.includes(file.type)) {
            alert('শুধুমাত্র JPG, PNG, GIF, WebP ফাইল অনুমোদিত');
            input.value = '';
            return;
        }
        
        if(file.size > 2097152) {
            alert('ফাইল সাইজ 2MB এর বেশি হতে পারবে না');
            input.value = '';
            return;
        }
        
        // Preview
        document.getElementById('avatarPreview').src = URL.createObjectURL(file);
        document.getElementById('fileName').textContent = '📎 ' + file.name + ' (' + (file.size/1024).toFixed(1) + ' KB)';
        document.getElementById('uploadActions').classList.add('show');
    }
}

function cancelAvatar() {
    document.getElementById('avatarInput').value = '';
    document.getElementById('uploadActions').classList.remove('show');
    location.reload();
}
</script>
</body>
</html>