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

@section("main-content")
    <div class="container-fluid detail">
        <form id="board-form">
            <input type="hidden" name="id" value="{{ $board->id }}">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h1><span class="point-color">{{ $board->name }}</span> 게시판 관리 상세</h1>
                        <ul class="page-wayfinding">
                            <li onclick="location.href={{ Js::from(route('board.list')) }}">게시판 관리</li>
                            <li>상세</li>
                        </ul>
                        <div class="page-btn-wrap">
                            <button type="button" class="button btn-style-2" onclick="location.href={{ Js::from(route('board.list')) }}">목록</button>
                            <button type="button" class="button btn-style-1" onclick="handleSubmit()">저장</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <h2 class="detail-title">게시판 정보</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>게시판 번호</dt>
                                        <dd>{{ $board->id }}</dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">게시판명</dt>
                                        <dd><input id="name" name="name" type="text" value="{{ $board->name }}"></dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>게시판 설명</dt>
                                        <dd><input id="description" name="description" type="text" value="{{ $board->description }}"></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>게시판 안내</dt>
                                        <dd><p class="p-alert">작성 시 게시판 목록 상단에 노출됩니다.</p></dd>
                                        <dd class="w100p"><div id="guide-editor" class="w100p"></div></dd>
                                    </dl>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">노출 옵션</h2>
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt>작성자 표시</dt>
                                <dd>
                                    <div>
                                        <select name="author_display_type" id="author_display_type">
                                            <option value="아이디" @selected(!$board->author_display_type || $board?->author_display_type == "아이디")>아이디</option>
                                            <option value="아이디 앞 3글자 노출" @selected($board?->author_display_type == "아이디 앞 3글자 노출")>아이디 앞 3글자 노출</option>
                                            <option value="이름" @selected($board?->author_display_type == "이름")>이름</option>
                                            <option value="이름 앞뒤 1글자 노출" @selected($board?->author_display_type == "이름 앞뒤 1글자 노출")>이름 앞뒤 1글자 노출</option>
                                        </select>
                                    </div>
                                    <p class="p-alert">이름이 1글자인 경우 성을 마스킹 처리 합니다.</p>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>상품 노출</dt>
                                <dd>
                                    <div>
                                        <select name="product_display_type" id="product_display_type">
                                            <option value="사용하지 않음" @selected(!$board->product_display_type || $board?->product_display_type == "사용하지 않음")>사용하지 않음</option>
                                            <option value="구매 상품" @selected($board?->product_display_type == "구매 상품")>구매 상품</option>
                                            <option value="같은 카테고리 상품 최근 3건" @selected($board?->product_display_type == "같은 카테고리 상품 최근 3건")>같은 카테고리 상품 최근 3건</option>
                                            <option value="최근 상품 3건" @selected($board?->product_display_type == "최근 상품 3건")>최근 상품 3건</option>
                                            <option value="인기 상품 3건" @selected($board?->product_display_type == "인기 상품 3건")>인기 상품 3건</option>
                                        </select>
                                    </div>
                                    <p class="p-alert">노출 옵션을 선택한 경우 게시글의 상세 페이지에 상품이 노출됩니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">읽기/쓰기 옵션</h2>
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt>읽기 제한</dt>
                                <dd>
                                    <div>
                                        <select name="read_type" id="read_type">
                                            <option value="전체" @selected(!$board->read_type || $board?->read_type == "전체")>전체</option>
                                            <option value="회원만" @selected($board?->read_type == "회원만")>회원만</option>
                                            <option value="결제 이력 있는 회원만" @selected($board?->read_type == "결제 이력 있는 회원만")>결제 이력 있는 회원만</option>
                                            <option value="수강중인 회원만" @selected($board?->read_type == "수강중인 회원만")>수강중인 회원만</option>
                                            <option value="작성자만" @selected($board?->read_type == "작성자만")>작성자만</option>
                                        </select>
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>쓰기 제한</dt>
                                <dd>
                                    <div>
                                        <select name="write_type" id="write_type">
                                            <option value="전체" @selected(!$board->write_type || $board?->write_type == "전체")>전체</option>
                                            <option value="회원만" @selected($board?->write_type == "회원만")>회원만</option>
                                            <option value="결제 이력 있는 회원만" @selected($board?->write_type == "결제 이력 있는 회원만")>결제 이력 있는 회원만</option>
                                            <option value="수강중인 회원만" @selected($board?->write_type == "수강중인 회원만")>수강중인 회원만</option>
                                            <option value="회원만 1회" @selected($board?->write_type == "회원만 1회")>회원만 1회</option>
                                            <option value="결제 이력 있는 회원만 1회" @selected($board?->write_type == "결제 이력 있는 회원만 1회")>결제 이력 있는 회원만 1회</option>
                                            <option value="수강중인 회원만 1회" @selected($board?->write_type == "수강중인 회원만 1회")>수강중인 회원만 1회</option>
                                        </select>
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>비밀글</dt>
                                <dd>
                                    <div>
                                        <select name="secretable" id="secretable">
                                            <option value="0" @selected($board?->secretable == 0)>사용하지 않음</option>
                                            <option value="1" @selected($board?->secretable == 1)>사용</option>
                                        </select>
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>댓글</dt>
                                <dd>
                                    <div>
                                        <select name="comment_type" id="comment_type">
                                            <option value="사용하지 않음" @selected(!$board->comment_type || $board?->comment_type == "사용하지 않음")>사용하지 않음</option>
                                            <option value="사용" @selected($board?->comment_type == "사용")>사용</option>
                                            <option value="사용, 1개까지만" @selected($board?->comment_type == "사용, 1개까지만")>사용, 1개까지만</option>
                                        </select>
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>최소 글자 수</dt>
                                <dd>
                                    <div>
                                        게시글
                                    </div>
                                    <div>
                                        <input id="post_min_char" name="post_min_char" type="number" value="{{ $board->post_min_char }}">
                                    </div>자
                                    <div class="ml20">
                                        댓글
                                    </div>
                                    <div>
                                        <input id="comment_min_char" name="comment_min_char" type="number" value="{{ $board->comment_min_char }}">
                                    </div>자
                                    <p class="p-alert">
                                        최대 글자수는 게시글 10,000자, 댓글 1000자 입니다.
                                    </p>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>파일 첨부</dt>
                                <dd>
                                    <div>
                                        <select name="attachment_type" id="attachment_type">
                                            <option value="사용하지 않음" @selected(!$board->attachment_type || $board?->attachment_type == "사용하지 않음")>사용하지 않음</option>
                                            <option value="형식 제한 없이 1개만" @selected($board?->attachment_type == "형식 제한 없이 1개만")>형식 제한 없이 1개만</option>
                                            <option value="형식 제한 없이 10개까지" @selected($board?->attachment_type == "형식 제한 없이 10개까지")>형식 제한 없이 10개까지</option>
                                            <option value="이미지만 1개만" @selected($board?->attachment_type == "이미지만 1개만")>이미지만 1개만</option>
                                            <option value="이미지만 10개까지" @selected($board?->attachment_type == "이미지만 10개까지")>이미지만 10개까지</option>
                                        </select>
                                    </div>
                                    <p class="p-alert">노출 옵션을 선택한 경우 게시글의 상세 페이지에 상품이 노출됩니다.</p>
                                </dd>
                            </dl>
                            {{-- <dl class="input-wrapper">
                                <dt>자동입력 방지</dt>
                                <dd>
                                    <div>
                                        <select name="" id="">
                                            <option value="">사용하지 않음</option>
                                            <option value="">CAPTCHA</option>
                                        </select>
                                    </div>
                                </dd>
                            </dl> --}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">
                            게시글 양식
                        </h2>
                        <div id="form-editor" class="w100p"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection

@push("script")
<script>
    const BOARD = {{ Js::from($board) }};
    let guideEditor = null;
    let formEditor = null;

    window.addEventListener("load", () => {
        guideEditor = new Editor({
            el: document.querySelector("#guide-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]
        });

        formEditor = new Editor({
            el: document.querySelector("#form-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]
        });

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

        if (BOARD) {
            if (BOARD.guide)
                guideEditor.setMarkdown(BOARD.guide);
            if (BOARD.form)
                formEditor.setMarkdown(BOARD.form);
        }
    });

    async function handleSubmit() {
        const result = await validate();
        if (!result)
            return;

        if (await alertifyAsync("알림", "변경 내용을 저장하시겠습니까?"))
            execSubmit();
    }

    async function validate() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");
        let $validationWrap = null;

        // 게시판명
        const $name = document.getElementById('name');
        const name = $name?.value;
        if (!name)
            $validationWrap = displayValidationForm($name, "입력된 내용이 없습니다.");
        else if (!(await validateName(name)))
            $validationWrap = displayValidationForm($name, "동일한 상품명이 존재합니다.");

        if ($validationWrap)
            return false;
        else
            return true;
    }

    async function validateName(name) {
        const result = await edmAjax({
            url: route("api.board.detail-by-name"),
            method: "GET",
            data: {
                id: BOARD.id,
                name: name,
            },
            callback: response => {
                if (response.status == 200 && !response.data)
                    return true;
                else
                    return false;
            },
        });

        return result;
    }

    function execSubmit() {
        const $form = document.getElementById("board-form");
        const DATA = new FormData($form);
        DATA.append("guide", guideEditor.getMarkdown());
        DATA.append("form", formEditor.getMarkdown());

        const URL = route("api.board.set", {id: BOARD.id});

        edmAjax({
            url: URL,
            method: "POST",
            data: DATA,
            callback: response => {
                if (response.status == 200 || response.status == 201)
                    location.reload();
                else
                    alertify.alert("알림", "오류가 발생했습니다.<br>새로고침 후 다시 시도해주세요.");
            },
        });
    }

</script>
@endpush