.-.-.-.-.-

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

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

// Handle form submissions
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(isset($_POST['add_course'])) {
        $title = $_POST['title'];
        $description = $_POST['description'];
        $category_id = $_POST['category_id'];
        $instructor_id = $_POST['instructor_id'];
        $old_price = $_POST['old_price'];
        $current_price = $_POST['current_price'];
        $content = $_POST['content'];
        $is_popular = isset($_POST['is_popular']) ? 1 : 0;
        
        // Enhanced image upload handling
        $image = '';
        if(isset($_FILES['image']) && $_FILES['image']['error'] == 0) {
            $target_dir = "../assets/images/courses/";
            
            // Create directory if it doesn't exist
            if (!file_exists($target_dir)) {
                mkdir($target_dir, 0777, true);
            }
            
            $original_name = $_FILES["image"]["name"];
            $file_size = $_FILES["image"]["size"];
            $file_tmp = $_FILES["image"]["tmp_name"];
            $file_type = $_FILES["image"]["type"];
            
            // Get file extension
            $file_ext = strtolower(pathinfo($original_name, PATHINFO_EXTENSION));
            
            // Allowed file types
            $allowed_extensions = array('jpg', 'jpeg', 'png', 'gif', 'webp', 'svg');
            
            // Validate file type
            if (in_array($file_ext, $allowed_extensions)) {
                // Validate file size (10MB max)
                if ($file_size <= 10485760) {
                    // Generate unique filename to prevent conflicts
                    $image = uniqid('course_', true) . '.' . $file_ext;
                    $target_file = $target_dir . $image;
                    
                    // Move uploaded file
                    if (move_uploaded_file($file_tmp, $target_file)) {
                        // Success - image uploaded
                        $_SESSION['success'] = "Course added successfully with image!";
                    } else {
                        $image = '';
                        $_SESSION['error'] = "Error uploading image file.";
                    }
                } else {
                    $_SESSION['error'] = "File size too large. Maximum size is 10MB.";
                }
            } else {
                $_SESSION['error'] = "Invalid file type. Allowed: JPG, JPEG, PNG, GIF, WEBP, SVG";
            }
        } else {
            // No image uploaded or upload error
            if ($_FILES['image']['error'] != 4) { // Error 4 means no file uploaded
                $upload_errors = array(
                    1 => 'The uploaded file exceeds the upload_max_filesize directive in php.ini',
                    2 => 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
                    3 => 'The uploaded file was only partially uploaded',
                    6 => 'Missing a temporary folder',
                    7 => 'Failed to write file to disk.',
                    8 => 'A PHP extension stopped the file upload.'
                );
                $_SESSION['error'] = "Upload error: " . ($upload_errors[$_FILES['image']['error']] ?? 'Unknown error');
            }
        }
        
        // Insert course into database
        $sql = "INSERT INTO courses (title, description, category_id, instructor_id, old_price, current_price, image, content, is_popular) 
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("ssiiddssi", $title, $description, $category_id, $instructor_id, $old_price, $current_price, $image, $content, $is_popular);
        
        if($stmt->execute()) {
            if (!isset($_SESSION['error'])) {
                $_SESSION['success'] = "Course added successfully!";
            }
            header("Location: courses.php");
            exit();
        } else {
            $_SESSION['error'] = "Error adding course to database!";
        }
    }
    
    // Handle update course
    if(isset($_POST['update_course'])) {
        $course_id = $_POST['course_id'];
        $title = $_POST['title'];
        $description = $_POST['description'];
        $category_id = $_POST['category_id'];
        $instructor_id = $_POST['instructor_id'];
        $old_price = $_POST['old_price'];
        $current_price = $_POST['current_price'];
        $content = $_POST['content'];
        $is_popular = isset($_POST['is_popular']) ? 1 : 0;
        
        // Handle image upload if new image is provided
        $image_update = '';
        if(isset($_FILES['image']) && $_FILES['image']['error'] == 0) {
            $target_dir = "../assets/images/courses/";
            
            // Create directory if it doesn't exist
            if (!file_exists($target_dir)) {
                mkdir($target_dir, 0777, true);
            }
            
            $original_name = $_FILES["image"]["name"];
            $file_size = $_FILES["image"]["size"];
            $file_tmp = $_FILES["image"]["tmp_name"];
            $file_type = $_FILES["image"]["type"];
            
            // Get file extension
            $file_ext = strtolower(pathinfo($original_name, PATHINFO_EXTENSION));
            
            // Allowed file types
            $allowed_extensions = array('jpg', 'jpeg', 'png', 'gif', 'webp', 'svg');
            
            // Validate file type
            if (in_array($file_ext, $allowed_extensions)) {
                // Validate file size (10MB max)
                if ($file_size <= 10485760) {
                    // Generate unique filename to prevent conflicts
                    $new_image = uniqid('course_', true) . '.' . $file_ext;
                    $target_file = $target_dir . $new_image;
                    
                    // Move uploaded file
                    if (move_uploaded_file($file_tmp, $target_file)) {
                        // Delete old image if exists
                        $old_image_sql = "SELECT image FROM courses WHERE id = ?";
                        $old_stmt = $conn->prepare($old_image_sql);
                        $old_stmt->bind_param("i", $course_id);
                        $old_stmt->execute();
                        $old_course = $old_stmt->get_result()->fetch_assoc();
                        
                        if ($old_course['image'] && file_exists("../assets/images/courses/" . $old_course['image'])) {
                            unlink("../assets/images/courses/" . $old_course['image']);
                        }
                        
                        $image_update = ", image = ?";
                    } else {
                        $_SESSION['error'] = "Error uploading image file.";
                    }
                } else {
                    $_SESSION['error'] = "File size too large. Maximum size is 10MB.";
                }
            } else {
                $_SESSION['error'] = "Invalid file type. Allowed: JPG, JPEG, PNG, GIF, WEBP, SVG";
            }
        }
        
        // Update course in database
        if ($image_update) {
            $sql = "UPDATE courses SET title = ?, description = ?, category_id = ?, instructor_id = ?, 
                    old_price = ?, current_price = ?, content = ?, is_popular = ?, image = ? 
                    WHERE id = ?";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param("ssiiddsssi", $title, $description, $category_id, $instructor_id, 
                            $old_price, $current_price, $content, $is_popular, $new_image, $course_id);
        } else {
            $sql = "UPDATE courses SET title = ?, description = ?, category_id = ?, instructor_id = ?, 
                    old_price = ?, current_price = ?, content = ?, is_popular = ? 
                    WHERE id = ?";
            $stmt = $conn->prepare($sql);
            $stmt->bind_param("ssiiddssi", $title, $description, $category_id, $instructor_id, 
                            $old_price, $current_price, $content, $is_popular, $course_id);
        }
        
        if($stmt->execute()) {
            $_SESSION['success'] = "Course updated successfully!";
            header("Location: courses.php");
            exit();
        } else {
            $_SESSION['error'] = "Error updating course!";
        }
    }
    
    if(isset($_POST['delete_course'])) {
        $course_id = $_POST['course_id'];
        
        // Get course image to delete it from server
        $course_sql = "SELECT image FROM courses WHERE id = ?";
        $stmt = $conn->prepare($course_sql);
        $stmt->bind_param("i", $course_id);
        $stmt->execute();
        $course = $stmt->get_result()->fetch_assoc();
        
        // Delete image file if exists
        if ($course['image'] && file_exists("../assets/images/courses/" . $course['image'])) {
            unlink("../assets/images/courses/" . $course['image']);
        }
        
        $sql = "DELETE FROM courses WHERE id = ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("i", $course_id);
        
        if($stmt->execute()) {
            $_SESSION['success'] = "Course deleted successfully!";
        } else {
            $_SESSION['error'] = "Error deleting course!";
        }
        
        header("Location: courses.php");
        exit();
    }
}

