@extends('admin.layouts.app')

@section('styles')

<style type="text/css">
    table td .view{
        color: #4677ff;
        border: 1px solid #4677ff;
        padding: 2px 3px;
        border-radius: 3px;
    }
    table td .delete{
        color: #de2a43;
        border: 1px solid #de2a43;
        padding: 2px 3px;
        border-radius: 3px;
    }
</style>
@endsection

@section('header')
	@include('admin.layouts.header')
@endsection

@section('sidemenu')
	@include('admin.layouts.sidemenu')
@endsection



@section('content')
<div class="content-page">
    <div class="content">
        <div class="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-right">
                                
                            </div>
                            <h4 class="page-title">Edit Article</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12 col-lg-12 col-xl-1"></div>
                <div class="col-md-12 col-lg-12 col-xl-10">
                            @if(session()->has('success-message'))
                                <div class="alert alert-success text-center">{{ session()->get('success-message') }}</div>
                            @endif
                            @if(session()->has('error-message'))
                                <div class="alert alert-danger text-center">{{ session()->get('error-message') }}</div>
                            @endif

                            <div class="card m-b-20">
                                <div class="card card-body">
                                    <h3 class="card-title font-20 mb-4 text-primary text-center">Edit Article</h3>

                                   <div class="container-fluid">
    @if($res_article)
        <form id="article" name="editArticle" method="POST" action="/BNA/public/admin/journal/edit-article/{{ $res_article->id }}" enctype="multipart/form-data">
            {{ csrf_field() }}
            <div class="row">
                <label for="staticEmail" class="col-sm-4 form-label">Select Month and Year <span class="required">*</span></label>
                <div class="col-sm-8">
                     
                    <select class="form-control mb-4" name="month_year" id="monthYearSelect" required>
                        <!--<option value="" disabled selected>Select Month</option>-->
                        @foreach ($issues as $issue)
                            @if($issue->id == $res_article->issue_id)
                            <option value="{{ $issue->year }}-{{ sprintf('%02d', date('m', strtotime($issue->month))) }}" data-id="{{ $issue->id }}" selected>
                                {{ $issue->month }} {{ $issue->year }}
                            </option>
                            @else
                            <option value="{{ $issue->year }}-{{ sprintf('%02d', date('m', strtotime($issue->month))) }}" data-id="{{ $issue->id }}">
                                {{ $issue->month }} {{ $issue->year }}
                            </option>
                            @endif
                        @endforeach
                    </select>
                </div>

                <!-- Article Type -->
                <label for="article_type" class="col-sm-4 form-label">Select Article Type</label>
                <div class="col-sm-8">
                    <select class="form-control mb-4" name="article_type" id="article_type">
                        <option value="" selected>Select Type</option>
                        <option value="Editor’s Message" @if($res_article->article_type == "Editor’s Message") selected @endif>Editor’s Message</option>
                        <option value="Original Article" @if($res_article->article_type == "Original Article") selected @endif>Original Article</option>
                        <option value="Review Article" @if($res_article->article_type == "Review Article") selected @endif>Review Article</option>
                        <option value="Letter to Editor" @if($res_article->article_type == "Letter to Editor") selected @endif>Letter to Editor</option>
                        <option value="Case Report" @if($res_article->article_type == "Case Report") selected @endif>Case Report</option>
                    </select>
                </div>

                <!-- Title -->
                <label for="title" class="col-sm-4 form-label">Title <span class="required">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control mb-4" name="title" id="title" placeholder="Article Title" value="{{ $res_article->title }}" required>
                </div>

                <!-- Author -->
                <label for="author" class="col-sm-4 form-label">Author(s)</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control mb-4" name="author" id="author" placeholder="Author(s)" value="{{ $res_article->author }}">
                </div>

                <!-- Reference -->
                <label for="reference" class="col-sm-4 form-label">Reference</label>
                <div class="col-sm-8">
                    <input type="textarea" class="form-control mb-4" name="reference" id="reference" style="height:100px;" placeholder="Reference" value="{{ $res_article->reference }}">
                </div>

                <!-- Subsection -->
                <label class="col-sm-12 col-form-label">Subsection
    <span style="float: right; color:#c02f4f; font-weight: 500; cursor: pointer;" onclick="addSubsectionTextarea()">
        <i class="mdi mdi-plus-circle mdi-18px"></i>Add Subsection
    </span>
