<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

// Receive state variables safely (fallback defaults provide safety if viewed outside context)
$class_level  = isset($class_level) ? $class_level : '10';
$class_group  = isset($class_group) ? $class_group : 'A';
$subject_name = isset($subject_name) ? $subject_name : 'Advanced Mathematics';
$current_term = isset($current_term) ? $current_term : '1st Term';
$class_id     = isset($id) ? $id : 0;

// Format human-readable text presentation
$display_level = ucwords( str_replace( '_', ' ', $class_level ) );
$display_group = !empty($class_group) ? ucwords( str_replace( '_', ' ', $class_group ) ) : '';
$display_subject = ucwords( str_replace( '_', ' ', $subject_name ) );
?>

<div class="bg-[#F0F0F1] text-on-surface min-h-screen font-['Inter']">

    <input type="hidden" id="curriculum_class_id" value="<?php echo esc_attr($class_id); ?>">
    <input type="hidden" id="curriculum_class_level" value="<?php echo esc_attr($class_level); ?>">
    <input type="hidden" id="curriculum_class_group" value="<?php echo esc_attr($class_group); ?>">
    <input type="hidden" id="curriculum_subject_name" value="<?php echo esc_attr($subject_name); ?>">

    <div class="max-w-[1440px] mx-auto p-lg space-y-lg">
        
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-md">
            <div>
                <nav class="flex items-center gap-xs text-on-surface-variant mb-1">
                    <span class="text-[10px] font-bold uppercase tracking-tighter">Academy</span>
                    <span class="material-symbols-outlined text-sm">chevron_right</span>
                    <span class="text-[10px] font-bold uppercase tracking-tighter">Grade <?php echo esc_html($display_level); ?></span>
                    <span class="material-symbols-outlined text-sm">chevron_right</span>
                    <span class="text-[10px] font-bold uppercase tracking-tighter text-primary">Topic Setup</span>
                </nav>
                <h3 class="font-headline-lg text-headline-lg text-on-surface">
                    Topic Setup: <?php echo esc_html($display_subject); ?>
                </h3>
                <p class="text-on-surface-variant font-body-md text-body-md mt-1">
                    Configure individual learning objectives and curriculum benchmarks for Grade <?php echo esc_html($display_level); if(!empty($display_group)) { echo ' (' . esc_html($display_group) . ')'; } ?>.
                </p>
            </div>
            <div class="flex gap-sm">
                <button class="flex items-center gap-xs bg-white border border-outline-variant px-md py-2 rounded text-primary font-label-md text-label-md hover:bg-surface-container-low transition-colors shadow-sm">
                    <span class="material-symbols-outlined text-md">download_for_offline</span>Import Syllabus
                </button>
                <button class="flex items-center gap-xs bg-primary text-white px-md py-2 rounded font-label-md text-label-md hover:opacity-90 transition-all shadow-sm" id="global-save-curriculum">
                    <span class="material-symbols-outlined text-md">check_circle</span>Publish Updates
                </button>
            </div>
        </div>

        <div class="bg-white border border-outline-variant rounded-xl p-sm flex flex-col sm:flex-row justify-between items-start sm:items-center gap-md shadow-sm">
            <div class="flex flex-wrap gap-xs w-full sm:w-auto">
                <button class="px-md py-2 rounded-lg font-label-md text-label-md transition-all font-semibold <?php echo ($current_term === '1st Term') ? 'bg-primary text-white shadow-sm' : 'text-on-surface-variant hover:bg-surface-container-low'; ?>">1st Term</button>
                <button class="px-md py-2 rounded-lg font-label-md text-label-md transition-all font-semibold <?php echo ($current_term === '2nd Term') ? 'bg-primary text-white shadow-sm' : 'text-on-surface-variant hover:bg-surface-container-low'; ?>">2nd Term</button>
                <button class="px-md py-2 rounded-lg font-label-md text-label-md transition-all font-semibold <?php echo ($current_term === '3rd Term') ? 'bg-primary text-white shadow-sm' : 'text-on-surface-variant hover:bg-surface-container-low'; ?>">3rd Term</button>
            </div>
            <div class="flex items-center gap-xs bg-surface-container-low border border-outline-variant px-sm py-1.5 rounded-full text-on-surface-variant w-full sm:w-64">
                <span class="material-symbols-outlined text-sm">search</span>
                <input class="border-none bg-transparent focus:ring-0 text-label-md p-0 w-full placeholder-outline-variant" placeholder="Search topics..." type="text" id="curriculum-search">
            </div>
        </div>

        <div class="grid grid-cols-12 gap-lg">
            
            <section class="col-span-12 lg:col-span-4 space-y-lg">
                <div class="bg-white border border-outline-variant rounded-xl p-md shadow-sm">
                    <div class="flex items-center justify-between mb-md">
                        <h4 class="font-headline-sm text-headline-sm">Create New Topic</h4>
                        <span class="material-symbols-outlined text-primary">add_box</span>
                    </div>
                    
                    <form class="space-y-md" id="topic-creation-form" onsubmit="return false;">
                        <div>
                            <label class="font-label-md text-label-md block mb-xs text-on-surface-variant">Topic Title</label>
                            <input id="input-topic-title" class="w-full border border-outline-variant rounded px-3 py-2 focus:ring-2 focus:ring-primary outline-none font-body-md text-body-md" placeholder="e.g. Quadratic Equations" type="text" required>
                        </div>
                        <div>
                            <label class="font-label-md text-label-md block mb-xs text-on-surface-variant">Estimated Weeks Required</label>
                            <select id="input-topic-weeks" class="w-full border border-outline-variant rounded px-3 py-2 focus:ring-2 focus:ring-primary outline-none font-body-md text-body-md bg-white">
                                <option value="1">1 Week Duration</option>
                                <option value="2" selected>2 Weeks Duration</option>
                                <option value="3">3 Weeks Duration</option>
                                <option value="4">4 Weeks Duration</option>
                            </select>
                        </div>
                        <div>
                            <label class="font-label-md text-label-md block mb-xs text-on-surface-variant">Performance Objectives / Notes</label>
                            <textarea id="input-topic-objectives" rows="3" class="w-full border border-outline-variant rounded px-3 py-2 focus:ring-2 focus:ring-primary outline-none font-body-md text-body-md placeholder-outline-variant" placeholder="Students will be evaluated based on solving complex operations..."></textarea>
                        </div>
                        <div class="pt-2">
                            <button class="w-full py-2.5 bg-primary text-white rounded font-label-md text-label-md hover:opacity-90 transition-all font-bold flex items-center justify-center gap-xs shadow-sm" type="button" id="btn-add-new-topic-row">
                                <span class="material-symbols-outlined text-md">add</span>Add Topic Entry
                            </button>
                        </div>
                    </form>
                </div>

                <div class="bg-white border border-outline-variant p-md rounded-xl shadow-sm space-y-md">
                    <h4 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Term Coverage Analysis</h4>
                    <div class="grid grid-cols-2 gap-sm">
                        <div class="bg-surface-container-lowest border border-outline-variant p-sm rounded-lg">
                            <span class="text-label-sm text-on-surface-variant block">Total Topics</span>
                            <span class="font-headline-md text-headline-md block mt-xs" id="stat-total-topics">3 Assigned</span>
                        </div>
                        <div class="bg-surface-container-lowest border border-outline-variant p-sm rounded-lg">
                            <span class="text-label-sm text-on-surface-variant block">Time Budget</span>
                            <span class="font-headline-md text-headline-md block mt-xs" id="stat-total-weeks">5 Weeks</span>
                        </div>
                    </div>
                    <div class="space-y-xs pt-1">
                        <div class="flex justify-between text-label-sm font-semibold">
                            <span class="text-on-surface-variant">Syllabus Completion</span>
                            <span class="text-primary">42% Allocated</span>
                        </div>
                        <div class="w-full bg-surface-container-low h-2 rounded-full overflow-hidden">
                            <div class="bg-primary h-full transition-all" style="width: 42%;"></div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="col-span-12 lg:col-span-8">
                <div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-sm">
                    <div class="p-md border-b border-outline-variant flex items-center justify-between bg-surface-container-low">
                        <h4 class="font-headline-sm text-headline-sm">Syllabus Sequence Configuration</h4>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#00A32A]/10 text-[#00A32A] gap-1">
                            <span class="w-1.5 h-1.5 rounded-full bg-[#00A32A]"></span>Active Editing Frame
                        </span>
                    </div>

                    <div id="curriculum-topics-sortable-list" class="divide-y divide-outline-variant bg-white">
                        
                        <div class="p-md hover:bg-surface-container-lowest transition-colors flex items-start gap-md group cursor-grab active:cursor-grabbing text-list-item-row">
                            <div class="pt-1 text-on-surface-variant opacity-40 group-hover:opacity-100 transition-opacity">
                                <span class="material-symbols-outlined text-md">drag_indicator</span>
                            </div>
                            <div class="flex-1 space-y-xs">
                                <div class="flex items-center justify-between gap-sm">
                                    <h5 class="font-body-md text-body-md font-semibold text-on-surface topic-title-text">Introduction to Linear Programming</h5>
                                    <span class="px-2.5 py-1 bg-primary-container/10 text-primary font-semibold text-label-sm rounded-lg shrink-0 topic-weeks-badge">2 Weeks</span>
                                </div>
                                <p class="text-on-surface-variant font-body-sm text-body-sm leading-relaxed topic-objectives-text">
                                    Formulating linear inequalities, graphical solution procedures, and identifying optimized operational regions within boundary coordinates.
                                </p>
                            </div>
                            <div class="flex flex-col gap-1 items-end shrink-0 pl-sm">
                                <div class="flex gap-xs">
                                    <button class="p-1.5 hover:bg-surface-container-high rounded text-primary transition-colors btn-action-edit-topic"><span class="material-symbols-outlined text-md">edit</span></button>
                                    <button class="p-1.5 hover:bg-error-container hover:text-error rounded text-on-surface-variant transition-colors btn-action-delete-topic"><span class="material-symbols-outlined text-md">delete</span></button>
                                </div>
                            </div>
                        </div>

                        <div class="p-md hover:bg-surface-container-lowest transition-colors flex items-start gap-md group cursor-grab active:cursor-grabbing text-list-item-row">
                            <div class="pt-1 text-on-surface-variant opacity-40 group-hover:opacity-100 transition-opacity">
                                <span class="material-symbols-outlined text-md">drag_indicator</span>
                            </div>
                            <div class="flex-1 space-y-xs">
                                <div class="flex items-center justify-between gap-sm">
                                    <h5 class="font-body-md text-body-md font-semibold text-on-surface topic-title-text">Matrix Determinants &amp; Inverses</h5>
                                    <span class="px-2.5 py-1 bg-primary-container/10 text-primary font-semibold text-label-sm rounded-lg shrink-0 topic-weeks-badge">1 Week</span>
                                </div>
                                <p class="text-on-surface-variant font-body-sm text-body-sm leading-relaxed topic-objectives-text">
                                    Evaluating 2x2 and 3x3 matrices, computing Cramer's structural rules, and applying simultaneous transactional solutions framework variables.
                                </p>
                            </div>
                            <div class="flex flex-col gap-1 items-end shrink-0 pl-sm">
                                <div class="flex gap-xs">
                                    <button class="p-1.5 hover:bg-surface-container-high rounded text-primary transition-colors btn-action-edit-topic"><span class="material-symbols-outlined text-md">edit</span></button>
                                    <button class="p-1.5 hover:bg-error-container hover:text-error rounded text-on-surface-variant transition-colors btn-action-delete-topic"><span class="material-symbols-outlined text-md">delete</span></button>
                                </div>
                            </div>
                        </div>

                        <div class="p-md hover:bg-surface-container-lowest transition-colors flex items-start gap-md group cursor-grab active:cursor-grabbing text-list-item-row">
                            <div class="pt-1 text-on-surface-variant opacity-40 group-hover:opacity-100 transition-opacity">
                                <span class="material-symbols-outlined text-md">drag_indicator</span>
                            </div>
                            <div class="flex-1 space-y-xs">
                                <div class="flex items-center justify-between gap-sm">
                                    <h5 class="font-body-md text-body-md font-semibold text-on-surface topic-title-text">Probability Distributions</h5>
                                    <span class="px-2.5 py-1 bg-primary-container/10 text-primary font-semibold text-label-sm rounded-lg shrink-0 topic-weeks-badge">2 Weeks</span>
                                </div>
                                <p class="text-on-surface-variant font-body-sm text-body-sm leading-relaxed topic-objectives-text">
                                    Understanding independent event boundaries, permutations configuration operations, and running calculations over basic Binomial layouts.
                                </p>
                            </div>
                            <div class="flex flex-col gap-1 items-end shrink-0 pl-sm">
                                <div class="flex gap-xs">
                                    <button class="p-1.5 hover:bg-surface-container-high rounded text-primary transition-colors btn-action-edit-topic"><span class="material-symbols-outlined text-md">edit</span></button>
                                    <button class="p-1.5 hover:bg-error-container hover:text-error rounded text-on-surface-variant transition-colors btn-action-delete-topic"><span class="material-symbols-outlined text-md">delete</span></button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
        </div>

        <footer class="pt-6 border-t border-outline-variant/50 flex flex-col sm:flex-row justify-between items-center gap-md">
            <div class="flex items-center gap-xs text-on-surface-variant font-body-sm text-body-sm">
                <span class="material-symbols-outlined text-md text-[#2271B1]">info</span>
                <span>Drag row indicators to instantly reorder topic sequences across the student portal dashboard.</span>
            </div>
            <div class="flex gap-lg">
                <a class="text-label-sm text-on-surface-variant hover:text-[#2271B1] transition-colors" href="#">Support Center</a>
                <a class="text-label-sm text-on-surface-variant hover:text-[#2271B1] transition-colors" href="#">Curriculum Guidelines</a>
                <a class="text-label-sm text-on-surface-variant hover:text-[#2271B1] transition-colors" href="#">Administrator API</a>
            </div>
        </footer>

    </div>
