@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_en }}</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_en }}</a></li>
                        <li class="text-white">{{ $itemView->name_en }}</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 margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
                <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_en }}</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_en }}</h2>

                    {{-- <p>
                        {!! $itemView->description_en !!}</p>

                    <br /> --}}

                    <div class="card-body pt-0">

                        <div class="mb-10 fv-row">
                            <label class="required form-label">Categories</label>
                            <div class="d-flex align-items-center mt-3">
                                @foreach ($categoriesView as $item)
                                    <label
                                        class="form-check form-check-custom form-check-inline form-check-solid me-5 is-invalid">
                                        <input class="form-check-input" name="categories[]" type="checkbox"
                                            value="{{ $item->id }}" @if (in_array($item->id, explode(',', $itemView->category_ids))) checked @endif>
                                        <span class="fw-semibold ps-2 fs-6">
                                            {{ $item->name . '(' . $item->name_en . ')' }}
                                        </span>
                                    </label>
                                @endforeach

                            </div>

                        </div>

                        <div class="mb-10 fv-row">
                            <div class="position-relative d-flex align-items-center">
                                <span class="svg-icon svg-icon-2 position-absolute mx-4">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3"
                                            d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
                                            fill="currentColor" />
                                        <path
                                            d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
                                            fill="currentColor" />
                                        <path
                                            d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                                <input class="form-control form-control-solid ps-12" type="text" id="due_date"
                                    name="due_date"
                                    value="{{ $itemView->due_date ? date('d-m-Y', strtotime($itemView->due_date)) : '' }}">





                            </div>
                        </div>

                        <div class="mb-10 fv-row">
                            <label class="required form-label">Subject</label>
                            <input disabled type="text" name="name" class="form-control mb-2 col-6"
                                value="{{ $itemView->name }}" />
                        </div>


                        <div class="mb-10 fv-row">
                            <label class="required form-label">Subject (EN)</label>
                            <input disabled type="text" name="name_en" class="form-control mb-2 col-6"
                                value="{{ $itemView->name_en }}" />
                        </div>


                        <div id="description"></div>

                    </div>
                </div>
            </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");

                const input = document.createElement("input");
                input.type = "text";
                input.placeholder = "Enter video URL";
                input.value = this.data.url || "";
                input.style.width = "100%";
                input.style.display = "none";

                const video = document.createElement("video");
                video.controls = true;
                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: ['link', 'bold', 'italic'], // Enable toolbar options
                config: {
                    placeholder: 'Enter a header',
                    levels: [2, 3, 4], // Set header levels
                    defaultLevel: 3,
                },
            },
            breakLine: {
                class: BreakLine,
                inlineToolbar: true,
                shortcut: 'CMD+SHIFT+ENTER',
            },
            youtube: YoutubeEmbed,
            embed: {
                class: Embed,
                inlineToolbar: true,
                config: {
                    services: {
                        youtube: true,
                        vimeo: true,
                    },
                },
            },
            linkTool: {
                class: LinkTool,
                config: {
                    endpoint: '',
                },
            },
            video: {
                class: VideoTool,
                inlineToolbar: true,
            },
            image: {
                class: InlineImage,
                inlineToolbar: true,
                config: {
                    embed: {
                        display: true,
                    },
                },
            },
        }

        const isReadOnly = true;

        const descriptionData = {!! json_encode($itemView->description) !!};
        const editorDescription = new EditorJS({
            holder: 'description',
            tools: tools,
            minHeight: 0,
            data: JSON.parse(descriptionData)
        });
    </script>



@endsection