@if(Auth::user()->super_admin !== 1)
{{ Auth::logout() }}
@endif
@include('includes.header')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container page__heading-container">
  <div class="page__heading d-flex align-items-end">
    <div class="flex">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item">{{ $categorie }}</li>
          <li class="breadcrumb-item"
          aria-current="page"><a href="{{ route('admcopropriete') }}">Copropriétés</a></li>
          <li class="breadcrumb-item active"
          aria-current="page">Personnalisation web</li>
        </ol>
      </nav>
      <h1 class="m-0">{{ $admcustomize->nom }}</h1>
    </div>
    @include('includes.toast', ['msg' => $msg])
  </div>
</div>
<div class="card card__course container page__container">
  <div class="main-container">
    <div class="editor-container editor-container_document-editor editor-container_include-fullscreen" id="editor-container">
      <div class="editor-container__toolbar" id="editor-toolbar"></div>
      <div class="editor-container__editor-wrapper">
        <div class="editor-container__editor"><div id="editor"></div></div>
      </div>
    </div>
  </div>
</div>

</div>
<!-- // END Header Layout Content -->
</div>
<!-- // END Header Layout -->
@include('includes.footer')
<style>
  [dir] .dropzone .dz-message {
   padding: 0px !important;
   border: 0px !important;
   border-radius: 0px !important;
   background-color: transparent !important;
 }
 .dz-button {
  background: transparent;
  border: none;
}
</style>
<script>
  $(document).ready(function() {
    $('.selectmodules').select2();
  });
  var CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

  Dropzone.autoDiscover = false;
  var myDropzone = new Dropzone(".dropzone",{ 
        maxFilesize: 3,  // 3 m
        acceptedFiles: ".jpeg,.jpg,.png,.pdf",
        dictDefaultMessage: '<div class="dz-preview dz-file-preview dz-clickable" style="padding-bottom:10px"><div class="avatar dz-error dz-complete" style="width: 80px; height: 80px;"><img src="assets/images/account-add-photo.svg" class="avatar-img rounded" alt="..." data-dz-thumbnail=""></div></div>'
      });
  myDropzone.on("sending", function(file, xhr, formData) {
   formData.append("_token", CSRF_TOKEN);
   formData.append("file", file);
   console.log(file);
 });
  myDropzone.on("success", function(file, xhr) {
   console.log(file);
 }); 
