course_detail_screen.dart

Go to the documentation of this file.

import 'package:connect/core/localization/app_localizations.dart';
import 'package:connect/core/router/routes.dart';
import 'package:connect/core/ui/theme/color_palette.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 'package:hugeicons/hugeicons.dart';
 
import '../../../../core/ui/screens/views/faild_to_fetch_data_view.dart';
import '../../../../core/ui/widgets/custom_scaffold.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 ??
                  AppLocalizations.of(context).translate('Course Details')
              : AppLocalizations.of(context).translate('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 ??
                AppLocalizations.of(context).translate('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(HugeIcons.strokeRoundedProgress02, size: 20),
                    SizedBox(width: 7.sp),
                    Text(
                      AppLocalizations.of(context).translate('Your Progress'),
                      style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                            fontWeight: FontWeight.bold,
                          ),
                    ),
                  ],
                ),
                SizedBox(height: 12.r),
                LinearProgressIndicator(
                  value: course.progress,
                  color: mainColor,
                  backgroundColor: mainColor.withOpacity(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(
            AppLocalizations.of(context).translate('Learning Steps'),
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          SizedBox(height: 16.r),
 
          // PDF Reading step
          _buildLearningStep(
            color: mainColor,
            title: AppLocalizations.of(context)
                .translate('Step 1: Read the Material'),
            description: AppLocalizations.of(context).translate(
                '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: AppLocalizations.of(context)
                .translate('Step 2: Test Your Knowledge'),
            description: AppLocalizations.of(context)
                .translate('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.withOpacity(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.withOpacity(0.1)
                    : color.withOpacity(0.1),
                shape: BoxShape.circle,
              ),
              child: Icon(
                HugeIcons.strokeRoundedLegalDocument01,
                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.withOpacity(0.3)
                              : ColorPaletteV2.textSecondaryLight,
                        ),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
 
  // 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;
    }
  }
}