<?php

$editorContent =
    (string) ($editorContent ?? '');

?>


<style>
/* POST EDITOR - SELF CONTAINED STYLE */

.pet-rich-editor {
    width: 100%;
    overflow: hidden;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pet-rich-editor:hover {
    border-color: #cfd5df;
}

.pet-rich-editor:focus-within {
    border-color: #ff8798;
    box-shadow: 0 0 0 3px rgba(255, 111, 134, .10);
}

.pet-rich-editor-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 54px;
    padding: 8px 10px;
    border-bottom: 1px solid #e4e8ee;
    background: #fbfcfd;
}

.pet-rich-editor-toolbar button {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid #e0e4ea;
    border-radius: 8px;
    background: #fff;
    color: #343842;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.pet-rich-editor-toolbar button:hover {
    border-color: #cbd2dc;
    background: #f7f8fa;
    color: #171a21;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
}

.pet-rich-editor-toolbar button:active {
    transform: translateY(1px);
}

.pet-rich-editor-toolbar button:focus {
    outline: none;
}

.pet-rich-editor-toolbar select {
    width: auto;
    min-width: 100px;
    height: 36px;
    margin: 0;
    padding: 0 30px 0 11px;
    border: 1px solid #e0e4ea;
    border-radius: 8px;
    background: #fff;
    color: #30343c;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}

.pet-rich-editor-toolbar select:focus {
    outline: none;
    border-color: #ff96a6;
    box-shadow: 0 0 0 3px rgba(255, 111, 134, .10);
}

.pet-editor-divider {
    width: 1px;
    height: 24px;
    flex: 0 0 1px;
    margin: 0 2px;
    background: #dde2e9;
}

#petPostEditor.pet-rich-editor-content {
    width: 100%;
    min-height: 500px;
    height: 500px;
    max-height: 760px;
    display: block;
    margin: 0;
    padding: 22px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    outline: 0;
    background: #fff;
    color: #292d35;
    font-size: 16px;
    line-height: 1.75;
    box-shadow: none;
    box-sizing: border-box;
}

#petPostEditor.pet-rich-editor-content:empty::before {
    content: attr(data-placeholder);
    color: #9aa0aa;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .pet-rich-editor-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .pet-rich-editor-toolbar > * {
        flex: 0 0 auto;
    }

    .pet-editor-divider {
        display: none;
    }

    #petPostEditor.pet-rich-editor-content {
        min-height: 300px;
        height: 300px;
        max-height: 520px;
        padding: 16px;
        font-size: 15px;
    }
}
</style>

<div class="pet-rich-editor">

    <div class="pet-rich-editor-toolbar">

        <button type="button" data-command="undo" title="Hoàn tác">
            <i class="bi bi-arrow-counterclockwise"></i>
        </button>

        <button type="button" data-command="redo" title="Làm lại">
            <i class="bi bi-arrow-clockwise"></i>
        </button>

        <span class="pet-editor-divider"></span>

        <select
            id="petEditorBlock"
            title="Kiểu đoạn"
        >
            <option value="p">Đoạn văn</option>
            <option value="h2">Tiêu đề 2</option>
            <option value="h3">Tiêu đề 3</option>
            <option value="h4">Tiêu đề 4</option>
        </select>

        <select
            id="petEditorFontSize"
            title="Cỡ chữ"
        >
            <option value="">Cỡ chữ</option>
            <option value="2">Nhỏ</option>
            <option value="3">Bình thường</option>
            <option value="4">Lớn</option>
            <option value="5">Rất lớn</option>
        </select>

        <span class="pet-editor-divider"></span>

        <button type="button" data-command="bold" title="In đậm">
            <strong>B</strong>
        </button>

        <button type="button" data-command="italic" title="In nghiêng">
            <em>I</em>
        </button>

        <button type="button" data-command="underline" title="Gạch chân">
            <u>U</u>
        </button>

        <span class="pet-editor-divider"></span>

        <button type="button" data-command="justifyLeft" title="Căn trái">
            <i class="bi bi-text-left"></i>
        </button>

        <button type="button" data-command="justifyCenter" title="Căn giữa">
            <i class="bi bi-text-center"></i>
        </button>

        <button type="button" data-command="justifyRight" title="Căn phải">
            <i class="bi bi-text-right"></i>
        </button>

        <button type="button" data-command="justifyFull" title="Căn đều">
            <i class="bi bi-justify"></i>
        </button>

        <span class="pet-editor-divider"></span>

        <button
            type="button"
            data-command="insertUnorderedList"
            title="Danh sách dấu chấm"
        >
            <i class="bi bi-list-ul"></i>
        </button>

        <button
            type="button"
            data-command="insertOrderedList"
            title="Danh sách đánh số"
        >
            <i class="bi bi-list-ol"></i>
        </button>

        <button
            type="button"
            id="petEditorLink"
            title="Chèn liên kết"
        >
            <i class="bi bi-link-45deg"></i>
        </button>

        <button
            type="button"
            data-command="removeFormat"
            title="Xóa định dạng"
        >
            <i class="bi bi-eraser"></i>
        </button>

    </div>


    <div
        id="petPostEditor"
        class="pet-rich-editor-content"
        contenteditable="true"
        spellcheck="true"
        data-placeholder="Nhập hoặc dán nội dung bài viết tại đây..."
    ><?= $editorContent ?></div>


    <textarea
        name="content"
        id="petPostContent"
        class="d-none"
    ></textarea>