// Get categories and instructors for dropdowns
$categories = $conn->query("SELECT * FROM categories");
$instructors = $conn->query("SELECT * FROM instructors");
$courses = $conn->query("SELECT c.*, cat.name as category_name, i.name as instructor_name 
                        FROM courses c 
                        LEFT JOIN categories cat ON c.category_id = cat.id 
                        LEFT JOIN instructors i ON c.instructor_id = i.id");

// Get course data for editing if course_id is provided
$edit_course = null;
if(isset($_GET['edit_id'])) {
    $edit_id = $_GET['edit_id'];
    $edit_sql = "SELECT * FROM courses WHERE id = ?";
    $edit_stmt = $conn->prepare($edit_sql);
    $edit_stmt->bind_param("i", $edit_id);
    $edit_stmt->execute();
    $edit_course = $edit_stmt->get_result()->fetch_assoc();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Courses - Admin</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">
    <style>
        .image-preview {
            max-width: 200px;
            max-height: 150px;
            border: 2px dashed #ddd;
            border-radius: 5px;
            padding: 5px;
            margin-top: 10px;
        }
        .image-preview img {
            max-width: 100%;
            max-height: 140px;
            object-fit: contain;
        }
        .file-info {
            font-size: 0.875rem;
            color: #6c757d;
            margin-top: 5px;
        }
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 5px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        .upload-area:hover {
            border-color: #0d6efd;
            background: #e9ecef;
        }
        .upload-area.dragover {
            border-color: #0d6efd;
            background: #e7f1ff;
        }
        .word-picker {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-top: 5px;
            background: white;
            display: none;
        }
        .word-item {
            padding: 5px 10px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }
        .word-item:hover {
            background-color: #f8f9fa;
        }
        .word-item:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <?php include 'sidebar.php'; ?>
            
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Manage Courses</h1>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCourseModal">
                        <i class="bi bi-plus-circle"></i> Add New Course
                    </button>
                </div>

<?php if(isset($_SESSION['success'])): ?>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <?php echo $_SESSION['success']; unset($_SESSION['success']); ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>
                
                <?php if(isset($_SESSION['error'])): ?>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <?php echo $_SESSION['error']; unset($_SESSION['error']); ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>

<div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Image</th>
                                        <th>Title</th>
                                        <th>Category</th>
                                        <th>Instructor</th>
                                        <th>Price</th>
                                        <th>Popular</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php while($course = $courses->fetch_assoc()): 
                                        // Fix image display path
                                        $image_path = '';
                                        if (!empty($course['image'])) {
                                            if (strpos($course['image'], 'http') === 0 || strpos($course['image'], '/') === 0) {
                                                $image_path = $course['image'];
                                            } else {
                                                $image_path = '../assets/images/courses/' . $course['image'];
                                            }
                                        } else {
                                            $image_path = '../assets/images/course-placeholder.jpg';
                                        }
                                    ?>
                                    <tr>
                                        <td><?php echo $course['id']; ?></td>
                                        <td>
                                            <img src="<?php echo $image_path; ?>" 
                                                 alt="<?php echo htmlspecialchars($course['title']); ?>" 
                                                 style="width: 50px; height: 30px; object-fit: cover;"
                                                 onerror="this.src='../assets/images/course-placeholder.jpg'">
                                        </td>
                                        <td><?php echo htmlspecialchars($course['title']); ?></td>
                                        <td><?php echo htmlspecialchars($course['category_name']); ?></td>
                                        <td><?php echo htmlspecialchars($course['instructor_name']); ?></td>
                                        <td>
                                            <?php if($course['old_price'] > 0): ?>
                                            <span class="text-decoration-line-through text-muted">$<?php echo number_format($course['old_price'], 2); ?></span>
                                            <?php endif; ?>
                                            <span class="fw-bold">$<?php echo number_format($course['current_price'], 2); ?></span>
                                        </td>
                                        <td>
                                            <?php if($course['is_popular']): ?>
                                            <span class="badge bg-success">Yes</span>
                                            <?php else: ?>
                                            <span class="badge bg-secondary">No</span>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-outline-primary edit-btn" 
                                                        data-course-id="<?php echo $course['id']; ?>"
                                                        data-bs-toggle="modal" data-bs-target="#editCourseModal">
                                                    <i class="bi bi-pencil"></i> Edit
                                                </button>
                                                <form method="POST" class="d-inline">
                                                    <input type="hidden" name="course_id" value="<?php echo $course['id']; ?>">
                                                    <button type="submit" name="delete_course" class="btn btn-sm btn-outline-danger" 
                                                            onclick="return confirm('Are you sure you want to delete this course?')">
                                                        <i class="bi bi-trash"></i> Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    <?php endwhile; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

<div class="modal fade" id="addCourseModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Course</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" enctype="multipart/form-data" id="courseForm">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Course Title *</label>
                                    <input type="text" class="form-control" name="title" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Course Image</label>
                                    
                                    
                                    <div class="upload-area" onclick="document.getElementById('imageInput').click()">
                                        <i class="bi bi-cloud-upload fs-1 text-muted"></i>
                                        <p class="mb-1">Click to upload or drag and drop</p>
                                        <small class="text-muted">PNG, JPG, GIF, WEBP, SVG (Max 10MB)</small>
                                    </div>
                                    
                                    <input type="file" class="form-control d-none" id="imageInput" name="image" accept="image/*">
                                    
                                    
                                    <div class="file-info" id="fileInfo"></div>
                                    
                                    
                                    <div class="image-preview mt-2" id="imagePreview"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Description *</label>
                            <textarea class="form-control" name="description" rows="3" required></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Category *</label>
                                    <select class="form-select" name="category_id" required>
                                        <option value="">Select Category</option>
                                        <?php 
                                        $categories->data_seek(0); // Reset pointer
                                        while($category = $categories->fetch_assoc()): ?>
                                        <option value="<?php echo $category['id']; ?>"><?php echo htmlspecialchars($category['name']); ?></option>
                                        <?php endwhile; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Instructor *</label>
                                    <select class="form-select" name="instructor_id" required>
                                        <option value="">Select Instructor</option>
                                        <?php 
                                        $instructors->data_seek(0); // Reset pointer
                                        while($instructor = $instructors->fetch_assoc()): ?>
                                        <option value="<?php echo $instructor['id']; ?>"><?php echo htmlspecialchars($instructor['name']); ?></option>
                                        <?php endwhile; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Old Price</label>
                                    <input type="number" class="form-control" name="old_price" step="0.01" min="0" placeholder="0.00">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Current Price *</label>
                                    <input type="number" class="form-control" name="current_price" step="0.01" min="0" required placeholder="0.00">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Course Content *</label>
                            <textarea class="form-control word-picker-target" name="content" rows="6" required placeholder="Enter course content, modules, or learning objectives..."></textarea>
                            <div class="word-picker" id="wordPicker"></div>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_popular" id="is_popular">
                            <label class="form-check-label" for="is_popular">
                                Mark as Popular Course
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" name="add_course" class="btn btn-primary">Add Course</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

<div class="modal fade" id="editCourseModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Course</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" enctype="multipart/form-data" id="editCourseForm">
                    <input type="hidden" name="course_id" id="edit_course_id">
                    <input type="hidden" name="update_course" value="1">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Course Title *</label>
                                    <input type="text" class="form-control" name="title" id="edit_title" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Course Image</label>
                                    
                                    
                                    <div id="currentImageContainer" class="mb-2">
                                        <small class="text-muted">Current Image:</small>
                                        <img id="currentImage" src="" class="image-preview" style="display: none;">
                                    </div>
                                    
                                    
                                    <div class="upload-area" onclick="document.getElementById('edit_imageInput').click()">
                                        <i class="bi bi-cloud-upload fs-1 text-muted"></i>
                                        <p class="mb-1">Click to upload or drag and drop</p>
                                        <small class="text-muted">PNG, JPG, GIF, WEBP, SVG (Max 10MB)</small>
                                    </div>
                                    
                                    <input type="file" class="form-control d-none" id="edit_imageInput" name="image" accept="image/*">
                                    
                                    
                                    <div class="file-info" id="edit_fileInfo"></div>
                                    
                                    
                                    <div class="image-preview mt-2" id="edit_imagePreview"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Description *</label>
                            <textarea class="form-control" name="description" id="edit_description" rows="3" required></textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Category *</label>
                                    <select class="form-select" name="category_id" id="edit_category_id" required>
                                        <option value="">Select Category</option>
                                        <?php 
                                        $categories->data_seek(0); // Reset pointer
                                        while($category = $categories->fetch_assoc()): ?>
                                        <option value="<?php echo $category['id']; ?>"><?php echo htmlspecialchars($category['name']); ?></option>
                                        <?php endwhile; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Instructor *</label>
                                    <select class="form-select" name="instructor_id" id="edit_instructor_id" required>
                                        <option value="">Select Instructor</option>
                                        <?php 
                                        $instructors->data_seek(0); // Reset pointer
                                        while($instructor = $instructors->fetch_assoc()): ?>
                                        <option value="<?php echo $instructor['id']; ?>"><?php echo htmlspecialchars($instructor['name']); ?></option>
                                        <?php endwhile; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Old Price</label>
                                    <input type="number" class="form-control" name="old_price" id="edit_old_price" step="0.01" min="0" placeholder="0.00">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Current Price *</label>
                                    <input type="number" class="form-control" name="current_price" id="edit_current_price" step="0.01" min="0" required placeholder="0.00">
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Course Content *</label>
                            <textarea class="form-control word-picker-target" name="content" id="edit_content" rows="6" required placeholder="Enter course content, modules, or learning objectives..."></textarea>
                            <div class="word-picker" id="edit_wordPicker"></div>
                        </div>
                        
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="is_popular" id="edit_is_popular">
                            <label class="form-check-label" for="edit_is_popular">
                                Mark as Popular Course
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update Course</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

// Initialize word picker for all textareas with class 'word-picker-target'
            function initializeWordPicker(textarea, picker) {
                textarea.addEventListener('input', function(e) {
                    const value = e.target.value;
                    const lastWord = value.split(/\s+/).pop().toLowerCase();
                    
                    if (lastWord.length > 1) {
                        const matches = commonWords.filter(word => 
                            word.toLowerCase().startsWith(lastWord)
                        );
                        
                        if (matches.length > 0) {
                            picker.innerHTML = matches.map(word => 
                                `<div class="word-item" onclick="insertWord('${textarea.id}', '${word}')">${word}</div>`
                            ).join('');
                            picker.style.display = 'block';
                        } else {
                            picker.style.display = 'none';
                        }
                    } else {
                        picker.style.display = 'none';
                    }
                });

// Hide picker when clicking outside
                document.addEventListener('click', function(e) {
                    if (!picker.contains(e.target) && e.target !== textarea) {
                        picker.style.display = 'none';
                    }
                });
            }

// Global function to insert word
            window.insertWord = function(textareaId, word) {
                const textarea = document.getElementById(textareaId);
                const picker = document.getElementById(textareaId === 'content' ? 'wordPicker' : 'edit_wordPicker');
                
                const words = textarea.value.split(/\s+/);
                words.pop(); // Remove the partially typed word
                words.push(word);
                textarea.value = words.join(' ') + ' ';
                
                picker.style.display = 'none';
                textarea.focus();
            };

// Initialize word pickers
            const contentTextarea = document.querySelector('textarea[name="content"]');
            const wordPicker = document.getElementById('wordPicker');
            if (contentTextarea && wordPicker) {
                initializeWordPicker(contentTextarea, wordPicker);
            }

const editContentTextarea = document.getElementById('edit_content');
            const editWordPicker = document.getElementById('edit_wordPicker');
            if (editContentTextarea && editWordPicker) {
                initializeWordPicker(editContentTextarea, editWordPicker);
            }

// File upload functionality for add modal
            const imageInput = document.getElementById('imageInput');
            const imagePreview = document.getElementById('imagePreview');
            const fileInfo = document.getElementById('fileInfo');
            const uploadArea = document.querySelector('.upload-area');

// File upload functionality for edit modal
            const editImageInput = document.getElementById('edit_imageInput');
            const editImagePreview = document.getElementById('edit_imagePreview');
            const editFileInfo = document.getElementById('edit_fileInfo');
            const editUploadArea = document.querySelectorAll('.upload-area')[1];

// Initialize file upload for both modals
            initializeFileUpload(imageInput, imagePreview, fileInfo, uploadArea);
            initializeFileUpload(editImageInput, editImagePreview, editFileInfo, editUploadArea);

function initializeFileUpload(input, preview, info, area) {
                // Click to upload
                area.addEventListener('click', function() {
                    input.click();
                });

// Drag and drop functionality
                area.addEventListener('dragover', function(e) {
                    e.preventDefault();
                    area.classList.add('dragover');
                });

area.addEventListener('dragleave', function() {
                    area.classList.remove('dragover');
                });

area.addEventListener('drop', function(e) {
                    e.preventDefault();
                    area.classList.remove('dragover');
                    
                    if (e.dataTransfer.files.length) {
                        input.files = e.dataTransfer.files;
                        handleFileSelect(input.files[0], preview, info);
                    }
                });

// File input change
                input.addEventListener('change', function(e) {
                    if (this.files && this.files[0]) {
                        handleFileSelect(this.files[0], preview, info);
                    }
                });

function handleFileSelect(file, previewElement, infoElement) {
                    // Validate file type
                    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
                    if (!allowedTypes.includes(file.type)) {
                        alert('Please select a valid image file (JPEG, PNG, GIF, WEBP, SVG)');
                        input.value = '';
                        return;
                    }

// Validate file size (10MB)
                    if (file.size > 10485760) {
                        alert('File size must be less than 10MB');
                        input.value = '';
                        return;
                    }

// Display file info
                    infoElement.innerHTML = `
                        <strong>Selected file:</strong> ${file.name}<br>
                        <strong>Size:</strong> ${(file.size / 1024 / 1024).toFixed(2)} MB<br>
                        <strong>Type:</strong> ${file.type}
                    `;

// Preview image
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewElement.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                        previewElement.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            }

// Edit button functionality
            const editButtons = document.querySelectorAll('.edit-btn');
            editButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const courseId = this.getAttribute('data-course-id');
                    
                    // Fetch course data via AJAX
                    fetch(`get_course.php?id=${courseId}`)
                        .then(response => response.json())
                        .then(course => {
                            // Populate edit form
                            document.getElementById('edit_course_id').value = course.id;
                            document.getElementById('edit_title').value = course.title;
                            document.getElementById('edit_description').value = course.description;
                            document.getElementById('edit_category_id').value = course.category_id;
                            document.getElementById('edit_instructor_id').value = course.instructor_id;
                            document.getElementById('edit_old_price').value = course.old_price;
                            document.getElementById('edit_current_price').value = course.current_price;
                            document.getElementById('edit_content').value = course.content;
                            document.getElementById('edit_is_popular').checked = course.is_popular == 1;
                            
                            // Handle current image
                            const currentImage = document.getElementById('currentImage');
                            const currentImageContainer = document.getElementById('currentImageContainer');
                            if (course.image) {
                                currentImage.src = '../assets/images/courses/' + course.image;
                                currentImage.style.display = 'block';
                                currentImageContainer.style.display = 'block';
                            } else {
                                currentImage.style.display = 'none';
                                currentImageContainer.style.display = 'none';
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching course data:', error);
                            alert('Error loading course data');
                        });
                });
            });

// Form validation
            const courseForm = document.getElementById('courseForm');
            const editCourseForm = document.getElementById('editCourseForm');

[courseForm, editCourseForm].forEach(form => {
                if (form) {
                    form.addEventListener('submit', function(e) {
                        const currentPrice = this.querySelector('input[name="current_price"]');
                        if (currentPrice && parseFloat(currentPrice.value) < 0) {
                            e.preventDefault();
                            alert('Current price cannot be negative');
                            return false;
                        }
                    });
                }
            });
        });

// Format file size
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>

/home/users/unlimited/www/./nigeria.codeskitter.site/admin/courses.php