@extends('adminlte::page')

@section('title', 'Content')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">edit Content</h1>
@stop
@php $index_count1=1; @endphp

@section('content')
    <div class="card shadow rounded-lg mb-3 px-5 py-2">
        @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li> 
                    @endforeach
                </ul>
            </div>
        @endif

        <form id="file-upload" method="POST" action="" enctype="multipart/form-data">
  
            {{ csrf_field() }}
            <input type="hidden" name="id" value="{{$content->id}}" id="rid"/>

			<div class="col-md-6">
                <div class="form-group">
                    <label for="title">Title <span class="text-danger"> *</span></label>
                    <input type="text" name="title" class="form-control" id="title"  placeholder="Name..." value="{{$content->title }}" required>
                </div>
            </div>
         
            <div class="form-floating my-3">
                <label for="floatingTextarea">Description</label>
                <textarea type="hidden" class="form-control"  name="description" placeholder="Write Here..." id="content" rows="7" cols="100" >{{$content->content}}</textarea>
            </div>
            <div id="word-count" style="margin-top: 10px; font-weight: bold;"></div>

            <div class="row justify-content-between my-3">
                <div class="col-md-2"></div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="submit">&nbsp;&nbsp;</label>
                        <input class="btn btn-block btn-success btn-lg" type="submit" value="Submit">
                    </div>
                </div>
            </div>
        </form>
    </div>
      
    <!-- </div> -->
@stop

@section('css')
    <style>
        .input-group .custom-file {
            overflow: hidden; 
        }
    
    .cke_notification_message,
    .cke_notification,
    .cke_notification_warning,
    .cke_notification_close {
        display: none !important;
    }

    .tox-edit-area .highlight-paste {
        background-color: transparent !important;
    }
</style>

     {{-- Add here extra stylesheets --}}
    {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
  
@stop

@section('js')

{{--<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>--}}
<script src="https://cdn.tiny.cloud/1/3qf9xg4v18lj5lod7796irb1f87026w00nmw7o5knt3ketr2/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    
    /*CKEDITOR.replace('content', {
        height: 400,
        extraAllowedContent: 'span(highlight-paste)[style]'
        // removePlugins: 'undo,redo',
        // disableNativeUndoRedo: true
    });*/

    {{--let currentTitle = '';
    let lastSavedContent = '';
    let isTyping = false;
    let debounceTimer;

    /**************Tinymce**********/
    tinymce.init({
        selector: 'textarea#content',
        entity_encoding: 'raw', 
        charset: 'utf-8',
        height: 600,
        setup: function (editor) {
            editor.on('init change', function () {
                editor.save();
            });
        },
        browser_spellcheck: true,
        plugins: [
            'advlist', 'accordion', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
            'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code','advcode', 'fullscreen', 'insertdatetime',
            'media', 'table', 'advtable', 'emoticons', 'help', 'quickbars', 'directionality', 'codesample' ,'editimage','autosave','nonbreaking','lists','checklist','casechange','paste','permanentpen','tableofcontents'
        ],
        toolbar: [
            'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'rotateleft rotateright | bullist numlist outdent indent | link image | ' +
            'print preview media fullscreen | forecolor backcolor emoticons | help | ' +
            'ltr rtl | quickimage quicktable quicklink | code codesample restoredraft |' + 'checklist |'  + 'casechange |'  + 'permanentpen |' + 'tableofcontents |' +'charmap'
        ],
        image_caption: true,
        autosave_interval: '0s',
        autosave_restore_when_empty: false,
        menu: {
            favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
        },
        
        menubar: 'favs file edit view insert format tools table help',
        image_title: true,
        automatic_uploads: true,
        file_picker_types: 'image',
        convert_urls:true,
        relative_urls:false,
        remove_script_host:false,
        
        images_upload_url: '{{ route('ckeditor.upload', ['_token' => csrf_token() ]) }}',
        file_picker_callback: (cb, value, meta) => {
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.addEventListener('change', (e) => {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.addEventListener('load', () => {
                    const id = 'blobid' + (new Date()).getTime();
                    const blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    const base64 = reader.result.split(',')[1];
                    const blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), { title: file.name });
                });
                reader.readAsDataURL(file);
            });

            input.click();
        },
        
        extended_valid_elements: 'script[src|async|defer|type|charset]',
        valid_children: '+body[script]',
        // Optional: Adding schema to ensure these elements are supported
        schema: 'html5'
    });--}}

</script>


<script>