</label>
<!-- Container for Subsection Textareas -->
<div id="subsectionContainer" class="col-sm-12 m-t-5">
    <!-- Subsections will be appended here -->
                       
</div>

<input type="hidden" id="abdescription" name="abdescription">

               <!--<label id="img_label" class="col-sm-12 col-form-label">Upload Images-->
    <!--<span style="float: right; color:#c02f4f;font-weight: 500;cursor: pointer;" onclick="addPImage()">-->
    <!--    <i class="mdi mdi-plus-circle mdi-18px"></i>Add Image-->
    <!--</span>-->
<!--</label>-->
<div class="col-sm-12" id="mainContainer_pimage">
    <!-- Images will be appended here -->
</div>  

                <!-- Article No. -->
                <label for="staticEmail" class="col-sm-4 form-label">Article No.<span class="required">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control mb-4" name="index_page" value="{{ $res_article->index_page }}">
                </div>

                <!-- Submit Button -->
                <div class="col-sm-12 mt-4 text-center">
                    <button class="form-control col-md-12 btn btn-primary" type="submit" name="submit">Submit</button>
                </div>
            </div>
        </form>
    @endif
</div>
                                </div>
                </div>
            </div> <!-- end col -->
        </div> 
        
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Alert</h5>
       <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">×</button>
     </div>
     <div class="modal-body">
       <p id="msgbox"></p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
       <!--<button type="button" class="btn btn-primary">Save changes</button>-->
     </div>
   </div>
 </div>
</div>
@endsection

@section('footer')
	@include('admin.layouts.footer')
@endsection

@section('scripts')
<!-- Required datatable js -->
<!-- KNOB JS -->
<script src="{{ URL::asset('admin/plugins/jquery-knob/excanvas.js') }}"></script>
<script src="{{ URL::asset('admin/plugins/jquery-knob/jquery.knob.js') }}"></script>

<script>
// validate pdf size and type
    function validateSize(input) {
          const fileSize = input.files[0].size / 1024 / 1024; // in MiB
        //   alert(fileSize);
          if (fileSize > 10) {
            // alert('File size exceeds 2 MiB');
                $('#exampleModal').modal('toggle');
                $('#msgbox').html("File size exceeds 10 MB");
                $(input).val(''); //for clearing with Jquery
                
                // console.log(input);
          } else {
            // Proceed further
            // console.log(input.value);
                var fileName = input.value;
                var idxDot = fileName.lastIndexOf(".") + 1;
                var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
                if (extFile=="pdf"){
                    //TO DO
                }else{
                    // alert("Only pdf files are allowed!");
                    $('#exampleModal').modal('toggle');
                    $('#msgbox').html("Please select pdf file only");
                    input.value="";
                }   
          }
    }
    // validate pdf size and type
    
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/super-build/ckeditor.js"></script>

