academy/resources/views/admin/adminmycourses.blade.php

997 lines
61 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Course Management - Admin Portal</title>
<!-- Font Awesome Icons & Bootstrap 5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
:root {
--theme-navy: #2D355B;
--theme-footer-navy: #1F2541;
--theme-red: #822424;
--theme-red-hover: #df2c3e;
--theme-yellow: #FFEA85;
--sidebar-width: 260px;
--text-dark: #333333;
--theme-bg: #F6F6F6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: var(--theme-bg);
color: var(--text-dark);
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--theme-navy);
color: #fff;
position: fixed;
top: 0;
left: 0;
padding: 24px 0;
transition: all 0.3s ease;
z-index: 1030;
display: flex;
flex-direction: column;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar .brand {
padding: 0 24px 20px;
font-weight: 700;
font-size: 1.25rem;
color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,.15);
margin-bottom: 12px;
display: flex;
align-items: center;
}
.sidebar .admin-badge {
background-color: var(--theme-red);
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sidebar .nav {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}
.sidebar .nav-link {
color: rgba(255, 255, 255, 0.85);
padding: 14px 24px;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s ease;
border-left: 4px solid transparent;
text-decoration: none;
}
.sidebar .nav-link i {
width: 20px;
text-align: center;
}
.sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--theme-yellow) !important;
padding-left: 28px;
}
.sidebar .nav-link.active {
background: var(--theme-footer-navy);
color: var(--theme-yellow) !important;
border-left: 4px solid #F73F52;
font-weight: 700;
}
.sidebar-user-profile {
padding: 15px 24px;
border-top: 1px solid rgba(255,255,255,.15);
margin-top: auto;
background: var(--theme-footer-navy);
}
.main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
min-height: 100vh;
padding: 40px;
background: var(--theme-bg);
transition: all 0.3s ease;
}
.mobile-header {
display: none;
background: var(--theme-navy);
color: #ffffff;
padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1020;
}
.sidebar-toggle {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: #ffffff;
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1025;
}
.sidebar-overlay.show { display: block; }
@media (max-width: 991px) {
.sidebar { left: calc(-1 * var(--sidebar-width)); }
.sidebar.show { left: 0; }
.main { margin-left: 0; padding: 85px 20px 20px 20px; width: 100%; }
.mobile-header { display: flex; }
}
.course-img-preview {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 6px;
}
/* Stat cards (Total / Active / Enrolled) */
.stat-card {
border: none;
border-radius: 14px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}
.stat-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.text-indigo {
color: #4C51BF;
}
/* Course search box */
.course-search-wrap .form-control:focus,
.course-search-wrap .input-group-text {
box-shadow: none;
border-color: #dee2e6;
}
/* Table row hover */
#coursesTable tbody tr:hover {
background-color: rgba(45, 53, 91, 0.04);
}
/* Larger, clearer image preview inside modals */
#addCoursePreview,
[id^="editPreview"] {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 8px;
}
.custom-feature-check {
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.custom-feature-check:has(input:checked) {
background-color: rgba(45, 53, 91, 0.06);
border-color: var(--theme-navy);
}
</style>
</head>
<body>
<!-- Mobile Top Navigation Bar -->
<header class="mobile-header">
<button class="sidebar-toggle" id="toggleBtn" aria-label="Toggle Sidebar">
<i class="fa-solid fa-bars"></i>
</button>
<div class="fw-bold">Admin Panel</div>
<a href="/admin/login" class="btn btn-sm btn-outline-light">Sign In</a>
</header>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<div class="brand">
<i class="fa-solid fa-car-side me-2"></i> AutoEdu
<span class="admin-badge">Admin</span>
</div>
<nav class="nav">
<a href="{{ route('admin.dashboard') }}" class="nav-link">
<i class="fa-solid fa-chart-line"></i> Admin Dashboard
</a>
<a href="{{ route('admin.mycourses') }}" class="nav-link active">
<i class="fa-solid fa-book-bookmark"></i> Course Management
</a>
<a href="{{ route('admin.timetable') }}" class="nav-link">
<i class="fa-solid fa-calendar-check"></i> Class Timetable
</a>
<a href="{{ route('admin.results') }}" class="nav-link">
<i class="fa-solid fa-file-invoice-dollar"></i> Exam Results
</a>
</nav>
<div class="sidebar-user-profile">
<div class="dropdown dropup">
<a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" data-bs-toggle="dropdown">
<i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
<span>{{ session('admin_username', 'Admin') }}</span>
</a>
<ul class="dropdown-menu dropdown-menu-start shadow w-100">
<li>
<button type="button" onclick="submitAdminLogout()" class="dropdown-item text-danger border-0 bg-transparent">
<i class="fa-solid fa-right-from-bracket me-2"></i> Logout
</button>
</li>
</ul>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="main">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="fw-bold"><i class="fa-solid fa-book-bookmark me-2"></i> Course Management</h3>
<!-- Add New Course Button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCourseModal">
<i class="fa-solid fa-plus me-1"></i> Add New Course
</button>
</div>
<!-- Success/Error Alerts -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ session('error') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
<!-- Summary Statistics Cards -->
<div class="row g-3 mb-4">
<div class="col-md-4">
<div class="card stat-card shadow-sm p-3">
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="text-muted fw-semibold small">Total Courses</span>
<h4 class="fw-bold mb-0 mt-1">{{ count($courses) }}</h4>
</div>
<div class="stat-icon bg-primary bg-opacity-10 text-primary">
<i class="fa-solid fa-graduation-cap"></i>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card stat-card shadow-sm p-3">
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="text-muted fw-semibold small">Active Courses</span>
<h4 class="fw-bold mb-0 mt-1 text-success">
{{ $courses->where('status', 'Active')->count() }}
</h4>
</div>
<div class="stat-icon bg-success bg-opacity-10 text-success">
<i class="fa-solid fa-book-open"></i>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card stat-card shadow-sm p-3">
<div class="d-flex align-items-center justify-content-between">
<div>
<span class="text-muted fw-semibold small">Total Enrolled Students</span>
<h4 class="fw-bold mb-0 mt-1 text-indigo">
{{ $courses->sum(fn($c) => $c->enrollments_count ?? $c->students_count ?? 0) }}
</h4>
</div>
<div class="stat-icon bg-info bg-opacity-10 text-info">
<i class="fa-solid fa-users"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Courses Table Card -->
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-3 pb-0">
<div class="input-group input-group-sm course-search-wrap" style="max-width: 320px;">
<span class="input-group-text bg-white border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
<input type="text" id="courseSearchInput" class="form-control border-start-0" placeholder="Search by title or course code...">
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0" id="coursesTable">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Image</th>
<th>Code</th>
<th>Title</th>
<th>Duration</th>
<th>Level</th>
<th>Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
@forelse($courses as $course)
<tr class="course-row" data-search="{{ strtolower($course->course_code . ' ' . $course->title) }}">
<td>{{ $loop->iteration }}</td>
<td>
@if($course->image)
<img src="{{ asset('storage/' . $course->image) }}" class="course-img-preview" alt="Course Image">
@else
<span class="badge bg-secondary">No Image</span>
@endif
</td>
<td><span class="badge bg-light text-dark border">{{ $course->course_code }}</span></td>
<td class="fw-semibold">{{ $course->title }}</td>
<td>{{ $course->duration }}</td>
<td>{{ $course->level }}</td>
<td>
@if($course->status == 'Active')
<span class="badge bg-success">Active</span>
@else
<span class="badge bg-secondary">Inactive</span>
@endif
</td>
<td class="text-center">
<div class="d-flex justify-content-center gap-1">
<!-- View Modules Button -->
<button class="btn btn-sm btn-outline-info"
data-bs-toggle="modal"
data-bs-target="#modulesModal{{ $course->id }}">
<i class="fa-solid fa-layer-group me-1"></i> Modules
</button>
<!-- Edit Course Button -->
<button class="btn btn-sm btn-outline-warning"
data-bs-toggle="modal"
data-bs-target="#editCourseModal{{ $course->id }}">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
<!-- Delete Course Form -->
<form action="{{ route('courses.destroy', $course->id) }}" method="POST" onsubmit="return confirm('Delete this course?')" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-outline-danger">
<i class="fa-solid fa-trash"></i>
</button>
</form>
</div>
</td>
</tr>
<!-- EDIT COURSE MODAL -->
<div class="modal fade" id="editCourseModal{{ $course->id }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header text-white" style="background-color: var(--theme-navy);">
<h5 class="modal-title fw-bold text-white"><i class="fa-solid fa-pen-to-square me-2"></i>Edit Course</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<!-- Route: admin.courses.update (POST) -->
<form action="{{ route('admin.courses.update', $course->id) }}" method="POST" enctype="multipart/form-data" class="edit-course-form">
@csrf
<div class="modal-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-bold">Course Code</label>
<input type="text" name="course_code" class="form-control" value="{{ $course->course_code }}" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Course Title</label>
<input type="text" name="title" class="form-control" value="{{ $course->title }}" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Duration</label>
<input type="text" name="duration" class="form-control" value="{{ $course->duration }}" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Level</label>
<select name="level" class="form-select" required>
<option value="Certificate" {{ $course->level == 'Certificate' ? 'selected' : '' }}>Certificate</option>
<option value="Diploma" {{ $course->level == 'Diploma' ? 'selected' : '' }}>Diploma</option>
<option value="Advanced Diploma" {{ $course->level == 'Advanced Diploma' ? 'selected' : '' }}>Advanced Diploma</option>
<option value="Degree" {{ $course->level == 'Degree' ? 'selected' : '' }}>Degree</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Status</label>
<select name="status" class="form-select" required>
<option value="Active" {{ $course->status == 'Active' ? 'selected' : '' }}>Active</option>
<option value="Inactive" {{ $course->status == 'Inactive' ? 'selected' : '' }}>Inactive</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Course Image</label>
<input type="file" name="image" class="form-control image-input" accept="image/*" data-preview-target="editPreview{{ $course->id }}">
<div class="mt-2">
<small class="text-muted">{{ $course->image ? 'Current Image:' : 'No image set' }}</small><br>
<img id="editPreview{{ $course->id }}"
src="{{ $course->image ? asset('storage/' . $course->image) : '' }}"
class="course-img-preview border mt-1 {{ $course->image ? '' : 'd-none' }}"
alt="Course image preview">
</div>
</div>
<div class="col-12">
<label class="form-label fw-bold">Description</label>
<textarea name="description" class="form-control" rows="3">{{ $course->description ?? '' }}</textarea>
</div>
</div>
</div>
<div class="modal-footer bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Update Course</button>
</div>
</form>
</div>
</div>
</div>
<!-- MODULES MANAGEMENT MODAL -->
<div class="modal fade" id="modulesModal{{ $course->id }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header text-white" style="background-color: var(--theme-navy);">
<h5 class="modal-title fw-bold text-white">
<i class="fa-solid fa-layer-group me-2"></i>Modules - {{ $course->title }} ({{ $course->course_code }})
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body bg-light">
<div class="row g-4">
<!-- Left Side: Modules List by Semester -->
<div class="col-lg-7">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white fw-bold py-3">
<i class="fa-solid fa-list-check me-2 text-primary"></i>Course Modules List
</div>
<div class="card-body">
@php
$groupedModules = $course->modules ? $course->modules->groupBy('semester') : collect();
@endphp
@forelse($groupedModules as $semester => $modules)
<div class="mb-4">
<h6 class="fw-bold text-uppercase text-secondary border-bottom pb-2">
<i class="fa-solid fa-calendar-week me-2"></i>{{ $semester }}
</h6>
<div class="list-group">
@foreach($modules as $module)
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>
<span class="badge bg-secondary me-2">{{ $module->module_code }}</span>
<strong class="text-dark">{{ $module->title }}</strong>
@if($module->credits)
<span class="small text-muted ms-2">({{ $module->credits }} Credits)</span>
@endif
@if($module->description)
<p class="mb-0 text-muted small mt-1">{{ $module->description }}</p>
@endif
</div>
<div class="d-flex align-items-center gap-2">
<button class="btn btn-sm btn-outline-warning"
data-bs-toggle="collapse"
data-bs-target="#editModuleCollapse{{ $module->id }}">
<i class="fa-solid fa-pen"></i>
</button>
<!-- Route: modules.delete -->
<form action="{{ route('modules.delete', $module->id) }}" method="POST" onsubmit="return confirm('Delete this module?')" class="d-inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-outline-danger">
<i class="fa-solid fa-trash"></i>
</button>
</form>
</div>
</div>
<!-- Edit Module Collapse Form -->
<div class="collapse mt-2 p-3 bg-white border rounded" id="editModuleCollapse{{ $module->id }}">
<!-- Route: modules.update (POST) -->
<form action="{{ route('modules.update', $module->id) }}" method="POST">
@csrf
<h6 class="fw-bold text-warning mb-3"><i class="fa-solid fa-pen-to-square me-1"></i>Edit Module</h6>
<div class="row g-2">
<div class="col-md-4">
<input type="text" name="module_code" class="form-control form-control-sm" value="{{ $module->module_code }}" placeholder="Code" required>
</div>
<div class="col-md-8">
<input type="text" name="title" class="form-control form-control-sm" value="{{ $module->title }}" placeholder="Title" required>
</div>
<div class="col-md-6">
<select name="semester" class="form-select form-select-sm" required>
<option value="Semester 1" {{ $module->semester == 'Semester 1' ? 'selected' : '' }}>Semester 1</option>
<option value="Semester 2" {{ $module->semester == 'Semester 2' ? 'selected' : '' }}>Semester 2</option>
<option value="Semester 3" {{ $module->semester == 'Semester 3' ? 'selected' : '' }}>Semester 3</option>
<option value="Semester 4" {{ $module->semester == 'Semester 4' ? 'selected' : '' }}>Semester 4</option>
<option value="Year 1" {{ $module->semester == 'Year 1' ? 'selected' : '' }}>Year 1</option>
<option value="Year 2" {{ $module->semester == 'Year 2' ? 'selected' : '' }}>Year 2</option>
</select>
</div>
<div class="col-md-6">
<input type="number" name="credits" class="form-control form-control-sm" value="{{ $module->credits }}" placeholder="Credits">
</div>
<div class="col-md-12">
<textarea name="description" class="form-control form-control-sm" rows="2" placeholder="Description">{{ $module->description }}</textarea>
</div>
<div class="col-md-12 text-end mt-2">
<button type="submit" class="btn btn-sm btn-warning">Update Module</button>
</div>
</div>
</form>
</div>
@endforeach
</div>
</div>
@empty
<div class="text-center py-4 text-muted">
<i class="fa-solid fa-circle-info fa-2x mb-2 text-secondary"></i>
<p class="mb-0">No modules added yet for this course.</p>
</div>
@endforelse
</div>
</div>
</div>
<!-- Right Side: Add New Module Form -->
<div class="col-lg-5">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white fw-bold py-3">
<i class="fa-solid fa-plus-circle me-2 text-success"></i>Add New Module
</div>
<div class="card-body">
<!-- Route: modules.store -->
<form action="{{ route('modules.store') }}" method="POST">
@csrf
<input type="hidden" name="course_id" value="{{ $course->id }}">
<div class="mb-3">
<label class="form-label">Semester</label>
<select name="semester" class="form-select" required>
<option value="Semester 1.1">Semester 1.1</option>
<option value="Semester 1.2">Semester 1.2</option>
<option value="Semester 2.1">Semester 2.1</option>
<option value="Semester 2.2">Semester 2.2</option>
<option value="Semester 3.1">Semester 3.1</option>
<option value="Semester 3.2">Semester 3.2</option>
<option value="Semester 4.1">Semester 4.1</option>
<option value="Semester 4.2">Semester 4.2</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Module Code</label>
<input type="text" name="module_code" class="form-control" placeholder="e.g. MOD101" required>
</div>
<div class="mb-3">
<label class="form-label">Module Title</label>
<input type="text" name="title" class="form-control" placeholder="Module Title" required>
</div>
<div class="mb-3">
<label class="form-label">Credits</label>
<input type="number" name="credits" class="form-control" placeholder="Credits">
</div>
<div class="mb-3">
<label class="form-label">Description</label>
<textarea name="description" class="form-control" rows="3" placeholder="Description"></textarea>
</div>
<button type="submit" class="btn btn-success w-100">
<i class="fa-solid fa-plus me-1"></i> Add Module
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@empty
<tr>
<td colspan="8" class="text-center py-4 text-muted">No courses found. Click "Add New Course" to create one.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<!-- Assign Courses to Students -->
<div class="card border-0 shadow-sm rounded-3 mt-4">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<h5 class="fw-bold mb-1"><i class="fa-solid fa-user-graduate me-2 text-primary"></i>Assign Courses to Students</h5>
<p class="text-muted mb-0 small">Enroll one or more students into an existing course.</p>
</div>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#assignCourseModal">
<i class="fa-solid fa-user-plus me-1"></i> Assign Course
</button>
</div>
</div>
</main>
<!-- ASSIGN COURSE TO STUDENTS MODAL -->
<div class="modal fade" id="assignCourseModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header text-white" style="background-color: var(--theme-navy);">
<h5 class="modal-title fw-bold text-white"><i class="fa-solid fa-user-plus me-2"></i>Assign Course to Students</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<!-- Route: assign.course -->
<form action="{{ route('assign.course') }}" method="POST">
@csrf
<div class="modal-body">
<div class="mb-3">
<label class="form-label fw-bold">Select Course</label>
<select name="course_id" class="form-select" required>
<option value="" selected disabled>-- Choose Course --</option>
@foreach($courses as $course)
<option value="{{ $course->id }}">{{ $course->course_code }} - {{ $course->title }}</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Select Student(s)</label>
<select name="student_ids[]" class="form-select" multiple size="8" required>
@forelse($students as $student)
<option value="{{ $student->id }}">{{ $student->full_name }} ({{ $student->student_id ?? $student->email }})</option>
@empty
<option value="" disabled>No students found</option>
@endforelse
</select>
<small class="text-muted">Hold Ctrl (Windows) / Cmd (Mac) to select multiple students.</small>
</div>
</div>
<div class="modal-footer bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">
<i class="fa-solid fa-check me-1"></i> Assign Course
</button>
</div>
</form>
</div>
</div>
</div>
<!-- ADD NEW COURSE MODAL -->
<div class="modal fade" id="addCourseModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
<!-- Header -->
<div class="modal-header border-0 text-white px-4 py-3" style="background-color: var(--theme-navy, #0f172a);">
<div class="d-flex align-items-center">
<div class="rounded-circle bg-white bg-opacity-10 p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
<i class="fa-solid fa-graduation-cap text-white fs-5"></i>
</div>
<div>
<h5 class="modal-title fw-bold text-white mb-0">Create New Course</h5>
<small class="text-white-50">Set up course details, pricing, and features</small>
</div>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Route: admin.courses.store -->
<form action="{{ route('admin.courses.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-body p-4 bg-light">
<div class="row g-4">
<!-- Basic Information Section -->
<div class="col-12">
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-3">
<h6 class="fw-bold text-uppercase text-secondary fs-7 mb-3">
<i class="fa-solid fa-circle-info me-2 text-primary"></i>Basic Information
</h6>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label fw-semibold text-dark small">Course Code <span class="text-danger">*</span></label>
<div class="input-group">
<span class="input-group-text bg-light"><i class="fa-solid fa-hashtag text-muted"></i></span>
<input type="text" name="course_code" class="form-control" placeholder="e.g. DSE101" required>
</div>
</div>
<div class="col-md-8">
<label class="form-label fw-semibold text-dark small">Course Title <span class="text-danger">*</span></label>
<input type="text" name="title" class="form-control" placeholder="e.g. Diploma in Software Engineering" required>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold text-dark small">Duration <span class="text-danger">*</span></label>
<div class="input-group">
<span class="input-group-text bg-light"><i class="fa-regular fa-clock text-muted"></i></span>
<input type="text" name="duration" class="form-control" placeholder="e.g. 1 Year / 6 Months" required>
</div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold text-dark small">Academic Level <span class="text-danger">*</span></label>
<select name="level" class="form-select" required>
<option value="" selected disabled>Select Level</option>
<option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option>
<option value="Advanced Diploma">Advanced Diploma</option>
<option value="Degree">Degree</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Course Features Section -->
<div class="col-12">
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-3">
<h6 class="fw-bold text-uppercase text-secondary fs-7 mb-3">
<i class="fa-solid fa-list-check me-2 text-primary"></i>Key Features & Highlights
</h6>
<div class="row g-2 mb-3">
<div class="col-md-6">
<div class="form-check custom-feature-check border rounded p-2 d-flex align-items-center">
<input class="form-check-input ms-1 me-2" type="checkbox" name="features[]" value="Certificate Included" id="featCert">
<label class="form-check-label w-100 small fw-medium" for="featCert">
<i class="fa-solid fa-award text-warning me-2"></i>Certificate of Completion
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check custom-feature-check border rounded p-2 d-flex align-items-center">
<input class="form-check-input ms-1 me-2" type="checkbox" name="features[]" value="Live Sessions" id="featLive">
<label class="form-check-label w-100 small fw-medium" for="featLive">
<i class="fa-solid fa-video text-danger me-2"></i>Live Interactive Classes
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check custom-feature-check border rounded p-2 d-flex align-items-center">
<input class="form-check-input ms-1 me-2" type="checkbox" name="features[]" value="Projects" id="featProjects">
<label class="form-check-label w-100 small fw-medium" for="featProjects">
<i class="fa-solid fa-diagram-project text-success me-2"></i>Hands-on Real Projects
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check custom-feature-check border rounded p-2 d-flex align-items-center">
<input class="form-check-input ms-1 me-2" type="checkbox" name="features[]" value="Lifetime Access" id="featAccess">
<label class="form-check-label w-100 small fw-medium" for="featAccess">
<i class="fa-solid fa-infinity text-info me-2"></i>Lifetime Content Access
</label>
</div>
</div>
</div>
<!-- Custom Tags / Highlights Input -->
<label class="form-label fw-semibold text-dark small">Additional Highlights</label>
<input type="text" name="custom_features" class="form-control form-control-sm" placeholder="e.g. 1-on-1 Mentorship, Job Placement Assistance (separated by commas)">
</div>
</div>
</div>
<!-- Media & Status Section -->
<div class="col-12">
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-3">
<h6 class="fw-bold text-uppercase text-secondary fs-7 mb-3">
<i class="fa-solid fa-gear me-2 text-primary"></i>Media & Visibility
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-semibold text-dark small">Course Banner Image</label>
<input type="file" name="image" class="form-control image-input" accept="image/*" data-preview-target="addCoursePreview">
<div class="form-text fs-8">PNG, JPG, or WEBP up to 2MB.</div>
<img id="addCoursePreview" src="" class="course-img-preview border mt-2 d-none" alt="New course image preview">
</div>
<div class="col-md-6">
<label class="form-label fw-semibold text-dark small">Publishing Status <span class="text-danger">*</span></label>
<div class="d-flex gap-2">
<input type="radio" class="btn-check" name="status" id="statusActive" value="Active" checked>
<label class="btn btn-outline-success w-50 py-2 d-flex align-items-center justify-content-center gap-2" for="statusActive">
<i class="fa-solid fa-circle-check"></i> Active
</label>
<input type="radio" class="btn-check" name="status" id="statusInactive" value="Inactive">
<label class="btn btn-outline-secondary w-50 py-2 d-flex align-items-center justify-content-center gap-2" for="statusInactive">
<i class="fa-solid fa-circle-pause"></i> Draft
</label>
</div>
</div>
<div class="col-12">
<label class="form-label fw-semibold text-dark small">Description</label>
<textarea name="description" class="form-control" rows="3" placeholder="Write a summary of what students will learn..."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="modal-footer border-0 px-4 py-3 bg-white">
<button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">
<i class="fa-solid fa-arrow-right me-1"></i> Save Course
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Logout Form -->
<form id="adminLogoutForm" action="{{ route('admin.logout') }}" method="POST" class="d-none">
@csrf
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay');
const toggleBtn = document.getElementById('toggleBtn');
if(toggleBtn) {
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
overlay.classList.toggle('show');
});
}
if(overlay) {
overlay.addEventListener('click', () => {
sidebar.classList.remove('show');
overlay.classList.remove('show');
});
}
function submitAdminLogout() {
document.getElementById('adminLogoutForm').submit();
}
// ------------------------------------------------------------
// Image preview: any <input type="file" class="image-input">
// updates the <img> whose id matches its data-preview-target.
// ------------------------------------------------------------
document.querySelectorAll('.image-input').forEach(function (input) {
input.addEventListener('change', function () {
const targetId = input.getAttribute('data-preview-target');
const preview = document.getElementById(targetId);
if (!preview) return;
const file = input.files && input.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
preview.src = e.target.result;
preview.classList.remove('d-none');
};
reader.readAsDataURL(file);
});
});
// ------------------------------------------------------------
// Live search: filters course rows by title / course code.
// ------------------------------------------------------------
const courseSearchInput = document.getElementById('courseSearchInput');
if (courseSearchInput) {
courseSearchInput.addEventListener('input', function () {
const term = courseSearchInput.value.trim().toLowerCase();
const rows = document.querySelectorAll('#coursesTable tbody tr.course-row');
let visibleCount = 0;
rows.forEach(function (row) {
const haystack = row.getAttribute('data-search') || '';
const match = haystack.includes(term);
row.classList.toggle('d-none', !match);
if (match) visibleCount++;
});
let emptyRow = document.getElementById('courseSearchEmptyRow');
const table = document.querySelector('#coursesTable tbody');
if (visibleCount === 0 && term !== '') {
if (!emptyRow) {
emptyRow = document.createElement('tr');
emptyRow.id = 'courseSearchEmptyRow';
emptyRow.innerHTML = '<td colspan="8" class="text-center py-4 text-muted">No courses match "<span id="courseSearchTermLabel"></span>".</td>';
table.appendChild(emptyRow);
}
emptyRow.querySelector('#courseSearchTermLabel').textContent = courseSearchInput.value.trim();
emptyRow.classList.remove('d-none');
} else if (emptyRow) {
emptyRow.classList.add('d-none');
}
});
}
// ------------------------------------------------------------
// Auto-dismiss success/error alerts after a few seconds.
// ------------------------------------------------------------
document.querySelectorAll('.alert-dismissible').forEach(function (alertEl) {
setTimeout(function () {
const bsAlert = bootstrap.Alert.getOrCreateInstance(alertEl);
bsAlert.close();
}, 4000);
});
</script>
</body>
</html>