function htmlEncode(str) {
    return str.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;")
              .replace(/"/g, "&quot;")
              .replace(/'/g, "&#039;");
}

document.addEventListener('DOMContentLoaded', function () {
    const titleInput = document.getElementById('title');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    let currentTitle = '';
    let lastSavedContent = '';
    let isTyping = false;
    let debounceTimer;
    const ridInput = document.getElementById('rid');
    let savedContentId = ridInput ? ridInput.value : null;

    if (titleInput) {
        currentTitle = titleInput.value.trim();
        titleInput.addEventListener('input', function () {
            currentTitle = titleInput.value.trim();
        });
    }

    tinymce.init({
        selector: 'textarea#content',
        entity_encoding: 'raw',
        charset: 'utf-8',
        content_css: false, // disables TinyMCE's default CSS
        content_style: `span.highlight-paste[style*="background-color"] {
            background-color: transparent !important;
            }`,
        height: 600,
        comments_author: 'Your Name',
        browser_spellcheck: true,
        setup: function (editor) {
            editor.on('init', function () {
                editor.save();
            });

            editor.addCommand('Undo', function () {
                console.log('Undo is disabled');
            });

            editor.addCommand('Redo', function () {
                console.log('Redo is disabled');
            });

            // You can still prevent keyboard shortcuts as a backup
            editor.on('keydown', function (event) {
                if ((event.ctrlKey || event.metaKey) && (event.key === 'z' || event.key === 'y')) {
                    event.preventDefault();
                    console.log('Keyboard undo/redo blocked'); 
                }
            });

            // Word count
            editor.on('input', function () {
                const text = editor.getContent({ format: 'text' }).replace(/\s+/g, ' ').trim();
                const wordCount = text ? text.split(' ').length : 0;
                const wordCountDisplay = document.getElementById('word-count');
                if (wordCountDisplay) {
                    wordCountDisplay.textContent = `Word Count: ${wordCount}`;
                }
            });

            // Auto-save
            function saveContent() {
                const content = editor.getContent().trim();
                if (content && content !== lastSavedContent && currentTitle) {
                    lastSavedContent = content;

                    const payload = {
                        description: content,
                        title: currentTitle
                    };

                    if (savedContentId) {
                        payload.id = savedContentId;
                    }

                    fetch("/admin/content/autosave", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": csrfToken
                        },
                        body: JSON.stringify(payload)
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log("Auto-saved at", new Date().toLocaleTimeString());
                        if (data.id) {
                            savedContentId = data.id;
                            if (ridInput) ridInput.value = data.id;
                        }
                    })
                    .catch(error => {
                        console.error("Auto-save error:", error);
                    });
                }
            }

            editor.on('input', function () {
                isTyping = true;
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    isTyping = false;
                    saveContent();
                }, 5000);
            });

            setInterval(() => {
                if (isTyping && currentTitle) {
                    saveContent();
                }
            }, 5000);

            editor.on('paste', function (e) {
                e.preventDefault();

                const clipboardData = e.clipboardData || window.clipboardData;
                const pastedText = clipboardData.getData('text/plain');

                const safeText = htmlEncode(pastedText);
                const spanHtml = `<span class="highlight-paste" style="background-color: yellow;">${safeText}</span>&nbsp;`;

                editor.insertContent(spanHtml);

                // Move caret outside the span
                setTimeout(() => {
                    const dom = editor.dom;
                    const body = editor.getBody();
                    const spans = body.querySelectorAll('span.highlight-paste');

                    if (spans.length > 0) {
                        const lastSpan = spans[spans.length - 1];
                        const rng = editor.selection.getRng();
                        if (lastSpan.nextSibling) {
                            rng.setStartAfter(lastSpan.nextSibling);
                            rng.setEndAfter(lastSpan.nextSibling);
                            editor.selection.setRng(rng);
                        }
                    }
                }, 0);
            });

            editor.ui.registry.addButton('addcomment', {
                text: 'Add Comment',
                onAction: function () {
                    const selectedText = editor.selection.getContent({ format: 'html' });

                    if (selectedText.length === 0) {
                    alert("Please select some text to comment on.");
                    return;
                    }

                    const commenterName = prompt("Enter your name:");
                    if (!commenterName) return;

                    const commentText = prompt("Enter your comment:");
                    if (!commentText) return;

                    const fullComment = `Comment by ${commenterName}: ${commentText}`;

                    const commentedHTML = `
                    <span class="custom-comment"
                            data-commenter="${commenterName}"
                            data-comment="${commentText}"
                            style="border-bottom: 1px dashed #999; cursor: help;"
                            title="${fullComment}">
                        ${selectedText}
                    </span>`;

                    editor.selection.setContent(commentedHTML);
                }
            });
        },
        plugins: [
            'advlist', 'accordion', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
            'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'advcode', 'fullscreen', 'insertdatetime',
            'media', 'table', 'advtable', 'emoticons', 'help', 'quickbars', 'directionality', 'codesample',
            'editimage', 'nonbreaking', 'lists', 'checklist', 'casechange', 'permanentpen', 'tableofcontents'
        ],
        toolbar: 'styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
            'rotateleft rotateright | bullist numlist outdent indent | link image | ' +
            'print preview media fullscreen | forecolor backcolor emoticons | help | ' +
            'ltr rtl | quickimage quicktable quicklink | code codesample restoredraft | checklist | casechange | permanentpen | tableofcontents | charmap | addcomment | code',
        image_caption: true,
        //autosave_interval: '0s',
        //autosave_restore_when_empty: false,
        menu: {
            favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
        },
        menubar: 'favs file edit view insert format tools table help',
        image_title: true,
        automatic_uploads: true,
        file_picker_types: 'image',
        convert_urls: true,
        relative_urls: false,
        remove_script_host: false,
        extended_valid_elements: 'script[src|async|defer|type|charset]',
        valid_children: '+body[script]',
        schema: 'html5'
    });
});
</script>

@stop