</div>

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

<script type="text/javascript">
jQuery(document).ready(function($) {
    
    // Live update dynamic aggregate statistics analytics boxes
    function recalculateSyllabusMetrics() {
        const $rows = $('.text-list-item-row:visible');
        const count = $rows.length;
        $('#stat-total-topics').text(`${count} Assigned`);
        
        let totalWeeks = 0;
        $rows.each(function() {
            const txt = $(this).find('.topic-weeks-badge').text() || '0';
            const num = parseInt(txt.replace(/[^0-9]/g, ''), 10) || 0;
            totalWeeks += num;
        });
        
        $('#stat-total-weeks').text(`${totalWeeks} ` + (totalWeeks === 1 ? 'Week' : 'Weeks'));
        
        // Update bar percentage calculation (Assumption limit baseline ceiling: 12 Weeks maximum)
        const pct = Math.min(Math.round((totalWeeks / 12) * 100), 100);
        $('.w-full.bg-surface-container-low .bg-primary').css('width', `${pct}%`);
        $('.w-full.bg-surface-container-low').prev().find('.text-primary').text(`${pct}% Allocated`);
    }

    // Dynamic front-end client topic insertion framework controller event handler hook
    $('#btn-add-new-topic-row').off('click').on('click', function(e) {
        e.preventDefault();
        
        const title = $('#input-topic-title').val().trim();
        const weeks = $('#input-topic-weeks').val();
        const desc = $('#input-topic-objectives').val().trim() || 'No supplementary operational guidelines evaluation parameters specified.';
        
        if (!title) {
            alert('Please specify a valid dynamic title field value descriptor.');
            return;
        }

        const weekText = weeks === '1' ? '1 Week' : `${weeks} Weeks`;

        const rowHtml = `
        <div class="p-md hover:bg-surface-container-lowest transition-colors flex items-start gap-md group cursor-grab active:cursor-grabbing text-list-item-row animate-fadeIn">
            <div class="pt-1 text-on-surface-variant opacity-40 group-hover:opacity-100 transition-opacity">
                <span class="material-symbols-outlined text-md">drag_indicator</span>
            </div>
            <div class="flex-1 space-y-xs">
                <div class="flex items-center justify-between gap-sm">
                    <h5 class="font-body-md text-body-md font-semibold text-on-surface topic-title-text">${title}</h5>
                    <span class="px-2.5 py-1 bg-primary-container/10 text-primary font-semibold text-label-sm rounded-lg shrink-0 topic-weeks-badge">${weekText}</span>
                </div>
                <p class="text-on-surface-variant font-body-sm text-body-sm leading-relaxed topic-objectives-text">${desc}</p>
            </div>
            <div class="flex flex-col gap-1 items-end shrink-0 pl-sm">
                <div class="flex gap-xs">
                    <button class="p-1.5 hover:bg-surface-container-high rounded text-primary transition-colors btn-action-edit-topic"><span class="material-symbols-outlined text-md">edit</span></button>
                    <button class="p-1.5 hover:bg-error-container hover:text-error rounded text-on-surface-variant transition-colors btn-action-delete-topic"><span class="material-symbols-outlined text-md">delete</span></button>
                </div>
            </div>
        </div>`;

        $('#curriculum-topics-sortable-list').append(rowHtml);
        
        // Reset raw fields input configuration vectors safely
        $('#input-topic-title').val('');
        $('#input-topic-objectives').val('');
        $('#input-topic-weeks').val('2');

        recalculateSyllabusMetrics();
    });

    // Delete row hook controller context handler logic pipeline map rules bubble delegation action tracking
    $('#curriculum-topics-sortable-list').on('click', '.btn-action-delete-topic', function(e) {
        e.preventDefault();
        if(confirm('Are you certain you wish to purge this syllabus configuration entity framework context element mapping point?')) {
            $(this).closest('.text-list-item-row').remove();
            recalculateSyllabusMetrics();
        }
    });

    // Real-time keyword text pipeline string character search/filter interface handler rules 
    $('#curriculum-search').on('keyup font-change change', function() {
        const query = $(this).val().toLowerCase();
        $('.text-list-item-row').each(function() {
            const stringSpace = $(this).text().toLowerCase();
            $(this).toggle(stringSpace.indexOf(query) > -1);
        });
        recalculateSyllabusMetrics();
    });

    // Initial mount system check trigger calculations cycle evaluation metrics footprint execution
    recalculateSyllabusMetrics();
});
</script>