@extends("common.layout-popup")

@section("header")

@endsection

@section("page-title", "금지어 관리")
@section("content")
<div class="alert alert-info">
    금지어 입력 후 엔터(ENTER) 키를 입력해 주세요.
</div>

<section>
    <header>금지어</header>
    <main>
        <input type="text" name="forbidden-word" id="forbidden-word" class="form-control" placeholder="금지어를 입력하세요">

        <ul class="list-item-none mt-3 forbidden-words">
            <li id="default" style="display: none">
                <span class="badge badge-warning">
                    <span class="forbidden-word"></span>
                    <a class="onRemove"><i class="bi bi-x fs-3"></i></a>
                </span>
            </li>
            @foreach($forbiddenWords as $word)
                <li>
                    <span class="badge badge-warning">
                        <span class="forbidden-word">{{ $word->name }}</span>
                        <a class="onRemove"><i class="bi bi-x fs-3"></i></a>
                    </span>
                </li>
            @endforeach
        </ul>
    </main>
    <footer class="align-right">
        <button class="btn btn-danger" type="button" onclick="onRemove()">전체삭제</button>
        <button class="btn btn-primary" type="button" onclick="handleSubmit()">적용</button>
    </footer>
</section>

@endsection

@push("script")
<script>
    $(function() {
        $('#forbidden-word').on("keyup", function(e) {
            if (e.originalEvent.keyCode == 13) {
                const word = $(this).val();

                if (! isOverlay(word)) {
                    const item = $('li#default').clone();
                    item.find(".forbidden-word").text(word);

                    item.attr("id", "");
                    item.show();
                    $('.forbidden-words').append(item);
                }

                $(this).val("");
            }
        });

        $(document).on("click",".onRemove" , function() {
            $(this).closest("li").remove()
        })
    })

    function isOverlay(word) {
        let isOverlay = false;
        $.each($("li:not(#default) span.forbidden-word"), function() {
            if ($(this).text() == word) {
                isOverlay = true;
            }
        })

        return isOverlay;
    }
    function onRemove() {
        $.each($("li:not(#default)"), function() {
            $(this).remove()
        })
    }
    async function handleSubmit() {
        const words = [];
        $.each($("li:not(#default) span.forbidden-word"), function() {
            words.push($(this).text());
        })
        const result = await customFetch("{{ route('api.board.set-forbidden-words') }}", {
            method: "POST",
            body : JSON.stringify({ "words" : words}) ,
            headers: { "Content-Type" : "application/json"}
        });

        if (result.status) {
            alertify.alert("완료", "저장되었습니다.", () => {
                window.close();
            });
        } else {
            alertify.alert("error", result.message);
        }

    }
</script>
@endpush