course_detail_screen.dart

Go to the documentation of this file.

import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
 
import '../../../../core/router/routes.dart';
import '../../../../core/ui/theme/color_palette.dart';
import '../../../../core/ui/widgets/custom_scaffold.dart';
import '../../../../core/ui/widgets/faild_to_fetch_data_view.dart';
import '../../domain/entities/course_entity.dart';
import '../logic/cubit/elearning_v2_cubit.dart';
import 'qcm_screen.dart';
 
class CourseDetailScreen extends StatefulWidget {
  final int courseId;
 
  const CourseDetailScreen({
    super.key,
    required this.courseId,
  });
 
  @override
  State<CourseDetailScreen> createState() => _CourseDetailScreenState();
}
 
class _CourseDetailScreenState extends State<CourseDetailScreen> {
  @override
  void initState() {
    super.initState();
    _loadCourseDetails();
  }
 
  void _loadCourseDetails() {
    context.read<ElearningV2Cubit>().loadCourseDetails(widget.courseId);
  }
 
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ElearningV2Cubit, ElearningV2State>(
      builder: (context, state) {
        return CustomScaffold(
          title: state is CourseDetailsLoadedState
              ? state.course.title ?? 'Course Details'
              : 'Course Details',
          isLoading: state is LoadingCourseDetailsState,
          isLeadingVisible: true,
          body: SafeArea(
            child: _buildBody(state),
          ),
        );
      },
    );
  }
 
  Widget _buildBody(ElearningV2State state) {
    if (state is CourseDetailsLoadedState) {
      return _buildCourseDetails(
        state.course,
        state.pdfPath,
        state.qcmList.isNotEmpty,
      );
    } else if (state is CourseDetailsLoadingFailureState) {
      return FailedToFetchDataView(
        onRetry: _loadCourseDetails,
      );
    } else {
      return const SizedBox();
    }
  }
 
  Widget _buildCourseDetails(CourseEntity course, String pdfPath, bool hasQcm) {
    Color mainColor = _parseColor(course.iconColor ?? '#4CAF50', context);
    return SingleChildScrollView(
      padding: EdgeInsets.all(16.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Course title and description
          Text(
            course.title ?? 'Untitled Course',
            style: Theme.of(context).textTheme.displayMedium,
          ),
          SizedBox(height: 8.r),
          Text(
            course.description ?? '',
            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  color: Theme.of(context).hintColor,
                ),
          ),
 
          // Progress indicator
          Container(
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.surface,
              borderRadius: BorderRadius.circular(16),
            ),
            margin: EdgeInsets.symmetric(vertical: 16.sp),
            padding: EdgeInsets.all(15.sp),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(FluentIcons.arrow_flow_diagonal_up_right_12_filled, size: 20),
                    SizedBox(width: 7.sp),
                    Text(
                      'Your Progress',
                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                            fontWeight: FontWeight.bold,
                          ),
                    ),
                  ],
                ),
                SizedBox(height: 12.r),
                LinearProgressIndicator(
                  value: course.progress,
                  color: mainColor,
                  backgroundColor: mainColor.withValues(alpha: 0.11),
                  valueColor: AlwaysStoppedAnimation<Color>(
                    mainColor,
                  ),
                  borderRadius: BorderRadius.circular(4.r),
                  minHeight: 3.r,
                ),
                SizedBox(height: 8.r),
                Align(
                  alignment: Alignment.centerRight,
                  child: Text('${(course.progress! * 100).toInt()}%',
                      style: Theme.of(context).textTheme.displaySmall?.copyWith(
                            color: mainColor,
                          )),
                ),
              ],
            ),
          ),
 
          // Learning steps
 
          Text(
            'Learning Steps',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          SizedBox(height: 16.r),
 
          // PDF Reading step
          _buildLearningStep(
            color: mainColor,
            title: 'Step 1: Read the Material',
            description:
                'Read through the PDF material to understand the concepts',
            progress: course.progress! >= 0.5 ? 1.0 : course.progress! * 2,
            onTap: () {
              context.push(
                Routes.pdfViewerScreen.route,
                extra: {
                  'pdfPath': course.pdfPath,
                  'courseId': course.id,
                  'onComplete': (double progress) {
                    if (course.progress! < 0.5) {
                      context.read<ElearningV2Cubit>().updateProgress(
                            course.id!,
                            0.5,
                          );
                    }
                  },
                },
              );
            },
          ),
          SizedBox(height: 16.r),
          // QCM Quiz step
          _buildLearningStep(
            color: mainColor,
            title: 'Step 2: Test Your Knowledge',
            description: 'Complete the quiz to test your understanding',
            progress:
                course.progress! <= 0.5 ? 0.0 : (course.progress! - 0.5) * 2,
            isDisabled: course.progress! < 0.5,
            onTap: () {
              if (course.progress! >= 0.5) {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => QcmScreen(
                      courseId: course.id!,
                      currentProgress: course.progress!,
                      onComplete: (double quizScore) {
                        // Calculate new progress (50% from PDF + 50% from quiz)
                        final newProgress = 0.5 + (quizScore * 0.5);
                        context.read<ElearningV2Cubit>().updateProgress(
                              course.id!,
                              newProgress,
                            );
                      },
                    ),
                  ),
                );
              }
            },
          ),
        ],
      ),
    );
  }
 
  Widget _buildLearningStep({
    required String title,
    required String description,
    required double progress,
    required VoidCallback onTap,
    required Color color,
    bool isDisabled = false,
  }) {
    return GestureDetector(
      onTap: isDisabled ? null : onTap,
      child: Container(
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surface,
          borderRadius: BorderRadius.circular(16.r),
          border: Border.all(
            color: isDisabled
                ? Theme.of(context).dividerColor
                : color.withValues(alpha: 0.3),
            width: 1.5,
          ),
        ),
        padding: EdgeInsets.all(16.r),
        child: Row(
          children: [
            Container(
              width: 40.r,
              height: 40.r,
              decoration: BoxDecoration(
                color: isDisabled
                    ? Theme.of(context).disabledColor.withValues(alpha: 0.1)
                    : color.withValues(alpha: 0.1),
                shape: BoxShape.circle,
              ),
              child: Icon(
                FluentIcons.document_100_16_regular,
                color: isDisabled ? Theme.of(context).disabledColor : color,
                size: 20.r,
              ),
            ),
            SizedBox(width: 12.r),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
                          fontWeight: FontWeight.bold,
                          color: isDisabled
                              ? Theme.of(context).disabledColor
                              : Theme.of(context).textTheme.titleMedium?.color,
                        ),
                  ),
                  SizedBox(height: 4.r),
                  Text(
                    description,
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                          color: isDisabled
                              ? Theme.of(context).hintColor.withValues(alpha: 0.3)
                              : ColorPalette.black,
                        ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
 
  // Widget _buildLearningStep({
  //   required String title,
  //   required String description,
  //   required double progress,
  //   required VoidCallback onTap,
  //   required Color color,
  //   bool isDisabled = false,
  // }) {
  //   return GestureDetector(
  //     onTap: isDisabled ? null : onTap,
  //     child: Container(
  //       padding: EdgeInsets.all(16.r),
  //       decoration: BoxDecoration(
  //         color: isDisabled
  //             ? Theme.of(context).colorScheme.surface.withOpacity(.5)
  //             : Theme.of(context).colorScheme.onPrimaryContainer,
  //         borderRadius: BorderRadius.circular(10.r),
  //       ),
  //       child: Column(
  //         crossAxisAlignment: CrossAxisAlignment.start,
  //         children: [
  //           Row(
  //             children: [
  //               Container(
  //                 width: 40.r,
  //                 height: 40.r,
  //                 decoration: BoxDecoration(
  //                   color: isDisabled
  //                       ? Theme.of(context)
  //                           .colorScheme
  //                           .onSurface
  //                           .withOpacity(0.11)
  //                       : Theme.of(context).primaryColor.withOpacity(0.1),
  //                   shape: BoxShape.circle,
  //                 ),
  //                 child: Icon(
  //                   isDisabled
  //                       ? HugeIcons.strokeRoundedSquareLock01
  //                       : HugeIcons.strokeRoundedCursorPointer01,
  //                   color: isDisabled
  //                       ? Theme.of(context).hintColor.withOpacity(0.3)
  //                       : Theme.of(context).primaryColor,
  //                   size: 24.r,
  //                 ),
  //               ),
  //               SizedBox(width: 12.r),
  //               Expanded(
  //                 child: Column(
  //                   crossAxisAlignment: CrossAxisAlignment.start,
  //                   children: [
  //                     Text(
  //                       title,
  //                       style: Theme.of(context)
  //                           .textTheme
  //                           .displaySmall
  //                           ?.copyWith(
  //                             color: isDisabled
  //                                 ? Theme.of(context).hintColor.withOpacity(0.3)
  //                                 : Theme.of(context).primaryColor,
  //                           ),
  //                     ),
  //                     SizedBox(height: 4.r),
  //                     Text(
  //                       description,
  //                       style: Theme.of(context).textTheme.bodyMedium?.copyWith(
  //                             color: isDisabled
  //                                 ? Theme.of(context).hintColor.withOpacity(0.3)
  //                                 : ColorPaletteV2.textSecondaryLight,
  //                           ),
  //                       maxLines: 2,
  //                       overflow: TextOverflow.ellipsis,
  //                     ),
  //                   ],
  //                 ),
  //               ),
  //             ],
  //           ),
  //           SizedBox(height: 16.r),
  //           LinearProgressIndicator(
  //             value: progress,
  //             backgroundColor: isDisabled
  //                 ? Theme.of(context).highlightColor.withOpacity(0.11)
  //                 : Theme.of(context).colorScheme.primary.withOpacity(0.11),
  //             valueColor: AlwaysStoppedAnimation<Color>(
  //               Theme.of(context).colorScheme.primary,
  //             ),
  //             borderRadius: BorderRadius.circular(4.r),
  //             minHeight: 3.r,
  //           ),
  //           SizedBox(height: 10.r),
  //           Align(
  //             alignment: Alignment.centerRight,
  //             child: Text(
  //               '${(progress * 100).toInt()}%',
  //               style: TextStyle(
  //                 fontSize: 12.sp,
  //                 fontWeight: FontWeight.bold,
  //                 color: isDisabled
  //                     ? Theme.of(context).hintColor.withOpacity(0.3)
  //                     : Theme.of(context).primaryColor,
  //               ),
  //             ),
  //           ),
  //         ],
  //       ),
  //     ),
  //   );
  // }
 
  // Helper method to parse hex color string to Color
  Color _parseColor(String hexColor, BuildContext context) {
    try {
      hexColor = hexColor.replaceAll('#', '');
      if (hexColor.length == 6) {
        hexColor = 'FF$hexColor';
      }
      return Color(int.parse(hexColor, radix: 16));
    } catch (e) {
      return Theme.of(context).colorScheme.primary;
    }
  }
}