<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($subject->subject_name) ?> - Course View</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4f46e5'
                    }
                }
            }
        }
    </script>
</head>

<body class="bg-gray-100 text-gray-800 flex flex-col h-screen overflow-hidden">

<?php 
    $first_name = $profile ? explode(' ', trim($profile->full_name))[0] : 'Student';
?>

<!-- ================= HEADER ================= -->
<header class="bg-white border-b z-50 flex-none">
    <div class="max-w-full mx-auto px-4 lg:px-6">
        <div class="h-16 flex items-center justify-between">

            <!-- Left -->
            <div class="flex items-center gap-4">
                <button id="mobileMenuBtn" class="lg:hidden p-2 rounded-lg hover:bg-gray-100">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </button>

                <a href="<?= site_url('student/dashboard') ?>" class="flex items-center gap-2">
                    <img src="<?= base_url('assets/images/logo.png') ?>" alt="Logo" class="h-8 w-auto">
                    <span class="font-bold text-xl hidden sm:block ml-2 text-gray-900 tracking-tight">
                        RUSO<span class="text-indigo-600">LMS</span>
                    </span>
                </a>
            </div>

            <!-- Course Title -->
            <div class="hidden md:block text-center absolute left-1/2 transform -translate-x-1/2">
                <h1 class="font-semibold text-gray-800">
                    <?= htmlspecialchars($subject->subject_name) ?>
                </h1>
                <p class="text-xs text-gray-500">
                    <?= htmlspecialchars($subject->class_name) ?>
                </p>
            </div>

            <!-- Right -->
            <div class="flex items-center gap-3">
                <div class="hidden sm:block text-right">
                    <p class="text-xs text-gray-500">Course Progress</p>
                    <p id="headerProgressText" class="font-semibold text-sm text-indigo-600">0%</p>
                </div>
                <div class="w-10 h-10 bg-indigo-100 text-indigo-700 rounded-full flex items-center justify-center font-bold shadow-sm ring-2 ring-white">
                    <?= $profile ? strtoupper(substr($profile->full_name, 0, 1)) : 'S' ?>
                </div>
            </div>

        </div>
    </div>
</header>


