@extends('layouts.app')

@section('content')
<script src="https://cdn.tiny.cloud/1/r9rrojfprcjsqeclygvlu8h06khye7qen3821qj94wp2pyqu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

<div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <div
    class="card-header">Add Category</div>
  
    <div class="card-body">
        <form method="post" action="{{route('categories.update',$category->term_taxonomy_id)}}" enctype="multipart/form-data">
            @csrf
            <div class="mb-4">
                <label for="category_title" class="form-label"><h5>Category Title</h5></label>
                <input type="text" required class="form-control" name="category_title" id="category_title" value="{{$category->term->name}}">
            </div>
            <div class="mb-4">
                <label for="category_slug" class="form-label"><h5>Category Slug</h5></label>
                <input type="text" required class="form-control" name="category_slug" id="category_slug" value="{{$category->term->slug}}">
            </div>
              <div class="mb-4">
                <label for="seo_title" class="form-label"><h5>SEO Title</h5></label>
                <input type="text"  class="form-control" name="seo_title" id="seo_title" value="{{@$options[$category->term_id]['wpseo_title']}}">
            </div>
              <div class="mb-4">
                <label for="seo_desc" class="form-label"><h5>SEO Description</h5></label>
                <input type="text"  class="form-control" name="seo_desc" id="seo_desc" value="{{@$options[$category->term_id]['wpseo_desc']}}">
            </div>
            <div class="mb-4">
                <label for="category_description" class="form-label"><h5>Category Description</h5></label>
                <textarea id="category_description" required name="category_description" class="form-control"
                                            rows="20" cols="80" >{{$category->description}}</textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
</div>
</div>
</div>
<script>
  
    
  tinymce.init({
    selector: 'textarea',
    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
      { value: 'First.Name', title: 'First Name' },
      { value: 'Email', title: 'Email' },
    ],
    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),
      file_picker_types: 'image',
  /* and here's our custom image picker*/
  file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    /*
      Note: In modern browsers input[type="file"] is functional without
      even adding it to the DOM, but that might not be the case in some older
      or quirky browsers like IE, so you might want to add it to the DOM
      just in case, and visually hide it. And do not forget do remove it
      once you do not need it anymore.
    */

    input.onchange = function () {
      var file = this.files[0];

      var reader = new FileReader();
      reader.onload = function () {
        /*
          Note: Now we need to register the blob in TinyMCEs image blob
          registry. In the next release this part hopefully won't be
          necessary, as we are looking to handle it internally.
        */
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        /* call the callback and populate the Title field with the file name */
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
  }, 
   setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
  });
</script>

@endsection