@extends("domains.common.layouts.layout-popup")

@section("header")
@routes("board")
@vite([
    'resources/js/domains/common/tomSelect.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
    .tui-grid-layer-state {
        z-index: unset !important;
    }
</style>
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>금지어 관리</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
    금지어 입력 후 콤마(,) / 엔터(ENTER) / 탭(TAB) 키를 입력해 주세요.
    </p>
    <!-- 상품 추가 버튼 클릭시 해당 영역 복제 -->
    <div class="pd-wrap">
        <div class="pd-con-wrap">
            <div class="pd-con">
                <div class="add-list-wrapper">
                    <!-- 구성항목 타이틀 -->
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper">
                            </div>
                            <a href="#none" class="button btn-style-8">전체 삭제</a>
                        </div>
                    </div>
                    <input type="text" id="forbidden-words" value="{{ $forbiddenWords->implode("name", ",") }}" autocomplete="off">
                </div>
            </div>
        </div>
    <div class="text-center">
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">적용</button>
    </div>
</div>
@endsection

@push("script")
<script>
    let forbiddenWordsTomSelect = null;

    window.addEventListener("load", async () => {
        forbiddenWordsTomSelect = new TomSelect("#forbidden-words", {
            plugins: ['remove_button'],
			persist: false,
			create: true,
			// onDelete: function(values) {
			// 	return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
			// },
        });

        forbiddenWordsTomSelect.control_input.addEventListener("keydown", function(e) {
            if (e.key == "Tab") {
                e.preventDefault();
                e.stopPropagation();
                e.target.dispatchEvent(new KeyboardEvent("keydown", {
                    bubbles: true,
                    cancelable: true,
                    keyCode: 13,
                }));
             }
        });
    });

    function handleSubmit() {
        const formData = new FormData();

        const tmpValues = forbiddenWordsTomSelect.getValue();
        if (tmpValues)
            tmpValues.split(",").forEach(item => formData.append("words[]", item));

        edmAjax({
            url: route("api.board.set-forbidden-words"),
            method: "POST",
            data: formData,
            callback: response => {
                if (response.status == 200 || response.status == 201)
                    location.reload();
                else
                    alertify.alert("알림", "오류가 발생했습니다.<br>새로고침 후 다시 시도해주세요.");
            },
        });
    }
</script>
@endpush