@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.writer.dash') }}">Writer 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.writer.save') }}" enctype="multipart/form-data">
            {{ csrf_field() }}
            <meta name="csrf-token" content="{{ csrf_token() }}">
            <input type="hidden" value="{{$id}}" name="rowId" />

            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <th style="width:30%; font-weight-normal;">Project</th>
                                <td style="width:70%;" class="text-primary font-weight-bold">{{ $content->project_nm }}</td>
                            </tr>
                            <tr>
                                <th style="width:30%; font-weight-normal;">Deadline</th>
                                <td style="width:70%;" class="text-primary font-weight-bold">{{ date('d M Y', strtotime($content->deadline)) }}</td>
                            </tr>
                            <tr>
                                <th style="width:30%; font-weight-normal;">Country</th>
                                <td style="width:70%;" class="text-primary font-weight-bold">{{ $content->country }}</td>
                            </tr>
                            <tr>
                                <th style="width:30%; font-weight-normal;">Content Type</th>
                                <td style="width:70%;" class="text-primary font-weight-bold">

                                    @php
                                    $categories = [
                                        1 => 'Forums',
                                        2 => 'Blogs',
                                        3 => 'Website Content',
                                        4 => "FAQ's",
                                        5 => 'Tools',
                                        6 => 'Others',
                                        7 => 'US Blog'
                                    ];
                                    @endphp

                                    {{ $categories[$content->content_category] ?? '' }}
                                </td>
                            </tr>
                            <tr>
                                <th style="width:30%; font-weight-normal;">Title</th>
                                <td style="width:70%;" class="text-primary font-weight-bold">{{ $content->title }}</td>
                            </tr>
                            <tr>
                                <th style="width:30%; font-weight-normal;">Primary Keywords</th>
                                <td style="width:70%;" class="text-primary font-weight-bold">{{ $content->primary_keywords }}</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>


            <div class="form-group">
                <label>Research Notes   -: <a href="{{ route('content.docx.download',['id'=>$content->id]) }}" class="btn btn-sm btn-primary">Download Word File</a></label>
                <textarea name="description1" id="content1">{{$content->research_notes}}</textarea>
            </div>

            <div class="form-group">
                <label>Content</label>
                <textarea name="description" id="content">{{$content->content}}</textarea>
            </div>
            <div id="word-count" style="margin-top: 10px; font-weight: bold;"></div>

            @if($loginid == $content->emp_id and ($content->task_status == 0 or $content->task_status == 3))
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="status">Content Submit Status</label>
                        <div class="d-flex">
                            @if($content->task_status == 0)
                                <div class="form-check mr-3">
                                    <input class="form-check-input" type="radio" name="submitStatus" id="is_draft" value="0" @if($content->task_status == 0) checked @endif>
                                    <label class="form-check-label" for="is_draft">Draft</label>
                                </div>
                            @else
                                <div class="form-check mr-3">
                                    <input class="form-check-input" type="radio" name="submitStatus" id="is_draft" value="3" @if($content->task_status == 3) checked @endif>
                                    <label class="form-check-label" for="is_draft">Rejected</label>
                                </div>
                            @endif
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="submitStatus" id="is_submitted" value="1" @if($content->task_status == 1) checked @endif>
                                <label class="form-check-label" for="is_submitted">Submit</label>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
           

            @if($loginid == 55 or $loginid == 58)
                <div class="col-md-12" id="isApproveTg" @if($content->task_status == 0) style="display:none;" @endif>
                    <div class="form-group">
                        <label for="status">Approved 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>
            @endif

            <div class="col-md-12" id="rej_remark" @if($content->task_status != 3 and ($loginid == 55 or $loginid == 58)) style="display:none;" @endif >
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="rejection_remark">Rejection Remark <span class="text-danger"> *</span></label>
                            <textarea name="rejection_remark" class="form-control" id="rejection_remark" placeholder="remark..." rows="3">{{$content->rejection_remark}}</textarea>
                            <small id="remark_error" class="text-danger d-block mt-1"></small>
                        </div>
                    </div>
                </div>
            </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="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 = {{$content->id}};

        // 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) {
                        lastSavedContent = content;

                        const payload = {
                            description: content,
                            title: '{{$content->title}}',
                            cat: {{$content->content_category}}
                        };

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

                        fetch("/admin/content/writer_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);
            });
        });
    });

</script>

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

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

        if ($("#isApproveTg").is(":visible")) {
            let taskStatus = $("input[name='task_status']:checked").val();

            if (taskStatus == 3) {
                let remark = $("#rejection_remark").val().trim();

                if (remark === "") {
                    e.preventDefault();
                    $("#remark_error").text("Please enter a remark for rejection.");
                    $("#rejection_remark").focus();
                    setTimeout(function(){
                        $("#remark_error").text("");
                    }, 2500);
                }
            }
        }
    });
</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);

        });
    });


    $(document).on('change', 'input[name="task_status"]', function () {  
        let taskStatus = $(this).val(); 
        if(taskStatus == 3) {
            $("#rej_remark").show();
        } else {
            $("#rej_remark").hide();
        }
    });
</script>


@stop