@extends('layouts.app')

@section('content')
<script src="https://cdn.tiny.cloud/1/r9rrojfprcjsqeclygvlu8h06khye7qen3821qj94wp2pyqu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<style>
           
            img {
                max-width: 300px;
                max-height: 300px;
                min-width: 300px;
                min-height: 300px;
            }
            input[type="file"] {
                margin-top: 5px;
            }
            .heading {
                font-family: Montserrat;
                font-size: 45px;
                color: green;
            }
            form.was-validated {         textarea.form-control:invalid + div.tox {             border: 1px solid #dc3545;         }     }
        </style>
<div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <div
    class="card-header">Add Blog</div>
   
    <div class="card-body">
        <form method="post" action="{{route('posts.store')}}" enctype= multipart/form-data>
            @csrf
            <div class="mb-3">
                <label for="title" class="form-label">Post Title</label>
                <input type="text" required class="form-control" name="post_title" id="title" value="">
            </div>
             <div class="mb-3">
                <label for="post_slug" class="form-label">Post Slug</label>
                <input type="text" class="form-control" name="post_slug" id="post_slug" value="">
            </div>
              <div class="mb-3">
                <label for="post_meta_title" class="form-label">Post Meta Title</label>
                <input type="post_meta_title" class="form-control" name="post_meta_title" id="post_meta_title" value="">
            </div>
             <div class="mb-3">
                <label for="post_meta_description" class="form-label">Post Meta Descripion</label>
                <input type="post_meta_title" class="form-control" name="post_meta_description" id="post_meta_description" value="">
            </div>
            <div class="mb-3">
                <label for="content" class="form-label">Post Content</label>
                <textarea id="body" name="post_content" class="form-control"
                                            rows="20" cols="80"  required></textarea>'
            </div>
              <div class="mb-3">
                <label for="categories" class="form-label">Post Categories</label>
                <select id="categories" name="post_category[]" multiple class="form-control">
                 @foreach($categories as $category)
                 <option value="{{$category->term_id}}">{{$category->name}}</option>
                 @endforeach
                </select>
            </div>
            <div class="row">
                <div class="col-md-4">
              <div class="mb-3">
                <label for="featured_image" class="form-label">Post Image</label>
              <div class="holder">
                <img id="imgPreview" src="" alt="Upload Picture" />
            </div>

            <input type="file" required name="featured_image"
                   id="featured_image"  />
            </div>
            </div>
            <div class="col-md-4">
                <div class="mt-5">
                            
                <label for="image_alt" class="form-label">Image Alt</label>
                <input type="text" required class="form-control" name="image_alt" id="image_alt" value="">
                   <label for="image_title" class="mt-2" class="form-label">Image Title</label>
                <input type="text" required class="form-control" name="image_title" id="image_title" value="">
                
                </div>
            </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    // CKEDITOR.replace( 'body',{
    //     height:380
    // });
    
$(document).ready(()=>{
      $('#featured_image').change(function(){
        const file = this.files[0];
        if (file){
          let reader = new FileReader();
          reader.onload = function(event){
            $('#imgPreview').attr('src', event.target.result);
        
          }
          reader.readAsDataURL(file);
        }
      });
      
      $("#categories").select2({
    multiple: true
});
    });
 </script> 
 <!-- Place the first <script> tag in your HTML's <head> -->

<!-- Place the following <script> and <textarea> tags your HTML's <body> -->
<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',
      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();
  }, 
    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")),
     setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
  });
</script>

@endsection