</script>
<script src="https://cdn.ckeditor.com/ckeditor5/47.4.0/ckeditor5.umd.js" crossorigin></script>
<script src="https://cdn.ckeditor.com/ckeditor5/47.4.0/translations/fr.umd.js" crossorigin></script>
<script>
/**
 * This configuration was generated using the CKEditor 5 Builder. You can modify it anytime using this link:
 * https://ckeditor.com/ckeditor-5/builder/?redirect=portal#installation/NoTgNARATAdCMEYKQVBICsB2KA2ECADCFhocQCwDMWuAHBWg3viCGrghprlBchABmAJ2RUwwBGELSwUmQgC6kQgFMoVVXQwRFQA=
 */

  const {
    DecoupledEditor,
    Autosave,
    Essentials,
    Paragraph,
    Fullscreen,
    Autoformat,
    TextTransformation,
    Bold,
    Italic,
    Underline,
    Strikethrough,
    Code,
    Subscript,
    Superscript,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Highlight,
    Heading,
    Link,
    AutoLink,
    BlockQuote,
    HorizontalLine,
    Indent,
    IndentBlock,
    Alignment,
    Table,
    TableToolbar,
    TableLayout,
    PlainTableOutput
  } = window.CKEDITOR;

  const LICENSE_KEY =
  'eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE4MDE2MTI3OTksImp0aSI6ImZlNGVmYTk1LTQzNDktNGU1NC1hZmZlLWI4NzZhZjU2ZTZiMiIsImxpY2Vuc2VkSG9zdHMiOlsiMTI3LjAuMC4xIiwiYWxjb3Zlc2R1cGFsYWlzLmNvbSJdLCJ1c2FnZUVuZHBvaW50IjoiaHR0cHM6Ly9wcm94eS1ldmVudC5ja2VkaXRvci5jb20iLCJkaXN0cmlidXRpb25DaGFubmVsIjpbImNsb3VkIiwiZHJ1cGFsIl0sImZlYXR1cmVzIjpbIkRSVVAiLCJFMlAiLCJFMlciXSwicmVtb3ZlRmVhdHVyZXMiOlsiUEIiLCJSRiIsIlNDSCIsIlRDUCIsIlRMIiwiVENSIiwiSVIiLCJTVUEiLCJCNjRBIiwiTFAiLCJIRSIsIlJFRCIsIlBGTyIsIldDIiwiRkFSIiwiQktNIiwiRlBIIiwiTVJFIl0sInZjIjoiMDQ5Mzc3YmEifQ.9Zvt8Pq4SFHxRhgqwCswineQggmfsx-zyhR_sND4SLk8XqLRlKS-mJpJydxGuS1dB2Om9uEovYQgA6BmCde2aA';

  const editorConfig = {
    toolbar: {
      items: [
        'undo',
        'redo',
        '|',
        'fullscreen',
        '|',
        'heading',
        '|',
        'fontSize',
        'fontFamily',
        'fontColor',
        'fontBackgroundColor',
        '|',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'subscript',
        'superscript',
        'code',
        '|',
        'horizontalLine',
        'link',
        'insertTable',
        'insertTableLayout',
        'highlight',
        'blockQuote',
        '|',
        'alignment',
        '|',
        'outdent',
        'indent'
      ],
      shouldNotGroupWhenFull: false
    },
    plugins: [
      Alignment,
      Autoformat,
      AutoLink,
      Autosave,
      BlockQuote,
      Bold,
      Code,
      Essentials,
      FontBackgroundColor,
      FontColor,
      FontFamily,
      FontSize,
      Fullscreen,
      Heading,
      Highlight,
      HorizontalLine,
      Indent,
      IndentBlock,
      Italic,
      Link,
      Paragraph,
      PlainTableOutput,
      Strikethrough,
      Subscript,
      Superscript,
      Table,
      TableToolbar,
      TextTransformation,
      Underline
    ],
    fontFamily: {
      supportAllValues: true
    },
    fontSize: {
      options: [10, 12, 14, 'default', 18, 20, 22],
      supportAllValues: true
    },
    fullscreen: {
      onEnterCallback: container =>
      container.classList.add(
        'editor-container',
        'editor-container_document-editor',
        'editor-container_include-fullscreen',
        'main-container'
        )
    },
    heading: {
      options: [
        {
          model: 'paragraph',
          title: 'Paragraph',
          class: 'ck-heading_paragraph'
        },
        {
          model: 'heading1',
          view: 'h1',
          title: 'Heading 1',
          class: 'ck-heading_heading1'
        },
        {
          model: 'heading2',
          view: 'h2',
          title: 'Heading 2',
          class: 'ck-heading_heading2'
        },
        {
          model: 'heading3',
          view: 'h3',
          title: 'Heading 3',
          class: 'ck-heading_heading3'
        },
        {
          model: 'heading4',
          view: 'h4',
          title: 'Heading 4',
          class: 'ck-heading_heading4'
        },
        {
          model: 'heading5',
          view: 'h5',
          title: 'Heading 5',
          class: 'ck-heading_heading5'
        },
        {
          model: 'heading6',
          view: 'h6',
          title: 'Heading 6',
          class: 'ck-heading_heading6'
        }
      ]
    },
    autosave: {
            waitingTime: 1000, // in ms
            save( editor ) {
              let rawUrl = "{{ route('admcustomize.updatehome', ':id') }}";
              let finalUrl = rawUrl.replace(':id', {{ $id }});
              $.ajax({
                headers: {
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                    url: finalUrl, // Laravel route helper
                    type: "POST",
                    data: { id: {{$id}}, homepage: editor.getData() },
                    success: function(response) {
                      console.log(editor.getData());
                      console.log("Success:", response.message);
                    },
                    error: function(xhr) {
                      console.log(editor.getData());
                      console.log("Error:", xhr.responseText);
                    }
                  });
            }
          },
          initialData: `{!! $admcustomize->homepage !!}`,
          language: 'fr',
          licenseKey: LICENSE_KEY,
          link: {
            addTargetToExternalLinks: true,
            defaultProtocol: 'https://',
            decorators: {
              toggleDownloadable: {
                mode: 'manual',
                label: 'Downloadable',
                attributes: {
                  download: 'file'
                }
              }
            }
          },
          placeholder: 'Aucune note au dossier.',
          table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableType']
          }
        };

        configUpdateAlert(editorConfig);

        DecoupledEditor.create(document.querySelector('#editor'), editorConfig)
        .then(editor => {
          document.querySelector('#editor-toolbar').appendChild(editor.ui.view.toolbar.element);

          return editor;
        });

/**
 * This function exists to remind you to update the config needed for premium features.
 * The function can be safely removed. Make sure to also remove call to this function when doing so.
 */
        function configUpdateAlert(config) {
          if (configUpdateAlert.configUpdateAlertShown) {
            return;
          }

          const isModifiedByUser = (currentValue, forbiddenValue) => {
            if (currentValue === forbiddenValue) {
              return false;
            }

            if (currentValue === undefined) {
              return false;
            }

            return true;
          };

          const valuesToUpdate = [];

          configUpdateAlert.configUpdateAlertShown = true;

          if (!isModifiedByUser(config.licenseKey, '<YOUR_LICENSE_KEY>')) {
            valuesToUpdate.push('LICENSE_KEY');
          }

          if (valuesToUpdate.length) {
            window.alert(
              [
                'Please update the following values in your editor config',
                'to receive full access to Premium Features:',
                '',
                ...valuesToUpdate.map(value => ` - ${value}`)
              ].join('\n')
              );
          }
        }
      </script>
    </body>
    </html>