@extends('adminlte::page')

@section('title', ' Content')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Add 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="0" id="rid"/>

            <meta name="csrf-token" content="{{ csrf_token() }}">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="title">Category <span class="text-danger"> *</span></label>
                    <select name="cnt_cat" id="cnt_cat" class="form-control col-md-8 mb-8" required>
                        <option value="">select category</option>
                        <option value="1">Forums</option>
                        <option value="2">Blogs</option>
                        <option value="3">Website Content</option>
                        <option value="4">FAQ's</option>
                        <option value="5">Tools</option>
                        <option value="6">Others</option> 
                        <option value="7">US Blog</option> 
                    </select>
                </div>
            </div>

			<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..."  required>
                </div>
            </div>
         
            <div class="form-group">
                <label>Content</label>
                <textarea name="description" id="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; 
        }

        .red-border {border: 2px solid red;}
    </style>
        <style>
    .cke_notification_message,
    .cke_notification,
    .cke_notification_warning,
    .cke_notification_close {
        display: none !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.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<!-- <script>
    CKEDITOR.replace('content', {
        removePlugins: 'undo,redo',
        disableNativeUndoRedo: true,
        toolbar: [
            ['Bold', 'Italic', 'Link', 'BulletedList', 'NumberedList', 'Blockquote']
        ]
    });
    CKEDITOR.instances.content.on('instanceReady', function () {
        var editor = CKEDITOR.instances.content;
        editor.on('key', function (event) {
            if ((event.data.keyCode === 1114202) || (event.data.keyCode === 1114201)) {
                event.cancel();
                console.log('Prevented: Ctrl+Z or Ctrl+Y');
            }
        });
        editor.commands.undo && editor.commands.undo.disable();
        editor.commands.redo && editor.commands.redo.disable();
    });
</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;

    document.addEventListener('DOMContentLoaded', function () {
        const titleInput = document.getElementById('title');
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        let savedContentId = null;

        // 📝 Update title on user input
        if (titleInput) {
            currentTitle = titleInput.value.trim(); // Set initial value
            titleInput.addEventListener('input', function () {
                currentTitle = titleInput.value.trim();
             
            });
        }

        $("#rid").val(savedContentId);

        CKEDITOR.instances.content.on('instanceReady', function () {
            const editor = this;
         
            //var editor = CKEDITOR.instances.content;
            editor.on('key', function (event) {

                if ((event.data.keyCode === 1114202) || (event.data.keyCode === 1114201)) {
                    event.cancel();
                    console.log('Prevented: Ctrl+Z or Ctrl+Y');
                }

                /*const SPACE_KEY = 32;

                if (event.data.keyCode === SPACE_KEY) {
                    // Refresh SCAYT manually if needed
                    editor.fire('change');
                }*/

            });
            editor.commands.undo && editor.commands.undo.disable();
            editor.commands.redo && editor.commands.redo.disable();

            editor.on('change', () => {
                const html = editor.getData();
                const text = html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
                const wordCount = text ? text.split(' ').length : 0;

                const wordCountDisplay = document.getElementById('word-count');
                if (wordCountDisplay) {
                    wordCountDisplay.textContent = `Word Count: ${wordCount}`;
                }
            });

            function saveContent() { 
                var cat = $("#cnt_cat").val();
                $(".fill_err").remove();
                if(cat != ""){ 
                    const content = editor.getData().trim();
                    $("#title").removeClass("red-border"); 
                    if (content && content !== lastSavedContent && currentTitle) {
                        lastSavedContent = content;

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

                        if (savedContentId) {
                            payload.id = savedContentId; // Add only if available
                        }

                        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 => {
                            if(data.status == 'success'){
                                if (data.id) {
                                    savedContentId = data.id;
                                }
                                console.log("Auto-saved at", new Date().toLocaleTimeString());
                                console.log("Saved ID:", data.id);
                                $(".fill_err").remove();
                                $("#rid").val(data.id);
                                const url = "/admin/content/add/" + data.id;
                            }
                            else { $(".fill_err").remove();
                                $("#title").after("<span style='color:red;margin-top:6px;display:block;font-size:16px;' class='fill_err'>"+data.message+"</span>");
                                $(".fill_err").fadeOut(3000); 
                                $("#title").addClass("red-border");
                            }
                        })
                        .catch(error => {
                            console.error("Auto-save error:", error);
                        });
                    }
                }
                else {
                    $("#cnt_cat").after("<span style='color:red;margin-top:6px;display:block;font-size:13px;' class='fill_err'>select category</span>").focus();
                }
            }

            // Auto-save on change with 20s debounce
    
            editor.on('change', function () {
                isTyping = true;
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    isTyping = false;
                    saveContent();
                }, 5000);
            });

            // Always save every 20s while typing
            setInterval(() => {
                if (isTyping && currentTitle) {
                    saveContent();
                }
            }, 5000);

            // Custom paste behavior
            editor.on('paste', function (evt) {
                evt.cancel(); // Prevent default
                const pastedText = (evt.data.dataTransfer || evt.data).getData('text/plain');
                const safeText = CKEDITOR.tools.htmlEncode(pastedText);
                const spanHtml = `<span class="highlight-paste" style="background-color: yellow;">${safeText}</span>`;
                editor.insertHtml(spanHtml);

                // Move cursor outside the span
                setTimeout(() => {
                    const range = editor.getSelection().getRanges()[0];
                    if (range) {
                        range.moveToPosition(range.endContainer, CKEDITOR.POSITION_AFTER_END);
                        editor.getSelection().selectRanges([range]);
                    }
                }, 0);
            });
        });
    });


    document.getElementById('cnt_cat').addEventListener('change', function() {
        $(".fill_err").remove(); 
    });
</script>


@stop