@push('head')
    <style>
        .ck-editor__editable {
            min-height: 460px !important;
        }

        .ck-editor__editable_inline {
            min-height: 460px !important;
        }

        .ck-focused .ck-editor__editable {
            min-height: 460px !important;
        }
    </style>
@endpush

<div class="ppt4 container-fluid">
    <div class="d-block rounded p-3 mb-3">
        <h4 class="card-title">Syarat dan Ketentuan</h4>
        <h6 class="card-subtitle">Page syarat dan ketentuan pt peronit</h6>
    </div>

    <div>
        <div class="d-block rounded shadow-sm bg-theme-box mb-3">
            <div class="d-flex border-bottom p-3">
                <span class="fw-bold">Content Pages</span>
            </div>
            <div class="p-3">
                <div class="mb-3">
                    <label for="title" class="form-label">Title</label>
                    <input type="text" class="form-control" id="title">
                </div>
                <div class="mb-3" wire:ignore>
                    <label for="content" class="form-label">Content</label>
                    <textarea name="content" id="content" rows="20" class="form-control"></textarea>
                </div>
            </div>
        </div>

        <div class="mb-3">
            @include('components.forms.SeoMetaForm')
        </div>

        <div class="d-block rounded shadow-sm bg-theme-box p-3 mb-3">
            <button class="btn btn-outline-warning px-5">Save Content</button>
        </div>
    </div>
</div>

@push('script')
    <script src="{{ url('/assets/editor/ckeditor.js') }}"></script>
    <script>
        document.addEventListener('livewire:navigated', () => {
            ClassicEditor.create(document.querySelector('#content'), {})
                .then(editor => {
                    editor.ui.view.editable.element.style.minHeight = '460px';

                    editor.model.document.on('change:data', () => {
                        @this.set('field.body', editor.getData());
                    });
                })
                .catch(error => console.error(error));
        });
    </script>
@endpush