<?php /* Template Name: Instructor Management Shell */ ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="light">
<head>
    <meta charset="<?php bloginfo('charset'); ?>"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Luminous Learning | Instructor Portal</title>
    
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <?php wp_head(); ?>

    <script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-tertiary": "#ffffff",
                    "primary-fixed-dim": "#ffb693",
                    "on-secondary": "#ffffff",
                    "on-secondary-fixed-variant": "#005232",
                    "outline-variant": "#e2bfb0",
                    "tertiary-fixed-dim": "#ddb9f6",
                    "primary-fixed": "#ffdbcc",
                    "on-tertiary-fixed": "#290d3f",
                    "soft-lilac": "#F2F2FB",
                    "alert-coral": "#EA7052",
                    "tertiary": "#705287",
                    "on-error": "#ffffff",
                    "surface-dim": "#d9dadb",
                    "on-surface": "#191c1d",
                    "on-background": "#191c1d",
                    "surface-container-low": "#f3f4f5",
                    "outline": "#8e7164",
                    "on-primary": "#ffffff",
                    "surface-tint": "#a04100",
                    "tertiary-container": "#ae8cc6",
                    "warm-orange": "#F9AD6D",
                    "surface-container-lowest": "#ffffff",
                    "background": "#f8f9fa",
                    "on-primary-container": "#572000",
                    "error-container": "#ffdad6",
                    "on-secondary-fixed": "#002111",
                    "secondary": "#006d43",
                    "inverse-surface": "#2e3132",
                    "surface": "#f8f9fa",
                    "on-primary-fixed": "#351000",
                    "inverse-primary": "#ffb693",
                    "surface-container-high": "#e7e8e9",
                    "on-primary-fixed-variant": "#7a3000",
                    "secondary-container": "#75f8b3",
                    "secondary-fixed": "#78fbb6",
                    "on-secondary-container": "#007147",
                    "error": "#ba1a1a",
                    "surface-bright": "#f8f9fa",
                    "inverse-on-surface": "#f0f1f2",
                    "surface-variant": "#e1e3e4",
                    "on-tertiary-container": "#412457",
                    "on-error-container": "#93000a",
                    "secondary-fixed-dim": "#59de9b",
                    "on-surface-variant": "#5a4136",
                    "primary": "#a04100",
                    "surface-container": "#edeeef",
                    "primary-container": "#ff6b00",
                    "surface-container-highest": "#e1e3e4",
                    "tertiary-fixed": "#f2daff",
                    "on-tertiary-fixed-variant": "#573a6e",
                    "slate-custom": "#2C3E50"
            },
            "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "12px",
                    "full": "9999px"
            },
            "spacing": {
                    "container-max-width": "1280px",
                    "base": "4px",
                    "margin-desktop": "48px",
                    "gutter": "24px",
                    "margin-mobile": "16px"
            },
            "fontFamily": {
                    "headline-md": ["Montserrat"],
                    "label-lg": ["Be Vietnam Pro"],
                    "body-md": ["Be Vietnam Pro"],
                    "body-lg": ["Be Vietnam Pro"],
                    "headline-lg": ["Montserrat"]
            }
          }
        }
      }
    </script>
    <style>
        body { font-family: 'Be Vietnam Pro', sans-serif; }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        .bg-orange-low { background-color: rgba(255, 107, 0, 0.12); }
        .text-orange-custom { color: #FF6B00; }
        .border-orange-custom { border-color: #FF6B00; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #e1e3e4; border-radius: 10px; }
    </style>
</head>
<body class="bg-background text-on-surface">

    <?php get_template_part('partials/instructor-sidebar'); ?>

    <main class="md:ml-64 min-h-screen">
        <?php get_template_part('partials/instructor-topbar'); ?>
        
        <section id="portal-viewport-canvas" class="p-8 max-w-[1440px] mx-auto">
            </section>
    </main>

    <div id="portal-overlay-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-200 p-4">
        <div class="bg-white rounded-2xl w-full max-w-4xl shadow-2xl border border-outline-variant relative overflow-hidden transform transition-all duration-200" id="portal-modal-content">
        </div>
    </div>

    <?php wp_footer(); ?>

    <script>
        const wpAjaxUrl = "<?php echo admin_url('admin-ajax.php'); ?>";

        async function fetchViewMarkup(containerId, templateName) {
            try {
                const response = await fetch(`${wpAjaxUrl}?action=load_portal_view&view_name=${templateName}`);
                if (response.ok) {
                    document.getElementById(containerId).innerHTML = await response.text();
                    executeEmbeddedScripts(containerId);
                }
            } catch (err) {
                console.error("View resolution error:", err);
            }
        }

        async function navigate(viewName) {
            const viewport = document.getElementById('portal-viewport-canvas');
            viewport.style.opacity = '0.3';
            await fetchViewMarkup('portal-viewport-canvas', viewName);
            viewport.style.opacity = '1';
            window.location.hash = `/${viewName}`;
        }

        function executeEmbeddedScripts(containerId) {
            const scripts = document.getElementById(containerId).querySelectorAll("script");
            scripts.forEach(oldScript => {
                const newScript = document.createElement("script");
                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                oldScript.parentNode.replaceChild(newScript, oldScript);
            });
        }

        // Initialize default view
        window.addEventListener('DOMContentLoaded', () => {
            navigate('teacher-dashboard'); 
        });
    </script>
</body>
</html>