@extends("domains.common.layouts.layout")
@section("header")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/toastEditor.js',
])
@endsection

@section("main-content")
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1 style="color:gray; font-size: 3rem;"><span style="font-size: 3rem; color: rgb(53, 50, 50);">ed:<strong style="color: rgb(95, 158, 44)">m</strong> 아이엘츠 </span>통합 관리 시스템</h1>
            </div>
        </div>
    </div>

    <div class="row" style="width: 40%">
        <select name="" id="tom-select">
        </select>
    </div>

    <div class="row" style="width: 40%">
        <p>버튼 스타일</p>
        <div style="display: flex">
            <button class="button btn-style-0">dark primary</button>
            <button class="button btn-style-1">primary</button>
            <button class="button btn-style-2">success</button>
            <button class="button btn-style-3">info</button>
            <button class="button btn-style-4">warning</button>
            <button class="button btn-style-5">danger</button>
            <button class="button btn-style-6">gray</button>
            <button class="button btn-style-7">light gray</button>
            <button class="button btn-style-8">white</button>
        </div>
    </div>

    <div class="row" style="width: 90%">
        <div id="tui-grid"></div>
    </div>

    <div class="row" style="width: 90%">
        <div id="tui-editor"></div>
    </div>

</div>
@endsection

@push("script")
<script>
    let selectTmp;
    let editorTmp;

    window.addEventListener("load", () => {
        selectTmp = new TomSelect("#tom-select", {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow"
            ],
            maxItems: null
        });

        editorTmp = new Editor({
            el: document.querySelector("#tui-editor"),
            height: 'auto',
            initialEditType: 'wysiwyg',
            previewStyle: 'vertical',
            language: 'ko-KR',
            toolbarItems: [
                ['heading', 'bold', 'italic', 'strike'],
                ['hr', 'quote'],
                ['ul', 'ol', 'task', 'indent', 'outdent'],
                ['table', 'image', 'link'],
                ['code', 'codeblock'],
                ['scrollSync'],
            ],
            plugins: [colorSyntax]
        });

        let editableElems = document.querySelectorAll("div.toastui-editor.ww-mode");
        editableElems.forEach(element => {
            element.addEventListener("click", (e) => {
                let editElem = e.target.querySelector("div.ProseMirror.toastui-editor-contents");
                if (editElem)
                    editElem.focus();
            });
        });
    });
</script>
@endpush