@extends('layouts.app')

@section('content')


    <div id="test-editor">
        <div class="d-flex justify-content-center" id="loadingSpinner">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    <textarea style="display:none;" id="noteeditor">loading note
    </textarea>
        <input type="hidden" id="noteid">
    </div>
    <button type="button" class="btn btn-success">Success</button>


@endsection
@section('css')
    <link rel="stylesheet" href="/editormd/css/editormd.css"/>
@endsection
@section('js')
    <script src="/js/aes.js"></script>
    <script src="/js/app.js"></script>
    <script src="/editormd/editormd.min.js"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            loadNote();
        });
        function loadNote() {
            $.ajax({
                type: "GET",
                url: '/api/getnote/{{$id}}',
                success: function (data) {
                    var decrypted=decryptString(data.body);
                    $('#noteeditor').html(decrypted);
                    initEditor();
                },
                error: function (request, status, error) {
                }
            });
        }
        function initEditor(){
            var editor = editormd("test-editor", {
                width: "100%",
                height: 720,
                path: "/editormd/lib/"
            });
        }


    </script>


@endsection