@extends('layouts.frontendTemplate')

<style>
    li a:hover {
        color: #E23134 !important
    }

    .category span {
        font-size: 16px;
    }

    .category p {
        font-size: 14px;
    }


    .video-wrapper {
        position: unset !important;
    }

    .video-wrapper iframe {
        width: 100% !important;
        height: 400px !important;
    }
</style>

@section('main')

    <!-- start page title section -->
    <section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-8 col-md-6 text-center text-md-start">
                    <!-- start page title -->
                    <h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name }}</h1>
                    <!-- end page title -->
                </div>
                <div
                    class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
                    <!-- breadcrumb -->
                    <ul class="text-center text-md-end">
                        <li><a href="{{ url('') }}" class="text-white">Home</a></li>
                        <li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
                        <li><a href="{{ url('category/subject/' . $categoryView->id) }}"
                                class="text-white">{{ $categoryView->name }}</a></li>
                        <li class="text-white">{{ $itemView->name }}</li>
                    </ul>
                    <!-- end breadcrumb -->
                </div>
            </div>
        </div>
    </section>
    <!-- end page title section -->

    <!-- start tab style 01 section -->
    <section class="wow animate__fadeIn">
        <div class="container tab-style2">
            <div class="row">
                <div class="col-12 text-center">
                    <img src="{{ url('images/logo.png') }}" class="logo-dark margin-50px-bottom" alt="GREATER CHIANG MAI">
                    <p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
                        {{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
                    </p>
                    <h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
                        {{ $itemView->name }}</h5>
                    <span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
                </div>

                <div class="col-12 my-5">

                    <h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
                        style="font-size: 26px">{{ $itemView->name }}</h2>


                </div>
            </div>


            <div id="description" name="description"></div>
        </div>
    </section>
    <!-- end tab style 01 section -->


@stop

@section('js')


    <!-- Include Editor.js core -->
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

    <!-- Include the plugins -->
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>>
    <script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/code"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/table"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/marker"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/warning"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>

    <script>
        // Custom video tool for embedding videos
        class VideoTool {
            constructor({
                data
            }) {
                this.data = data || {};
            }

            // Render input for video URL
            render() {
                const wrapper = document.createElement("div");
                wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper

                const video = document.createElement("video");
                video.controls = true; // Enable controls for playback
                video.style.width = "100%";
                video.style.marginTop = "10px";
                video.src = this.data.url || "";

                wrapper.appendChild(video);
                return wrapper;
            }
        }

        class YoutubeEmbed {
            /**
             * Define the toolbox settings for the Editor.js toolbar.
             */
            static get toolbox() {
                return {
                    title: "YouTube",
                    icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
                };
            }

            constructor({
                data,
                config,
                api,
                readOnly
            }) {
                this.data = data || {};
                this.readOnly = readOnly;
                this.wrapper = null;
                this.url = this.data.url || '';
                this.isEdited = false;
            }

            /**
             * Render the input field and YouTube preview.
             */
            render() {
                this.wrapper = document.createElement('div');
                this.wrapper.classList.add('block-wrapper');

                const input = document.createElement('input');
                input.value = this.url;
                input.placeholder = "Paste YouTube URL here...";
                input.style.width = '100%';

                this.wrapper.appendChild(input);
                this._createIframe(this.url);

                input.addEventListener('change', (event) => {
                    this.isEdited = true;
                    this.url = event.target.value;
                    this._createIframe(this.url);
                });

                return this.wrapper;
            }

            /**
             * Create the iframe for the YouTube video.
             */
            _createIframe(url) {
                const videoId = this._extractVideoID(url);
                if (!videoId) {
                    if (this.isEdited) {
                        this.wrapper.querySelector('input').classList.add('invalid');
                    }
                    return;
                }

                this.wrapper.innerHTML = ''; // Clear the wrapper

                const plyrContainer = document.createElement('div');
                plyrContainer.classList.add('video-wrapper');

                const iframe = document.createElement('iframe');
                iframe.src = `https://www.youtube.com/embed/${videoId}`;
                iframe.allowFullscreen = true;

                plyrContainer.appendChild(iframe);
                this.wrapper.appendChild(plyrContainer);
            }

            /**
             * Extract the YouTube video ID from the URL.
             */
            _extractVideoID(url) {
                const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
                const match = url.match(regex);
                return match ? match[1] : null;
            }

            /**
             * Return the saved data for this block.
             */
            save(blockContent) {
                return {
                    url: this.url,
                };
            }

            /**
             * Notify the core that this tool supports read-only mode.
             */
            static get isReadOnlySupported() {
                return true;
            }
        }

        const tools = {
            header: {
                class: Header,
                inlineToolbar: false,
            },
            youtube: YoutubeEmbed,
            embed: {
                class: Embed,
                inlineToolbar: false,
            },
            linkTool: {
                class: LinkTool,
                inlineToolbar: false,
            },
            video: {
                class: VideoTool,
                inlineToolbar: false,
            },
            image: {
                class: InlineImage,
                inlineToolbar: false,
            },
        }

        const descriptionData = {!! json_encode($itemView->description) !!};
        const editorDescription = new EditorJS({
            holder: 'description',
            tools: tools,
            //readOnly: true,
            data: JSON.parse(descriptionData),
            minHeight: 0,
            onReady: () => {
                const editorContainer = document.querySelector('#description');

                // Disable editing for all tools
                if (editorContainer) {
                    const allElements = editorContainer.querySelectorAll('*');
                    allElements.forEach(element => {
                        if (element.hasAttribute('contenteditable')) {
                            element.setAttribute('contenteditable', 'false'); // Set to non-editable
                        }
                    });
                }

                // Hide toolbar actions
                const toolbarActions = document.querySelectorAll(
                    '.ce-toolbar__actions, .ce-toolbar__actions--opened');
                toolbarActions.forEach(action => {
                    action.style.display = 'none'; // Hide the action toolbars
                });

                // Optionally hide any popups
                const popoverContainer = document.querySelector('.ce-popover__container');
                if (popoverContainer) {
                    popoverContainer.style.display = 'none';
                }
            },
        });
    </script>



@endsection