@extends("common.layout")
@section("header")
{!! resource('css/form.css') !!}

@endsection

@section("content")

<div class="split">
    <h1>
        <div>
            <a href="{{ route('board.list') }}"><i class="bi bi-arrow-left-circle"></i></a>
            {{ $board->name }} 게시판 관리 상세
        </div>
    </h1>
</div>
<form class="default" id="board-form">
    <div class="align-right">
        <button class="btn btn-primary" type="button" onclick="handleSubmit()">저장</button>
    </div>
    <section class="mt-3">
        <header>게시판 정보</header>
        <main class="split-form">
            <div class="form-group">
                <label>게시판 번호</label>
                <div class="right-col">{{ $board->id }}</div>
            </div>
            <div class="form-group">
                <label>게시판명</label>
                <div class="right-col">{{ $board->name }}</div>
            </div>
        </main>
    </section>

    <section class="mt-3">
        <header>게시글 양식</header>
        <main>
            <x-editor id='form-editor' height='545px' content="{!! $board->template !!}" />
        </main>
    </section>
</form>
@endsection

@push("script")
<script>

    function handleSubmit() {

        alertify.confirm("알림", "변경된 내용을 저장하시겠습니까?", async () => {
            await execSubmit();
        }, () => { })
    }


    async function execSubmit() {
        const data = {'template' : window.toastuiEditors['form-editor'].getHTML() };
        const result = await customFetch("{{ route('api.board.set', ['id' => $board->id] ) }}", {
            method: "POST",
            body : JSON.stringify(data) ,
            headers: { "Content-Type" : "application/json"}
        });

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

    }

</script>
@endpush