<?php
/**
 * View Template: Interactive Video Player and Lesson Timeline Block
 * File Location: template-views/active-lesson-player.php
 */
?>
<div class="max-w-[1200px] mx-auto">
    <div class="mb-10">
        <div class="flex items-center gap-2 text-label-sm font-label-sm text-on-surface-variant mb-2">
            <span>Curriculum</span>
            <span class="material-symbols-outlined text-xs">chevron_right</span>
            <span>Mathematics</span>
            <span class="material-symbols-outlined text-xs">chevron_right</span>
            <span class="text-primary font-bold">Algebra</span>
        </div>
        <h2 class="font-headline-lg text-headline-lg text-on-surface">Linear Equations & Variables</h2>
        <p class="text-body-lg font-body-lg text-on-surface-variant mt-2">Master the fundamentals of balancing equations and finding unknown variables.</p>
    </div>

    <div class="space-y-12">
        
        <section class="relative timeline-line">
            <div class="flex items-start gap-6">
                <div class="z-10 bg-secondary w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg shrink-0">
                    <span class="material-symbols-outlined">check</span>
                </div>
                <div class="flex-1 bg-white p-6 rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] border border-surface-container flex items-center justify-between group hover:border-secondary transition-all">
                    <div>
                        <span class="px-3 py-1 rounded-full bg-secondary-container text-on-secondary-container text-[10px] font-bold uppercase tracking-wider">Completed</span>
                        <h3 class="font-headline-md text-lg font-bold text-on-surface mt-2">Lesson 1: Introduction to Algebra</h3>
                        <p class="text-body-md text-on-surface-variant">The language of math and simple operations.</p>
                    </div>
                    <button class="flex items-center gap-2 px-6 py-2.5 rounded-xl border-2 border-secondary text-secondary font-bold hover:bg-secondary hover:text-white transition-all">
                        <span class="material-symbols-outlined">play_circle</span>
                        Review Video
                    </button>
                </div>
            </div>
        </section>

        <section class="relative timeline-line-active">
            <div class="flex items-start gap-6">
                <div class="z-10 bg-primary-container w-12 h-12 rounded-full flex items-center justify-center text-white shadow-[0px_0px_15px_rgba(255,107,0,0.4)] shrink-0 animate-pulse">
                    <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
                </div>
                
                <div class="flex-1 flex flex-col lg:flex-row gap-8 items-start">
                    <div class="w-full lg:w-[70%] space-y-6">
                        <div class="bg-white p-8 rounded-2xl active-glow shadow-xl">
                            <div class="flex justify-between items-start mb-6">
                                <div>
                                    <span class="px-3 py-1 rounded-full bg-warm-orange text-on-primary-fixed-variant text-[10px] font-bold uppercase tracking-wider">Now Learning</span>
                                    <h3 class="font-headline-md text-headline-md font-bold text-on-surface mt-2">Lesson 2: One-Step Equations</h3>
                                    <p class="text-body-lg font-body-lg text-on-surface-variant">Adding and subtracting to isolate the variable.</p>
                                </div>
                                <div class="text-right">
                                    <div class="text-[10px] font-bold text-on-surface-variant uppercase mb-1">Topic Progress</div>
                                    <div class="w-32 h-2 bg-surface-container rounded-full overflow-hidden">
                                        <div class="h-full bg-primary-container w-[35%]"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="relative aspect-video rounded-xl overflow-hidden mb-8 group cursor-pointer">
                                <div class="w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-105" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAHqxOZW3qL7mruvKLLO-J7Ua3rkSOyNyjhTNjs1ZxaWoAC48mfFQEcqvPm9lsmdHENAhBvsFIgRp8HleErzGBXDyMclpIkOPtjUlppjtkUS2vBXIBvv6u8-zboD9dgrLuPhBp-SGZ6CNPt4pmHRxXLFkDwAUjk59bYoT5vccwYGDgYHc2pI_DkiJ_BwIAIvPG1LnNa013kU-U9HWDophfdyDJSmtxUPYpFuiEYAFfJlnNj5CVmU0_M')"></div>
                                <div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-colors flex items-center justify-center">
                                    <div class="w-20 h-20 bg-primary-container rounded-full flex items-center justify-center text-white shadow-2xl transition-transform group-hover:scale-110">
                                        <span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
                                    </div>
                                </div>
                                <div class="absolute bottom-4 left-4 right-4 flex justify-between text-white font-bold text-sm">
                                    <span class="bg-black/50 px-3 py-1 rounded-lg backdrop-blur-md">12:45 min</span>
                                    <span class="bg-black/50 px-3 py-1 rounded-lg backdrop-blur-md">Math Foundation</span>
                                </div>
                            </div>

                            <div class="flex flex-col gap-4 my-8">
                                <h4 class="font-headline-md text-headline-md text-on-surface flex items-center gap-3">
                                    <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">description</span>
                                    Lesson Notes
                                </h4>
                                <div class="flex flex-col gap-3">
                                    <div class="accordion-item active bg-surface-container-lowest rounded-xl border border-surface-variant/30 shadow-[0px_4px_20px_rgba(48,20,70,0.05)] overflow-hidden">
                                        <button class="w-full flex justify-between items-center px-6 py-5 text-left hover:bg-surface-container-low transition-colors" onclick="toggleWorkspaceAccordion(this)">
                                            <span class="font-headline-md text-headline-md text-primary">Key Definitions</span>
                                            <span class="material-symbols-outlined rotate-icon transition-transform">expand_more</span>
                                        </button>
                                        <div class="accordion-content px-6 pb-6">
                                            <div class="space-y-4 text-body-md text-on-surface-variant">
                                                <div class="p-4 bg-soft-lilac rounded-lg border-l-4 border-tertiary">
                                                    <p><strong class="text-tertiary">Place Value:</strong> The numerical value that a digit has by virtue of its position in a number.</p>
                                                </div>
                                                <p>For Primary 4, we focus on the relationship between columns (Thousands, Hundreds, Tens, Units). Each step to the left is 10x larger.</p>
                                                <ul class="list-disc pl-5 space-y-2">
                                                    <li><strong>Base-10 System:</strong> Our system uses 10 digits (0-9).</li>
                                                    <li><strong>Digit:</strong> A single symbol used to write a number.</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item bg-surface-container-lowest rounded-xl border border-surface-variant/30 shadow-[0px_4px_20px_rgba(48,20,70,0.05)] overflow-hidden">
                                        <button class="w-full flex justify-between items-center px-6 py-5 text-left hover:bg-surface-container-low transition-colors" onclick="toggleWorkspaceAccordion(this)">
                                            <span class="font-headline-md text-headline-md text-primary">Formulas & Rules</span>
                                            <span class="material-symbols-outlined rotate-icon transition-transform">expand_more</span>
                                        </button>
                                        <div class="accordion-content px-6 pb-6">
                                            <div class="space-y-4 text-body-md text-on-surface-variant">
                                                <p>Standard expansion of a 4-digit number <strong>ABCD</strong>:</p>
                                                <div class="bg-surface-container-high p-4 rounded-lg font-mono text-center text-on-surface">
                                                    (A × 1,000) + (B × 100) + (C × 10) + (D × 1)
                                                </div>
                                                <p>Remember: A zero in any place value acts as a placeholder and means there are none of that value.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-soft-lilac rounded-2xl p-8 border border-outline-variant/30">
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-tertiary-container rounded-lg text-on-tertiary-container">
<span class="material-symbols-outlined">quiz</span>
</div>
<h4 class="font-headline-md text-xl font-bold text-on-tertiary-container">Topic Quiz Exercise</h4>
</div>
<div class="space-y-6">
<div class="p-5 bg-white rounded-xl shadow-sm border border-surface-container">
<p class="font-body-lg text-on-surface mb-4">What is the value of <span class="font-bold text-primary italic">x</span> in the equation: <span class="bg-surface-container-low px-2 py-1 rounded">x + 12 = 35</span>?</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button class="flex items-center gap-4 p-4 border-2 border-surface-container rounded-xl hover:border-warm-orange transition-all text-left">
<span class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center font-bold">A</span>
<span class="font-body-md font-medium">x = 22</span>
</button>
<button class="flex items-center gap-4 p-4 border-2 border-primary-container bg-primary-fixed-dim/20 rounded-xl transition-all text-left">
<span class="w-8 h-8 rounded-full bg-primary-container text-white flex items-center justify-center font-bold">B</span>
<span class="font-body-md font-bold text-on-primary-container">x = 23</span>
</button>
<button class="flex items-center gap-4 p-4 border-2 border-surface-container rounded-xl hover:border-warm-orange transition-all text-left">
<span class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center font-bold">C</span>
<span class="font-body-md font-medium">x = 47</span>
</button>
<button class="flex items-center gap-4 p-4 border-2 border-surface-container rounded-xl hover:border-warm-orange transition-all text-left">
<span class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center font-bold">D</span>
<span class="font-body-md font-medium">x = 15</span>
</button>
</div>
</div>
<div class="flex justify-end gap-4">
<button class="px-6 py-3 font-bold text-on-surface-variant hover:text-primary transition-colors">Skip for now</button>
<button class="px-10 py-3 bg-secondary text-white rounded-xl font-bold shadow-lg hover:bg-on-secondary-container transition-all">Submit Answer</button>
</div>
</div>
</div>
                            
                        </div>
                    </div>

                    <aside class="w-full lg:w-[30%] bg-surface-container-lowest rounded-2xl border border-surface-variant/30 p-5 shadow-[0px_4px_20px_rgba(48,20,70,0.03)] sticky top-24">
                        <h3 class="px-2 text-[11px] font-bold uppercase tracking-wider text-on-surface-variant opacity-60 mb-5">Lesson Progress</h3>
                        <div class="relative flex flex-col gap-6">
                            <div class="absolute left-[15px] top-3 bottom-3 w-[2px] bg-surface-container"></div>
                            <div class="absolute left-[15px] top-3 h-[25%] w-[2px] bg-secondary"></div>
                            
                            <div class="relative flex items-start gap-4 z-10">
                                <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center active-glow">
                                    <span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">play_circle</span>
                                </div>
                                <div class="flex flex-col">
                                    <span class="font-label-lg text-label-sm text-secondary font-bold uppercase tracking-wider !text-[11px]">Step 1 • Current</span>
                                    <span class="font-label-lg text-label-lg font-bold text-on-surface mt-0.5">Introduction Video</span>
                                </div>
                            </div>
                            <div class="relative flex items-start gap-4 z-10">
                                <div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
                                    <span class="material-symbols-outlined text-sm">joystick</span>
                                </div>
                                <div class="flex flex-col opacity-60">
                                    <span class="font-label-lg text-label-sm font-semibold !text-[11px]">Step 2</span>
                                    <span class="font-label-lg text-label-lg text-on-surface mt-0.5">Interactive Practice</span>
                                </div>
                            </div>
                            <div class="relative flex items-start gap-4 z-10">
                                <div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
                                    <span class="material-symbols-outlined text-sm">picture_as_pdf</span>
                                </div>
                                <div class="flex flex-col opacity-60">
                                    <span class="font-label-lg text-label-sm font-semibold !text-[11px]">Step 3</span>
                                    <span class="font-label-lg text-label-lg text-on-surface mt-0.5">Summary PDF</span>
                                </div>
                            </div>
                            <div class="relative flex items-start gap-4 z-10">
                                <div class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant flex items-center justify-center">
                                    <span class="material-symbols-outlined text-sm">quiz</span>
                                </div>
                                <div class="flex flex-col opacity-60">
                                    <span class="font-label-lg text-label-sm font-semibold !text-[11px]">Final Step</span>
                                    <span class="font-label-lg text-label-lg text-on-surface mt-0.5">Lesson Quiz</span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8 p-4 bg-soft-lilac rounded-xl border border-tertiary/10 flex flex-col gap-3">
                            <div class="flex items-center gap-2">
                                <span class="material-symbols-outlined text-tertiary text-lg">live_help</span>
                                <span class="font-label-sm text-label-sm text-tertiary font-bold">Need help with this?</span>
                            </div>
                            <button class="bg-tertiary text-on-tertiary w-full py-2.5 rounded-xl font-bold font-label-lg text-sm hover:bg-on-tertiary-fixed-variant transition-all">Ask Instructor</button>
                        </div>
                    </aside>
                </div>
            </div>
        </section>

        <section class="relative">
            <div class="flex items-start gap-6 opacity-60">
                <div class="z-10 bg-surface-container w-12 h-12 rounded-full flex items-center justify-center text-on-surface-variant shrink-0">
                    <span class="material-symbols-outlined">lock</span>
                </div>
                <div class="flex-1 bg-white/50 p-6 rounded-2xl border border-dashed border-surface-container-highest flex items-center justify-between">
                    <div>
                        <h3 class="font-headline-md text-lg font-bold text-on-surface-variant">Lesson 3: Two-Step Equations</h3>
                        <p class="text-body-md text-on-surface-variant">Combining operations to simplify the path.</p>
                    </div>
                    <span class="material-symbols-outlined text-on-surface-variant opacity-40">chevron_right</span>
                </div>
            </div>
        </section>
    </div>

    <div class="mt-20 grid grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-surface-container flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-primary-fixed-dim flex items-center justify-center text-primary">
                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">timer</span>
            </div>
            <div>
                <div class="text-2xl font-bold">45 min</div>
                <div class="text-xs font-bold text-on-surface-variant uppercase">Time Today</div>
            </div>
        </div>
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-surface-container flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-secondary-fixed flex items-center justify-center text-secondary">
                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">stars</span>
            </div>
            <div>
                <div class="text-2xl font-bold">120</div>
                <div class="text-xs font-bold text-on-surface-variant uppercase">XP Earned</div>
            </div>
        </div>
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-surface-container flex items-center gap-4">
            <div class="w-12 h-12 rounded-full bg-tertiary-fixed flex items-center justify-center text-tertiary">
                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">bolt</span>
            </div>
            <div>
                <div class="text-2xl font-bold">5 Days</div>
                <div class="text-xs font-bold text-on-surface-variant uppercase">Streak</div>
            </div>
        </div>
    </div>