<!-- ================= MAIN LAYOUT ================= -->
<div class="flex flex-1 overflow-hidden relative">

    <!-- ================= SIDEBAR ================= -->
    <aside id="sidebar"
           class="absolute lg:static top-0 left-0 z-40
                  w-80 bg-white border-r h-full
                  overflow-y-auto
                  transform -translate-x-full lg:translate-x-0
                  transition-transform duration-300 shadow-xl lg:shadow-none flex-none">

        <div class="p-5">

            <!-- Course Information -->
            <div class="mb-6">
                <p class="text-xs font-semibold uppercase text-gray-400">
                    Subject
                </p>
                <h2 class="font-bold text-lg mt-1">
                    <?= htmlspecialchars($subject->subject_name) ?>
                </h2>
                <p class="text-sm text-gray-500 mt-1">
                    Code: <?= htmlspecialchars($subject->code ?? '') ?>
                </p>
            </div>

            <!-- Progress -->
            <div class="mb-6">
                <div class="flex justify-between text-sm mb-2">
                    <span class="font-medium">Your Progress</span>
                    <span id="sidebarProgressText" class="text-indigo-600 font-semibold">0%</span>
                </div>
                <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div id="sidebarProgressBar" class="h-full bg-indigo-600 rounded-full transition-all duration-500" style="width:0%"></div>
                </div>
            </div>

            <?php 
                $first_content_id = null;
                $has_content = false;
            ?>

            <?php if(!empty($topics)): ?>
                <?php foreach($topics as $index => $topic): ?>
                    <!-- MODULE <?= $index + 1 ?> -->
                    <div class="mb-5">
                        <button class="w-full flex items-center justify-between text-left group" onclick="toggleModule('module-<?= $topic->id ?>', 'icon-<?= $topic->id ?>')">
                            <div>
                                <p class="text-xs text-gray-400 group-hover:text-indigo-500 transition-colors">
                                    TOPIC <?= $index + 1 ?>
                                </p>
                                <p class="font-semibold text-gray-800 group-hover:text-indigo-700 transition-colors">
                                    <?= htmlspecialchars($topic->title) ?>
                                </p>
                            </div>
                            <span id="icon-<?= $topic->id ?>" class="text-gray-400 transform transition-transform duration-200">⌃</span>
                        </button>

                        <div id="module-<?= $topic->id ?>" class="mt-3 space-y-1">
                            <?php if(!empty($topic->content)): ?>
                                <?php $has_content = true; ?>
                                <?php foreach($topic->content as $content): ?>
                                    <?php if(!$first_content_id) $first_content_id = $content->id; ?>
                                    
                                    <a href="#" onclick="showContent('content-<?= $content->id ?>', this); return false;" 
                                       class="content-link flex items-center gap-3 p-3 rounded-lg transition-colors <?= ($content->id == $first_content_id) ? 'bg-indigo-600 text-white active-link shadow-sm' : 'text-gray-600 hover:bg-gray-100' ?>"
                                       data-content-id="content-<?= $content->id ?>">

                                        <span class="icon-wrapper w-6 h-6 <?= ($content->id == $first_content_id) ? 'bg-white/20' : 'bg-gray-200' ?> rounded-full flex items-center justify-center text-xs flex-shrink-0">
                                            <?php if($content->content_type == 'youtube' || $content->content_type == 'video'): ?>
                                                ▶
                                            <?php elseif($content->content_type == 'audio'): ?>
                                                🔊
                                            <?php elseif($content->content_type == 'pdf'): ?>
                                                📄
                                            <?php else: ?>
                                                📝
                                            <?php endif; ?>
                                        </span>

                                        <span class="text-sm line-clamp-2 text-wrapper <?= ($content->id == $first_content_id) ? 'font-medium' : '' ?>">
                                            <?= htmlspecialchars($content->title) ?>
                                        </span>
                                    </a>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <div class="p-3 text-xs text-gray-400 italic rounded-lg bg-gray-50 border border-gray-100">No materials added yet.</div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="p-6 text-center border-2 border-dashed border-gray-200 rounded-xl">
                    <p class="text-sm text-gray-500">No topics have been uploaded by the teacher yet.</p>
                </div>
            <?php endif; ?>

        </div>
    </aside>

    <!-- Overlay for mobile sidebar -->
    <div id="overlay" class="fixed inset-0 bg-black/40 z-30 hidden lg:hidden backdrop-blur-sm transition-opacity"></div>

    <!-- ================= CONTENT ================= -->
    <main class="flex-1 min-w-0 bg-gray-50 overflow-y-auto relative scroll-smooth h-full">
        <div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">

            <?php if($has_content): ?>
                <?php foreach($topics as $topic): ?>
                    <?php if(!empty($topic->content)): ?>
                        <?php foreach($topic->content as $content): ?>
                            
                            <!-- Content Panel -->
                            <div id="content-<?= $content->id ?>" class="content-panel <?= ($content->id == $first_content_id) ? 'block animate-fade-in' : 'hidden' ?>">
                                
                                <!-- Breadcrumb -->
                                <div class="flex items-center gap-2 text-sm text-gray-500 mb-5 flex-wrap">
                                    <a href="<?= site_url('student/dashboard') ?>" class="hover:text-indigo-600 transition-colors flex items-center gap-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                                        Dashboard
                                    </a>
                                    <span class="text-gray-400">/</span>
                                    <span class="text-gray-600"><?= htmlspecialchars($subject->subject_name) ?></span>
                                    <span class="text-gray-400">/</span>
                                    <span class="text-gray-900 font-medium"><?= htmlspecialchars($topic->title) ?></span>
                                </div>

                                <!-- ================= MEDIA VIEWER ================= -->
                                <?php if($content->content_type == 'video' || $content->content_type == 'youtube'): ?>
                                    <section class="bg-black rounded-2xl overflow-hidden shadow-xl mb-6 border border-gray-800">
                                        <div class="relative aspect-video flex items-center justify-center">
                                            <?php if($content->content_type == 'youtube'): ?>
                                                <?php 
                                                    preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/\s]{11})%i', $content->content_text, $match);
                                                    $youtube_id = $match[1] ?? null;
                                                ?>
                                                <?php if($youtube_id): ?>
                                                    <iframe class="w-full h-full absolute inset-0" src="https://www.youtube.com/embed/<?= $youtube_id ?>?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                <?php else: ?>
                                                    <div class="text-white text-center p-8">
                                                        <p class="mb-4">Invalid YouTube Link</p>
                                                        <a href="<?= htmlspecialchars($content->content_text) ?>" target="_blank" class="text-blue-400 hover:underline">Open Link in New Tab</a>
                                                    </div>
                                                <?php endif; ?>
                                            <?php else: ?>
                                                <video class="w-full h-full object-contain absolute inset-0 bg-black" controls controlsList="nodownload">
                                                    <source src="<?= base_url($content->file_path) ?>" type="video/mp4">
                                                    Your browser does not support video playback.
                                                </video>
                                            <?php endif; ?>
                                        </div>
                                    </section>
                                
                                <?php elseif($content->content_type == 'audio'): ?>
                                    <section class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-6">
                                        <div class="flex items-center gap-5 mb-5">
                                            <div class="w-14 h-14 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center text-2xl shadow-inner border border-indigo-100">
                                                🔊
                                            </div>
                                            <div>
                                                <h3 class="font-bold text-lg text-gray-900">Audio Lesson</h3>
                                                <p class="text-sm text-gray-500">Listen to the lecture recording</p>
                                            </div>
                                        </div>
                                        <audio class="w-full rounded-full" controls controlsList="nodownload">
                                            <source src="<?= base_url($content->file_path) ?>" type="audio/mpeg">
                                            Your browser does not support audio playback.
                                        </audio>
                                    </section>
                                
                                <?php elseif($content->content_type == 'pdf'): ?>
                                    <section class="bg-gradient-to-br from-indigo-50 to-blue-50 rounded-2xl overflow-hidden shadow-sm border border-indigo-100 mb-6 flex flex-col justify-center items-center p-12 text-center relative">
                                        <div class="absolute top-0 right-0 p-4 opacity-10 pointer-events-none">
                                            <svg class="w-32 h-32 text-indigo-900" fill="currentColor" viewBox="0 0 24 24"><path d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                                        </div>
                                        <div class="w-20 h-20 bg-white rounded-2xl shadow-sm border border-gray-100 flex items-center justify-center text-4xl mb-4 text-red-500 z-10">
                                            📄
                                        </div>
                                        <h3 class="text-xl font-bold text-gray-900 mb-2 z-10">PDF Document</h3>
                                        <p class="text-gray-500 text-sm max-w-md mb-6 z-10">This lesson material is provided as a PDF document. Click below to view or download it.</p>
                                        <a href="<?= base_url($content->file_path) ?>" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-white border-2 border-indigo-600 text-indigo-700 font-bold rounded-xl hover:bg-indigo-50 hover:border-indigo-700 hover:text-indigo-800 transition-all shadow-sm z-10">
                                            Open Document
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                                        </a>
                                    </section>
                                <?php endif; ?>

                                <!-- ================= LESSON HEADER ================= -->
                                <div class="mt-2 mb-6">
                                    <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
                                        <div class="flex-1">
                                            <div class="flex items-center gap-2 mb-3 flex-wrap">
                                                <span class="px-3 py-1 bg-indigo-50 text-indigo-700 rounded-md border border-indigo-100 text-[10px] font-bold uppercase tracking-wider shadow-sm">
                                                    <?= htmlspecialchars($content->content_type) ?> LESSON
                                                </span>
                                                <?php if($content->term): ?>
                                                    <span class="px-3 py-1 bg-purple-50 text-purple-700 rounded-md border border-purple-100 text-[10px] font-bold uppercase tracking-wider shadow-sm">
                                                        <?= htmlspecialchars($content->term) ?>
                                                    </span>
                                                <?php endif; ?>
                                            </div>
                                            <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 tracking-tight leading-tight">
                                                <?= htmlspecialchars($content->title) ?>
                                            </h2>
                                        </div>
                                        <button class="completeBtn px-6 py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-all font-semibold shadow-sm flex items-center justify-center gap-2 whitespace-nowrap focus:outline-none focus:ring-4 focus:ring-indigo-200" data-content-id="<?= $content->id ?>" onclick="toggleComplete(this, <?= $content->id ?>)">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                            Mark as Complete
                                        </button>
                                    </div>
                                </div>

                                <!-- ================= LESSON TEXT / NOTES ================= -->
                                <?php if($content->content_type == 'text' || trim(strip_tags($content->content_text)) != ''): ?>
                                    <?php if($content->content_type != 'youtube'): // Youtube puts URL in text ?>
                                        <section class="bg-white rounded-2xl shadow-sm border border-gray-200 mt-6 overflow-hidden">
                                            <div class="border-b border-gray-100 px-6 py-4 bg-gray-50 flex items-center gap-2">
                                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                                <h3 class="font-bold text-gray-700">Lesson Notes</h3>
                                            </div>
                                            <article class="p-6 md:p-8 prose prose-indigo prose-lg max-w-none prose-headings:font-bold prose-a:text-indigo-600 hover:prose-a:text-indigo-500">
                                                <?= $content->content_text ?>
                                            </article>
                                        </section>
                                    <?php endif; ?>
                                <?php endif; ?>

                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="h-full flex flex-col items-center justify-center text-center p-8 mt-20">
                    <div class="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center mb-6 shadow-inner border border-gray-100">
                        <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                    </div>
                    <h2 class="text-3xl font-extrabold text-gray-900 mb-3">No Curriculum Found</h2>
                    <p class="text-gray-500 text-lg max-w-md">Your teacher hasn't uploaded any materials for this subject yet. Please check back later.</p>
                </div>
            <?php endif; ?>

            <!-- Spacer for bottom scrolling -->
            <div class="h-24"></div>

        </div>
    </main>
