@extends('layouts.frontendTemplate')

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

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

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

    .image-tool__caption,
    .inline-image__caption,
    .ce-toolbar--opened {
        /*display: none;*/
        border: unset;
        box-shadow: unset;
        font-style: oblique;
        text-align: center;
        margin-top: 0;
        padding-top: 0
    }

    .ce-paragraph {
        font-size: 16px !important;
    }


    .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/chiangmai') }}" class="text-white">Categories</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">
                <div class="col-12 text-center">
                    <img src="{{ url('images/logo_thegreaterchiangmai_2.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>
                    <div style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
                </div>
            </div>


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

    {{-- Random Articles  --}}
    <div class="row">
        <div class="col-12 blog-content">
            <ul
                class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
                <li class="grid-sizer"></li>

                @foreach ($randomArticlesView as $item)
                    <li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
                        <div class="blog-post bg-light-gray">
                            <div class="blog-post-images overflow-hidden position-relative">
                                <a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
                                    <img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
                                    <div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
                                    </div>
                                </a>
                            </div>
                            <div class="post-details padding-40px-all md-padding-20px-all">
                                <a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
                                    class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
                                    {{ $item->name_en }}
                                </a>
                                <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
                                <div class="author">
                                    <span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
                                        {{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('Do MMMM') }}
                                        {{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('YYYY') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                @endforeach

            </ul>
        </div>
    </div>

@stop

@section('js')



    <script>
        function initAjaxSetupToken() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        }

        function updateArticleCount() {

            const articleId = "{{ $itemView->id }}";

            // set up ajax
            initAjaxSetupToken();

            const ajaxProp = {
                url: "{{ url('update-article-count') }}", // Endpoint to update count
                dataType: 'json',
                method: 'POST', // Use POST to update data
                data: JSON.stringify({
                    id: articleId
                }), // Corrected stringify method
                contentType: 'application/json', // Send JSON payload
                processData: false, // Not needed, but harmless
                success: function(response) {
                    //console.log('Article view count updated:', response);
                },
                error: function(xhr, status, error) {
                    console.error('Error updating view count:', error);
                }
            };


            $.ajax(ajaxProp).done(function(res) {
                if (res.status) {
                    console.log('update success');
                } else {
                    console.log('update fail')
                }
            }).fail(function(xhr, status, error) {
                console.log('update fail')
            });
        }
        updateArticleCount();
    </script>


    <!-- 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/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-break-line"></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,
            },
            breakLine: {
                class: BreakLine,
                inlineToolbar: true,
                shortcut: 'CMD+SHIFT+ENTER',
            },
            youtube: YoutubeEmbed,
            embed: {
                class: Embed,
                inlineToolbar: false,
            },
            video: {
                class: VideoTool,
                inlineToolbar: false,
            },
            image: {
                class: ImageTool,
            },
            inlineImage: {
                class: InlineImage,
                inlineToolbar: true,
            },
        }

        const descriptionData = {!! json_encode($itemView->description_en) !!};
        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
                        }
                        if (element.tagName.toLowerCase() === 'video') {
                            element.style.pointerEvents = 'auto';
                            return;
                        }
                        if (element.tagName.toLowerCase() === 'a') {
                            element.setAttribute('target', '_blank');
                        }

                    });
                }


                // 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';
                }

                const elements = $(".image-tool__caption[data-placeholder='Caption']");
                // Iterate over the matched elements and hide them
                elements.each(function() {
                    $(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
                });
            },
        });
    </script>



@endsection