<script type="text/javascript">
    var myClassicEditor2 = [];
    var subsectionCount = {{ count($subsections) }}; // Assuming $subsections is passed from the controller

    function createeditor(editorid) {
        CKEDITOR.ClassicEditor.create(document.getElementById(editorid), {
            ckfinder: {
                uploadUrl: "{{ route('ckeditor.upload').'?_token='.csrf_token()}}"
            },
            toolbar: {
                items: [
                    'exportPDF', 'exportWord', '|',
                    'findAndReplace', 'selectAll', '|',
                    'heading', '|',
                    'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
                    'bulletedList', 'numberedList', 'todoList', '|',
                    'outdent', 'indent', '|',
                    'undo', 'redo', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                    'alignment', '|',
                    'link', 'uploadImage', 'blockQuote', 'insertTable', 'codeBlock', 'htmlEmbed', '|',
                    'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                    'sourceEditing'
                ],
                shouldNotGroupWhenFull: true
            },
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                    { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                    { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                    { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                ]
            },
            placeholder: 'Welcome to CKEditor 5!',
            fontFamily: {
                options: [
                    'default',
                    'Arial, Helvetica, sans-serif',
                    'Courier New, Courier, monospace',
                    'Georgia, serif',
                    'Lucida Sans Unicode, Lucida Grande, sans-serif',
                    'Tahoma, Geneva, sans-serif',
                    'Times New Roman, Times, serif',
                    'Trebuchet MS, Helvetica, sans-serif',
                    'Verdana, Geneva, sans-serif'
                ],
                supportAllValues: true
            },
            fontSize: {
                options: [10, 12, 14, 'default', 18, 20, 22],
                supportAllValues: true
            },
            htmlSupport: {
                allow: [
                    {
                        name: /.*/,
                        attributes: true,
                        classes: true,
                        styles: true
                    }
                ]
            },
            htmlEmbed: {
                showPreviews: true
            },
            link: {
                decorators: {
                    addTargetToExternalLinks: true,
                    defaultProtocol: 'https://',
                    toggleDownloadable: {
                        mode: 'manual',
                        label: 'Downloadable',
                        attributes: {
                            download: 'file'
                        }
                    }
                }
            },
            removePlugins: [
                'AIAssistant',
                'CKBox',
                'CKFinder',
                'EasyImage',
                'RealTimeCollaborativeComments',
                'RealTimeCollaborativeTrackChanges',
                'RealTimeCollaborativeRevisionHistory',
                'PresenceList',
                'Comments',
                'TrackChanges',
                'TrackChangesData',
                'RevisionHistory',
                'Pagination',
                'WProofreader',
                'MathType',
                'SlashCommand',
                'Template',
                'DocumentOutline',
                'FormatPainter',
                'TableOfContents',
                'PasteFromOfficeEnhanced',
                'CaseChange'
            ]
        })
        .then(editor => {
            myClassicEditor2.push(editor);
        })
        .catch(error => {
            // console.error(error);
        });
    }

    // Initialize CKEditor for the main description editor
    // createeditor('description');
    myFunction();
    
    function myFunction() {
        
        var aid ='<br />
<b>Warning</b>:  Undefined variable $res_article in <b>/home/telemeduser/public_html/BNA/resources/views/admin/edit-articleOLD.blade.php</b> on line <b>349</b><br />
<br />
<b>Warning</b>:  Attempt to read property "id" on null in <b>/home/telemeduser/public_html/BNA/resources/views/admin/edit-articleOLD.blade.php</b> on line <b>349</b><br />
' ;
        
          $.ajax({

          url:'/BNA/public/admin/journal/editajax',

          type:'post',

          data:{"_token": "{{ csrf_token() }}",
                aid:aid
          },

          success: function(response){
               
               $.each(response, function(key, value){

                console.log(value.subdescription);
                addSubsectionTextarea(value.subdescription,value.id);
                
              });

            },

        });

        };

    function addSubsectionTextarea(subdescription , id ) {
        subsectionCount++; // Increment the count for unique IDs
        const subsectionId = `subsection_${subsectionCount}`;
        
        // Create a new div to hold the textarea and hidden input
        const newSubsection = document.createElement('div');
        newSubsection.className = 'col-sm-12 m-t-5';
        
        // Create the textarea element
        const textarea = document.createElement('textarea');
        textarea.className = 'form-control';
        textarea.name = `subdescription[${subsectionCount}]`;
        textarea.id = subsectionId;
        textarea.rows = 4;
        textarea.value = subdescription; // Use the correct variable 
        
        // Append the textarea to the new subsection div
        newSubsection.appendChild(textarea);
        
        // Create hidden input for storing the cleaned text content
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = `subdescriptionid[${subsectionCount}]`;
        hiddenInput.id = `ab${subsectionId}`;
        hiddenInput.value = id; // Use the correct variable
        
        // Append the hidden input to the new subsection div
        newSubsection.appendChild(hiddenInput);

        // Create the delete button
        var delbtn = document.createElement('span');
        delbtn.setAttribute("style", "float:right; color:#c02f4f; margin-top: 10px; cursor: pointer;");
        delbtn.setAttribute("title", "Delete Subsection");
        delbtn.onclick = function () {
            newSubsection.remove(); // Remove the subsection div when clicked
        };

        var delicon = document.createElement('i');
        delicon.setAttribute("class", "mdi mdi-close-circle mdi-18px");
        delbtn.appendChild(delicon);

        // Append the delete button to the new subsection div
        newSubsection.appendChild(delbtn);
        
        // Append the new subsection div to the container
        document.getElementById('subsectionContainer').appendChild(newSubsection);
        
        // Initialize CKEditor for the new textarea
        createeditor(subsectionId);
    }

    function addPImage(container, subsectionIndex) {
        const imageCount = container.getElementsByClassName('imageUploadRow').length; // Count current images
        
        if (imageCount < 5) { // Allow adding up to 5 images
            var mainDiv = document.createElement('div');
        mainDiv.setAttribute("class", "form-group row");
        mainDiv.setAttribute("style", "margin-bottom: 0rem;");

        var div1 = document.createElement('div');
        div1.setAttribute("class", "col-sm-3 m-t-5 m-b-10");
        
        var div2 = document.createElement('div');
        div2.setAttribute("class", "col-sm-4 m-t-5 m-b-10");
        
        var div3 = document.createElement('div');
        div3.setAttribute("class", "col-sm-4 m-t-5 m-b-10");
        
        var div4 = document.createElement('div');
        div4.setAttribute("class", "col-sm-1 m-t-5 m-b-10");
        
        var input1 = document.createElement('input');
                input1.setAttribute("type","number");
                input1.setAttribute("class","form-control mt-2");
                input1.name = "imgno[]";
                input1.setAttribute("placeholder","Image No.");
                input1.setAttribute("required","true");
                
                var input2 = document.createElement('input');
                input2.setAttribute("type","text");
                input2.setAttribute("class","form-control mt-2");
                input2.name = "Ilable[]";
                input2.setAttribute("placeholder","Image Lable");
                input2.setAttribute("required","true");
                
                var input3 = document.createElement('input');
                input3.setAttribute("type","file");
                input3.setAttribute("class","form-control mt-2");
                input3.name = "images[]";
                input3.setAttribute("accept",".jpg,.jpeg,.png");
                input3.setAttribute("onchange","validateimage(this)");
                input3.setAttribute("required","true");

        // Create a delete button for the image upload
        var delbtn = document.createElement('span');
        delbtn.setAttribute("style", "float:right; color:#c02f4f; margin-top: 10px; cursor: pointer;");
        delbtn.setAttribute("title", "Delete Image");
        delbtn.onclick = function () {
            mainDiv.remove(); // Remove the image upload fields when clicked
        };

        var delicon = document.createElement('i');
        delicon.setAttribute("class", "mdi mdi-close-circle mdi-18px");
        delbtn.appendChild(delicon);
        
        // Append all elements to the mainDiv
        div1.appendChild(input1);
        div2.appendChild(input2);
        div3.appendChild(input3);
        div4.appendChild(delbtn);
        
        mainDiv.appendChild(div1);
        mainDiv.appendChild(div2);
        mainDiv.appendChild(div3);
        mainDiv.appendChild(div4);
        
        // Append the mainDiv to the specified container
        container.appendChild(mainDiv);
        } else {
            alert("You can only upload up to 5 images per subsection.");
        }
        
    }
    
    function createDiv(className, childElement) {
        var div = document.createElement('div');
        div.setAttribute('class', className);
        div.appendChild(childElement);
        return div;
    }

    function createInput(type, className, name, value = '', placeholder = '', required = false, attributes = [], onChangeFunc = '') {
        var input = document.createElement('input');
        input.setAttribute('type', type);
        input.setAttribute('class', className);
        input.name = name;
        if (value) input.setAttribute('value', value);
        if (placeholder) input.setAttribute('placeholder', placeholder);
        if (required) input.setAttribute('required', 'true');
        if (attributes.length > 0) {
            attributes.forEach(attr => input.setAttribute(attr[0], attr[1]));
        }
        if (onChangeFunc) input.setAttribute('onchange', onChangeFunc);
        return input;
    }

    function createDeleteButton(mainDiv, mainContainer) {
        var delbtn = document.createElement('span');
        delbtn.setAttribute("style", "float:right; color:#c02f4f; cursor: pointer;");
        delbtn.setAttribute("title", "Delete Image");
        delbtn.onclick = function () {
            mainDiv.remove(); // Remove the image div when clicked
        };

        var delicon = document.createElement('i');
        delicon.setAttribute("class", "mdi mdi-close-circle mdi-18px");
        delbtn.appendChild(delicon);

        return delbtn;
    }
</script>




@endsection