@extends('adminlte::page')

@section('title', ' Content')

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

@section('content')
    <div class="card shadow rounded-lg mb-3 px-5 py-2">
        <div class="card-header">
            <div class="row mt-3">
                <div class="col-md-2 float-left ">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb bg-white">
                            <li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
                            <li class="breadcrumb-item text-bold active" aria-current="page"><a href="{{ route('content.seo.dash') }}">SEO Dashboard</a></li>
                        </ol>
                    </nav>
                </div>
                
            </div>

        </div>
        @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li> 
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card-body">
        <form id="myForm" method="POST" action="{{ route('content.seo.save') }}" enctype="multipart/form-data">
            {{ csrf_field() }}
            <meta name="csrf-token" content="{{ csrf_token() }}">
            <input type="hidden" value="{{$id}}" name="rowId" />
            <input type="hidden" value="{{$content->task_status}}" name="isSubmitted" />
            <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Project <span class="text-danger"> *</span></label>
                        <select name="task_project" id="task_project" class="form-control col-md-10 mb-10" required>
                            <option value="">select project</option>
                            <option value="Visament" @if($content->project_nm == "Visament") selected @endif>Visament</option>
                            <option value="Savetaxs" @if($content->project_nm == "Savetaxs") selected @endif>Savetaxs</option>
                            <option value="Armonia Gems" @if($content->project_nm == "Armonia Gems") selected @endif>Armonia Gems</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Deadline <span class="text-danger"> *</span></label>
                        <input type="date" name="deadline_dt" value="{{$content->deadline}}" class="form-control col-md-10 mb-10" id="deadline_dt"  placeholder="select date"  required>
                    </div>
                </div>
            </div>
            </div>

            <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Country</label>
                        <input type="text" name="country_nm" value="{{$content->country}}" class="form-control col-md-10 mb-10" id="country_nm"  placeholder="country name">
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Content Type <span class="text-danger"> *</span></label>
                        <select name="cnt_cat" id="cnt_cat" class="form-control col-md-10 mb-10" required>
                            <option value="">select category</option>
                            <option value="1" @if($content->content_category == 1) selected @endif>Forums</option>
                            <option value="2" @if($content->content_category == 2) selected @endif>Blogs</option>
                            <option value="3" @if($content->content_category == 3) selected @endif>Website Content</option>
                            <option value="4" @if($content->content_category == 4) selected @endif>FAQ's</option>
                            <option value="5" @if($content->content_category == 5) selected @endif>Tools</option>
                            <option value="6" @if($content->content_category == 6) selected @endif>Others</option> 
                            <option value="7" @if($content->content_category == 7) selected @endif>US Blog</option> 
                        </select>
                    </div>
                </div>
            </div>
            </div>

            <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Assign Writer <span class="text-danger"> *</span></label>
                        <select name="as_writer" id="as_writer" class="form-control col-md-10 mb-10" required>
                            <option value="">select writer</option>
                            @if(!empty($contents_person))
                                @foreach($contents_person as $cp)
                                    <option value="{{$cp->id}}" @if($content->emp_id == $cp->id) selected @endif>{{$cp->name}}</option>
                                @endforeach
                            @endif
                            
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Primary Keywords <span class="text-danger"> *</span></label>
                        <input type="text" name="task_keywords" class="form-control" value="{{$content->primary_keywords}}" id="task_keywords"  placeholder="primary keywords..."  required>
                    </div>
                </div>
            </div>
            </div>

			<div class="col-md-12">
                <div class="form-group">
                    <label for="title">Title <span class="text-danger"> *</span></label>
                    <input type="text" name="title" class="form-control" value="{{$content->title}}" id="title"  placeholder="title..."  required>
                </div>
            </div>

            

            <div class="col-md-12" @if($content->task_status != 2) style="display:none;" @endif>
                <div class="form-group">
                    <label for="title">Published URL</label>
                    <input type="text" name="publish_url" class="form-control" value="{{$content->published_url}}" onchange="chkUrl(this.id);" id="publish_url"  placeholder="published url...">
                </div>
            </div>
         
            <div class="form-group">
                <label>Research Notes</label>
                <textarea name="description" id="content">{{$content->research_notes}}</textarea>
            </div>
            <div id="word-count" style="margin-top: 10px; font-weight: bold;"></div>

            <div class="form-group" @if($content->task_status == 0) style="display:none;" @endif>
                <label>Content</label>
                <textarea name="description1" id="content1">{{$content->content}}</textarea>
            </div>
            <div id="word-count1"  @if($content->task_status == 0) style="margin-top: 10px; font-weight: bold;display:none;" @else style="margin-top: 10px; font-weight: bold;" @endif ></div>

            <div class="col-md-12" @if($content->task_status == 0) style="display:none;" @endif>
                <div class="form-group">
                    <label for="status">Status</label>
                    <div class="d-flex">
                        <div class="form-check mr-3">
                            <input class="form-check-input" type="radio" name="task_status" id="approved" value="2" @if($content->task_status == 2) checked @endif>
                            <label class="form-check-label" for="approved">Approved</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="task_status" id="rejected" value="3" @if($content->task_status == 3) checked @endif>
                            <label class="form-check-label" for="rejected">Rejected</label>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="row justify-content-between my-3" id="svBtn" @if($content->task_status == 2 and $content->published_url == null) style="display:none;" @endif>
                <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="Save">
                    </div>
                </div>
            </div>
            
        </form>
    </div>
    </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>
    
    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; 
                        }

                        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>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let today = new Date();
        today.setDate(today.getDate() + 1); 
        let minDate = today.toISOString().split("T")[0];
        document.getElementById("deadline_dt").setAttribute("min", minDate);
    });
</script>

<script>
    //CKEDITOR.replace('content');

    document.getElementById("myForm").addEventListener("submit", function(e){
        let content = CKEDITOR.instances.content.getData().trim();
        let content1 = CKEDITOR.instances.content1.getData().trim();
        if (content === "") {
            e.preventDefault();
            alert("Research note is required!");
        }
    });
</script>


<script>
    
    CKEDITOR.replace('content1', {
        height: 400,
        extraAllowedContent: 'span(highlight-paste)[style]'
    });

    let currentTitle1 = '';
    let lastSavedContent1 = ''; 
    let isTyping1 = false;
    let debounceTimer1;

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

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

        CKEDITOR.instances.content1.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');
                }

            });
            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-count1');
                if (wordCountDisplay) {
                    wordCountDisplay.textContent = `Word Count: ${wordCount}`;
                }
            });
    
            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);
            });
        });
    });


    function chkUrl(tgId){  
        var pUrl = $("#"+tgId).val();
        var pattern = /^(https?:\/\/)?([\w\-]+\.)+[\w\-]{2,}(\/[^\s]*)?$/i;

        if (pattern.test(pUrl)) {
            $("#svBtn").show(); 
        } else {
            $("#"+tgId).after("<span style='color:red;margin-top:6px;display:block;font-size:16px;' class='fill_err'>Invalid URL</span>");
            $(".fill_err").fadeOut(3000); 
        } 
    }
</script>


@stop