<?php
/**
 * View Template: Teacher Schedule Selection
 * File Location: template-views/teacher-schedule-selection.php
 */
?>
<div class="p-6 md:p-8 relative max-h-[90vh] overflow-y-auto custom-scrollbar bg-background">
    
    <div class="flex justify-between items-start mb-6 sticky top-0 bg-background z-20 pb-4 border-b border-outline-variant">
        <div class="flex items-center gap-3">
            <button onclick="openOverlay('teacher-curriculum-preview')" class="material-symbols-outlined text-primary p-2 hover:bg-surface-container rounded-full transition-all">
                arrow_back
            </button>
            <div>
                <h3 class="text-headline-md font-headline-md text-on-surface">Schedule Lesson Slot</h3>
                <p class="text-body-md text-on-surface-variant">Select your preferred date matrix and tracking timeframe hours with your instructor.</p>
            </div>
        </div>
        <button onclick="closeOverlay()" class="material-symbols-outlined text-on-surface-variant p-2 hover:bg-surface-container rounded-full transition-all focus:outline-none">
            close
        </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <div class="lg:col-span-2 space-y-6">
            
            <div class="bg-white border border-outline-variant rounded-2xl p-5 shadow-sm">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="text-label-lg font-bold text-primary uppercase tracking-wider flex items-center gap-2">
                        <span class="material-symbols-outlined text-sm">calendar_month</span>
                        Select Lesson Date
                    </h4>
                    <span class="text-xs font-bold text-on-surface-variant bg-surface-container px-2.5 py-1 rounded-lg border border-outline-variant">October 2026</span>
                </div>
                
                <div class="grid grid-cols-5 sm:grid-cols-7 gap-2">
                    <div onclick="selectDateCard(this)" class="date-card border-2 border-primary bg-primary/5 rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer transition-all shadow-sm">
                        <span class="text-xs text-primary font-bold">Mon</span>
                        <span class="text-base font-black text-on-surface">12</span>
                        <span class="w-1.5 h-1.5 rounded-full bg-primary mt-0.5"></span>
                    </div>
                    <div onclick="selectDateCard(this)" class="date-card border border-outline-variant bg-transparent rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer hover:bg-surface-container transition-all">
                        <span class="text-xs text-on-surface-variant font-medium">Tue</span>
                        <span class="text-base font-bold text-on-surface">13</span>
                        <span class="w-1.5 h-1.5 rounded-full bg-transparent mt-0.5"></span>
                    </div>
                    <div onclick="selectDateCard(this)" class="date-card border border-outline-variant bg-transparent rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer hover:bg-surface-container transition-all">
                        <span class="text-xs text-on-surface-variant font-medium">Wed</span>
                        <span class="text-base font-bold text-on-surface">14</span>
                        <span class="w-1.5 h-1.5 rounded-full bg-transparent mt-0.5"></span>
                    </div>
                    <div onclick="selectDateCard(this)" class="date-card border border-outline-variant bg-transparent rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer hover:bg-surface-container transition-all">
                        <span class="text-xs text-on-surface-variant font-medium">Thu</span>
                        <span class="text-base font-bold text-on-surface">15</span>
                        <span class="w-1.5 h-1.5 rounded-full bg-transparent mt-0.5"></span>
                    </div>
                    <div onclick="selectDateCard(this)" class="date-card border border-outline-variant bg-transparent rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer hover:bg-surface-container transition-all">
                        <span class="text-xs text-on-surface-variant font-medium">Fri</span>
                        <span class="text-base font-bold text-on-surface">16</span>
                        <span class="w-1.5 h-1.5 rounded-full bg-transparent mt-0.5"></span>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-outline-variant rounded-2xl p-5 shadow-sm">
                <h4 class="text-label-lg font-bold text-primary uppercase tracking-wider flex items-center gap-2 mb-4">
                    <span class="material-symbols-outlined text-sm">schedule</span>
                    Available Timetable Working Hours
                </h4>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div onclick="selectHourSlot(this)" class="hour-slot border-2 border-primary bg-primary-container text-on-primary-container rounded-xl p-4 flex items-center justify-between cursor-pointer transition-all relative overflow-hidden shadow-sm">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-primary">wb_twilight</span>
                            <div>
                                <p class="text-sm font-black text-on-surface">09:00 AM - 10:30 AM</p>
                                <p class="text-xs text-on-surface-variant mt-0.5">Morning session focus track</p>
                            </div>
                        </div>
                        <div class="absolute top-0 right-0 p-1 check-badge">
                            <span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
                        </div>
                    </div>

                    <div onclick="selectHourSlot(this)" class="hour-slot border border-outline-variant bg-transparent rounded-xl p-4 flex items-center justify-between cursor-pointer hover:bg-surface-container transition-all relative overflow-hidden">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-on-surface-variant">wb_sunny</span>
                            <div>
                                <p class="text-sm font-bold text-on-surface">01:00 PM - 02:30 PM</p>
                                <p class="text-xs text-on-surface-variant mt-0.5">Afternoon standard track</p>
                            </div>
                        </div>
                        <div class="absolute top-0 right-0 p-1 check-badge hidden">
                            <span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
                        </div>
                    </div>

                    <div onclick="selectHourSlot(this)" class="hour-slot border border-outline-variant bg-transparent rounded-xl p-4 flex items-center justify-between cursor-pointer hover:bg-surface-container transition-all relative overflow-hidden">
                        <div class="flex items-center gap-3">
                            <span class="material-symbols-outlined text-on-surface-variant">bedtime</span>
                            <div>
                                <p class="text-sm font-bold text-on-surface">04:00 PM - 05:30 PM</p>
                                <p class="text-xs text-on-surface-variant mt-0.5">Evening acceleration review</p>
                            </div>
                        </div>
                        <div class="absolute top-0 right-0 p-1 check-badge hidden">
                            <span class="material-symbols-outlined text-primary text-[18px]" style="font-variation-settings: 'FILL' 1;">check_circle</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="space-y-6">
            <h4 class="text-label-lg font-bold text-secondary uppercase tracking-wider flex items-center gap-2">
                <span class="material-symbols-outlined text-sm">assignment_turned_in</span>
                Booking Summary Details
            </h4>

            <div class="bg-white border border-outline-variant rounded-2xl p-5 shadow-sm space-y-4">
                <div class="flex gap-3 pb-4 border-b border-outline-variant/60">
                    <div class="w-12 h-12 rounded-xl overflow-hidden flex-shrink-0">
                        <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=200" alt="Instructor Profile Picture"/>
                    </div>
                    <div>
                        <h5 class="font-bold text-on-surface text-sm">Mrs. Oluchi Nwosu</h5>
                        <p class="text-xs text-primary font-medium flex items-center gap-1 mt-0.5">
                            <span class="material-symbols-outlined text-xs" style="font-variation-settings: 'FILL' 1;">verified</span>
                            Primary 4 Mathematics Lead
                        </p>
                    </div>
                </div>

                <div class="space-y-3 text-xs border-b border-outline-variant/60 pb-4">
                    <div class="flex justify-between items-center">
                        <span class="text-on-surface-variant font-medium">Selected Date Frame:</span>
                        <span id="summary-date-string" class="font-bold text-on-surface bg-surface-container px-2 py-1 rounded">Mon, Oct 12, 2026</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-on-surface-variant font-medium">Time Window Hour:</span>
                        <span id="summary-time-string" class="font-bold text-on-surface bg-surface-container px-2 py-1 rounded">09:00 AM - 10:30 AM</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-on-surface-variant font-medium">Session Rate Plan:</span>
                        <span class="font-bold text-secondary">Free Tier Slot Included</span>
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <button id="confirm-schedule" onclick="executeScheduleCommit()" class="w-full py-3.5 bg-primary text-on-primary rounded-xl font-bold hover:opacity-90 transition-all flex items-center justify-center gap-2 shadow-md focus:outline-none">
                        <span class="material-symbols-outlined text-sm">check_circle</span>
                        Confirm Schedule
                    </button>
                    
                    <button id="skip-schedule" onclick="executeScheduleSkip()" class="w-full py-3 border-2 border-outline text-on-surface rounded-xl font-bold hover:bg-surface-container-low transition-all flex items-center justify-center gap-2 focus:outline-none">
                        <span class="material-symbols-outlined text-sm">forward</span>
                        Skip Schedule
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    /**
     * Horizontal Calendar Grid Choice Controller
     */
    function selectDateCard(element) {
        document.querySelectorAll('.date-card').forEach(card => {
            card.className = "date-card border border-outline-variant bg-transparent rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer hover:bg-surface-container transition-all";
            const indicator = card.querySelector('span:nth-child(3)');
            if(indicator) indicator.className = "w-1.5 h-1.5 rounded-full bg-transparent mt-0.5";
            
            const textDay = card.querySelector('span:nth-child(1)');
            const textNum = card.querySelector('span:nth-child(2)');
            textDay.className = "text-xs text-on-surface-variant font-medium";
            textNum.className = "text-base font-bold text-on-surface";
        });

        element.className = "date-card border-2 border-primary bg-primary/5 rounded-xl p-3 flex flex-col items-center justify-center gap-1 cursor-pointer transition-all shadow-sm";
        element.querySelector('span:nth-child(3)').className = "w-1.5 h-1.5 rounded-full bg-primary mt-0.5";
        element.querySelector('span:nth-child(1)').className = "text-xs text-primary font-bold";
        element.querySelector('span:nth-child(2)').className = "text-base font-black text-on-surface";

        // Update display text field elements inside right preview box block
        const targetDay = element.querySelector('span:nth-child(1)').textContent;
        const targetNum = element.querySelector('span:nth-child(2)').textContent;
        document.getElementById('summary-date-string').textContent = `${targetDay}, Oct ${targetNum}, 2026`;
    }

    /**
     * Timetable Hour Segment Block Switch Engine
     */
    function selectHourSlot(element) {
        document.querySelectorAll('.hour-slot').forEach(slot => {
            slot.className = "hour-slot border border-outline-variant bg-transparent rounded-xl p-4 flex items-center justify-between cursor-pointer hover:bg-surface-container transition-all relative overflow-hidden";
            slot.querySelector('.check-badge').classList.add('hidden');
            slot.querySelector('.material-symbols-outlined').className = "material-symbols-outlined text-on-surface-variant";
            slot.querySelector('p:nth-child(1)').className = "text-sm font-bold text-on-surface";
        });

        element.className = "hour-slot border-2 border-primary bg-primary-container text-on-primary-container rounded-xl p-4 flex items-center justify-between cursor-pointer transition-all relative overflow-hidden shadow-sm";
        element.querySelector('.check-badge').classList.remove('hidden');
        element.querySelector('.material-symbols-outlined').className = "material-symbols-outlined text-primary";
        element.querySelector('p:nth-child(1)').className = "text-sm font-black text-on-surface";

        // Push values to sidebar node container data layer
        const targetTimeText = element.querySelector('p:nth-child(1)').textContent;
        document.getElementById('summary-time-string').textContent = targetTimeText;
    }

    /**
     * Commit Action: Closes the modal and navigates the main dashboard to the Overview
     */
    function executeScheduleCommit() {
        const btn = document.getElementById('confirm-schedule');
        const skipBtn = document.getElementById('skip-schedule');
        
        btn.disabled = true;
        if(skipBtn) skipBtn.disabled = true;
        btn.innerHTML = `<span class="material-symbols-outlined animate-spin text-sm">progress_activity</span> Synchronizing Data...`;
        
        setTimeout(() => {
            btn.innerHTML = `<span class="material-symbols-outlined text-sm">check</span> Schedule Confirmed!`;
            btn.className = "w-full py-3.5 bg-green-600 text-white rounded-xl font-bold flex items-center justify-center gap-2 shadow-md";
            
            setTimeout(() => {
                if (typeof closeOverlay === "function") {
                    closeOverlay();
                }
                if (typeof navigate === "function") {
                    navigate('student-lesson-overview');
                } else {
                    console.error("Navigation function not found.");
                }
            }, 800);
        }, 1200);
    }

    /**
     * Skip Action: Mimics confirmation workflow navigation without writing slot states
     */
    function executeScheduleSkip() {
        const btn = document.getElementById('confirm-schedule');
        const skipBtn = document.getElementById('skip-schedule');
        
        skipBtn.disabled = true;
        if(btn) btn.disabled = true;
        skipBtn.innerHTML = `<span class="material-symbols-outlined animate-spin text-sm">progress_activity</span> Skipping Slot...`;
        
        setTimeout(() => {
            skipBtn.innerHTML = `<span class="material-symbols-outlined text-sm">forward</span> Proceeding...`;
            
            setTimeout(() => {
                if (typeof closeOverlay === "function") {
                    closeOverlay();
                }
                if (typeof navigate === "function") {
                    navigate('student-lesson-overview');
                } else {
                    console.error("Navigation function not found.");
                }
            }, 500);
        }, 800);
    }
</script>