<?php
/**
 * View Template: Student Lesson Overview (Roadmap & Active Track Progression)
 * File Location: template-views/student-lesson-overview.php
 */
?>
<div class="max-w-container-max-width mx-auto p-6 md:p-8 bg-background">
    
    <div class="flex justify-between items-start mb-8 sticky top-0 bg-background z-20 pb-4 border-b border-outline-variant">
        <div class="space-y-1">
            <nav class="flex items-center gap-2 text-on-surface-variant text-xs font-medium mb-2">
                <span>Mathematics</span>
                <span class="material-symbols-outlined text-xs">chevron_right</span>
                <span class="text-primary font-bold">Primary 4</span>
            </nav>
            <h1 class="font-headline-lg text-headline-lg text-on-surface">Primary 4 Mathematics</h1>
        </div>
    </div>

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-10">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-full overflow-hidden border-2 border-primary-container">
                <img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4sVpTNMPnapvgygRgoPslEruJ9_UqvDWD_sf1spwuzo_tw8D5nEriinSa_yPQcjpKVPUxf88RW1f98cpX4ZPkfAMtO0kky9tVdQns9XA2XnktiDCA8N5Pam4AU-KCdyJIyYEN_k4T7SxHldyH772zqoAokPNeMcvWMmYvFxkZU1UySoa-8vEWRXxAz0CksNzNPeaKzyS2QniHcFAMkNHCs1_SZ0cmvNndpq49CrKmh421zLjIx2EKAc5lcSx7cwTHzPq2nJ_Buns" alt="Dr. Sarah Bennett"/>
            </div>
            <div>
                <p class="text-label-lg font-label-lg text-on-surface">Led by Dr. Sarah Bennett</p>
                <p class="text-body-md text-on-surface-variant text-sm">Term 1 Roadmap • 12 Topics Included</p>
            </div>
        </div>

        <div class="bg-white p-5 rounded-2xl shadow-[0px_4px_20px_rgba(48,20,70,0.05)] border border-outline-variant/30 flex items-center gap-6 min-w-full sm:min-w-[320px]">
            <div class="flex-1">
                <div class="flex items-center gap-2 text-primary mb-1">
                    <span class="material-symbols-outlined text-sm">calendar_today</span>
                    <span class="text-label-sm font-label-sm uppercase tracking-wider">Your Schedule</span>
                </div>
                <p class="text-body-md font-bold text-on-surface">Weekly Review Track</p>
                <p class="text-label-sm text-on-surface-variant">Friday at 4:30 PM</p>
            </div>
            <div class="h-10 w-[1px] bg-outline-variant"></div>
            <div class="text-center">
                <p class="text-headline-md font-bold text-primary">85%</p>
                <p class="text-[10px] text-on-surface-variant uppercase tracking-wider font-bold">Completed</p>
            </div>
        </div>
    </div>

    <div class="bg-primary-container/10 p-4 rounded-xl mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 border border-primary-container/20">
        <div>
            <p class="text-label-sm font-label-sm text-primary uppercase tracking-wider mb-0.5">Next Active Session</p>
            <p class="text-label-lg font-label-lg text-on-surface font-bold">Today, 2:00 PM</p>
            <p class="text-body-md text-on-surface-variant text-sm">Mental Math Mastery Overview</p>
        </div>
        <button onclick="initializeLiveSessionSync()" class="px-5 py-2.5 bg-primary text-on-primary text-xs font-bold rounded-xl shadow-sm hover:opacity-90 transition-all flex items-center gap-1.5 self-start sm:self-auto">
            <span class="material-symbols-outlined text-sm">video_call</span>
            Launch Session
        </button>
    </div>

    <div class="space-y-6">
        
        <div class="accordion-item active bg-white rounded-2xl border border-outline-variant/30 shadow-[0px_4px_20px_rgba(48,20,70,0.05)] transition-all overflow-hidden">
            <button class="w-full flex items-center justify-between p-6 hover:bg-surface-container-low transition-colors" onclick="toggleOverviewAccordion(this)">
                <div class="flex items-center gap-4 sm:gap-6">
                    <div class="w-14 h-14 rounded-2xl bg-primary-container/10 flex items-center justify-center text-primary flex-shrink-0">
                        <span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">calculate</span>
                    </div>
                    <div class="text-left min-w-0">
                        <span class="text-[10px] text-primary font-bold uppercase tracking-[0.2em] mb-1 block">Topic 01</span>
                        <h3 class="text-base sm:text-headline-md font-bold text-on-surface leading-tight truncate">Whole Numbers up to 1,000,000</h3>
                    </div>
                </div>
                <div class="flex items-center gap-4 flex-shrink-0">
                    <div class="hidden sm:block text-right">
                        <div class="w-32 h-2 bg-surface-container rounded-full overflow-hidden">
                            <div class="w-[60%] h-full bg-warm-orange"></div>
                        </div>
                        <p class="text-label-sm text-on-surface-variant mt-1">3 of 5 Lessons Completed</p>
                    </div>
                    <span class="material-symbols-outlined chevron-icon transition-transform duration-200">expand_less</span>
                </div>
            </button>
            
            <div class="accordion-content px-6 pb-6 space-y-4">
                <div class="group flex flex-col md:flex-row md:items-center justify-between p-4 rounded-xl bg-soft-lilac/50 border border-transparent hover:border-primary-container transition-all gap-4">
                    <div class="flex items-center gap-4">
                        <div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container flex-shrink-0">
                            <span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">check_circle</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-on-surface text-sm sm:text-base">Reading and Writing Numbers</h4>
                            <p class="text-xs sm:text-sm text-on-surface-variant">Place value and digit position frameworks</p>
                        </div>
                    </div>
                    <button class="px-5 py-2 bg-surface-container-high text-on-surface-variant font-bold rounded-full text-xs sm:text-sm hover:bg-surface-container-highest transition-colors whitespace-nowrap self-end md:self-auto">
                        Review Lesson
                    </button>
                </div>

                <div class="group flex flex-col md:flex-row md:items-center justify-between p-4 rounded-xl bg-primary-fixed/30 border-2 border-primary-container transition-all gap-4">
                    <div class="flex items-center gap-4">
                        <div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary flex-shrink-0">
                            <span class="material-symbols-outlined text-lg">play_arrow</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-on-surface text-sm sm:text-base">Comparing and Ordering Numbers</h4>
                            <p class="text-xs sm:text-sm text-on-surface-variant">Using symbols match parameter expressions (<, >, and =)</p>
                        </div>
                    </div>
                    <button onclick="openOverlay('start-lesson')" class="px-6 py-2.5 bg-primary text-on-primary font-bold rounded-full text-xs sm:text-sm shadow-lg hover:scale-105 active:scale-95 transition-all whitespace-nowrap self-end md:self-auto">
                        Start Lesson
                    </button>
                </div>

                <div class="group flex flex-col md:flex-row md:items-center justify-between p-4 rounded-xl bg-white border border-outline-variant/30 hover:border-primary/20 transition-all gap-4">
                    <div class="flex items-center gap-4">
                        <div class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant flex-shrink-0">
                            <span class="material-symbols-outlined text-lg">lock</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-on-surface text-sm sm:text-base">Rounding Numbers Frameworks</h4>
                            <p class="text-xs sm:text-sm text-on-surface-variant">Estimating values accurately to the nearest ten-thousand segment</p>
                        </div>
                    </div>
                    <button class="px-5 py-2 bg-surface-container-low text-on-surface-variant font-bold rounded-full text-xs sm:text-sm opacity-50 cursor-not-allowed whitespace-nowrap self-end md:self-auto" disabled>
                        Locked
                    </button>
                </div>
            </div>
        </div>

        <div class="accordion-item bg-white rounded-2xl border border-outline-variant/30 shadow-[0px_4px_20px_rgba(48,20,70,0.05)] transition-all overflow-hidden">
            <button class="w-full flex items-center justify-between p-6 hover:bg-surface-container-low transition-colors" onclick="toggleOverviewAccordion(this)">
                <div class="flex items-center gap-4 sm:gap-6">
                    <div class="w-14 h-14 rounded-2xl bg-tertiary-container/10 flex items-center justify-center text-tertiary flex-shrink-0">
                        <span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">add_business</span>
                    </div>
                    <div class="text-left min-w-0">
                        <span class="text-[10px] text-tertiary font-bold uppercase tracking-[0.2em] mb-1 block">Topic 02</span>
                        <h3 class="text-base sm:text-headline-md font-bold text-on-surface leading-tight truncate">Multiplication and Division</h3>
                    </div>
                </div>
                <div class="flex items-center gap-4 flex-shrink-0">
                    <div class="hidden sm:block text-right">
                        <p class="text-label-sm text-on-surface-variant italic">Next up in the tracking journey</p>
                    </div>
                    <span class="material-symbols-outlined chevron-icon transition-transform duration-200">expand_more</span>
                </div>
            </button>
            <div class="accordion-content px-6 hidden">
                <div class="py-4 border-t border-outline-variant/20 grid gap-3">
                    <div class="flex items-center justify-between p-4 rounded-xl border border-outline-variant/20 text-sm">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-on-surface-variant">radio_button_unchecked</span>
                            <span class="font-semibold text-on-surface">Multiplying parameters by 2-digit factors</span>
                        </div>
                        <span class="text-xs text-on-surface-variant bg-surface-container px-2.5 py-0.5 rounded font-bold">45 Mins</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="accordion-item bg-white rounded-2xl border border-outline-variant/30 shadow-[0px_4px_20px_rgba(48,20,70,0.05)] transition-all overflow-hidden opacity-80">
            <button class="w-full flex items-center justify-between p-6 hover:bg-surface-container-low transition-colors" onclick="toggleOverviewAccordion(this)">
                <div class="flex items-center gap-4 sm:gap-6">
                    <div class="w-14 h-14 rounded-2xl bg-surface-container flex items-center justify-center text-on-surface-variant flex-shrink-0">
                        <span class="material-symbols-outlined text-3xl">shapes</span>
                    </div>
                    <div class="text-left min-w-0">
                        <span class="text-[10px] text-on-surface-variant font-bold uppercase tracking-[0.2em] mb-1 block">Topic 03</span>
                        <h3 class="text-base sm:text-headline-md font-bold text-on-surface leading-tight truncate">Geometry and Shapes Structural Layout</h3>
                    </div>
                </div>
                <span class="material-symbols-outlined chevron-icon transition-transform duration-200 flex-shrink-0">expand_more</span>
            </button>
            <div class="accordion-content px-6 hidden">
                <p class="py-6 text-center text-sm text-on-surface-variant font-medium">Detailed custom tracking content parameters will automatically unlock as your curriculum score roadmap progresses.</p>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * Managed Roadmap Accordion Layer Animation Controller
     */
    function toggleOverviewAccordion(button) {
        const parentItem = button.closest('.accordion-item');
        const targetContent = parentItem.querySelector('.accordion-content');
        const chevron = parentItem.querySelector('.chevron-icon');
        
        const isOpen = !targetContent.classList.contains('hidden');
        
        if (isOpen) {
            targetContent.classList.add('hidden');
            parentItem.classList.remove('active');
            if (chevron) {
                chevron.textContent = 'expand_more';
                chevron.style.transform = 'rotate(0deg)';
            }
        } else {
            targetContent.classList.remove('hidden');
            parentItem.classList.add('active');
            if (chevron) {
                chevron.textContent = 'expand_less';
                chevron.style.transform = 'rotate(0deg)';
            }
        }
    }

    /**
     * Workspace Session Trigger Engine Stub Handler
     */
    function initializeLiveSessionSync() {
        console.log("Launching classroom media feeds context module...");
        alert("Initializing live synchronized lesson streams with Dr. Sarah Bennett!");
    }
</script>