</div>


<small class="text-muted d-block mt-2">
    Có thể copy nội dung từ ChatGPT hoặc nguồn khác và giữ
    các định dạng cơ bản như tiêu đề, chữ đậm, danh sách và xuống dòng.
</small>


<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {

        const editor =
            document.getElementById(
                'petPostEditor'
            );

        const hiddenInput =
            document.getElementById(
                'petPostContent'
            );

        const form =
            editor?.closest('form');


        if (
            !editor
            ||
            !hiddenInput
            ||
            !form
        ) {
            return;
        }


        /*
        |--------------------------------------------------------------------------
        | Lệnh toolbar
        |--------------------------------------------------------------------------
        */

        document
            .querySelectorAll(
                '.pet-rich-editor-toolbar [data-command]'
            )
            .forEach(function (button) {

                button.addEventListener(
                    'click',
                    function () {

                        const command =
                            this.dataset.command;

                        editor.focus();

                        document.execCommand(
                            command,
                            false,
                            null
                        );

                    }
                );

            });


        /*
        |--------------------------------------------------------------------------
        | Heading
        |--------------------------------------------------------------------------
        */

        const blockSelect =
            document.getElementById(
                'petEditorBlock'
            );


        blockSelect?.addEventListener(
            'change',
            function () {

                editor.focus();

                document.execCommand(
                    'formatBlock',
                    false,
                    this.value
                );

                this.value = 'p';

            }
        );


        /*
        |--------------------------------------------------------------------------
        | Font size
        |--------------------------------------------------------------------------
        */

        const fontSize =
            document.getElementById(
                'petEditorFontSize'
            );


        fontSize?.addEventListener(
            'change',
            function () {

                if (!this.value) {
                    return;
                }

                editor.focus();

                document.execCommand(
                    'fontSize',
                    false,
                    this.value
                );

                this.value = '';

            }
        );


        /*
        |--------------------------------------------------------------------------
        | Link
        |--------------------------------------------------------------------------
        */

        const linkButton =
            document.getElementById(
                'petEditorLink'
            );


        linkButton?.addEventListener(
            'click',
            function () {

                const selection =
                    window.getSelection();

                if (
                    !selection
                    ||
                    selection.toString().trim() === ''
                ) {

                    alert(
                        'Hãy bôi đen đoạn chữ cần gắn liên kết.'
                    );

                    return;
                }


                const url =
                    prompt(
                        'Nhập đường dẫn:',
                        'https://'
                    );


                if (!url) {
                    return;
                }


                editor.focus();

                document.execCommand(
                    'createLink',
                    false,
                    url
                );

            }
        );


        /*
        |--------------------------------------------------------------------------
        | Đồng bộ editor → textarea trước khi submit
        |--------------------------------------------------------------------------
        */

        form.addEventListener(
            'submit',
            function (event) {

                const html =
                    editor.innerHTML.trim();

                const plainText =
                    editor.innerText.trim();


                if (plainText === '') {

                    event.preventDefault();

                    alert(
                        'Vui lòng nhập nội dung bài viết.'
                    );

                    editor.focus();

                    return;
                }


                hiddenInput.value =
                    html;

            }
        );

    }
);

</script>