<?php
// Receive variables (from AJAX or parent include context pipeline)
$class_level = isset($class_level) ? $class_level : '10';
$class_group = isset($class_group) ? $class_group : '';
$class_id    = isset($id) ? $id : 0;

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

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

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

    <div class="max-w-[1440px] mx-auto p-lg">
        
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-lg gap-md">
            <div>
                <h1 class="font-headline-lg text-headline-lg text-on-surface mb-xs">
                    Subject Management: Grade <?php echo esc_html($display_level); if(!empty($display_group)) { echo ' (' . esc_html($display_group) . ')'; } ?>
                </h1>
                <p class="text-on-surface-variant font-body-md text-body-md">Organize your academy structure by defining grades and their specific educational focus.</p>
            </div>
            <div class="flex gap-sm w-full sm:w-auto">
                <button class="flex-1 sm:flex-none px-4 py-2 border border-[#8C8F94] bg-white text-[#2271B1] font-label-md text-label-md rounded-lg hover:bg-surface-container-low transition-colors flex items-center justify-center gap-xs">
                    <span class="material-symbols-outlined text-[18px]">cloud_download</span>
                    Export Schema
                </button>
                <button class="flex-1 sm:flex-none px-4 py-2 bg-[#2271B1] text-white font-label-md text-label-md rounded-lg hover:opacity-90 transition-all flex items-center justify-center gap-xs shadow-sm">
                    <span class="material-symbols-outlined text-[18px]">save</span>
                    Save All Changes
                </button>
            </div>
        </div>

        <div class="grid grid-cols-12 gap-lg">
            
            <section class="col-span-12 lg:col-span-4 flex flex-col gap-lg">
                <div class="bg-white border border-[#DCDCDE] rounded-xl p-md shadow-[0_2px_4px_rgba(0,0,0,0.05)]">
                    <div class="flex items-center justify-between mb-md">
                        <h2 class="font-headline-sm text-headline-sm">Add New Subject</h2>
                        <span class="material-symbols-outlined text-primary">add_circle</span>
                    </div>
                    <form class="space-y-md" id="class-form">
                        <div>
                            <label class="font-label-md text-label-md block mb-xs text-on-surface-variant">Subject Name</label>
                            <input id="subject_name" class="w-full border border-[#8C8F94] rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all font-body-md text-body-md" placeholder="e.g. Grade 10 - Advanced" type="text">
                        </div>
                        <div>
                            <label class="font-label-md text-label-md block mb-xs text-on-surface-variant">Term Selection</label>
                            <select id="subject_term" class="w-full border border-[#8C8F94] rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary focus:border-primary outline-none transition-all font-body-md text-body-md bg-white">
                                <option>1st Term</option>
                                <option>2nd Term</option>
                                <option>3rd Term</option>
                            </select>
                        </div>
                        <div class="pt-4">
                            <button id="add-subject-btn" class="w-full py-3 bg-primary-container text-on-primary-container rounded-lg font-label-md text-label-md hover:brightness-110 transition-all font-bold" type="button">Add Subject to Class</button>
                        </div>
                    </form>
                </div>

                <div class="bg-surface-container-low border border-outline-variant rounded-xl p-md overflow-hidden relative">
                    <div class="relative z-10">
                        <h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider mb-sm">Capacity Overview</h3>
                        <div class="flex items-baseline gap-xs">
                            <span class="font-headline-lg text-headline-lg">1,240</span>
                            <span class="font-label-md text-label-md text-on-surface-variant">Active Students</span>
                        </div>
                        <div class="mt-md w-full bg-surface-container-highest h-2 rounded-full overflow-hidden">
                            <div class="bg-[#00A32A] h-full" style="width: 72%;"></div>
                        </div>
                        <p class="mt-sm font-label-sm text-label-sm text-on-surface-variant">72% of total academy capacity reached.</p>
                    </div>
                    <div class="absolute -right-4 -bottom-4 opacity-10">
                        <span class="material-symbols-outlined text-[120px]">analytics</span>
                    </div>
                </div>
            </section>

            <section class="col-span-12 lg:col-span-8">
                <div class="bg-white border border-[#DCDCDE] rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.05)] flex flex-col h-full">
                    <div class="p-md border-b border-[#DCDCDE] flex flex-col sm:flex-row justify-between items-start sm:items-center gap-md bg-surface-container-lowest rounded-t-xl">
                        <div>
                            <h2 class="font-headline-sm text-headline-sm">Subject Assignments</h2>
                            <p class="font-label-md text-label-md text-on-surface-variant">Assign and manage subjects for the selected class.</p>
                        </div>
                        <button class="w-full sm:w-auto px-4 py-2 bg-primary text-white rounded-lg flex items-center justify-center gap-xs font-label-md text-label-md hover:opacity-90 transition-all" id="action-top-add-btn">
                            <span class="material-symbols-outlined text-[18px]">add</span>
                            Add New Subject
                        </button>
                    </div>
                    
                    <div class="flex-1 overflow-x-auto">
                        <table class="w-full text-left border-collapse min-w-[640px]">
                            <thead>
                                <tr class="bg-surface-container-low">
                                    <th class="px-md py-3 font-label-sm text-label-sm text-on-surface-variant uppercase border-b border-[#DCDCDE]">Subject Name</th>
                                    <th class="px-md py-3 font-label-sm text-label-sm text-on-surface-variant uppercase border-b border-[#DCDCDE]">Term</th>
                                    <th class="px-md py-3 font-label-sm text-label-sm text-on-surface-variant uppercase border-b border-[#DCDCDE]">Status</th>
                                    <th class="px-md py-3 font-label-sm text-label-sm text-on-surface-variant uppercase border-b border-[#DCDCDE] text-right">Actions</th>
                                </tr>
                            </table>
                            <table class="w-full text-left border-collapse min-w-[640px]">
                            <tbody id="subject-list-body">
                                <tr class="hover:bg-[#F6F7F7] transition-colors group">
                                    <td class="px-md py-4 border-b border-[#DCDCDE]">
                                        <div class="flex items-center gap-sm">
                                            <div class="w-8 h-8 rounded bg-primary-fixed flex items-center justify-center">
                                                <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'opsz' 20;">calculate</span>
                                            </div>
                                            <span class="font-body-md text-body-md font-semibold text-on-surface">Advanced Mathematics</span>
                                        </div>
                                    </td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE] font-body-md text-body-md text-on-surface-variant">1st Term</td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE]">
                                        <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>
                                            Published
                                        </span>
                                    </td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE] text-right">
                                        <div class="flex justify-end gap-xs transition-opacity">
                                            <button class="px-3 py-1 bg-surface-container-high hover:bg-surface-container-highest text-primary font-label-sm text-label-sm rounded transition-colors flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">account_tree</span>Manage Topics</button>
                                            <button class="p-2 hover:bg-surface-container rounded-lg transition-colors text-on-surface-variant"><span class="material-symbols-outlined text-[18px]">edit</span></button>
                                            <button class="p-2 hover:bg-error-container hover:text-error rounded-lg transition-colors text-on-surface-variant"><span class="material-symbols-outlined text-[18px]">delete</span></button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-[#F6F7F7] transition-colors group">
                                    <td class="px-md py-4 border-b border-[#DCDCDE]">
                                        <div class="flex items-center gap-sm">
                                            <div class="w-8 h-8 rounded bg-secondary-fixed flex items-center justify-center">
                                                <span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'opsz' 20;">history_edu</span>
                                            </div>
                                            <span class="font-body-md text-body-md font-semibold text-on-surface">Modern History</span>
                                        </div>
                                    </td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE] font-body-md text-body-md text-on-surface-variant">2nd Term</td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE]">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#DBA617]/10 text-[#DBA617] gap-1">
                                            <span class="w-1.5 h-1.5 rounded-full bg-[#DBA617]"></span>
                                            Draft
                                        </span>
                                    </td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE] text-right">
                                        <div class="flex justify-end gap-xs transition-opacity">
                                            <button class="px-3 py-1 bg-surface-container-high hover:bg-surface-container-highest text-primary font-label-sm text-label-sm rounded transition-colors flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">account_tree</span>Manage Topics</button>
                                            <button class="p-2 hover:bg-surface-container rounded-lg transition-colors text-on-surface-variant"><span class="material-symbols-outlined text-[18px]">edit</span></button>
                                            <button class="p-2 hover:bg-error-container hover:text-error rounded-lg transition-colors text-on-surface-variant"><span class="material-symbols-outlined text-[18px]">delete</span></button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-[#F6F7F7] transition-colors group">
                                    <td class="px-md py-4 border-b border-[#DCDCDE]">
                                        <div class="flex items-center gap-sm">
                                            <div class="w-8 h-8 rounded bg-primary-fixed flex items-center justify-center">
                                                <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'opsz' 20;">biotech</span>
                                            </div>
                                            <span class="font-body-md text-body-md font-semibold text-on-surface">Cellular Biology</span>
                                        </div>
                                    </td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE] font-body-md text-body-md text-on-surface-variant">1st Term</td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE]">
                                        <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>
                                            Published
                                        </span>
                                    </td>
                                    <td class="px-md py-4 border-b border-[#DCDCDE] text-right">
                                        <div class="flex justify-end gap-xs transition-opacity">
                                            <button class="px-3 py-1 bg-surface-container-high hover:bg-surface-container-highest text-primary font-label-sm text-label-sm rounded transition-colors flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">account_tree</span>Manage Topics</button>
                                            <button class="p-2 hover:bg-surface-container rounded-lg transition-colors text-on-surface-variant"><span class="material-symbols-outlined text-[18px]">edit</span></button>
                                            <button class="p-2 hover:bg-error-container hover:text-error rounded-lg transition-colors text-on-surface-variant"><span class="material-symbols-outlined text-[18px]">delete</span></button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="p-md bg-surface-container-low rounded-b-xl border-t border-[#DCDCDE] flex items-center justify-between">
                        <span class="font-label-md text-label-md text-on-surface-variant">Showing 3 of 18 total subjects assigned to this class level.</span>
                        <div class="flex gap-xs">
                            <button class="p-2 border border-[#8C8F94] rounded-lg bg-white disabled:opacity-50" disabled><span class="material-symbols-outlined text-[18px]">chevron_left</span></button>
                            <button class="p-2 border border-[#8C8F94] rounded-lg bg-white"><span class="material-symbols-outlined text-[18px]">chevron_right</span></button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="col-span-12 grid grid-cols-1 md:grid-cols-3 gap-lg mt-md">
                <div class="bg-white border border-[#DCDCDE] rounded-xl p-md flex gap-md">
                    <div class="w-12 h-12 shrink-0 bg-primary/10 rounded-full flex items-center justify-center">
                        <span class="material-symbols-outlined text-primary">auto_stories</span>
                    </div>
                    <div>
                        <h4 class="font-headline-sm text-headline-sm mb-1">Standardized Curriculum</h4>
                        <p class="font-body-md text-body-md text-on-surface-variant">Ensure your class follows the national education framework guidelines.</p>
                    </div>
                </div>
                <div class="bg-white border border-[#DCDCDE] rounded-xl p-md flex gap-md">
                    <div class="w-12 h-12 shrink-0 bg-[#DBA617]/10 rounded-full flex items-center justify-center">
                        <span class="material-symbols-outlined text-[#DBA617]">assignment_turned_in</span>
                    </div>
                    <div>
                        <h4 class="font-headline-sm text-headline-sm mb-1">Audit Compliance</h4>
                        <p class="font-body-md text-body-md text-on-surface-variant">All class setups are logged for seasonal academic audits automatically.</p>
                    </div>
                </div>
                <div class="bg-white border border-[#DCDCDE] rounded-xl p-md flex gap-md">
                    <div class="w-12 h-12 shrink-0 bg-[#00A32A]/10 rounded-full flex items-center justify-center">
                        <span class="material-symbols-outlined text-[#00A32A]">verified</span>
                    </div>
                    <div>
                        <h4 class="font-headline-sm text-headline-sm mb-1">Real-time Updates</h4>
                        <p class="font-body-md text-body-md text-on-surface-variant">Changes to class subjects reflect immediately on student portals.</p>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<div class="fixed bottom-lg right-lg bg-inverse-surface text-inverse-on-surface px-lg py-md rounded-xl shadow-lg flex items-center gap-md transform translate-y-24 transition-transform duration-300 z-[100]" id="toast">
    <span class="material-symbols-outlined text-[#00A32A]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
    <span class="font-label-md text-label-md">Changes saved successfully to the database.</span>
    <button class="material-symbols-outlined text-white/50 hover:text-white transition-colors" onclick="hideToast()">close</button>
