<?php $__env->startSection('title', $course->title . ' - Edunetra'); ?>

<?php $__env->startSection('content'); ?>
<!-- Enrollment Success Message -->
<?php if(session('enrollment_success')): ?>
<section class="bg-success py-3">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex align-items-center text-white">
                    <i class="bi bi-check-circle-fill fs-3 me-3"></i>
                    <div>
                        <h5 class="mb-1 fw-bold">🎉 Welcome to <?php echo e(session('course_title')); ?>!</h5>
                        <p class="mb-0">You're now enrolled and ready to start learning. Your course is available in "My Courses".</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="<?php echo e(route('my-courses')); ?>" class="btn btn-light btn-sm">
                    <i class="bi bi-collection me-1"></i>Go to My Courses
                </a>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Course Header -->
<section class="py-5" style="background: linear-gradient(135deg, var(--edunetra-gradient-start) 0%, var(--edunetra-gradient-end) 100%);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex align-items-center mb-3">
                    <span class="badge bg-edunetra-dark me-3 px-3 py-2 fw-bold">
                        <?php echo e(ucfirst($course->level)); ?>

                    </span>
                    <span class=" opacity-90">
                        <i class="bi bi-clock me-1"></i> <?php echo e($course->duration_weeks); ?> weeks
                    </span>
                    <span class=" opacity-90 ms-3">
                        <i class="bi bi-list-ol me-1"></i> <?php echo e($course->sessions->count()); ?> sessions
                    </span>
                </div>
                <h1 class="display-4 fw-bold mb-3"><?php echo e($course->title); ?></h1>
                <p class="fs-5  opacity-90 mb-4"><?php echo e($course->description); ?></p>
                <div class="d-flex flex-wrap align-items-center opacity-90 mb-4">
                    <span class="me-4 mb-2">
                        <i class="bi bi-person-circle me-2"></i><?php echo e($course->teacher->name); ?>

                    </span>
                    <span class="me-4 mb-2">
                        <i class="bi bi-people me-2"></i><?php echo e($course->getEnrolledStudentsCount()); ?> students enrolled
                    </span>
                    <span class="mb-2">
                        <i class="bi bi-calendar me-2"></i><?php echo e($course->start_date ? $course->start_date->format('M d, Y') : 'Flexible start'); ?>

                    </span>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-lg">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <h4 class="fw-bold text-edunetra-dark mb-2">Ready to Start Learning?</h4>
                            <p class="text-muted mb-0">Join thousands of students</p>
                        </div>

                        <?php if(auth()->guard()->check()): ?>
                            <?php if($isEnrolled): ?>
                                <div class="text-center">
                                    <div class="alert alert-success d-flex align-items-center mb-3">
                                        <i class="bi bi-check-circle-fill me-2"></i>
                                        <span>You are enrolled in this course</span>
                                    </div>
                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <small class="text-muted">Progress</small>
                                            <small class="text-muted"><?php echo e($enrollment->progress); ?>%</small>
                                        </div>
                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar bg-edunetra-yellow" role="progressbar"
                                                 style="width: <?php echo e($enrollment->progress); ?>%"
                                                 aria-valuenow="<?php echo e($enrollment->progress); ?>"
                                                 aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                    <a href="#sessions" class="btn btn-edunetra w-100 btn-lg">
                                        <i class="bi bi-play-circle me-2"></i>Continue Learning
                                    </a>
                                    <?php if(auth()->user()->isTeacher() && $course->teacher_id === auth()->id()): ?>
                                        <a href="<?php echo e(route('teacher.courses.sessions', $course)); ?>" class="btn btn-outline-edunetra w-100 mt-2">
                                            <i class="bi bi-gear me-2"></i>Course Management
                                        </a>
                                    <?php endif; ?>
                                    <form action="<?php echo e(route('courses.unenroll', $course)); ?>" method="POST" class="mt-2">
                                        <?php echo csrf_field(); ?>
                                        <?php echo method_field('DELETE'); ?>
                                        <button type="submit" class="btn btn-outline-danger btn-sm w-100"
                                                onclick="return confirm('Are you sure you want to unenroll from this course?')">
                                            <i class="bi bi-x-circle me-1"></i>Unenroll
                                        </button>
                                    </form>
                                </div>
                            <?php else: ?>
                                <form action="<?php echo e(route('enrollments.store')); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <input type="hidden" name="course_id" value="<?php echo e($course->id); ?>">
                                    <button type="submit" class="btn btn-edunetra w-100 btn-lg">
                                        <i class="bi bi-plus-circle me-2"></i>Enroll Now
                                    </button>
                                </form>
                            <?php endif; ?>
                        <?php else: ?>
                            <div class="text-center">
                                <a href="<?php echo e(route('login')); ?>" class="btn btn-edunetra w-100 btn-lg">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>Login to Enroll
                                </a>
                                <p class="text-muted mt-3 mb-0">
                                    Don't have an account? <a href="<?php echo e(route('register')); ?>" class="text-edunetra-dark text-decoration-none fw-semibold">Sign up</a>
                                </p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php if(auth()->guard()->guest()): ?>
