Notes

Notes - notes.io

<?php
ob_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();

include_once 'db_config.php';

// CHECK FORM SUBMIT
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$conn = get_db_connection();

if (!$conn) {
die("Database connection failed");
}

// Get form data
$certificate_type = $_POST['certificateType'] ?? '';
$directorate = $_POST['department'] ?? '';
$category_id = (int)($_POST['category'] ?? 0);
$course_title = $_POST['title'] ?? '';
$course_mode = $_POST['mode'] ?? '';
$course_fee = (float)($_POST['fees'] ?? 0);
$registration_last_date = $_POST['registration_last_date'] ?? null;
$commencement_period = $_POST['commencement_period'] ?? '';
$duration_type = $_POST['duration_type'] ?? '';
$duration_value = (int)($_POST['duration_value'] ?? 0);
$status = $_POST['status'] ?? '';
$total_attempts = (int)($_POST['total_attempts'] ?? 0);
$course_overview = $_POST['overview'] ?? '';
$modules = $_POST['modulesData'] ?? '';
$category_name = '';

// Upload image
$thumbnail = '';
if (!empty($_FILES['courseThumbnail']['name'])) {
$uploadDir = "uploads/";
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}

$fileName = time() . "_" . basename($_FILES['courseThumbnail']['name']);
$targetFile = $uploadDir . $fileName;

if (move_uploaded_file($_FILES['courseThumbnail']['tmp_name'], $targetFile)) {
$thumbnail = $targetFile;
}
}

// INSERT QUERY
$stmt = $conn->prepare("
INSERT INTO courses
(certificate_type, directorate, category_id, course_title, thumbnail, course_mode, course_fee, registration_last_date, commencement_period, duration_type, duration_value, status, total_attempts, course_overview, category_name, modules)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
");

$stmt->bind_param(
"ssisssdsssisssss",
$certificate_type,
$directorate,
$category_id,
$course_title,
$thumbnail,
$course_mode,
$course_fee,
$registration_last_date,
$commencement_period,
$duration_type,
$duration_value,
$status,
$total_attempts,
$course_overview,
$category_name,
$modules
);

if ($stmt->execute()) {
echo "<script>alert('Course Added Successfully'); window.location.href='e_learning_list.php';</script>";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
$conn->close();
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NPC | Add E-Learning Course</title>


<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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">

<script>
// Desktop hide/show menu (persists state)
function toggleMenu() {
var sidebar = document.getElementById('sidebar');
var main = document.querySelector('.main');
var icon = document.getElementById('menuToggleIcon');
if (!sidebar || !main) return;
sidebar.classList.toggle('collapsed');
main.classList.toggle('collapsed');
var collapsed = sidebar.classList.contains('collapsed');
localStorage.setItem('npc_sidebar_collapsed', collapsed ? '1' : '0');
if (icon) {
icon.classList.toggle('fa-chevron-left', !collapsed);
icon.classList.toggle('fa-chevron-right', collapsed);
}
}

// init from localStorage
document.addEventListener('DOMContentLoaded', function() {
var collapsed = localStorage.getItem('npc_sidebar_collapsed');
if (collapsed === '1') {
var sidebar = document.getElementById('sidebar');
var main = document.querySelector('.main');
var icon = document.getElementById('menuToggleIcon');
if (sidebar && main) {
sidebar.classList.add('collapsed');
main.classList.add('collapsed');
if (icon) {
icon.classList.remove('fa-chevron-left');
icon.classList.add('fa-chevron-right');
}
}
}
var btn = document.getElementById('menuToggle');
if (btn) btn.addEventListener('click', toggleMenu);
});
</script>

<style>
:root {
--primary-color: #6366f1;
--primary-dark: #4f46e5;
--primary-light: #818cf8;
--secondary-color: #ec4899;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--info-color: #06b6d4;
--purple-color: #a855f7;
--dark-bg: #0f172a;
--sidebar-bg: #1e293b;
--card-bg: #ffffff;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-color: #e2e8f0;
--hover-bg: #f8fafc;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}

/* Layout */
.wrapper {
display: flex;
min-height: 100vh;
}

/* Sidebar */
.sidebar {
width: 280px;
background: var(--sidebar-bg);
position: fixed;
top: 0;
bottom: 0;
left: 0;
overflow-y: auto;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
padding: 28px 24px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
position: relative;
overflow: hidden;
}

.sidebar-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}

.logo-container {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}

.logo-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
backdrop-filter: blur(10px);
animation: rotate3d 4s ease-in-out infinite;
}

@keyframes rotate3d {
0%, 100% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
}

.logo-text h3 {
color: #fff;
font-size: 20px;
font-weight: 700;
margin: 0;
letter-spacing: -0.5px;
}

.logo-text p {
color: rgba(255, 255, 255, 0.8);
font-size: 11px;
margin: 0;
font-weight: 500;
}

/* Menu */
.sidebar-menu {
padding: 20px 12px;
}

.menu-section {
margin-bottom: 28px;
}

.menu-section-title {
color: #94a3b8;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 16px 12px;
}

.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}

.sidebar li {
margin-bottom: 4px;
}

.sidebar a {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 16px;
color: #cbd5e1;
text-decoration: none;
font-size: 14px;
font-weight: 500;
border-radius: 10px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}