</div>
<footer class="fixed bottom-0 left-64 right-0 bg-surface-container-lowest shadow-[0_-4px_20px_rgba(48,20,70,0.05)] border-t border-surface-variant/20 z-40">
    <div class="max-w-container-max-width mx-auto px-margin-desktop py-4 flex items-center justify-between">
        
        <button class="flex items-center gap-2 text-on-surface-variant font-label-lg text-label-lg hover:text-primary transition-colors group">
            <span class="material-symbols-outlined group-hover:-translate-x-1 transition-transform">arrow_back</span>
            Previous Step
        </button>

        <div class="hidden md:flex items-center gap-8">
            <button class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary transition-colors">
                <span class="material-symbols-outlined">edit_note</span>
                <span class="text-xs font-label-sm">Take Note</span>
            </button>
            <button class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary transition-colors">
                <span class="material-symbols-outlined">forum</span>
                <span class="text-xs font-label-sm">Discussion</span>
            </button>
            <button class="flex flex-col items-center gap-1 text-on-surface-variant hover:text-primary transition-colors">
                <span class="material-symbols-outlined">bookmark</span>
                <span class="text-xs font-label-sm">Save</span>
            </button>
        </div>

        <div class="flex items-center gap-4">
            <button onclick="navigateWorkspace('live-stream-room')" class="flex items-center gap-3 bg-tertiary text-on-tertiary px-8 py-3 rounded-full font-bold font-headline-md text-headline-md !text-[18px] hover:bg-on-tertiary-fixed-variant transition-all active:scale-95 shadow-lg group">
                <span class="material-symbols-outlined">video_camera_front</span>
                Join Live Zoom Session
            </button>
            
            <button onclick="navigateWorkspace('active-exercise')" class="flex items-center gap-3 bg-primary-container text-on-primary-container px-8 py-3 rounded-full font-bold font-headline-md text-headline-md !text-[18px] hover:bg-primary transition-all active:scale-95 shadow-lg group">
                Next: Practice Exercise
                <span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
            </button>
        </div>
    </div>
</footer>

<button class="fixed bottom-24 right-8 w-14 h-14 bg-primary-container text-white rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform z-50">
    <span class="material-symbols-outlined text-3xl">chat_bubble</span>
</button>

<script>
    function toggleWorkspaceAccordion(button) {
        const item = button.parentElement;
        const isActive = item.classList.contains('active');
        
        document.querySelectorAll('.accordion-item').forEach(el => {
            el.classList.remove('active');
        });

        if (!isActive) {
            item.classList.add('active');
        }
    }
</script>