<!-- Information for Non-Enrolled Users -->
<section class="py-4 bg-light border-bottom">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="alert alert-info border-0 shadow-sm">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-info-circle fs-4 me-3 text-primary"></i>
                        <div>
                            <h6 class="fw-bold mb-1">Ready to Start Learning?</h6>
                            <p class="mb-0 small">Create an account or login to enroll in this course and access all learning materials, track your progress, and earn certificates.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if(auth()->guard()->check()): ?>
<?php if(!$isEnrolled): ?>
<!-- Information for Logged-in but Non-Enrolled Users -->
<section class="py-4 bg-light border-bottom">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="alert alert-warning border-0 shadow-sm">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-exclamation-triangle fs-4 me-3 text-warning"></i>
                        <div>
                            <h6 class="fw-bold mb-1">Enroll to Access Course Content</h6>
                            <p class="mb-0 small">Click "Enroll Now" above to join this course and start learning. Once enrolled, you can access all sessions and track your progress.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>
<?php endif; ?>

<!-- Course Content -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Course Description -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h2 class="h3 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-info-circle me-2"></i>About This Course
                        </h2>
                        <div class="text-muted">
                            <p class="mb-3"><?php echo e($course->description); ?></p>
                            <p class="mb-0">
                                This comprehensive <?php echo e($course->duration_weeks); ?>-week program is designed to provide students with
                                a solid foundation in English learning, specifically tailored for young learners with visual impairments.
                                Our innovative teaching methods ensure accessibility while maintaining high educational standards.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Course Sessions -->
                <div id="sessions" class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h2 class="h3 fw-bold text-edunetra-dark mb-0">
                            <i class="bi bi-list-ol me-2"></i>Course Sessions
                        </h2>
                        <?php if(auth()->check() && auth()->user()->isTeacher() && $course->teacher_id === auth()->id()): ?>
                            <div class="mt-2">
                                <a href="<?php echo e(route('teacher.courses.sessions', $course)); ?>" class="btn btn-outline-edunetra btn-sm">
                                    <i class="bi bi-gear me-1"></i>Course Management
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Session Navigation Tabs (1-8) -->
                    <div class="card-body p-3 bg-light border-bottom">
                        <div class="row g-2">
                            <?php for($i = 1; $i <= 8; $i++): ?>
                                <?php
                                    $session = $course->sessions->where('session_number', $i)->first();
                                ?>
                                <div class="col-6 col-md-3 col-lg-2">
                                    <?php if($session): ?>
                                        <?php if(auth()->guard()->check()): ?>
                                            <?php if($isEnrolled): ?>
                                                <a href="<?php echo e(route('courses.session', [$course->slug, $i])); ?>"
                                                   class="btn btn-outline-edunetra w-100 session-tab <?php echo e($i === 1 ? 'active' : ''); ?>"
                                                   data-session="<?php echo e($i); ?>">
                                                    <div class="d-flex align-items-center justify-content-center">
                                                        <span class="badge bg-edunetra-yellow text-dark me-2"><?php echo e($i); ?></span>
                                                        <span class="small">SESI <?php echo e($i); ?></span>
                                                    </div>
                                                    <?php if(method_exists($session, 'isCompleted') && $session->isCompleted(auth()->id())): ?>
                                                        <i class="bi bi-check-circle-fill text-success small"></i>
                                                    <?php endif; ?>
                                                </a>
                                            <?php else: ?>
                                                <button class="btn btn-outline-secondary w-100" disabled>
                                                    <div class="d-flex align-items-center justify-content-center">
                                                        <span class="badge bg-secondary me-2"><?php echo e($i); ?></span>
                                                        <span class="small">SESI <?php echo e($i); ?></span>
                                                    </div>
                                                    <small class="text-muted d-block">Enroll Required</small>
                                                </button>
                                            <?php endif; ?>
                                        <?php else: ?>
                                            <button class="btn btn-outline-secondary w-100" disabled>
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <span class="badge bg-secondary me-2"><?php echo e($i); ?></span>
                                                    <span class="small">SESI <?php echo e($i); ?></span>
                                                </div>
                                                <small class="text-muted d-block">Login Required</small>
                                            </button>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <button class="btn btn-outline-secondary w-100" disabled>
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="badge bg-secondary me-2"><?php echo e($i); ?></span>
                                                <span class="small">SESI <?php echo e($i); ?></span>
                                            </div>
                                            <small class="text-muted d-block">Coming Soon</small>
                                        </button>
                                    <?php endif; ?>
                                </div>
                            <?php endfor; ?>
                        </div>
                    </div>

                    <!-- Session Content -->
                    <div class="card-body p-0">
                        <?php for($i = 1; $i <= 8; $i++): ?>
                            <?php
                                $session = $course->sessions->where('session_number', $i)->first();
                            ?>
                            <div class="session-content p-4 <?php echo e($i !== 1 ? 'd-none' : ''); ?>" id="session-<?php echo e($i); ?>">
                                <?php if($session): ?>
                                    <div class="row align-items-center">
                                        <div class="col-lg-8">
                                            <div class="d-flex align-items-start">
                                                <div class="me-3">
                                                    <span class="badge bg-edunetra-yellow text-dark rounded-circle" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;">
                                                        <?php echo e($session->session_number); ?>

                                                    </span>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h4 class="fw-bold mb-2"><?php echo e($session->title); ?></h4>
                                                    <p class="text-muted mb-3"><?php echo e($session->description); ?></p>
                                                    <div class="d-flex align-items-center text-sm mb-3">
                                                        <span class="text-muted me-4">
                                                            <i class="bi bi-clock me-1"></i><?php echo e($session->duration_minutes); ?> minutes
                                                        </span>
                                                        <?php if($isEnrolled && $session->isCompleted(auth()->id())): ?>
                                                            <span class="badge bg-success">
                                                                <i class="bi bi-check-circle me-1"></i>Completed
                                                            </span>
                                                        <?php endif; ?>
                                                    </div>
                                                    <?php if($session->content): ?>
                                                        <div class="bg-light p-3 rounded">
                                                            <h6 class="fw-bold mb-2">Session Overview:</h6>
                                                            <p class="mb-0 small"><?php echo e(Str::limit($session->content, 200)); ?></p>
                                                        </div>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                            <?php if(auth()->guard()->check()): ?>
                                                <?php if($isEnrolled): ?>
                                                    <div class="d-grid gap-2">
                                                        <a href="<?php echo e(route('courses.session', [$course->slug, $session->session_number])); ?>" class="btn btn-edunetra">
                                                            <?php if(method_exists($session, 'isCompleted') && $session->isCompleted(auth()->id())): ?>
                                                                <i class="bi bi-arrow-clockwise me-1"></i>Review Session
                                                            <?php else: ?>
                                                                <i class="bi bi-play-circle me-1"></i>Start Session
                                                            <?php endif; ?>
                                                        </a>
                                                        <?php if($session->materials && count($session->materials) > 0): ?>
                                                            <small class="text-muted text-center">
                                                                <i class="bi bi-file-earmark me-1"></i><?php echo e(count($session->materials)); ?> materials available
                                                            </small>
                                                        <?php endif; ?>
                                                    </div>
                                                <?php else: ?>
                                                    <div class="text-center">
                                                        <button class="btn btn-outline-secondary w-100" disabled>
                                                            <i class="bi bi-lock me-1"></i>Enroll to Access
                                                        </button>
                                                    </div>
                                                <?php endif; ?>
                                            <?php else: ?>
                                                <div class="text-center">
                                                    <button class="btn btn-outline-secondary w-100" disabled>
                                                        <i class="bi bi-person-plus me-1"></i>Login Required
                                                    </button>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                <?php else: ?>
                                    <div class="text-center py-4">
                                        <i class="bi bi-hourglass-split fs-1 text-muted mb-3"></i>
                                        <h5 class="fw-bold text-muted">Session <?php echo e($i); ?> - Coming Soon</h5>
                                        <p class="text-muted mb-0">This session is being prepared and will be available soon.</p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endfor; ?>
                    </div>
                </div>

                <!-- Instructor -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h2 class="h3 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-person-circle me-2"></i>Your Instructor
                        </h2>
                        <div class="d-flex align-items-start">
                            <div class="me-3">
                                <div class="bg-edunetra-yellow rounded-circle d-flex align-items-center justify-content-center"
                                     style="width: 60px; height: 60px;">
                                    <span class="text-dark fw-bold fs-4"><?php echo e(substr($course->teacher->name, 0, 1)); ?></span>
                                </div>
                            </div>
                            <div>
                                <h4 class="fw-bold mb-2"><?php echo e($course->teacher->name); ?></h4>
                                <p class="text-muted mb-0"><?php echo e($course->teacher->bio ?? 'Experienced educator specializing in inclusive learning and accessible education for students with visual impairments.'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Course Info -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-info-square me-2"></i>Course Information
                        </h3>
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-clock text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold"><?php echo e($course->duration_weeks); ?></div>
                                    <small class="text-muted">Weeks</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-list-ol text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold"><?php echo e($course->sessions->count()); ?></div>
                                    <small class="text-muted">Sessions</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-bar-chart text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold"><?php echo e(ucfirst($course->level)); ?></div>
                                    <small class="text-muted">Level</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-3 bg-light rounded">
                                    <i class="bi bi-people text-edunetra-dark fs-4 mb-2"></i>
                                    <div class="fw-bold"><?php echo e($course->getEnrolledStudentsCount()); ?></div>
                                    <small class="text-muted">Students</small>
                                </div>
                            </div>
                        </div>
                        <?php if($course->start_date): ?>
                            <div class="mt-3 p-3 bg-light rounded text-center">
                                <i class="bi bi-calendar text-edunetra-dark fs-5 mb-2"></i>
                                <div class="fw-bold"><?php echo e($course->start_date->format('M d, Y')); ?></div>
                                <small class="text-muted">Start Date</small>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Tags -->
                <?php if($course->tags): ?>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                <i class="bi bi-tags me-2"></i>Tags
                            </h3>
                            <div class="d-flex flex-wrap gap-2">
                                <?php $__currentLoopData = $course->tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <span class="badge bg-edunetra-yellow text-dark px-3 py-2"><?php echo e($tag); ?></span>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Quick Actions -->
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                            <i class="bi bi-lightning me-2"></i>Quick Actions
                        </h3>
                        <div class="d-grid gap-2">
                            <?php if(auth()->guard()->check()): ?>
                                <?php if($isEnrolled): ?>
                                    <a href="<?php echo e(route('my-courses')); ?>" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-collection me-1"></i>My Courses
                                    </a>
                                    <a href="<?php echo e(route('courses.progress', $course)); ?>" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-graph-up me-1"></i>View Progress
                                    </a>
                                <?php else: ?>
                                    <a href="<?php echo e(route('courses.public')); ?>" class="btn btn-outline-edunetra btn-sm">
                                        <i class="bi bi-grid me-1"></i>Browse Courses
                                    </a>
                                <?php endif; ?>
                            <?php else: ?>
                                <a href="<?php echo e(route('courses.public')); ?>" class="btn btn-outline-edunetra btn-sm">
                                    <i class="bi bi-grid me-1"></i>Browse Courses
                                </a>
                                <a href="<?php echo e(route('register')); ?>" class="btn btn-outline-edunetra btn-sm">
                                    <i class="bi bi-person-plus me-1"></i>Create Account
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function showSession(sessionNumber) {
    // Hide all session contents
    document.querySelectorAll('.session-content').forEach(content => {
        content.classList.add('d-none');
    });

    // Remove active class from all tabs
    document.querySelectorAll('.session-tab').forEach(tab => {
        tab.classList.remove('active');
        tab.classList.add('btn-outline-edunetra');
        tab.classList.remove('btn-edunetra');
    });

    // Show selected session content
    const selectedContent = document.getElementById('session-' + sessionNumber);
    if (selectedContent) {
        selectedContent.classList.remove('d-none');
    }

    // Add active class to selected tab
    const selectedTab = document.querySelector('[data-session="' + sessionNumber + '"]');
    if (selectedTab) {
        selectedTab.classList.add('active');
        selectedTab.classList.remove('btn-outline-edunetra');
        selectedTab.classList.add('btn-edunetra');
    }
}

// Initialize first session as active on page load
document.addEventListener('DOMContentLoaded', function() {
    showSession(1);
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Users/reihanpraja/ProjectWork/edunetra/resources/views/courses/show.blade.php ENDPATH**/ ?>