@extends('layouts.app')
@section('content')
<style>
  .fa {
    font-size: unset !important;
  }

  .gjs-editor {
    font-size: small !important;
  }

  .gjs-sm-properties {
    font-size: 1rem !important;
  }
</style>
<div>
  <div class="row m-2">
    @if ($page_content->parent_id == 12 || $page_content->parent_id == 7)
    <a href="{{ route('admin.news.index') }}" class="btn knowmad_btn_blue knowmad_btn m-2" style="width: fit-content;">Back</a>
    @else
    <a href="{{ route('admin.page', [$page_content->page_id]) }}" class="btn knowmad_btn_blue knowmad_btn m-2" style="width: fit-content;">Back</a>

    @endif
  </div>
  <form name="pageContent" id="pageContent" action="{{ route('admin.page.updateContent', [$page_content->content_id, $page_content->page_id]) }}" method="POST" enctype="multipart/form-data" class="validate">
    {{ csrf_field() }}
    <div class="row">
      <div class="col-md-12 well dashboard">

        <div class="form-group">
          <div class="col-md-4 push-top">
            Name
          </div>
          <div class="col-md-8 push-top">
            <input type="text" id="page_content_name" name="page_content_name" class="form-control required" maxlength="100" value="">

            <input class="hidden" type="text" name="parent_route" hidden>
          </div>

          {{-- GW 3/2; parent_id == 12 means article ? --}}
        @if ($page_content->parent_id == 12 || $page_content->page_id == 12)
          <div class="col-md-4 push-top">
            Article Section
          </div>
          <div class="col-md-8 push-top">
            <select name="section_select" id="section_select" class="form-control editor-profile">
                        </select>
          </div>
        @endif

        </div>

        {{-- <div class="form-group">
                        <div class="col-md-4 push-top">
                            Upload Background Slider Image
                        </div>
                        <div class="col-md-8 push-top text-left">
                            <input type="file" name="slider" id="slider"><br>
                        </div>
                    </div> --}}
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Content
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div>
                <div class="col" id="content_history">
                  <div class="dropdown m-2">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                      Content History
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                      @foreach ($page_content_history as $history_entry)

                        <li class="dropdown-item">
                          <div style="display: inline-flex; justify-content: space-between; min-width: 280px;">
                            <a href="#">{{ date_format($history_entry->created_at, "D, M j, y  h:m") }}</a>
                            <a href="#" id="preview_{{ $history_entry->id }}" onclick="previewHistoryEntry({{ $history_entry->id }})">Preview</a>
                            <a href="{{ route('admin.page.restoreContentPage', ['page_id' => $page_content->content_id, 'revision_id' => $history_entry->id]) }}" id="restore_{{ $history_entry->id }}">Restore</a>
                          </div>
                        
                        </li>
                      @endforeach
                    </ul>
                  </div>
                </div>
                <div class="col" id="content_templates"> 
                  <div class="dropdown m-2">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                      Saved Templates
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                      @foreach ($content_templates as $template)

                        <li class="dropdown-item">
                          <div style="display: inline-flex; justify-content: space-between; min-width: 280px;">
                            <a href="#">{{ $template->template_title }}</a>
                            <a href="#" id="preview_{{ $template->id }}" onclick="previewTemplate({{ $template->id }})">Preview</a>

                            <input type="submit" value="Load" formaction="{{ route('admin.page.restoreContentTemplate', ['page_id' => $page_content->content_id, 'template_id' => $template->id]) }}" id="restore_{{ $template->id }}">
                            
                          </div>
                        
                        </li>
                      @endforeach
                    </ul>
                  </div>
                </div>
                <div class="col" style="text-align: right;">
                  <button class="btn btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#nameTemplateModal">
                    Save Page as Template
                  </button>
                </div>
              </div>
              <div class="panel__top">
                <div class="panel__basic-actions"></div>
              </div>
              <div id="gjs">
                {{-- {{ $page_content->page_content_description }} --}}
              </div>
              <div id="blocks"></div>
              {{-- <div class="accordion-body">
                                    <div maxlength="5000" rows="20" class="form-control required url" name="page_content_description"
                                        id="gjs" value="<php //echo $page_content->page_content_description;
                                        ?>"><php echo $page_content->page_content_description; ?></div>
                                </div> --}}
              {{-- <textarea class="form-control no-wysiwyg" name="page_content_description" id="page_content_description" style="min-height: 360px"><php echo $page_content->page_content_description; ?></textarea> --}}
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Abstract/Summary
              </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <textarea class="form-control no-wysiwyg" name="abstract" id="abstract"></textarea>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                SEO/Header Settings
              </button>
            </h2>
            <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <div class="form-group">
                  <label class="fw-bolder" for="seo_url">SEO URL</label>
                  <input type="text" id="seo_url" name="seo_url" class="form-control" maxlength="100" value="{{ $page_content->seo_url }}">
                </div>
                <div class="form-group">
                  <label class="fw-bolder" for="header_title">Header Title</label>
                  <input type="text" id="header_title" name="header_title" class="form-control" maxlength="100" value="{{ $page_content->header_title }}">
                </div>
                <div class="form-group">
                  <label class="fw-bolder" for="seo_keywords">Header Keywords</label>
                  <input type="text" id="seo_keywords" name="seo_keywords" class="form-control" maxlength="255" value="{{ $page_content->seo_keywords }}">
                  <small>*Example HTML: "<' meta name='keywords' content='<span style="background: yellow;">academic editing, academic proofreading services </span>'>
                      "</small>
                </div>
                <div class="form-group">
                  <label class="fw-bolder" for="header_description">Header Description</label>
                  <textarea maxlength="500" rows="4" class="form-control editor-profile" id="header_description" name="header_description" value=""">{{ $page_content->header_description }} </textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    {{-- <div class="form-group">

                        @if (count($sections) > 0)
                            <div class="col-md-4 push-top">
                                <label class="required">Article Sections</label>
                            </div>
                            <div class="col-md-8 push-top">

                                <select name="section_select" id="section_select" class="form-control editor-profile"
                                    style="appearance: auto">
                                    <option value="{{ null }}">(Optional)</option>
                                    {{-- <option value="0">Main Page</option>

                                    <php foreach ($sections as $section) { >

                                    <option value="{{ $section->id }}"
                                        {{ $section->id == $page_content->data_id ? ' selected' : '' }}>



                                        {{ $section->page_name }}

                                    </option>
                                    <php } >
                                </select>

                            </div>
                        @endif


                        <div class="col-md-4 push-top">
                            Show in Footer
                        </div>
                        <div class="col-md-8 push-top text-left">
                            @if ($page_content->show_in_footer != 0)
                                <input type='checkbox' name='show_in_footer' value='1' checked='checked' />
                            @else
                                <input type='checkbox' name='show_in_footer' value='1' />
                            @endif
                        </div> --}}


                    <div class="col-md-12 text-center m-2">
                        <button class="btn knowmad_btn_blue knowmad_btn"
                            style="width: fit-content;" id="content-save-btn">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- Modal -->
    <div class="modal fade modal-fullscreen" id="historyPreviewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title" id="exampleModalLabel">Preview</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="nameTemplateModal" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title" id="exampleModalLabel1">New Template Name</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form name="title" action="{{ route('admin.page.saveNewTemplate', [$page_content->content_id]) }}" method="POST" enctype="multipart/form-data" class="validate">
              {{ csrf_field() }}
              <input class="form-control" type="text" name="title">
              <button class="btn knowmad_btn_blue" type="submit">Save</button>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
@endsection
@push('footer_js')
    <script src="/tinymce/tinymce.min.js"></script>
    <script src="/js/tinymce_wysiwyg_helper.js"></script>

    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
    {{-- <script src="https://unpkg.com/grapesjs"></script> --}}
    <script src="\..\editorworld\resources\assets\js\grapesjs.js"></script>
    {{-- \..\js\chat.js --}}
    <script src="\..\editorworld\resources\assets\js\index.js"></script>
    <script src="https://unpkg.com/grapesjs-preset-webpage@1.0.2"></script>
    <script src="https://unpkg.com/grapesjs-blocks-basic"></script>
    <script src="https://unpkg.com/grapesjs-plugin-forms@2.0.5"></script>
    <script src="https://unpkg.com/grapesjs-component-countdown@1.0.1"></script>
    <script src="https://unpkg.com/grapesjs-plugin-export@1.0.11"></script>
    {{-- <script src="https://unpkg.com/grapesjs-tabs@1.0.6"></script> --}}
    <script src="\..\editorworld\resources\assets\js\grapesjs-tabs.js"></script>
    <script src="https://unpkg.com/grapesjs-custom-code@1.0.1"></script>
    {{-- <script src="https://unpkg.com/grapesjs-touch@0.1.1"></script> --}}
    <script src="\..\editorworld\resources\assets\js\grapesjs-touch.js"></script>
    <script src="https://unpkg.com/grapesjs-parser-postcss@1.0.1"></script>
    {{-- <script src="https://unpkg.com/grapesjs-rte-extensions"></script> --}}
    {{-- <script src="\..\editorworld\resources\assets\js\grapesjs-rte-extensions.js"></script> --}}
    <script src="https://unpkg.com/grapesjs-tooltip@0.1.7"></script>
    {{-- <script src="https://unpkg.com/grapesjs-typed@1.0.5"></script> --}}
    <script src="\..\editorworld\resources\assets\js\grapesjs-typed.js"></script>
    <script src="https://unpkg.com/grapesjs-style-bg@2.0.1"></script>
    <script src="https://unpkg.com/grapesjs-plugin-header"></script>
    <script type="application/javascript">

      document.getElementById("pageContent").onkeypress = function(e) {
        var key = e.charCode || e.keyCode || 0;     
        if (key == 13) {
          e.preventDefault();
        }
      }

      /** @type HTMLButtonElement */
      let contentSaveBtn = document.getElementById('content-save-btn');
      contentSaveBtn.addEventListener('click', (ev) => {
          /** we have to store the editor's projct data separate from form data
           * */
          // Store data
          editor.store().then(
            (res) => {
             /** save form data after ajax is done */
              $('#pageContent').submit();
              this.isLoading = false;
            },
            (err) => {
              console.error({ err });
              this.isLoading = false;
            });
      });

      let historyPreviewModal = new bootstrap.Modal(document.getElementById('historyPreviewModal'), {});

        /** 
         * Source code for grapesjs demo
         * https://github.com/artf/grapesjs/blob/gh-pages/demo.html
         * 
        */
        
        const editor = grapesjs.init({
            // Indicate where to init the editor. You can also pass an HTMLElement
            container: '#gjs',
            
            storageManager: {
              type: 'remote',
              stepsBeforeSave: 3,
              options: {
                remote: {
                  urlLoad: '{{ $projectLoadEndpoint }}',
                  urlStore: '{{ $projectStoreEndpoint }}',
                  // The `remote` storage uses the POST method when stores data but
                  // the json-server API requires PATCH.
                  // fetchOptions: opts => (opts.method === 'POST' ?  { method: 'PATCH' } : {}),
                  // As the API stores projects in this format `{id: 1, data: projectData }`,
                  // we have to properly update the body before the store and extract the
                  // project data from the response result.
                  onStore: data => ({ data, html: editor.getHtml(), css: `<style>${editor.getCss()}</style>` }),
                  onLoad: result => {
                    console.log({result});
                    

                    // if (result.data) {
                    //   editor.loadProjectData(result.data);
                    // }
                  },
                }
              }
            },
            assetManager: {
              // embedAsBase64: false,
              // Upload endpoint, set `false` to disable upload, default `false`
              // upload: 'cms_image_uploads',
              // The name used in POST to pass uploaded files, default: `'files'`
              // uploadName: 'files',
            },
            // Size of the editor
            height: '80vh',
            width: 'auto',
            // Get the content for the canvas directly from the element
            // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
            // components: content,
            showOffsets: true,
            selectorManager: { componentFirst: true },
            plugins: [
                'grapesjs-preset-webpage', 
                'gjs-blocks-basic',
                'grapesjs-plugin-forms',
                'grapesjs-component-countdown',
                'grapesjs-plugin-export',
                'grapesjs-tabs',
                'grapesjs-custom-code',
                'grapesjs-touch',
                'grapesjs-parser-postcss',
                // 'grapesjs-rte-extensions',
                'grapesjs-tooltip',
                'grapesjs-typed',
                'grapesjs-style-bg',
                // 'grapesjs-plugin-header',
            ],
            pluginsOpts: {
                'grapesjs-preset-webpage': {
                    modalImportTitle: 'Import Template',
                    modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
                    modalImportContent: function(editor) {
                    return editor.getHtml() + '<style>'+editor.getCss()+'</style>'
                    },
                },
                'gjs-blocks-basic': { flexGrid: true },
                'grapesjs-typed': {
                    block: {
                        category: 'Extra',
                        content: {
                            type: 'typed',
                            'type-speed': 40,
                            strings: [
                            'Text row one',
                            'Text row two',
                            'Text row three',
                            ],
                        },
                    }
                },
                'grapesjs-tabs': {
                    tabsBlock: { category: 'Extra' }
                },
                'grapesjs-rte-extensions': {
                    // default options
                    base: {
                      bold: true,
                      italic: true,
                      underline: true,
                      strikethrough: true,
                      link: true,
                    },
                    //fonts: {
                    //  fontName: ['font1',...,'fontn'],
                    //  fontSize: true,
                    //  //An array of strings representing colors
                    //  fontColor: ['#fff',...],
                    //  //An array of strings representing colors
                    //  hilite: ['#fff',...],
                    //}
                    fonts: {
                      fontColor: true,
                      hilite: true,
                    },
                    format: {
                      heading1: true,
                      heading2: true,
                      heading3: true,
                      //heading4: false,
                      //heading5: false,
                      //heading6: false,
                      paragraph: true,
                      //quote: false,
                      clearFormatting: true,
                    },
                    subscriptSuperscript: false,//|true
                    indentOutdent: false,//|true
                    list: true,//|true
                    align: true,//|true
                    //actions: {
                    //  copy: true,
                    //  cut: true,
                    //  paste: true,
                    //  delete: true,
                    //},
                    actions: false,//|true
                    undoredo: false,//|true
                    extra: false,//|true
                    darkColorPicker: true,//|false
                    maxWidth: '600px'
                    },
            },
            styleManager: {
              sectors: [{
                  name: 'General',
                  properties:[
                    {
                      extend: 'float',
                      type: 'radio',
                      default: 'none',
                      options: [
                        { value: 'none', className: 'fa fa-times'},
                        { value: 'left', className: 'fa fa-align-left'},
                        { value: 'right', className: 'fa fa-align-right'}
                      ],
                    },
                    'display',
                    { extend: 'position', type: 'select' },
                    'top',
                    'right',
                    'left',
                    'bottom',
                  ],
                }, {
                    name: 'Dimension',
                    open: false,
                    properties: [
                      'width',
                      {
                        id: 'flex-width',
                        type: 'integer',
                        name: 'Width',
                        units: ['px', '%'],
                        property: 'flex-basis',
                        toRequire: 1,
                      },
                      'height',
                      'max-width',
                      'min-height',
                      'margin',
                      'padding'
                    ],
                  },{
                    name: 'Typography',
                    open: false,
                    buildProps: [],
                    properties: [
                        {
                          property: 'font-family',
                          name: 'Font',
                          default: 'Lato, sans-serif',
                          list: [
                            {name: 'Arial', value: 'Arial, sans-serif'},
                            {name: 'Lato', value: 'Lato, sans-serif'},
                          ]
                        },
                        'font-size',
                        'font-weight',
                        'letter-spacing',
                        'color',
                        'line-height',
                        {
                          extend: 'text-align',
                          options: [
                            { id : 'left',  label : 'Left',    className: 'fa fa-align-left'},
                            { id : 'center',  label : 'Center',  className: 'fa fa-align-center' },
                            { id : 'right',   label : 'Right',   className: 'fa fa-align-right'},
                            { id : 'justify', label : 'Justify',   className: 'fa fa-align-justify'}
                          ],
                        },
                        {
                          property: 'text-decoration',
                          type: 'radio',
                          default: 'none',
                          options: [
                            { id: 'none', label: 'None', className: 'fa fa-times'},
                            { id: 'underline', label: 'underline', className: 'fa fa-underline' },
                            { id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough'}
                          ],
                        },
                        'text-shadow'
                    ],
                  },{
                    name: 'Decorations',
                    open: false,
                    properties: [
                      'opacity',
                      'border-radius',
                      'border',
                      'box-shadow',
                      'background', // { id: 'background-bg', property: 'background', type: 'bg' }
                    ],
                  },{
                    name: 'Extra',
                    open: false,
                    buildProps: [
                      'transition',
                      'perspective',
                      'transform',
                    ],
                  },{
                    name: 'Flex',
                    open: false,
                    properties: [{
                      name: 'Flex Container',
                      property: 'display',
                      type: 'select',
                      defaults: 'block',
                      list: [
                        { value: 'block', name: 'Disable'},
                        { value: 'flex', name: 'Enable'}
                      ],
                    },{
                      name: 'Flex Parent',
                      property: 'label-parent-flex',
                      type: 'integer',
                    },{
                      name: 'Direction',
                      property: 'flex-direction',
                      type: 'radio',
                      defaults: 'row',
                      list: [{
                        value: 'row',
                        name: 'Row',
                        className: 'icons-flex icon-dir-row',
                        title: 'Row',
                      },{
                        value: 'row-reverse',
                        name: 'Row reverse',
                        className: 'icons-flex icon-dir-row-rev',
                        title: 'Row reverse',
                      },{
                        value: 'column',
                        name: 'Column',
                        title: 'Column',
                        className: 'icons-flex icon-dir-col',
                      },{
                        value: 'column-reverse',
                        name: 'Column reverse',
                        title: 'Column reverse',
                        className: 'icons-flex icon-dir-col-rev',
                      }],
                    },{
                      name: 'Justify',
                      property: 'justify-content',
                      type: 'radio',
                      defaults: 'flex-start',
                      list: [{
                        value: 'flex-start',
                        className: 'icons-flex icon-just-start',
                        title: 'Start',
                      },{
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-just-end',
                      },{
                        value: 'space-between',
                        title: 'Space between',
                        className: 'icons-flex icon-just-sp-bet',
                      },{
                        value: 'space-around',
                        title: 'Space around',
                        className: 'icons-flex icon-just-sp-ar',
                      },{
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-just-sp-cent',
                      }],
                    },{
                      name: 'Align',
                      property: 'align-items',
                      type: 'radio',
                      defaults: 'center',
                      list: [{
                        value: 'flex-start',
                        title: 'Start',
                        className: 'icons-flex icon-al-start',
                      },{
                        value: 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-al-end',
                      },{
                        value: 'stretch',
                        title: 'Stretch',
                        className: 'icons-flex icon-al-str',
                      },{
                        value: 'center',
                        title: 'Center',
                        className: 'icons-flex icon-al-center',
                      }],
                    },{
                      name: 'Flex Children',
                      property: 'label-parent-flex',
                      type: 'integer',
                    },{
                      name: 'Order',
                      property: 'order',
                      type: 'integer',
                      defaults: 0,
                      min: 0
                    },{
                      name: 'Flex',
                      property: 'flex',
                      type: 'composite',
                      properties  : [{
                        name: 'Grow',
                        property: 'flex-grow',
                        type: 'integer',
                        defaults: 0,
                        min: 0
                      },{
                        name: 'Shrink',
                        property: 'flex-shrink',
                        type: 'integer',
                        defaults: 0,
                        min: 0
                      },{
                        name: 'Basis',
                        property: 'flex-basis',
                        type: 'integer',
                        units: ['px','%',''],
                        unit: '',
                        defaults: 'auto',
                      }],
                    },{
                      name: 'Align',
                      property: 'align-self',
                      type: 'radio',
                      defaults: 'auto',
                      list: [{
                        value: 'auto',
                        name: 'Auto',
                      },{
                        value: 'flex-start',
                        title: 'Start',
                        className: 'icons-flex icon-al-start',
                      },{
                        value   : 'flex-end',
                        title: 'End',
                        className: 'icons-flex icon-al-end',
                      },{
                        value   : 'stretch',
                        title: 'Stretch',
                        className: 'icons-flex icon-al-str',
                      },{
                        value   : 'center',
                        title: 'Center',
                        className: 'icons-flex icon-al-center',
                      }],
                    }]
                  }
                ],
            },
        
   
            // Avoid any default panel
            // panels: {
            //     defaults: []
            // },
            blockManager: {
                // appendTo: '#blocks',
                blocks: [
                {
                    id: 'h1-block', // id is mandatory
                    label: 'H1',
                    content: '<h1>Put your title here</h1>',
                    category: 'Headings',
                    attributes: {
                      title: 'Insert h1 block'
                    }
                }, 
                {
                    id: 'h2-block',
                    label: 'H2',
                    content: '<h2>Put your title here</h2>',
                    category: 'Headings',
                    attributes: {
                      title: 'Insert h2 block'
                    }
                }, 
                {
                    id: 'h3-block',
                    label: 'H3',
                    content: '<h3>Put your title here</h3>',
                    category: 'Headings',
                    attributes: {
                      title: 'Insert h3 block'
                    }
                }, 
                {
                    id: 'h4-block',
                    label: 'H4',
                    content: '<h4>Put your title here</h4>',
                    category: 'Headings',
                    attributes: {
                      title: 'Insert h4 block'
                    }
                }, 
                {
                    id: 'h5-block',
                    label: 'H5',
                    content: '<h5>Put your title here</h5>',
                    category: 'Headings',
                    attributes: {
                      title: 'Insert h5 block'
                    }
                }, 
                {
                    id: 'h6-block',
                    label: 'H6',
                    content: '<h6>Put your title here</h6>',
                    category: 'Headings',
                    attributes: {
                      title: 'Insert h6 block'
                    }
                }, 
             
                ]
            },
            canvas: {
              
              /*
              * https://grapesjs.com/docs/modules/Components-js.html#template-related
              * ****Keep in mind that the editor won't render those dependencies in the exported HTML (eg. via editor.getHtml()), so it's up to you how to include them in the final page where the final HTML is rendered.
              * SW, 1/9/2023
              * These links are copied from editorworld/resources/views/layouts/app.blade.php
              */

              scripts: [
                'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js',
                'https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js',
              ],
              styles:[
                // bootstrap 
                'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css',

                // local css
                '/editorworld/resources/assets/sass/knowmad_design.scss',
                '/editorworld/resources/assets/sass/media_queries.scss',
                '/editorworld/resources/assets/fonts/stylesheet.css',
                '/editorworld/resources/assets/css/app.css',
              ]
            },
        });
        // Use the API
        const blockManager = editor.Blocks;
        // blockManager.add('h1-block', {
        //   label: 'H1',
        //   content: '<h1>Put your title here</h1>',
        //   category: 'Basic',
        //   attributes: {
        //     title: 'Insert h1 block'
        //   }
        // });
        // blockManager.add('h2-block', {
        //   label: 'H2',
        //   content: '<h2>Put your title here</h2>',
        //   category: 'Basic',
        //   attributes: {
        //     title: 'Insert h2 block'
        //   }
        // });
        // console.log([editor.getHtml(), editor.getCss()]);

        function previewHistoryEntry(revision_id) {
          console.log({revision_id, historyPreviewModal});
          // historyPreviewModal._element.innerHtml = entry.page_html_content;
          // const modalBody = document.querySelector(".modal-body");
          // modalBody.innerHtml = entry_html;
          // console.log('innerHtml', modalBody.innerHtml);
          // $(modalBody).append(entry_html);
          $('.modal-body').load(`../../../ajax/preview_revision_entry/${revision_id}`, function() {
              historyPreviewModal.show();
          });
          
        }

        function previewTemplate(template_id) {
          console.log({template_id, historyPreviewModal});
          // historyPreviewModal._element.innerHtml = entry.page_html_content;
          // const modalBody = document.querySelector(".modal-body");
          // modalBody.innerHtml = entry_html;
          // console.log('innerHtml', modalBody.innerHtml);
          // $(modalBody).append(entry_html);
          $('.modal-body').load(`../../../ajax/preview_template/${template_id}`, function() {
              historyPreviewModal.show();
          });
          
        }

        // function restoreHistoryEntry(entry) {
        //   // console.log({entry});
          
        //   if (confirm('Any unsaved changes will be lost. Continue?')) {
        //     this.isLoading = true;
        //     // Load project data from revision
        //     const loading = editor.loadProjectData({});
        //     console.log(editor.getProjectData());
        //     console.log({ editor, entry, loading });
        //     // Store data
        //     const storedProjectData = editor.store().then(
        //     (res) => {
             
        //       console.log({storedProjectData});
        //       this.isLoading = false;
        //     },
        //     (err) => {
        //       console.error({ err });
        //       this.isLoading = false;
        //     });
        //   }
        // }

        // function restoreTemplate(entry) {
        //   // console.log({entry});
          
        //   if (confirm('Any unsaved changes will be lost. Continue?')) {
        //     this.isLoading = true;
        //     // Load project data from template
        //     const loading = editor.loadProjectData({});
        //     console.log(editor.getProjectData());
        //     console.log({ editor, entry, loading });
        //     // Store data
        //     const storedProjectData = editor.store().then(
        //     (res) => {
             
        //       console.log({storedProjectData});
        //       this.isLoading = false;
        //     },
        //     (err) => {
        //       console.error({ err });
        //       this.isLoading = false;
        //     });
        //   }
        // }
    </script>
@endpush