@extends("domains.common.layouts.layout-popup")
@routes("board")
@section("header")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/product/composed.js',
    'resources/js/domains/board/gridColumns.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><span class="point-color">{{ $boardName }}</span> 상단고정 관리</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
    상단고정 게시물의 순서를 변경하거나 설정 해제할 수 있습니다.<br>
    비전시 처리된 게시물은 자동 설정 해제 처리됩니다.
    </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>
                            <button type="button" class="button btn-style-8" onclick="removeCheckedRows(postFixedGrid)">선택 삭제</button>
                        </div>
                    </div>
                    <div id="postFixedGrid"></div>
                </div>
            </div>
        </div>
    <div class="text-center">
        <button class="button btn-style-1" type="button" onclick="handleSubmit()">저장</button>
    </div>
</div>
@endsection

@push("script")
<script>
    const BOARD_ID = {{ Js::from($boardId) }};
    const FIXED_POSTS = {{ Js::from($posts) }};
    let postFixedGrid = null;

    window.addEventListener("load", async () => {
        postFixedGrid = new Grid({
            el: document.getElementById("postFixedGrid"),
            data: FIXED_POSTS,
            columnOptions: {minWidth: 10},
            rowHeaders: [{type: 'checkbox'}],
            columns: POST_FIXED_COLUMNS,
            draggable: true,
            scrollX: false,
            scrollY: false,
        });

        postFixedGrid.on("drop", e => resetRowNumber(postFixedGrid, "fixed_order"));
        resetRowNumber(postFixedGrid, "fixed_order");

        fitWindowSize();
    });

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

    function execSubmit() {
        const URL = route("api.board.set-fixed-posts", {id: BOARD_ID});
        const formData = new FormData();
        postFixedGrid.getData().forEach(item => formData.append("postIds[]", item.id));

        edmAjax({
            url: URL,
            method: "POST",
            data: formData,
            callback: response => {
                console.log(response);
            },
        });
    }

</script>

@endpush