@extends('web.default.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/learning_page/styles.css" />
    <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
    <link href="/assets/css/videojs-forest-theme.css" rel="stylesheet" />
    <link href="/assets/css/learning-page.css" rel="stylesheet" />
@endpush



@section('content')
    <div class="container overflow-auto" id="main-container">
        <!-- Navigation -->
        @include('web.default.course.learningPage.components.navbar')

        <!-- Main Layout Container -->
        <div class="row g-4">
            <!-- Left Column (Video + Comments) -->
            <div class="col-12 col-lg-8">
                {{-- content container --}}
                <div class="bg-gray-200 rounded overflow-hidden">
                    <div class="w-100 video" id="content-container">

                        <livewire:content-display :course="$course" :key="'content-display-' . time()" />

                    </div>
                </div>
                <!-- Desktop Comments Section -->
                {{-- @include('web.default.course.learningPage.components.comments.desktop', [
                    'comments' => $course->comments,
                    'inputName' => 'webinar_id',
                    'inputValue' => $course->id,
                ]) --}}

            </div>

            <!-- Right Column -->
            <div class="col-12 col-lg-4 p-0">
                <!-- Desktop: Course Content Only -->
                @include('web.default.course.learningPage.components.sidebar-desktop')


                <!-- Mobile: Collapsible Tabbed Interface -->
                @include('web.default.course.learningPage.components.sidebar-mobile')

            </div>
        </div>
        {{-- @php var_dump($course->chapters); @endphp --}}
        {{-- @dump($course->chapters); --}}
    @endsection



    @push('scripts_bottom')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.2.1/video.min.js"></script>
        <script src="/assets/default/vendors/jquery.simple.timer/jquery.simple.timer.js"></script>
        <script src="/assets/learning_page/new_scripts.js"></script>
        {{-- <script src="/assets/learning_page/scripts.min.js"></script> --}}
        <script>
            // Learning Platform Main Application
            const LearningApp = {
                debug: true,
                player: null,

                // Configuration
                config: {
                    //default item type and id from userLearningLastView
                    defaultItemType: '{{ !empty(request()->get('type')) ? request()->get('type') : (!empty($userLearningLastView) ? $userLearningLastView->item_type : '') }}',
                    defaultItemId: '{{ !empty(request()->get('item')) ? request()->get('item') : (!empty($userLearningLastView) ? $userLearningLastView->item_id : '') }}',

                    loadFirstContent: {{ (!empty($dontAllowLoadFirstContent) and $dontAllowLoadFirstContent) ? 'false' : 'true' }}

                },

                // Content Management
                content: {
                    toggleContainer(itemType, collapse) {
                        const contentContainer = document.getElementById('content-container');
                        if (LearningApp.debug) console.log("Toggling content container", itemType);

                        if (contentContainer) {
                            const videoTypes = ['file', 'quiz', 'quiz-results', 'video'];
                            const textTypes = ['text_lesson', 'quiz-content'];

                            if (videoTypes.includes(itemType)) {
                                contentContainer.classList.add("video");
                                contentContainer.classList.remove("text-content");

                            } else if (textTypes.includes(itemType)) {
                                contentContainer.classList.remove("video");
                                contentContainer.classList.add("text-content");
                            } else {
                                console.warn(`Unhandled content type: ${itemType}`);
                                contentContainer.classList.add("video");
                            }
                        }

                        if (collapse) {
                            const collapseElement = document.querySelector('#mobileTabs');
                            if (collapseElement) collapseElement.classList.remove('show');
                        } else {
                            const collapseElement = document.querySelector('#mobileTabs');
                            if (collapseElement) collapseElement.classList.add('show');
                        }
                    },

                    handleSelection(type, id, element) {
                        if (LearningApp.debug) console.log('Content clicked:', type, id);
                        LearningApp.events.emit('contentSelected', type, id);
                        this.toggleContainer(type, false);
                        this.updateUISelection(element);
                        element.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });


                    },

                    updateUISelection(element) {
                        // scroll the element into view

                        let h6Element = element.classList.contains('tab-title') ?
                            element : element.querySelector('h6.tab-title');

                        document.querySelectorAll('h6.tab-title')
                            .forEach(el => el.classList.remove('text-primary'));

                        if (h6Element) {
                            h6Element.classList.add('text-primary');
                            setTimeout(function() {
                                h6Element.scrollIntoView({
                                    behavior: 'smooth',
                                    block: 'center'
                                });
                            }, 200);

                        }
                    },
                    showCertificateModal(uniqueId) {
                        $.ajax({
                            url: `/certificate_validation/${uniqueId}/download`,
                            method: 'GET',
                            xhrFields: {
                                responseType: 'blob'
                            },
                            success: function(data) {
                                var url = URL.createObjectURL(data);
                                $('#certificateImage').attr('src', url);
                                $('#downloadCertificateLink').attr('href', url);
                                $('#certificateModal').modal('show');
                            },
                            error: function() {
                                alert('Failed to retrieve the certificate.');
                            }
                        });
                    },
                    getNextItem() {
                        $.post("/course/{{ $course->id }}/nextItem")
                            .done((response) => {
                                if (response) {

                                    if (response.original.status) {

                                        let status = response.original.status;
                                        if (status === 'completed') {
                                            // LearningApp.ui.showToast('Info',
                                            //     'No more items to complete', 'info');
                                            if (LearningApp.debug) console.log(
                                                "Course complete. Need to come up with content to show."
                                            )
                                            setTimeout(() => {
                                                LearningApp.events.emit('courseComplete', {

                                                });
                                            }, 3500);

                                            return;
                                        }
                                    }
                                    // Handle the next item (e.g., load the next video or item)
                                    //todo, handle next chapter, if this chapter is completed
                                    console.log('Next item:', response.original);
                                    let item = response.original;
                                    const quizResultsElement = document.getElementById('quiz-results');

                                    console.log('Quiz results element:', quizResultsElement);
                                    setTimeout(() => {
                                        LearningApp.events.emit('up-next', item.type, item.id, item.title);
                                    }, quizResultsElement ? 1500 : 0);

                                    setTimeout(() => {
                                        LearningApp.events.emit('contentSelected', item
                                            .type, item.id);
                                        LearningApp.content.toggleContainer(item.type,
                                            false);

                                        const nextItem = document.querySelector(
                                            `[data-content-type="${item.type}"][data-content-id="${item.id}"]`
                                        );

                                        if (nextItem) {
                                            LearningApp.content.updateUISelection(
                                                nextItem);
                                            LearningApp.expandParentAccordion(nextItem);
                                        }
                                        LearningApp.content.getCompletedChapters();
                                    }, quizResultsElement ? 5000 : 3500);

                                } else {
                                    LearningApp.ui.showToast('Info',
                                        'No more items to complete', 'info');
                                }
                            })
                            .fail(() => {
                                LearningApp.ui.showToast('Error!',
                                    'Failed to get the next item', 'error', 10000);
                            });
                    },
                    getCompletedChapters() {
                        $.post("/course/{{ $course->id }}/completedChapters")
                            .done((response) => {
                                if (response) {
                                    if (LearningApp.debug) console.log('Completed chapters:', response);
                                    LearningApp.content.updateChapterCompletionStatus(response);
                                }

                            })
                            .fail(() => {
                                LearningApp.ui.showToast('Error!',
                                    'Failed to get the next item', 'error', 10000);
                            });
                    },
                    updateChapterCompletionStatus(chapters) {
                        console.log('Updating chapter completion status:', chapters);
                        Object.entries(chapters).forEach(([chapterId, isComplete]) => {
                            if (LearningApp.debug) console.log(`Chapter ${chapterId}: ${isComplete}`);

                            if (isComplete) {
                                document.getElementById('chapter-complete-' + chapterId).classList.remove('d-none');
                                document.getElementById('chapter-number-' + chapterId).classList.add('d-none');
                            } else {
                                document.getElementById('chapter-complete-' + chapterId).classList.add('d-none');
                                document.getElementById('chapter-number-' + chapterId).classList.remove('d-none');
                            }
                        });
                    },


                },

                // Video Player
                video: {
                    initialize(videoID) {

                        // Cleanup existing players
                        const players = videojs.getPlayers();
                        if (players) {
                            Object.values(players).forEach(player => {
                                if (player?.dispose) player.dispose();
                            });
                        }

                        const videoElementId = 'video-' + videoID;
                        const videoElement = document.getElementById(videoElementId);

                        if (!videoElement) return;

                        LearningApp.player = videojs(videoElementId, {
                            controls: true,
                            autoplay: true,
                            fluid: true,
                            controlBar: {
                                skipButtons: {
                                    backward: 10
                                }
                            },
                            sources: [{
                                src: videoElement.getAttribute('data-src'),
                                type: 'video/mp4'
                            }]
                        });

                        // Set Volume based on user preference
                        fetch('/user/volume', {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                        'content')
                                },
                                credentials: 'same-origin'
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.volume !== undefined) {
                                    LearningApp.player.volume(data.volume);
                                }
                            });

                        // Set Up Event Handlers

                        this.setupCaptionHandler(LearningApp.player);
                        this.setupEndedHandler(videoElement);
                        this.setupVolumeHandler(LearningApp.player);
                    },
                    setupCaptionHandler(player) {
                        if (false) return;
                        console.log("Setting up caption handler");

                        player.on('ready', function() {
                            console.log("Player is ready, setting up captions");

                            var tracks = player.textTracks();

                            console.log("Tracks length:", tracks.length);

                            for (var i = 0; i < tracks.length; i++) {
                                var track = tracks[i];

                                if (track) {
                                    console.log("Track " + i + ":", track.kind, track.language);

                                    // Find the English captions track and mark it as "showing".
                                    if (track.kind === 'captions' && track.language === 'en') {
                                        track.mode = 'showing';
                                        console.log("Set English captions to showing");
                                    }
                                } else {
                                    console.log("Track " + i + " is undefined");
                                }
                            }

                            // Log all track modes after setting
                            for (var i = 0; i < tracks.length; i++) {
                                var track = tracks[i];
                                if (track) {
                                    console.log("Track " + i + " mode:", track.mode);
                                }
                            }
                        });
                    },
                    setupVolumeHandler(player) {
                        player.on('volumechange', function() {
                            const volume = player.volume();
                            console.log('Volume changed:', volume);

                            // Send POST request to set the volume
                            fetch('/user/volume', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                            .getAttribute('content')
                                    },
                                    body: JSON.stringify({
                                        volume: volume
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.status === 'success') {
                                        console.log('Volume updated successfully');
                                    } else {
                                        console.error('Failed to update volume');
                                    }
                                })
                                .catch(error => {
                                    console.error('Error updating volume:', error);
                                });
                        });
                    },
                    setupEndedHandler(videoElement) {
                        LearningApp.player.on('ended', () => {
                            const data = {
                                item: videoElement.getAttribute('data-item'),
                                item_id: videoElement.getAttribute('data-item-id'),
                                status: true
                            };

                            $.post('/course/' + videoElement.getAttribute('data-course-id') + '/learningStatus',
                                    data)
                                .done(() => {
                                    // LearningApp.ui.showToast('Success!', 'You have completed this item',
                                    //     'success');
                                    LearningApp.events.emit('learningStatusUpdated');



                                    //mark this item as completed
                                    const completedBadge = document.getElementById("completed-badge-" +
                                        videoElement.getAttribute('data-item-id'));
                                    if (completedBadge) completedBadge.classList.remove('d-none');
                                    // Get the next item
                                    LearningApp.content.getNextItem();
                                })
                                .fail(() => {
                                    LearningApp.ui.showToast('Error!', learningToggleLangError, 'error',
                                        10000);
                                });
                        });
                    }
                },

                // Comments System
                comments: {
                    initialize() {
                        this.initializeCommentForms();
                        this.initializeReplyForms();
                    },

                    initializeCommentForms() {
                        document.querySelectorAll('#mobile-comment-form, #desktop-comment-form')
                            .forEach(form => {
                                form.addEventListener('submit', async (e) => {
                                    e.preventDefault();
                                    await this.handleCommentSubmit(form);
                                });
                            });
                    },

                    initializeReplyForms() {
                        document.querySelectorAll(
                            '#mobile-reply-form, #desktop-reply-form, [id^="mobile-reply-to-reply-"], [id^="desktop-reply-to-reply-"]'
                        ).forEach(container => {
                            const form = container.querySelector('form');
                            if (form) {
                                form.addEventListener('submit', async (e) => {
                                    e.preventDefault();
                                    await this.handleReplySubmit(form, container);
                                });
                            }
                        });
                    },

                    async handleCommentSubmit(form) {
                        const formData = new FormData(form);
                        const textarea = form.querySelector('textarea');

                        try {
                            const response = await this.submitForm('/comments/store', formData);
                            LearningApp.ui.showToast(response.title, response.msg, response.status);
                            textarea.value = '';
                            textarea.style.height = '';
                        } catch (error) {
                            LearningApp.ui.showToast('Error', 'Something went wrong', 'error');
                        }
                    },

                    async handleReplySubmit(form, container) {
                        const formData = new FormData(form);
                        const textarea = form.querySelector('textarea');
                        const action = form.getAttribute('action');

                        try {
                            const response = await this.submitForm(action, formData);
                            LearningApp.ui.showToast(response.title, response.msg, response.status);
                            textarea.value = '';
                            container.style.display = 'none';
                        } catch (error) {
                            LearningApp.ui.showToast('Error', 'Something went wrong', 'error');
                        }
                    },

                    async submitForm(url, formData) {
                        const response = await fetch(url, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });

                        if (!response.ok) throw new Error('Network response was not ok');
                        return await response.json();
                    }
                },

                // UI Utilities
                ui: {
                    showToast(title, text, icon, timer = 3000) {
                        Swal.fire({
                            title,
                            text,
                            icon,
                            toast: true,
                            position: 'center',
                            showConfirmButton: false,
                            timer,
                            timerProgressBar: true
                        });
                    },

                    initializeMobileTabs() {
                        const tabsWrapper = document.querySelector('.mobile-tabs-wrapper');
                        const tabsContent = document.querySelector('#mobileTabs');
                        const mainContainer = document.querySelector('#main-container');

                        tabsContent?.addEventListener('show.bs.collapse', () => {
                            tabsWrapper?.classList.remove('collapsed');
                            mainContainer?.classList.add('h-100');
                        });

                        tabsContent?.addEventListener('hide.bs.collapse', () => {
                            tabsWrapper?.classList.add('collapsed');
                        });
                    }
                },
                // Events System
                events: {
                    listeners: {},
                    emit(event, ...args) {
                        if (this.listeners[event]) {
                            this.listeners[event].forEach(callback => callback(...args));
                        }
                        // Also emit to Livewire if available
                        if (window.Livewire) {
                            window.Livewire.emit(event, ...args);
                        }
                    },
                    on(event, callback) {
                        if (!this.listeners[event]) {
                            this.listeners[event] = [];
                        }
                        this.listeners[event].push(callback);
                    },
                    off(event, callback) {
                        if (this.listeners[event]) {
                            this.listeners[event] = this.listeners[event]
                                .filter(cb => cb !== callback);
                        }
                    }
                },
                quiz: {
                    currentQuestion: 1,
                    totalQuestions: 0,

                    initialize(totalQuestions) {

                        this.totalQuestions = totalQuestions;
                        this.currentQuestion = 1;
                        this.render();
                    },

                    showQuestion(index) {

                        if (index >= 0 && index <= this.totalQuestions) {
                            if (LearningApp.debug) console.log('Showing question:', index);
                            this.currentQuestion = index;
                            this.render();
                        }
                    },

                    render() {

                        document.querySelectorAll('.question-container').forEach(container => {
                            container.style.display = 'none';
                        });
                        document.getElementById(`question-${this.currentQuestion}`).style.display = 'block';
                    }


                },

                // Initialization
                initialize() {
                    this.setupEventListeners();
                    // this.comments.initialize();
                    this.ui.initializeMobileTabs();
                    LearningApp.events.emit('initialize', {});

                    if (this.config.defaultItemType && this.config.defaultItemId) {
                        this.loadDefaultContent();
                    }

                    window.Livewire.on('video-ready', (data) => {
                        this.video.initialize(data.id);
                    });
                },

                setupEventListeners() {
                    document.addEventListener('click', (e) => {

                        //check to see if the item clicked was a content item
                        const clickedItem = e.target.closest('[data-content-type][data-content-id]');


                        if (!clickedItem) {

                        }



                        //Check the order of the chapter that was clicked
                        const chapterIDElement = e.target.closest('[data-chapter-order]');

                        if (chapterIDElement) {

                            //chapter order (1-n)
                            const chapterOrder = chapterIDElement.dataset.chapterOrder;



                            if (LearningApp.debug) console.log('Chapter order:', chapterOrder);


                            //fix for inverted accordion styling.
                            //This is a hacky fix for the accordion styling.
                            //It is not ideal, but it works. fix later
                            const button = e.target.closest('.accordion-button');


                            if (button) {
                                const collapse = document.querySelector(`#${button.getAttribute('aria-controls')}`);
                                if (LearningApp.debug) console.log('Button and collapse:', button, collapse);
                                if (button && collapse) {
                                    if (LearningApp.debug) console.log('Button and collapse:', button, collapse);
                                    setTimeout(() => {
                                        let show = collapse.classList.contains('show');
                                        if (show) {
                                            button.classList.remove('collapsed');
                                            button.setAttribute('aria-expanded', 'true');
                                        } else {
                                            button.classList.add('collapsed');
                                            button.setAttribute('aria-expanded', 'false');
                                        }
                                    }, 400);
                                    return;
                                }
                            }


                            if (chapterOrder && chapterOrder > 1) {
                                //if chapter is greater than the one we currently have access to, don't load the item, and give toast
                                if (chapterOrder >
                                    {{ $course->getCurrentChapter() ? $course->getCurrentChapter() : 1 }}) {
                                    // e.preventDefault();
                                    if (clickedItem && clickedItem.dataset.contentType) {
                                        LearningApp.ui.showToast('Error!',
                                            'Please finish the previous chapters before continuing',
                                            'error',
                                            1500);
                                        return;
                                    }
                                }

                            }


                        }
                        if (LearningApp.debug) console.log('Clicked item:', clickedItem);

                        //check to see if the item clicked was a content item
                        //if it was, and it already has text-primary, return (it's already selected)
                        if (!clickedItem || clickedItem.classList.contains('text-primary')) {

                            return;

                        }


                        //if we've made it this far, let's go ahead with the content selection
                        //prevent the default click event from happening
                        //and emit the contentSelected event
                        e.preventDefault();

                        this.content.handleSelection(
                            clickedItem.dataset.contentType,
                            clickedItem.dataset.contentId,
                            clickedItem
                        );
                    });
                },

                loadDefaultContent() {
                    if (this.debug) console.log('Loading default content:', this.config.defaultItemType, this.config
                        .defaultItemId);

                    // Check if the course is complete
                    $.post("/course/{{ $course->id }}/nextItem")
                        .done((response) => {
                            if (response) {
                                if (response.original.status) {
                                    let status = response.original.status;
                                    if (status === 'completed') {
                                        if (LearningApp.debug) console.log(
                                            "Course complete. Loading course-complete page.");
                                        setTimeout(() => {
                                            LearningApp.events.emit('initialize', {});
                                        }, 100);

                                        return;
                                    }
                                }

                                // Handle the next item (e.g., load the next video or item)
                                console.log('Next item:', response.original);
                                let item = response.original;
                                LearningApp.events.emit('contentSelected', item.type, item.id);
                                LearningApp.content.toggleContainer(item.type, false);

                                const nextItem = document.querySelector(
                                    `[data-content-type="${item.type}"][data-content-id="${item.id}"]`
                                );

                                if (nextItem) {
                                    this.content.updateUISelection(nextItem);
                                    this.expandParentAccordion(nextItem);
                                }
                            } else {
                                LearningApp.ui.showToast('Info', 'No more items to complete', 'info');
                            }
                        })
                        .fail(() => {
                            LearningApp.ui.showToast('Error!', 'Failed to get the next item', 'error', 10000);
                        });
                },

                expandParentAccordion(element) {
                    const accordion = element.closest('.accordion-item');
                    if (accordion) {
                        const button = accordion.querySelector('.accordion-button');
                        if (button?.classList.contains('collapsed')) {
                            button.click();
                            if (LearningApp.debug) console.log('Expanding accordion:', accordion);
                        }
                    }
                }
            };

            // Initialize when DOM is ready or Livewire is available
            if (window.Livewire) {
                LearningApp.initialize();
            } else {
                document.addEventListener('DOMContentLoaded', () => LearningApp.initialize());
            }
        </script>
    @endpush