@extends('layouts.app')

@section('content')
<script src="https://cdn.tiny.cloud/1/r9rrojfprcjsqeclygvlu8h06khye7qen3821qj94wp2pyqu/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .store-line {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.store-line li {
  float: left;
      padding: 6px;

}

.store-line li span {
display: block;
    color: black;
    text-align: center;
    padding: 3px;
    text-decoration: none;
    border: 1px solid black;
}


</style>
<div class="container"> <div class="row justify-content-center"> <div class="col-md-12"> <div class="card"> <div
    class="card-header">Edit Category</div>
  
    <div class="card-body">
         <div class="mb-4">
                <label class="form-label"><h5>Stores</h5></label>
                <ul class="store-line">
                @foreach($stores as $store)
                
                <li {{$loop->iteration  >= 15 ? 'class=store_list style=display:none':''}} ><span class="store-copy" data-copy="https://scoopcoupons.com/store/{{$store->slug}}">{{$store->name}}</span></li> 
                @endforeach
                </ul>
                <a href="#" id="toggle_store_list">Show More</a>
            </div>
        <form method="post" action="{{route('coupon-categories.update',$category->term_taxonomy_id)}}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="old_slug" value="{{$category->term->slug}}">
            <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="parent_id" class="form-label"><h5>Category Parent</h5></label>
                <select id="parent_id" name="parent_id" class="form-control">
                    <option value="">Select Parent Category</option>
                    @foreach($parents as $parent)
                    <option @if($parent->term->term_id==$category->parent) selected @endif value="{{$parent->term->term_id}}">{{$parent->term->name}}</option>
                    @endforeach
                </select>
            </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" 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 src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
  $('#parent_id').select2({});
  
  $(".store-copy").on("click",function(){
        var copyText = $(this).data("copy")
    navigator.clipboard
      .writeText("<a href='"+copyText+"'>"+$(this).text()+"</a>")
      .then(() => {
        alert("successfully copied");
      })
      .catch(() => {
        alert("something went wrong");
      });
  })
  
    $("#toggle_store_list").on("click",function(){
       $(".store_list").toggle();
       if($(this).text()=="Show More")
       {
          $(this).text()=="Show Less" 
       }else{
          $(this).text()=="Show More" 
       }
  })
    
  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