.sidebar a::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: var(--primary-light);
transform: scaleY(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar a:hover {
background: rgba(99, 102, 241, 0.1);
color: #fff;
transform: translateX(4px);
}

.sidebar a:hover::before {
transform: scaleY(1);
}

.sidebar a.active {
background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
color: #fff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.sidebar a.active::before {
transform: scaleY(1);
}

.menu-icon {
width: 20px;
text-align: center;
font-size: 16px;
}

/* Main Content */
.main {
margin-left: 280px;
width: calc(100% - 280px);
min-height: 100vh;
background: transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Topbar */
.topbar {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
padding: 20px 32px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
animation: slideDown 0.5s ease-out;
position: sticky;
top: 0;
z-index: 999;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.topbar-left h4 {
margin: 0;
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.topbar-left p {
margin: 4px 0 0;
font-size: 13px;
color: var(--text-secondary);
}

.topbar-right {
display: flex;
align-items: center;
gap: 20px;
}

.search-box {
position: relative;
}

.search-box input {
width: 280px;
padding: 10px 40px 10px 40px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 14px;
transition: all 0.3s ease;
background: #f8fafc;

-webkit-user-select: text;
user-select: text;
pointer-events: auto;
}

.search-box input:focus {
outline: none;
border-color: var(--primary-color);
background: #fff;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.search-box i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}

.icon-btn {
width: 42px;
height: 42px;
border-radius: 12px;
background: #f8fafc;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
color: var(--text-secondary);
}

.icon-btn:hover {
background: var(--primary-color);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.icon-btn .badge-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: var(--danger-color);
border-radius: 50%;
border: 2px solid #fff;
}

.admin-profile {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: #f8fafc;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}

.admin-profile:hover {
background: var(--primary-color);
color: #fff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.admin-profile:hover .admin-name,
.admin-profile:hover .admin-role {
color: #fff;
}

.admin-avatar {
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 16px;
}

.admin-info {
line-height: 1.3;
}

.admin-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
transition: color 0.3s ease;
}

.admin-role {
font-size: 11px;
color: var(--text-secondary);
transition: color 0.3s ease;
}

/* Content Area */
.content-area {
padding: 32px;
animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Warning Alert */
.alert-custom {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
border: 2px solid rgba(239, 68, 68, 0.3);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 16px;
animation: slideInRight 0.6s ease-out;
position: relative;
overflow: hidden;
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.alert-custom::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 5px;
background: var(--danger-color);
}

.alert-icon {
width: 48px;
height: 48px;
background: var(--danger-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
flex-shrink: 0;
animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

.alert-content h6 {
color: var(--warning-color);
font-weight: 700;
font-size: 15px;
margin: 0 0 6px 0;
}

.alert-content p {
color: var(--text-primary);
font-size: 14px;
margin: 0;
line-height: 1.5;
}

.alert-content strong {
color: var(--warning-color);
}

/* Action Buttons Row */
.action-buttons-row {
display: flex;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.btn-action-custom {
background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 14px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}

.btn-action-custom:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
color: #fff;
}

/* Main Form Card */
.form-card {
background: var(--card-bg);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.6s ease-out 0.3s backwards;
}

.form-header {
margin-bottom: 36px;
padding-bottom: 24px;
border-bottom: 2px solid var(--border-color);
}

.form-header h2 {
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 8px 0;
}

.form-header h2 .highlight {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.form-header p {
color: var(--text-secondary);
font-size: 14px;
margin: 0;
}

/* Form Groups */
.form-group {
margin-bottom: 28px;
}

.form-label-custom {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}

.form-label-custom i {
color: var(--primary-color);
font-size: 16px;
}

.required-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--danger-color);
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
}

/* Form Controls */
.form-control-custom,
.form-select-custom {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 14px;
transition: all 0.3s ease;
background: #fff;
font-family: 'Inter', sans-serif;
color: var(--text-primary);
}

.form-control-custom:focus,
.form-select-custom:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
background: #fff;
}

.form-control-custom::placeholder {
color: #cbd5e1;
}

/* Select with Icon */
.select-wrapper {
position: relative;
}

.select-wrapper::after {
content: 'f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
pointer-events: none;
}

.select-wrapper select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

/* File Upload */
.file-upload-wrapper {
position: relative;
overflow: hidden;
}

.file-upload-input {
position: absolute;
left: -9999px;
}

.file-upload-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 32px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
border: 2px dashed var(--border-color);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}

.file-upload-label:hover {
border-color: var(--primary-color);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
}

.upload-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28px;
}

.upload-text h6 {
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px 0;
font-size: 15px;
}

.upload-text p {
color: var(--text-secondary);
font-size: 13px;
margin: 0;
}

.file-name {
margin-top: 12px;
padding: 10px 16px;
background: rgba(16, 185, 129, 0.1);
border-radius: 8px;
color: var(--success-color);
font-size: 13px;
font-weight: 600;
display: none;
}

.thumbnail-preview-wrap {
margin-top: 12px;
display: none;
}

.thumbnail-preview-wrap.active {
display: block;
}

.thumbnail-preview-label {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}

.thumbnail-preview-image {
width: 200px;
height: 150px;
object-fit: cover;
border: 2px solid var(--border-color);
border-radius: 10px;
background: #fff;
}

/* Radio Buttons */
.radio-group {
display: flex;
gap: 20px;
margin-top: 10px;
}

.radio-custom {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}

.radio-custom input[type="radio"] {
position: absolute;
opacity: 0;
}

.radio-label {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-weight: 500;
font-size: 14px;
transition: all 0.3s ease;
background: #fff;
}

.radio-custom input[type="radio"]:checked + .radio-label {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: #fff;
border-color: var(--primary-color);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.radio-label::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 50%;
transition: all 0.3s ease;
}

.radio-custom input[type="radio"]:checked + .radio-label::before {
border-color: #fff;
background: #fff;
box-shadow: inset 0 0 0 4px var(--primary-color);
}

/* Input Group */
.input-group-custom {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}

/* Module Section */
.module-section {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px solid var(--border-color);
border-radius: 16px;
padding: 24px;
margin-bottom: 28px;
}

.module-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.module-header h4 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}

.module-counter-wrapper {
margin-bottom: 20px;
}

.module-counter-select {
width: 100%;
height: 50px;
padding: 0 16px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 15px;
font-weight: 500;
background: #fff;
cursor: pointer;
transition: all 0.3s ease;
}

.module-counter-select:hover {
border-color: var(--primary-color);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.module-counter-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.module-inputs-container {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}

.module-inputs-container.active {
max-height: none;
}

.module-input-group {
display: flex;
align-items: center;
gap: 10px;
animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.module-input-label {
min-width: 80px;
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
}

.module-input-field {
flex: 1;
padding: 12px 16px;
border: 2px solid var(--border-color);
border-radius: 10px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
background: #fff;
}

.module-input-field:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
background: #fff;
}

.module-input-field::placeholder {
color: var(--text-secondary);
}

/* Wide module editor layout */
.module-inputs-container .module-input-group {
display: block;
width: 100%;
border: 1px solid var(--border-color) !important;
border-radius: 14px !important;
background: #fff;
padding: 18px !important;
}

.module-inputs-container .module-input-group h5 {
font-size: 18px;
margin-bottom: 12px;
color: var(--text-primary);
}

.module-inputs-container .module-title-input {
width: 100%;
margin-bottom: 14px !important;
}

.module-inputs-container .module-content-list {
display: grid;
gap: 12px;
}

.module-inputs-container .module-content-block {
border: 1px dashed var(--border-color);
border-radius: 12px;
padding: 12px;
background: #f8fafc;
}

.module-inputs-container .module-content-block .mb-2 {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}

.module-inputs-container .module-content-block .content-type-select {
width: 100%;
min-width: 280px;
}

.module-inputs-container .module-content-block .remove-content-btn {
margin-left: auto;
float: none !important;
}

.module-inputs-container .module-content-block .content-input-area textarea,
.module-inputs-container .module-assessment-block textarea {
min-height: 120px;
}

.module-inputs-container .module-content-block .content-input-area,
.module-inputs-container .module-content-block .content-input-area .form-control {
width: 100%;
}

.module-inputs-container .module-content-block .content-input-area .content-text {
min-height: 160px;
}

.module-inputs-container .add-content-btn {
margin-top: 12px;
}

@media (max-width: 768px) {
.module-inputs-container .module-content-block .mb-2 {
flex-direction: column;
align-items: stretch;
}

.module-inputs-container .module-content-block .content-type-select {
width: 100%;
}

.module-inputs-container .module-content-block .remove-content-btn {
margin-left: 0;
width: 100%;
}
}

.module-button-group {
display: flex;
gap: 12px;
margin-top: 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}

.module-button-group.active {
max-height: 100px;
}

.btn-set-modules {
flex: 1;
padding: 14px 24px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
color: #fff;
border: none;
border-radius: 12px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.btn-set-modules:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.btn-set-modules:active {
transform: translateY(0);
}

.btn-clear-modules {
padding: 14px 24px;
background: #f8fafc;
color: var(--text-secondary);
border: 2px solid var(--border-color);
border-radius: 12px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-clear-modules:hover {
border-color: var(--danger-color);
color: var(--danger-color);
background: rgba(239, 68, 68, 0.05);
}

.module-status {
margin-top: 16px;
padding: 12px 16px;
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
color: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
display: none;
animation: slideDown 0.3s ease-out;
}

.module-status.active {
display: block;
}

.module-status.error {
background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
}

/* Content/Description Textarea */
.content-section {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px solid var(--border-color);
border-radius: 16px;
padding: 24px;
margin-bottom: 28px;
}

.content-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.content-header h4 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}

.textarea-wrapper {
position: relative;
}

.content-textarea {
width: 100%;
min-height: 200px;
padding: 16px;
border: 2px solid var(--border-color);
border-radius: 12px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
color: var(--text-primary);
background: #fff;
transition: all 0.3s ease;
resize: vertical;
line-height: 1.6;
}

.content-textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.content-textarea::placeholder {
color: var(--text-secondary);
}

.textarea-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding: 0 4px;
font-size: 12px;
}

.char-count {
color: var(--text-secondary);
font-weight: 500;
}

.char-count.warning {
color: var(--warning-color);
}

.char-count.error {
color: var(--danger-color);
}

.textarea-hint {
color: var(--text-secondary);
font-size: 12px;
font-style: italic;
}

/* Submit Section */
.submit-section {
margin-top: 36px;
padding-top: 28px;
border-top: 2px solid var(--border-color);
display: flex;
gap: 16px;
justify-content: flex-end;
}

.btn-submit {
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
color: #fff;
border: none;
padding: 16px 48px;
border-radius: 14px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
display: inline-flex;
align-items: center;
gap: 10px;
}

.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4);
}

.btn-reset {
background: #f8fafc;
color: var(--text-primary);
border: 2px solid var(--border-color);
padding: 16px 40px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-reset:hover {
background: var(--danger-color);
color: #fff;
border-color: var(--danger-color);
}

/* Loading */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
}

.loader {
width: 60px;
height: 60px;
border: 4px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
.sidebar {
transform: translateX(-100%);
}

.sidebar.active {
transform: translateX(0);
}

.main {
margin-left: 0;
width: 100%;
}
}

@media (max-width: 768px) {
.topbar {
padding: 16px;
}

.search-box {
display: none;
}

.content-area {
padding: 20px;
}

.form-card {
padding: 24px;
}

.action-buttons-row {
flex-direction: column;
}

.btn-action-custom {
width: 100%;
justify-content: center;
}

.input-group-custom {
grid-template-columns: 1fr;
}

.submit-section {
flex-direction: column;
}

.btn-submit,
.btn-reset {
width: 100%;
justify-content: center;
}
}
</style>
</head>

<style>
/* Standardized table styles for admin pages */
table, .custom-table, .table-custom, #progressTable, .table-wrapper table, .table-card table, .table-responsive table {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 12px;
color: var(--text-primary);
border-collapse: collapse;
table-layout: fixed;
}
table th, table td {
padding: 8px 10px !important;
vertical-align: middle !important;
text-align: left !important;
word-wrap: break-word;
}
.table thead th { font-weight: 600; font-size: 11px; color: var(--text-primary); }
.table tbody td { font-size: 11px; color: var(--text-secondary); }
.sno-cell { text-align: center; width: 48px; font-weight: 600; color: var(--text-primary); }
</style>

<style>
/* Standardized table styles for admin pages */
table, .custom-table, .table-custom, #progressTable, .table-wrapper table, .table-card table, .table-responsive table {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 12px;
color: var(--text-primary);
border-collapse: collapse;
table-layout: fixed;
}
table th, table td {
padding: 8px 10px !important;
vertical-align: middle !important;
text-align: left !important;
word-wrap: break-word;
}
.table thead th { font-weight: 600; font-size: 11px; color: var(--text-primary); }
.table tbody td { font-size: 11px; color: var(--text-secondary); }
.sno-cell { text-align: center; width: 48px; font-weight: 600; color: var(--text-primary); }
</style>

<style>
.sidebar.collapsed {
transform: translateX(-100%);
width: 0;
visibility: hidden;
}
.main.collapsed {
margin-left: 0;
width: 100%;
}
</style>

<body>


<div class="loading-overlay" id="loadingOverlay">
<div class="loader"></div>
</div>

<div class="wrapper">


<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="logo-container">
<div class="logo-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="logo-text">
<h3>NPC Admin</h3>
<p>E-Learning Portal</p>
</div>
</div>
</div>

<div class="sidebar-menu">
<div class="menu-section">
<div class="menu-section-title">Main Menu</div>
<ul>
<li>
<a href="npc_e_learning_home_single.php">
<span class="menu-icon"><i class="fas fa-home"></i></span>
<span>Home Page</span>
</a>
</li>
<li>
<a href="categories_list.php">
<span class="menu-icon"><i class="fas fa-folder-open"></i></span>
<span>Categories List</span>
</a>
</li>
<li>
<a href="e_learning_list.php">
<span class="menu-icon"><i class="fas fa-book"></i></span>
<span>E-Learning List</span>
</a>
</li>
<li>
<a href="add_e_learning.php" class="active">
<span class="menu-icon"><i class="fas fa-plus-circle"></i></span>
<span>Add E-Learning</span>
</a>
</li>
</ul>
</div>

<div class="menu-section">
<div class="menu-section-title">Participants</div>
<ul>
<li>
<a href="e_learning_participant.php">
<span class="menu-icon"><i class="fas fa-users"></i></span>
<span>E-Learning Participant</span>
</a>
</li>

<li>
<a href="re_attempt_for_participant.php">
<span class="menu-icon"><i class="fas fa-redo"></i></span>
<span>Re-Attempt Participant</span>
</a>
</li>
</ul>
</div>

<div class="menu-section">
<div class="menu-section-title">Reports & Certificates</div>
<ul>
<li>
<a href="generate_certificate.php">
<span class="menu-icon"><i class="fas fa-certificate"></i></span>
<span>Generate Certificate</span>
</a>
</li>
<li>
<a href="paid_e_learning_progress_report.php">
<span class="menu-icon"><i class="fas fa-chart-line"></i></span>
<span>Paid Progress Report</span>
</a>
</li>
<li>
<a href="free_e_learning_progress_report.php">
<span class="menu-icon"><i class="fas fa-chart-bar"></i></span>
<span>Free Progress Report</span>
</a>
</li>
<li>
<a href="desc_ass_evaluation.php">
<span class="menu-icon"><i class="fas fa-tasks"></i></span>
<span>Assessment Evaluation</span>
</a>
</li>
</ul>
</div>
</div>
</aside>


<div class="main">


<div class="topbar">
<div class="topbar-left">
<button id="menuToggle" class="icon-btn" aria-label="Collapse menu" title="Hide/Show menu"><i id="menuToggleIcon" class="fas fa-chevron-left"></i></button>
<h4><i class="fas fa-plus-circle"></i> Add New E-Learning Course</h4>
<p>Create and configure a new learning program</p>
</div>

<div class="topbar-right">
<button class="icon-btn" data-preserve="true" style="visibility:hidden;">
<i class="fas fa-bell"></i>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom" for="courseThumbnail">
<i class="fas fa-image"></i> Course Thumbnail
</label>
<div class="file-upload-wrapper">
<input type="file" id="courseThumbnail" name="courseThumbnail" class="file-upload-input" accept="image/jpeg,image/png">
<label for="courseThumbnail" class="file-upload-label">
<span class="upload-icon"><i class="fas fa-upload"></i></span>
<span class="upload-text">
<h6>Upload Thumbnail Image</h6>
<p>Auto-resized to <strong>400x300px</strong> (JPG/PNG, max 8MB upload)</p>
</span>
</label>
<div id="thumbnailFileName" class="file-name"></div>
</div>
</div>
</div>
<span class="badge-dot"></span>
</button>
<button class="icon-btn" data-preserve="true" style="visibility:hidden;">
<i class="fas fa-cog"></i>
</button>

<div class="admin-profile">
<div class="admin-avatar">A</div>
<div class="admin-info">
<div class="admin-name">Admin</div>
<div class="admin-role">Administrator</div>
</div>
</div>
</div>
</div>


<div class="content-area">


<div class="alert-custom">
<div class="alert-icon">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="alert-content">
<h6><i class="fas fa-info-circle"></i> File Upload Guidelines</h6>
<p>
<strong>Max Size:</strong> 10MB per file |
<strong>Allowed Types:</strong> XLS, PDF, CSV, DOCX, PPT |
<strong>Note:</strong> Please ensure all files are virus-free before uploading
</p>
</div>
</div>


<div class="action-buttons-row">
<a href="#" class="btn-action-custom">
<i class="fas fa-edit"></i>
Edit E-Learning
</a>
</div>


<div class="form-card">
<div class="form-header">
<h2>Add New <span class="highlight">E-Learning Course</span></h2>
<p>Fill in the details below to create a new e-learning program</p>
</div>

<form id="elearningForm" method="POST" enctype="multipart/form-data">

<div class="row">


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-certificate"></i>
Certificate Type
</label>
<div class="select-wrapper">
<select class="form-select-custom" name="certificateType">
<option value="">-- Select Certificate Type --</option>
<option value="completion">Certificate of Completion</option>
<option value="achievement">Certificate of Achievement</option>
<option value="participation">Certificate of Participation</option>
<option value="excellence">Certificate of Excellence</option>
</select>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-building"></i>
Group / Regional Directorate
</label>
<div class="select-wrapper">
<select class="form-select-custom" name="department">
<option value="">-- Select Department --</option>
<option value="north">North Regional Directorate</option>
<option value="south">South Regional Directorate</option>
<option value="east">East Regional Directorate</option>
<option value="west">West Regional Directorate</option>
<option value="central">Central Office</option>
</select>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-tags"></i>
Course Category
</label>
<div class="select-wrapper">
<select class="form-select-custom" name="category" required>
<option value="">-- Select Category --</option>
<?php if (!empty($active_categories)): ?>
<?php foreach ($active_categories as $category): ?>
<?php
$category_name = trim((string)($category['name'] ?? ''));
if ($category_name === '') {
continue;
}
$category_slug = trim((string)($category['slug'] ?? ''));
if ($category_slug === '') {
$category_slug = strtolower($category_name);
$category_slug = preg_replace('/[^a-z0-9]+/', '-', $category_slug);
$category_slug = trim((string)$category_slug, '-');
}
?>
<option value="<?php echo isset($category['id']) ? (int)$category['id'] : htmlspecialchars($category_slug); ?>"><?php echo htmlspecialchars($category_name); ?></option>
<?php endforeach; ?>
<?php else: ?> `
<option value="1">Environment Management</option>
<option value="2">Economics And Finance</option>
<option value="3">Productivity And Quality Management</option>
<option value="4">Operations Management</option>
<option value="5">Energy Management</option>
<option value="6">Business Management</option>
<?php endif; ?>
</select>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-heading"></i>
E-Learning Course Title
</label>
<input
type="text"
class="form-control-custom"
name="title"
placeholder="Enter course title..."
required
>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom" for="courseThumbnail">
<i class="fas fa-image"></i> Course Thumbnail
</label>
<div class="file-upload-wrapper">
<input type="file" id="courseThumbnail" name="courseThumbnail" class="file-upload-input" accept="image/jpeg,image/png">
<label for="courseThumbnail" class="file-upload-label">
<span class="upload-icon"><i class="fas fa-upload"></i></span>
<span class="upload-text">
<h6>Upload Thumbnail Image</h6>
<p>Auto-resized to <strong>400x300px</strong> (JPG/PNG, max 8MB upload)</p>
</span>
</label>
<div id="thumbnailFileName" class="file-name"></div>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-money-bill-wave"></i>
E-Learning Mode
</label>
<div class="radio-group">
<label class="radio-custom">
<input type="radio" name="mode" value="paid" checked required>
<span class="radio-label">
<i class="fas fa-dollar-sign"></i>
Paid
</span>
</label>
<label class="radio-custom">
<input type="radio" name="mode" value="free" required>
<span class="radio-label">
<i class="fas fa-gift"></i>
Free
</span>
</label>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-rupee-sign"></i>
E-Learning Course Fee
</label>
<input
type="number"
class="form-control-custom"
name="fees"
placeholder="Enter course fee..."
min="0"
>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-calendar-alt"></i>
Registration Last Date
</label>
<input
type="date"
class="form-control-custom"
name="registration_last_date"
>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-clock"></i>
Commencement Week / Month
</label>
<input
type="text"
class="form-control-custom"
name="commencement_period"
placeholder="e.g., First week of March 2024"
>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-hourglass-half"></i>
Course Duration
</label>
<div class="input-group-custom">
<div class="select-wrapper">
<select class="form-select-custom" name="duration_type">
<option value="">Type</option>
<option value="days">Days</option>
<option value="weeks">Weeks</option>
<option value="months">Months</option>
</select>
</div>
<input
type="number"
class="form-control-custom"
name="duration_value"
placeholder="Duration..."
min="1"
>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-toggle-on"></i>
Status
</label>
<div class="select-wrapper">
<select class="form-select-custom" name="status" required>
<option value="">-- Select Status --</option>
<option value="active" selected>Active</option>
<option value="inactive">Inactive</option>
<option value="draft">Draft</option>
</select>
</div>
</div>
</div>


<div class="col-md-6">
<div class="form-group">
<label class="form-label-custom">
<i class="fas fa-redo-alt"></i>
Total Attempt
</label>
<input
type="number"
class="form-control-custom"
name="total_attempts"
placeholder="Number of attempts allowed..."
min="1"
value="3"
>
</div>
</div>


<div class="col-12">
<div class="module-section">
<div class="module-header">
<i class="fas fa-layer-group" style="color: var(--primary-color); font-size: 18px;"></i>
<h4>Course Modules</h4>
</div>

<div class="module-counter-wrapper">
<label class="form-label-custom" style="margin-bottom: 10px;">
<i class="fas fa-list-ol"></i>
Select Number of Modules (1-20)
</label>
<select id="moduleCounter" class="module-counter-select">
<option value="">-- Select Number --</option>
<option value="1">1 Module</option>
<option value="2">2 Modules</option>
<option value="3">3 Modules</option>
<option value="4">4 Modules</option>
<option value="5">5 Modules</option>
<option value="6">6 Modules</option>
<option value="7">7 Modules</option>
<option value="8">8 Modules</option>
<option value="9">9 Modules</option>
<option value="10">10 Modules</option>
<option value="11">11 Modules</option>
<option value="12">12 Modules</option>
<option value="13">13 Modules</option>
<option value="14">14 Modules</option>
<option value="15">15 Modules</option>
<option value="16">16 Modules</option>
<option value="17">17 Modules</option>
<option value="18">18 Modules</option>
<option value="19">19 Modules</option>
<option value="20">20 Modules</option>
</select>
</div>

<div class="module-inputs-container" id="moduleInputsContainer">

</div>

<div class="module-button-group" id="moduleButtonGroup">
<button type="button" class="btn-set-modules" id="setModulesBtn">
<i class="fas fa-check-circle"></i>
Set All Modules
</button>
<button type="button" class="btn-clear-modules" id="clearModulesBtn">
<i class="fas fa-redo"></i>
Reset
</button>
</div>

<div class="module-status" id="moduleStatus"></div>
<input type="hidden" id="modulesData" name="modulesData" value="">
</div>
</div>


<div class="col-12">
<div class="content-section">
<div class="content-header">
<i class="fas fa-file-alt" style="color: var(--primary-color); font-size: 18px;"></i>
<h4>Course Overview</h4>
</div>

<div class="textarea-wrapper">
<textarea
class="content-textarea"
id="courseOverview"
name="overview"
placeholder="Write a comprehensive course overview including learning objectives, target audience, key topics covered, and any prerequisites. This overview will help participants understand what they'll learn..."
maxlength="5000"
></textarea>
<div class="textarea-footer">
<span class="textarea-hint">Max 5000 characters</span>
<span class="char-count"><span id="charCount">0</span>/5000</span>
</div>
</div>
</div>
</div>

</div>


<div class="submit-section">
<button type="reset" class="btn-reset">
<i class="fas fa-times"></i>
Reset
</button>
<button type="submit" class="btn-submit">
<i class="fas fa-plus-circle"></i>
Add E-Learning Course
</button>
</div>

</form>
</div>

</div>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Hide loading overlay
window.addEventListener('load', function() {
setTimeout(function() {
var overlay = document.getElementById('loadingOverlay');
if (overlay) overlay.classList.add('hidden');
}, 500);
});

// Fallback: Always hide loader after 5 seconds (in case of JS errors)
setTimeout(function() {
var overlay = document.getElementById('loadingOverlay');
if (overlay) overlay.classList.add('hidden');
}, 5000);

// --- Dynamic Module Content Builder ---
const moduleCounter = document.getElementById('moduleCounter');
const moduleInputsContainer = document.getElementById('moduleInputsContainer');
const moduleButtonGroup = document.getElementById('moduleButtonGroup');
const setModulesBtn = document.getElementById('setModulesBtn');
const moduleStatus = document.getElementById('moduleStatus');
const modulesDataInput = document.getElementById('modulesData');

function createContentBlock(moduleIdx, contentIdx) {
return `
<div class="module-content-block" data-content-idx="${contentIdx}">
<div class="mb-2">
<select class="form-select form-select-sm content-type-select">
<option value="text">Text</option>
<option value="image">Image</option>
<option value="video">Video</option>
<option value="pdf">PDF</option>
</select>
<button type="button" class="btn btn-danger btn-sm remove-content-btn" style="float:right;">Remove</button>
</div>
<div class="content-input-area"></div>
</div>
`;
}

function createAssessmentBlock(moduleIdx) {
const questionOptions = Array.from({ length: 20 }, (_, i) => {
const n = i + 1;
return `<option value="${n}">${n}</option>`;
}).join('');

return `
<div class="module-assessment-block mt-3 p-2 border rounded">
<label><strong>Assessment (optional)</strong></label>
<div class="mt-2">
<label class="form-label fw-semibold">Enter No. of Questions</label>
<select class="form-select assessment-count-select">
<option value="">-- Select Number --</option>
${questionOptions}
</select>
</div>
<div class="assessment-questions-list mt-3"></div>
</div>
`;
}

function renderAssessmentQuestions(assessmentBlock, count) {
const questionsList = assessmentBlock.querySelector('.assessment-questions-list');
const questionCount = parseInt(count, 10) || 0;

if (questionCount <= 0) {
questionsList.innerHTML = '';
return;
}

let html = '';
for (let i = 1; i <= questionCount; i++) {
const optionChoices = Array.from({ length: 10 }, (_, idx) => {
const n = idx + 1;
return `<option value="${n}">${n}</option>`;
}).join('');

html += `
<div class="mb-3 p-2 border rounded assessment-question-block">
<label class="form-label mb-1"><strong>Question ${i}</strong></label>
<textarea class="form-control assessment-question-input" rows="2" placeholder="Enter question ${i}..."></textarea>
<div class="mt-2">
<label class="form-label fw-semibold">Enter No. of Options</label>
<select class="form-select assessment-option-count-select">
<option value="">-- Select Number --</option>
${optionChoices}
</select>
</div>
<div class="assessment-options-list mt-2"></div>
</div>
`;
}
questionsList.innerHTML = html;
}

function renderQuestionOptions(questionBlock, count) {
const optionsList = questionBlock.querySelector('.assessment-options-list');
const optionCount = parseInt(count, 10) || 0;

if (optionCount <= 0) {
optionsList.innerHTML = '';
return;
}

let html = '';
for (let i = 1; i <= optionCount; i++) {
html += `
<div class="row g-2 mb-2 align-items-center assessment-option-row">
<div class="col-md-3 col-12">
<label class="form-label mb-1">Option No.</label>
<input type="text" class="form-control assessment-option-no" value="${i}" readonly>
</div>
<div class="col-md-9 col-12">
<label class="form-label mb-1">Option Name</label>
<input type="text" class="form-control assessment-option-name" placeholder="Enter option ${i} name">
</div>
</div>
`;
}
optionsList.innerHTML = html;
}

function renderModuleInputs(moduleCount) {
moduleInputsContainer.innerHTML = '';
for (let i = 0; i < moduleCount; i++) {
const moduleDiv = document.createElement('div');
moduleDiv.className = 'module-input-group mb-4 p-3 border rounded';
moduleDiv.innerHTML = `
<h5>Module ${i+1}</h5>
<input type="text" class="form-control mb-2 module-title-input" placeholder="Module ${i+1} Title" />
<div class="module-content-list"></div>
<button type="button" class="btn btn-primary btn-sm add-content-btn mb-2">Add Content</button>
<div class="module-assessment-toggle mb-2">
<label><input type="checkbox" class="add-assessment-checkbox" /> Add Assessment</label>
</div>
<div class="module-assessment-area"></div>
`;
moduleInputsContainer.appendChild(moduleDiv);
}
moduleInputsContainer.classList.add('active');
moduleButtonGroup.classList.add('active');
}

// Handle module count change
moduleCounter.addEventListener('change', function() {
const moduleCount = parseInt(this.value) || 0;
if (moduleCount > 0) {
renderModuleInputs(moduleCount);
} else {
moduleInputsContainer.innerHTML = '';
moduleInputsContainer.classList.remove('active');
moduleButtonGroup.classList.remove('active');
}
});

// Delegate content/assessment actions
moduleInputsContainer.addEventListener('click', function(e) {
if (e.target.classList.contains('add-content-btn')) {
const moduleDiv = e.target.closest('.module-input-group');
const contentList = moduleDiv.querySelector('.module-content-list');
const idx = contentList.children.length;
const block = document.createElement('div');
block.innerHTML = createContentBlock(0, idx); // moduleIdx not used in block
contentList.appendChild(block.firstElementChild);
}
if (e.target.classList.contains('remove-content-btn')) {
e.target.closest('.module-content-block').remove();
}
});

// Handle content type change (show correct input)
moduleInputsContainer.addEventListener('change', function(e) {
if (e.target.classList.contains('content-type-select')) {
const area = e.target.closest('.module-content-block').querySelector('.content-input-area');
const type = e.target.value;
let html = '';
if (type === 'text') {
html = '<textarea class="form-control content-text" rows="2" placeholder="Enter text..."></textarea>';
} else if (type === 'image') {
html = '<input type="file" accept="image/*" class="form-control content-image" />';
} else if (type === 'video') {
html = '<input type="file" accept="video/*" class="form-control content-video" />';
} else if (type === 'pdf') {
html = '<input type="file" accept="application/pdf" class="form-control content-pdf" />';
}
area.innerHTML = html;
}
});

// Assessment toggle
moduleInputsContainer.addEventListener('change', function(e) {
if (e.target.classList.contains('add-assessment-checkbox')) {
const area = e.target.closest('.module-input-group').querySelector('.module-assessment-area');
if (e.target.checked) {
area.innerHTML = createAssessmentBlock(0);
} else {
area.innerHTML = '';
}
}

if (e.target.classList.contains('assessment-count-select')) {
const assessmentBlock = e.target.closest('.module-assessment-block');
renderAssessmentQuestions(assessmentBlock, e.target.value);
}

if (e.target.classList.contains('assessment-option-count-select')) {
const questionBlock = e.target.closest('.assessment-question-block');
renderQuestionOptions(questionBlock, e.target.value);
}
});

// Set modules button: collect all module data
setModulesBtn.addEventListener('click', function(e) {
e.preventDefault();
const modules = [];
const moduleDivs = moduleInputsContainer.querySelectorAll('.module-input-group');
moduleDivs.forEach((mod, i) => {
const title = mod.querySelector('.module-title-input').value.trim();
const contents = [];
mod.querySelectorAll('.module-content-block').forEach(block => {
const type = block.querySelector('.content-type-select').value;
let value = '';
if (type === 'text') {
value = block.querySelector('.content-text').value;
} else if (type === 'image' || type === 'video' || type === 'pdf') {
const fileInput = block.querySelector('input[type="file"]');
value = fileInput && fileInput.files[0] ? fileInput.files[0].name : '';
}
contents.push({type, value});
});
let assessment = {
question_count: 0,
questions: []
};
const assessBlock = mod.querySelector('.module-assessment-block');
if (assessBlock) {
const countValue = assessBlock.querySelector('.assessment-count-select')?.value || '0';
const questions = Array.from(assessBlock.querySelectorAll('.assessment-question-block'))
.map((questionBlock) => {
const questionText = questionBlock.querySelector('.assessment-question-input')?.value.trim() || '';
const options = Array.from(questionBlock.querySelectorAll('.assessment-option-row'))
.map((optionRow) => {
const optionNo = optionRow.querySelector('.assessment-option-no')?.value || '';
const optionName = optionRow.querySelector('.assessment-option-name')?.value.trim() || '';
return {
option_no: optionNo,
option_name: optionName
};
})
.filter(option => option.option_name !== '');
return {
question: questionText,
options: options
};
})
.filter(item => item.question !== '' || item.options.length > 0);
assessment = {
question_count: parseInt(countValue, 10) || 0,
questions: questions
};
}
modules.push({title, contents, assessment});
});
modulesDataInput.value = JSON.stringify(modules);
moduleStatus.classList.remove('error');
moduleStatus.classList.add('active');
moduleStatus.innerHTML = `<i class="fas fa-check-circle"></i> Modules set successfully!`;
});

// Clear modules button
clearModulesBtn.addEventListener('click', function(e) {
e.preventDefault();
moduleCounter.value = '';
moduleInputsContainer.innerHTML = '';
moduleInputsContainer.classList.remove('active');
moduleButtonGroup.classList.remove('active');
moduleStatus.classList.remove('active', 'error');
modulesDataInput.value = '';
});

// Thumbnail upload + auto-resize (targets input inside the course form only)
const elearningFormEl = document.getElementById('elearningForm');
const thumbnailInput = elearningFormEl ? elearningFormEl.querySelector('input[name="courseThumbnail"]') : null;
const thumbnailFileNameDisplay = elearningFormEl ? elearningFormEl.querySelector('#thumbnailFileName') : null;
let resizedThumbnailFile = null;

if (elearningFormEl && thumbnailInput) {
let previewWrap = elearningFormEl.querySelector('#thumbnailPreviewWrap');
if (!previewWrap) {
previewWrap = document.createElement('div');
previewWrap.id = 'thumbnailPreviewWrap';
previewWrap.className = 'thumbnail-preview-wrap';
previewWrap.innerHTML = `
<div class="thumbnail-preview-label">Resized Preview (400 x 300)</div>
<img id="thumbnailPreviewImage" class="thumbnail-preview-image" alt="Thumbnail preview">
`;
if (thumbnailFileNameDisplay && thumbnailFileNameDisplay.parentNode) {
thumbnailFileNameDisplay.parentNode.appendChild(previewWrap);
}
}

const previewImage = elearningFormEl.querySelector('#thumbnailPreviewImage');

function resizeImageToCover(file, targetWidth, targetHeight, quality) {
return new Promise((resolve, reject) => {
const sourceUrl = URL.createObjectURL(file);
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
const ctx = canvas.getContext('2d');
if (!ctx) {
URL.revokeObjectURL(sourceUrl);
reject(new Error('Canvas is not supported in this browser.'));
return;
}

const scale = Math.max(targetWidth / img.width, targetHeight / img.height);
const drawWidth = img.width * scale;
const drawHeight = img.height * scale;
const dx = (targetWidth - drawWidth) / 2;
const dy = (targetHeight - drawHeight) / 2;

ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(img, dx, dy, drawWidth, drawHeight);

canvas.toBlob(function(blob) {
URL.revokeObjectURL(sourceUrl);
if (!blob) {
reject(new Error('Failed to create resized thumbnail.'));
return;
}
resolve(blob);
}, 'image/jpeg', quality);
};
img.onerror = function() {
URL.revokeObjectURL(sourceUrl);
reject(new Error('Invalid image file.'));
};
img.src = sourceUrl;
});
}

thumbnailInput.addEventListener('change', async function(e) {
const file = e.target.files[0];
if (!file) {
resizedThumbnailFile = null;
if (thumbnailFileNameDisplay) thumbnailFileNameDisplay.style.display = 'none';
previewWrap.classList.remove('active');
return;
}

if (!/^image/(jpeg|png)$/i.test(file.type)) {
alert('Please upload JPG or PNG image only.');
this.value = '';
resizedThumbnailFile = null;
if (thumbnailFileNameDisplay) thumbnailFileNameDisplay.style.display = 'none';
previewWrap.classList.remove('active');
return;
}

if (file.size > 8 * 1024 * 1024) {
alert('Thumbnail image size exceeds 8MB limit.');
this.value = '';
resizedThumbnailFile = null;
if (thumbnailFileNameDisplay) thumbnailFileNameDisplay.style.display = 'none';
previewWrap.classList.remove('active');
return;
}

try {
const resizedBlob = await resizeImageToCover(file, 400, 300, 0.9);
const fileBaseName = (file.name || 'thumbnail').replace(/.[^.]+$/, '');
resizedThumbnailFile = new File([resizedBlob], `${fileBaseName}_400x300.jpg`, { type: 'image/jpeg' });

const sizeMb = (resizedThumbnailFile.size / (1024 * 1024)).toFixed(2);
if (thumbnailFileNameDisplay) {
thumbnailFileNameDisplay.textContent = `Resized: ${resizedThumbnailFile.name} (${sizeMb}MB)`;
thumbnailFileNameDisplay.style.display = 'block';
thumbnailFileNameDisplay.style.animation = 'fadeInUp 0.3s ease-out';
}

if (previewImage) {
previewImage.src = URL.createObjectURL(resizedThumbnailFile);
}
previewWrap.classList.add('active');
} catch (error) {
alert(error.message || 'Unable to process thumbnail image.');
this.value = '';
resizedThumbnailFile = null;
if (thumbnailFileNameDisplay) thumbnailFileNameDisplay.style.display = 'none';
previewWrap.classList.remove('active');
}
});
}
// File upload handler
document.getElementById('courseFile').addEventListener('change', function(e) {
const file = e.target.files[0];
const fileNameDisplay = document.getElementById('fileName');

if (file) {
const fileSize = (file.size / (1024 * 1024)).toFixed(2);

if (file.size > 10 * 1024 * 1024) {
alert('File size exceeds 10MB limit!');
this.value = '';
fileNameDisplay.style.display = 'none';
return;
}

fileNameDisplay.textContent = `✓ ${file.name} (${fileSize}MB)`;
fileNameDisplay.style.display = 'block';

// Animate display
fileNameDisplay.style.animation = 'fadeInUp 0.3s ease-out';
}
});

// Module Handler
let moduleCount = 0;

const clearModulesBtn = document.getElementById('clearModulesBtn');
t
moduleCounter.addEventListener('change', function() {
moduleCount = parseInt(this.value) || 0;
moduleInputsContainer.innerHTML = '';
moduleInputsContainer.classList.remove('active');
moduleButtonGroup.classList.remove('active');
moduleStatus.classList.remove('active', 'error');

if (moduleCount > 0) {
// Create module input fields
for (let i = 1; i <= moduleCount; i++) {
const moduleInputGroup = document.createElement('div');
moduleInputGroup.className = 'module-input-group';
moduleInputGroup.style.animationDelay = (i * 0.05) + 's';

moduleInputGroup.innerHTML = `
<span class="module-input-label">Module ${i}</span>
<input
type="text"
class="module-input-field"
data-module-id="${i}"
placeholder="Enter module ${i} name..."
autocomplete="off"
>
`;
moduleInputsContainer.appendChild(moduleInputGroup);
}

// Show inputs with animation
moduleInputsContainer.classList.add('active');

// Add event listeners to all inputs for automatic SET button reveal
const inputs = moduleInputsContainer.querySelectorAll('.module-input-field');
inputs.forEach((input, index) => {
input.addEventListener('input', function() {
// Check if the last input has content
if (index === inputs.length - 1 && this.value.trim().length > 0) {
moduleButtonGroup.classList.add('active');
} else if (index === inputs.length - 1 && this.value.trim().length === 0) {
moduleButtonGroup.classList.remove('active');
}
});
});
}
});

// Set Modules Button
setModulesBtn.addEventListener('click', function(e) {
e.preventDefault();

const inputs = moduleInputsContainer.querySelectorAll('.module-input-field');
const moduleNames = [];
let isValid = true;

inputs.forEach((input, index) => {
const value = input.value.trim();
if (value.length === 0) {
input.style.borderColor = 'var(--danger-color)';
isValid = false;
} else {
input.style.borderColor = 'var(--border-color)';
moduleNames.push(value);
}
});

if (!isValid || moduleNames.length === 0) {
moduleStatus.classList.add('active', 'error');
moduleStatus.innerHTML = `<i class="fas fa-exclamation-circle"></i> Please fill in all module names`;
moduleStatus.style.animationDelay = '0s';
return;
}

// Store modules data in hidden input
modulesDataInput.value = JSON.stringify(moduleNames);

// Show success message
moduleStatus.classList.remove('error');
moduleStatus.classList.add('active');
moduleStatus.innerHTML = `<i class="fas fa-check-circle"></i> ${moduleCount} modules set successfully! ${moduleNames.join(' • ')}`;

// Disable inputs after setting
inputs.forEach(input => {
input.disabled = true;
input.style.opacity = '0.6';
input.style.cursor = 'not-allowed';
});

moduleCounter.disabled = true;
moduleCounter.style.opacity = '0.6';
moduleCounter.style.cursor = 'not-allowed';

setModulesBtn.disabled = true;
setModulesBtn.style.opacity = '0.6';
});

// Clear Modules Button
clearModulesBtn.addEventListener('click', function(e) {
e.preventDefault();

moduleCounter.value = '';
moduleCount = 0;
moduleInputsContainer.innerHTML = '';
moduleInputsContainer.classList.remove('active');
moduleButtonGroup.classList.remove('active');
moduleStatus.classList.remove('active', 'error');
modulesDataInput.value = '';

const inputs = moduleInputsContainer.querySelectorAll('.module-input-field');
inputs.forEach(input => {
input.disabled = false;
input.style.opacity = '1';
input.style.cursor = 'text';
});

moduleCounter.disabled = false;
moduleCounter.style.opacity = '1';
moduleCounter.style.cursor = 'pointer';

setModulesBtn.disabled = false;
setModulesBtn.style.opacity = '1';
});

// Content Textarea Character Counter
const courseOverview = document.getElementById('courseOverview');
const charCount = document.getElementById('charCount');
const charCountDisplay = document.querySelector('.char-count');

courseOverview.addEventListener('input', function() {
const count = this.value.length;
charCount.textContent = count;
// Update styling based on character count
if (count === 0) {
charCountDisplay.className = 'char-count';
} else if (count > 4500) {
charCountDisplay.className = 'char-count error';
} else if (count > 4000) {
charCountDisplay.className = 'char-count warning';
} else {
charCountDisplay.className = 'char-count';
}
});

// Update character count on page load
window.addEventListener('load', function() {
const count = courseOverview.value.length;
charCount.textContent = count;
});

// Form submission (supports both create and edit modes)
document.getElementById('elearningForm').addEventListener('submit', function(e) {

// Validate required fields before submission
const title = document.querySelector('input[name="title"]');
const category = document.querySelector('select[name="category"]');
const status = document.querySelector('select[name="status"]');

if (!title || !title.value.trim()) {
alert('Please enter the course title');
title?.focus();
return;
}

if (!category || !category.value.trim()) {
alert('Please select a course category');
category?.focus();
return;
}

if (!status || !status.value.trim()) {
alert('Please select a course status');
status?.focus();
return;
}

const submitBtn = this.querySelector('.btn-submit');
const originalText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';

const apiFormData = new FormData(this);
if (resizedThumbnailFile) {
apiFormData.set('courseThumbnail', resizedThumbnailFile, resizedThumbnailFile.name);
}
const modulesInput = document.getElementById('modulesData');
if (modulesInput && modulesInput.value) {
apiFormData.set('modulesData', modulesInput.value);
}
const isEdit = this.dataset.editing === '1';
if (isEdit) {
const editingName = this.dataset.editingName;
apiFormData.append('courseId', editingName);
}

// Log the data being sent for debugging
console.log('Submitting form data...');
for (let [key, value] of apiFormData) {
console.log(`${key}: ${value instanceof File ? value.name : value}`);
}

/* COMMENTED OUT - Using PHP form submission instead
fetch('add_course_api.php', {
method: 'POST',
body: apiFormData
})
.then(response => {
console.log('Response status:', response.status);
return response.json();
})
.then(data => {
console.log('API Response:', data);
if (data.success) {
submitBtn.innerHTML = '<i class="fas fa-check"></i> ' + (isEdit ? 'Course Updated!' : 'Course Created!');
submitBtn.style.background = 'linear-gradient(135deg, var(--success-color) 0%, #059669 100%)';
// Show a success message and redirect to list
const msg = document.createElement('div');
msg.className = 'alert alert-success mt-4';
msg.innerHTML = '<strong>Success!</strong> ' + (isEdit ? 'Course updated successfully.' : 'Course created successfully. Redirecting to list...');
document.querySelector('.form-card').appendChild(msg);
setTimeout(function() {
// Redirect to e-learning list to see the newly created/updated course
window.location.href = 'e_learning_list.php';
}, 2000);
} else {
throw new Error(data.error || 'Failed to save course');
}
})
.catch(error => {
console.error('Error saving course:', error);
alert('Error: ' + error.message);
submitBtn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error!';
submitBtn.style.background = 'linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%)';
setTimeout(function() {
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
submitBtn.style.background = '';
}, 2000);
});
*/
});

// --- Edit mode helpers ---
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}

function populateCourseForm(course) {
if (!course) return;
document.querySelector('input[name="title"]').value = course.name || '';
const categorySelect = document.querySelector('select[name="category"]');
if (categorySelect) categorySelect.value = (course.category || '').toLowerCase();
const certSelect = document.querySelector('select[name="certificateType"]');
if (certSelect && course.certificateType) certSelect.value = course.certificateType;
const deptSelect = document.querySelector('select[name="department"]');
if (deptSelect && course.department) deptSelect.value = course.department;
const feesInput = document.querySelector('input[name="fees"]');
if (feesInput) feesInput.value = course.fees && String(course.fees).replace(/[^0-9]/g, '') || '';
// mode
if (course.mode) {
const modeRadio = document.querySelector('input[name="mode"][value="' + course.mode + '"]');
if (modeRadio) modeRadio.checked = true;
}
// status
const statusSelect = document.querySelector('select[name="status"]');
if (statusSelect && course.status) statusSelect.value = course.status;

// mark form as editing and store original name
const form = document.getElementById('elearningForm');
form.dataset.editing = '1';
form.dataset.editingName = course.name;

// Update submit button text
const submitBtn = form.querySelector('.btn-submit');
if (submitBtn) {
submitBtn.innerHTML = '<i class="fas fa-save"></i> Update E-Learning Course';
}
}

// On page load, check for ?edit=courseName
document.addEventListener('DOMContentLoaded', function() {
const editParam = getQueryParam('edit');
if (editParam) {
const editingName = decodeURIComponent(editParam);
// Look in localStorage first
const savedCourses = JSON.parse(localStorage.getItem('elearningCourses') || '[]');
const found = savedCourses.find(c => c.name === editingName);
if (found) {
populateCourseForm(found);
return;
}

// Not found locally
alert('Course "' + editingName + '" not found in local storage. Please open the course list and try editing from there.');
// Optionally redirect back to list
// window.location.href = 'e_learning_list.php';
}
});

// Wire the top "Edit E-Learning" button to prompt for a course name to edit
document.querySelectorAll('.btn-action-custom').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
const name = prompt('Enter exact course name to edit (or leave blank to open course list):');
if (!name) {
window.location.href = 'e_learning_list.php';
return;
}
// navigate to same page with edit param
window.location.href = 'add_e_learning.php?edit=' + encodeURIComponent(name);
});
});

// Helper functions
function getCategoryDisplayName(categoryValue) {
const categoryMap = {
'environment': 'Environment',
'economics': 'Economics',
'productivity': 'Management',
'operations': 'Operations',
'energy': 'Energy',
'business': 'Business'
};
return categoryMap[categoryValue] || categoryValue;
}

function getCategoryIcon(categoryValue) {
const iconMap = {
'environment': 'leaf',
'economics': 'chart-line',
'productivity': 'tasks',
'operations': 'cogs',
'energy': 'bolt',
'business': 'briefcase'
};
return iconMap[categoryValue] || 'book';
}

// Add ripple effect to buttons
document.querySelectorAll('.btn-submit, .btn-reset, .btn-action-custom').forEach(button => {
button.addEventListener('click', function(e) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;

ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = x + 'px';
ripple.style.top = y + 'px';
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.background = 'rgba(255, 255, 255, 0.6)';
ripple.style.transform = 'scale(0)';
ripple.style.animation = 'ripple 0.6s ease-out';
ripple.style.pointerEvents = 'none';

this.style.position = 'relative';
this.style.overflow = 'hidden';
this.appendChild(ripple);

setTimeout(() => ripple.remove(), 600);
});
});

// Add ripple animation
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);

// Toggle sidebar on mobile
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('active');
}

// Close sidebar on escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.getElementById('sidebar').classList.remove('active');
}
});

// Form validation feedback
document.querySelectorAll('.form-control-custom, .form-select-custom').forEach(input => {
input.addEventListener('invalid', function() {
this.style.borderColor = 'var(--danger-color)';
});

input.addEventListener('input', function() {
if (this.validity.valid) {
this.style.borderColor = 'var(--success-color)';
} else {
this.style.borderColor = 'var(--border-color)';
}
});
});

// Radio button animation
document.querySelectorAll('.radio-custom input[type="radio"]').forEach(radio => {
radio.addEventListener('change', function() {
document.querySelectorAll('.radio-label').forEach(label => {
label.style.transform = 'scale(1)';
});

if (this.checked) {
this.nextElementSibling.style.transform = 'scale(1.05)';
setTimeout(() => {
this.nextElementSibling.style.transform = 'scale(1)';
}, 200);
}
});
});

// Search functionality for form page
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.querySelector('.search-box input');
if (searchInput) {
searchInput.addEventListener('input', function() {
const searchValue = this.value.toLowerCase();
if (searchValue.length > 0) {
// For form page, search could be used for navigation or help
console.log('Form page search ready for future functionality');
}
});
}
});
</script>

</body>
</html>

Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...

With notes.io;

* You can take a note from anywhere and any device with internet connection.
* You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
* You can quickly share your contents without website, blog and e-mail.
* You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
* Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 14 years and has been free since the day it was started.

You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;

Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio

Regards;
Notes.io Team

Notes

Notes - notes.io

Shortened Note Link

Long File

Notes