@include('admin/header')

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.css">
    <div class="col-lg-10 col-md-12 py-4">
      @include('flash_message')

      <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Edit: {{ record.title }}</h5>
        </div>

        <div class="card-body">
          <form action="{{ route('content_management.update', { id: record.slug }) }}?_method=PUT" method="POST">
            {{ csrfField() }}

            <!-- Content Editor -->
            <div class="mb-3">
              <label for="editor" class="form-label">Content <span class="text-danger">*</span></label>
              <textarea id="editor" name="content" class="form-control" required>{{ record.content }}</textarea>
              <div class="form-text">You can style your content using the editor options.</div>
            </div>

            <!-- Submit Button -->
            <div class="d-block">
              <button type="submit" class="btn btn-custom">
                <i class="bi bi-save me-1"></i> Save Changes
              </button>
            </div>

          </form>
        </div>
      </div>

    </div>
<script type="importmap">
{
  "imports": {
    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.js",
    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.1/"
  }
}
</script>

<script type="module">
  import {
    ClassicEditor,
    Essentials,
    Paragraph,
    Bold,
    Italic,
    Underline,
    Strikethrough,
    FontSize,
    FontFamily,
    FontColor,
    FontBackgroundColor,
    List,
    Link,
    Alignment,
    BlockQuote,
    Heading
  } from 'ckeditor5';

  ClassicEditor
    .create(document.querySelector('#editor'), {
      plugins: [
        Essentials,
        Paragraph,
        Heading,
        Bold,
        Italic,
        Underline,
        Strikethrough,
        FontSize,
        FontFamily,
        FontColor,
        FontBackgroundColor,
        List,
        Link,
        Alignment,
        BlockQuote
      ],
      toolbar: [
        'undo', 'redo', '|',
        'heading', '|',
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'fontSize', 'fontFamily', '|',
        'fontColor', 'fontBackgroundColor', '|',
        'alignment', '|',
        'numberedList', 'bulletedList', '|',
        'link', 'blockQuote'
      ],

      // ✅ Heading levels h1–h6
      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' }
        ]
      },

      // ✅ Font sizes from 8 to 64
      fontSize: {
        options: [
          8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36
        ],
        supportAllValues: true
      },

      fontFamily: {
        options: [
          'default',
          'Arial, Helvetica, sans-serif',
          'Courier New, Courier, monospace',
          'Georgia, serif',
          'Lucida Sans Unicode, Lucida Grande, sans-serif',
          'Tahoma, Geneva, sans-serif',
          'Times New Roman, Times, serif',
          'Trebuchet MS, Helvetica, sans-serif',
          'Verdana, Geneva, sans-serif'
        ],
        supportAllValues: true
      }
    })
    .then(editor => {
      window.editor = editor;
    })
    .catch(error => {
      console.error(error);
    });
</script>


@include('admin/footer')