@push('after-styles')

@endpush

@push('after-scripts')
{{-- <script src="https://cdn.jsdelivr.net/npm/tinymce@7.6.0/tinymce.min.js"></script> --}}
<script src="{{ asset('vendor/tinymce/js/tinymce/tinymce.min.js') }}"></script>

 <script>
  tinymce.init({
    selector: '#{{ $id }}',
    min_height: {{ $height }},
    language: 'id',
    skin: 'tinymce-5',
    plugins: "anchor autolink autoresize  code emoticons fullscreen image insertdatetime link lists media nonbreaking pagebreak preview visualchars wordcount",
    toolbar: 'undo redo | customPaste | styles | link image| bold italic | alignleft aligncenter alignright alignjustify | indent outdent | pagebreak  | wordcount',
    images_upload_url: '{{ route('backend.upload.image') }}', // Pastikan route ini sudah didefinisikan di routes
    automatic_uploads: true,
    file_picker_types: 'image',
    file_picker_callback: function (callback, value, meta) {
      if (meta.filetype === 'image') {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.onchange = function () {
          var file = this.files[0];
          var formData = new FormData();
          formData.append('file', file); // Append file ke FormData

          // Kirim file ke server dengan fetch
          fetch('{{ route('backend.upload.image') }}', {
            method: 'POST',
            body: formData,
            headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}' // Sertakan CSRF token untuk keamanan
            }
          })
            .then(response => response.json())
            .then(data => {
              if (data.location) {
                callback(data.location, { alt: file.name });
              } else {
                console.error('Error uploading image:', data.error);
              }
            })
            .catch(error => {
              console.error('Error:', error);
            });
        };
        input.click();
      }
    },

    // Tambahkan tombol custom di toolbar untuk Paste
    setup: (editor) => {
      editor.ui.registry.addButton('customPaste', {
        text: 'Paste text',
        icon: 'paste', // Gunakan ikon paste bawaan TinyMCE
        onAction: async () => {
          try {
            // Ambil teks dari clipboard
            const clipboardText = await navigator.clipboard.readText();
            const defaultText = ""; // Teks prepend default
            const currentContent = editor.getContent(); // Ambil konten editor saat ini

            // Tambahkan teks clipboard + prepend
            const updatedContent = defaultText + clipboardText + "<br>" + currentContent;
            editor.setContent(updatedContent); // Perbarui konten editor
          } catch (err) {
            // Jika clipboard gagal, gunakan prompt
            const inputText = prompt("Paste text di sini:");
            if (inputText) {
              const defaultText = ""; // Teks prepend default
              const currentContent = editor.getContent(); // Ambil konten editor saat ini
              const updatedContent = defaultText + inputText + "<br>" + currentContent; // Tambahkan teks
              editor.setContent(updatedContent); // Set ulang konten editor
            } else {
              alert("Clipboard tidak diizinkan, atau teks kosong!");
            }
          }
        },
      });
    },
  });
</script>


@endpush