@extends('layouts.app')


@section('content')
    <link href="{{ asset('css/editor.css') }}" rel="stylesheet">

 <script>

     var obj, dbParam, xmlhttp, allwords,collocations, x, txt = "Keywords in DB:", dbwords=[];


     function getCollocations()
{


xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        collocations = JSON.parse(this.responseText);

    }
};
xmlhttp.open("GET", "json_demo_db_tiny.php", true);
//xmlhttp.open("GET", "collocations.php?x="+ word, true);
xmlhttp.send();

}


     xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        allwords = JSON.parse(this.responseText);
       for (x in allwords) {
            txt += allwords[x].Base +", ";
        }
       // document.getElementById("demo").innerHTML = txt;
		allwords.forEach(function (element, index, array)
		{
			dbwords.push(element.Base);
			//console.log(element.Base);

		});
		//console.log(dbwords.indexOf("research1") > -1);
		getCollocations();
		//test

    }
};
xmlhttp.open("GET", "words.php", true);
xmlhttp.send();




     </script>










                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

              <div class="card">
         <div id="container">
            <div id="left-column" class='editor'>
   				 <textarea ></textarea>
            </div>
             <div id="info" class="extrainfo">

            </div>
        </div>

</div>




  <!--p style="color:blue;">Please take care to adapt examples to your own text.</p-->

    <script src="jsv3/tinymce/tinymce.js"></script>
 <script>

 function inserttext(text)
{
//editor.execCommand('mceInsertContent', false, text);
tinymce.activeEditor.insertContent(tinymce.activeEditor.dom.encode(text));
tinymce.activeEditor.insertContent(tinymce.activeEditor.dom.encode(" "));
tinymce.activeEditor.execCommand('mceSpellCheck');
tinymce.activeEditor.execCommand('mceSpellCheck');

//console.log(tinymce.activeEditor.selection.getNode().nodeName);

return false;

}


function suggestcollocations(method, text, success, failure)
  {
    var words = text.match(this.getWordCharPattern());

    console.log(words);
    console.log(method);
    if(words!= null)
    {
    if (method == "spellcheck") {
      var suggestions = {};
      for (var i = 0; i < words.length; i++) {
      if(dbwords.indexOf(toLowerCase.words[i])> -1)
      {
        suggestions[words[i]] = [ words[i] + " (noun)",  words[i] + " (verb)" ];
        console.log(toLowerCase.words[i]);
       }
       else
       {
        console.log("No");
       }
      }
      success(suggestions);
    }
    }
    else
    {

      failure("The editor is empty, there is nothing to check");
    }
  }

tinymce.init({
  selector: "textarea",
  min_height: 500,
  branding: false, // change this value according to your HTML
  plugins: "preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern help spellchecker about",
  toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat spellbutton',
  menu: {
        file: {title: 'File', items: 'newdocument'},
        edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
        insert: {title: 'Insert', items: 'link media | template hr'},
        view: {title: 'View', items: 'fullscreen'},
        format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
        tools: {title: 'Tools', items: 'spellchecker code'},
        help:{title:'Help', items:'help about'}
    },
  setup: function(editor) {

      editor.on('init', function(e) {
       // editor.execCommand('mceFullScreen');
      });
    editor.on('keypress', function(e) {
         editor.selection.moveToBookmark(editor.selection.getBookmark());

    //console.log(e);
     });
      editor.on('click', function (e) {
      if(e.target.nodeName=="P")
      {
       var Table = document.getElementById("info");
		Table.innerHTML = "";
      }
    });


      },

      init_instance_callback: function (editor) {
   /* editor.on('click', function (e) {
      console.log('Element clicked:', e.target.nodeName);
    });*/
  },

 spellchecker_callback: function(method, text, success, failure)
  {
    var words = text.match(this.getWordCharPattern());

   // console.log(words.length);
    //console.log(method);
    //console.log(success);
    //console.log(failure);
  if(words!= null)
      {
    if (method == "spellcheck") {
      var suggestions = {};
      for (var i = 0; i < words.length; i++) {
      if(dbwords.indexOf(words[i].toLowerCase())> -1)
      {
      // console.log(words[i].toLowerCase());
      if(!collocations)
        getCollocations();
        suggestions[words[i]] = [ words[i]+" (noun)", words[i]+" (verb)", words[i]+" (ADV ADJ*)"  ];

       }

      }
      success(suggestions);
    }
    }
    else
    {
           failure("The editor is empty, there is nothing to check");
    }
  },

});




</script>















@endsection