</div>

<!-- ================= JAVASCRIPT ================= -->
<style>
    .animate-fade-in {
        animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* Custom scrollbar for sidebar */
    aside::-webkit-scrollbar {
        width: 6px;
    }
    aside::-webkit-scrollbar-track {
        background: transparent;
    }
    aside::-webkit-scrollbar-thumb {
        background-color: #e5e7eb;
        border-radius: 20px;
    }
    aside:hover::-webkit-scrollbar-thumb {
        background-color: #d1d5db;
    }
</style>
<script>
    // --- Mobile Sidebar Logic ---
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');

    if(mobileMenuBtn && sidebar && overlay) {
        mobileMenuBtn.addEventListener('click', () => {
            sidebar.classList.remove('-translate-x-full');
            overlay.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // Prevent body scroll
        });

        overlay.addEventListener('click', () => {
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('hidden');
            document.body.style.overflow = '';
        });
    }

    // --- Module Toggle Logic ---
    function toggleModule(moduleId, iconId) {
        const moduleDiv = document.getElementById(moduleId);
        const iconSpan = document.getElementById(iconId);
        
        if (moduleDiv.classList.contains('hidden')) {
            moduleDiv.classList.remove('hidden');
            if(iconSpan) iconSpan.style.transform = "rotate(0deg)";
        } else {
            moduleDiv.classList.add('hidden');
            if(iconSpan) iconSpan.style.transform = "rotate(180deg)";
        }
    }

    // --- Tab Navigation Logic ---
    function showContent(targetId, clickedLink) {
        // 1. Hide all content panels
        document.querySelectorAll('.content-panel').forEach(panel => {
            panel.classList.add('hidden');
            panel.classList.remove('block', 'animate-fade-in');
        });

        // 2. Show target panel
        const targetPanel = document.getElementById(targetId);
        if (targetPanel) {
            targetPanel.classList.remove('hidden');
            // small delay to allow reflow for animation
            setTimeout(() => targetPanel.classList.add('block', 'animate-fade-in'), 10);
        }

        // 3. Reset all sidebar links to default state
        document.querySelectorAll('.content-link').forEach(link => {
            link.classList.remove('bg-indigo-600', 'text-white', 'active-link', 'shadow-sm');
            link.classList.add('text-gray-600', 'hover:bg-gray-100');
            
            const textWrapper = link.querySelector('.text-wrapper');
            if(textWrapper) textWrapper.classList.remove('font-medium');
            
            const iconWrapper = link.querySelector('.icon-wrapper');
            if(iconWrapper) {
                iconWrapper.classList.remove('bg-white/20');
                iconWrapper.classList.add('bg-gray-200');
            }
        });

        // 4. Set clicked link to active state
        clickedLink.classList.remove('text-gray-600', 'hover:bg-gray-100');
        clickedLink.classList.add('bg-indigo-600', 'text-white', 'active-link', 'shadow-sm');
        
        const activeTextWrapper = clickedLink.querySelector('.text-wrapper');
        if(activeTextWrapper) activeTextWrapper.classList.add('font-medium');
        
        const activeIconWrapper = clickedLink.querySelector('.icon-wrapper');
        if(activeIconWrapper) {
            activeIconWrapper.classList.remove('bg-gray-200');
            activeIconWrapper.classList.add('bg-white/20');
        }

        // On mobile, close sidebar after clicking a link
        if (window.innerWidth < 1024 && sidebar) {
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('hidden');
            document.body.style.overflow = '';
        }
        
        // Scroll main content to top
        document.querySelector('main').scrollTo({ top: 0, behavior: 'smooth' });
        
        // Pause any playing media globally
        document.querySelectorAll('video, audio, iframe').forEach(media => {
            if (media.tagName === 'IFRAME') {
                // To pause youtube, easiest way is to reload iframe src
                const src = media.src;
                media.src = src;
            } else {
                media.pause();
            }
        });
    }

    // --- UI Only: Mark Complete Toggle & Progress ---
    const subjectId = <?= $subject->id ?>;
    const totalLessons = document.querySelectorAll('.content-panel').length;
    let completedLessons = JSON.parse(localStorage.getItem('completed_subject_' + subjectId)) || [];

    // Initialize UI on load
    function initProgress() {
        if(totalLessons === 0) return;
        
        // Update all buttons that are already completed
        document.querySelectorAll('.completeBtn').forEach(btn => {
            const cId = parseInt(btn.getAttribute('data-content-id'));
            if(completedLessons.includes(cId)) {
                btn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> Completed';
                btn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700', 'text-white');
                btn.classList.add('bg-green-100', 'text-green-800', 'hover:bg-green-200', 'border', 'border-green-300');
            }
        });
        
        updateProgressUI();
    }

    function updateProgressUI() {
        if(totalLessons === 0) return;
        const percentage = Math.round((completedLessons.length / totalLessons) * 100);
        
        const headerText = document.getElementById('headerProgressText');
        const sidebarText = document.getElementById('sidebarProgressText');
        const sidebarBar = document.getElementById('sidebarProgressBar');
        
        if(headerText) headerText.innerText = percentage + '%';
        if(sidebarText) sidebarText.innerText = percentage + '%';
        if(sidebarBar) sidebarBar.style.width = percentage + '%';
    }

    function toggleComplete(btn, contentId) {
        if (completedLessons.includes(contentId)) {
            // Unmark complete
            completedLessons = completedLessons.filter(id => id !== contentId);
            btn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Mark as Complete';
            btn.classList.remove('bg-green-100', 'text-green-800', 'hover:bg-green-200', 'border', 'border-green-300');
            btn.classList.add('bg-indigo-600', 'hover:bg-indigo-700', 'text-white');
        } else {
            // Mark complete
            completedLessons.push(contentId);
            btn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> Completed';
            btn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700', 'text-white');
            btn.classList.add('bg-green-100', 'text-green-800', 'hover:bg-green-200', 'border', 'border-green-300');
        }
        
        // Save to local storage
        localStorage.setItem('completed_subject_' + subjectId, JSON.stringify(completedLessons));
        
        // Update bar
        updateProgressUI();
    }
    
    // Run initialization
    initProgress();

</script>

</body>
</html>