</div>

<script type="text/javascript">
(function() {
    const addBtn = document.getElementById('add-subject-btn');
    const topAddBtn = document.getElementById('action-top-add-btn');
    const subjectBody = document.getElementById('subject-list-body');
    const toast = document.getElementById('toast');

    function showToast() {
        toast.classList.remove('translate-y-24');
        setTimeout(hideToast, 4000);
    }

    function hideToast() {
        toast.classList.add('translate-y-24');
    }

    // Expose toast close function globally
    window.hideToast = hideToast;
    window.showToast = showToast;

    function handleRowInsertionPipeline() {
        const name = document.getElementById("subject_name").value.trim();
        const term = document.getElementById("subject_term").value;

        if (!name) {
            alert("Enter subject name");
            return;
        }

        const row = document.createElement('tr');
        row.className = 'hover:bg-[#F6F7F7] transition-colors group';
        row.innerHTML = `
            <td class="px-md py-4 border-b border-[#DCDCDE]">
                <div class="flex items-center gap-sm">
                    <div class="w-8 h-8 rounded bg-primary-container flex items-center justify-center">
                        <span class="material-symbols-outlined text-white" style="font-variation-settings: 'opsz' 20;">pending</span>
                    </div>
                    <input type="text" value="${name}" placeholder="New Subject Name" class="font-body-md text-body-md font-semibold text-on-surface bg-transparent border-none focus:ring-0 p-0 w-full">
                </div>
            </td>
            <td class="px-md py-4 border-b border-[#DCDCDE]">
                <select class="bg-transparent border-none text-body-md text-on-surface-variant p-0 focus:ring-0 cursor-pointer">
                    <option ${term === '1st Term' ? 'selected' : ''}>1st Term</option>
                    <option ${term === '2nd Term' ? 'selected' : ''}>2nd Term</option>
                    <option ${term === '3rd Term' ? 'selected' : ''}>3rd Term</option>
                </select>
            </td>
            <td class="px-md py-4 border-b border-[#DCDCDE]">
                <span class="text-on-surface-variant/50 italic text-body-md">Unassigned</span>
            </td>
            <td class="px-md py-4 border-b border-[#DCDCDE]">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-surface-container text-on-surface-variant gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-outline"></span>
                    Initializing
                </span>
            </td>
            <td class="px-md py-4 border-b border-[#DCDCDE] text-right">
                <div class="flex justify-end gap-xs">
                    <button onclick="this.closest('tr').remove()" class="p-2 text-error hover:bg-error-container rounded-lg transition-colors"><span class="material-symbols-outlined text-[18px]">close</span></button>
                    <button onclick="showToast(); this.closest('tr').remove()" class="p-2 text-[#00A32A] hover:bg-[#00A32A]/10 rounded-lg transition-colors"><span class="material-symbols-outlined text-[18px]">check</span></button>
                </div>
            </td>
        `;
        subjectBody.prepend(row);
        document.getElementById("subject_name").value = "";
    }

    addBtn.addEventListener('click', handleRowInsertionPipeline);
    if(topAddBtn) {
        topAddBtn.addEventListener('click', handleRowInsertionPipeline);
    }
})();
</script>