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

@section("header")
@routes("promotion")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/promotion/gridColumns.js',
])
<style>
    .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">
        상단고정 게시물의 순서를 변경하거나 설정 해제할 수 있습니다.<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">
                            <button class="button btn-style-8" onclick="cancelFixed()">선택 삭제</button>
                        </div>
                    </div>
                    <div id="event-grid"></div>
                </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 EVENTS = {{ Js::from($events) }};
    let eventGrid = null;

    window.addEventListener("load", () => {
        eventGrid = new Grid({
            el: document.getElementById("event-grid"),
            data: EVENTS,
            columnOptions: {
                minWidth: 10
            },
            rowHeaders: [{type: 'checkbox'}],
            columns: FIX_EVENT_COLUMNS,
            draggable: true,
            scrollX: false,
            scrollY: false,
        });

        eventGrid.on("drop", e => resetRowNumber(eventGrid, "fixed_order"));
        resetRowNumber(eventGrid, "fixed_order");
        fitWindowSize();
    });

    async function cancelFixed() {
        const allDATA = eventGrid.getData();
        const selectedDATA = eventGrid.getCheckedRows();

        if (selectedDATA.length < 1) {
            alertify.alert("알림", "선택된 항목이 없습니다.");
            return;
        }

        if ((allDATA.length - selectedDATA.length) < 1) {
            alertify.alert("알림", "최소 1개의 이벤트는 상단 고정되어야 합니다.");
            return;
        }

        if (await alertifyAsync("알림", "선택된 항목의 상단 고정을 해제하시겠습니까?")) {
            const ids = {ids: selectedDATA.map(event => event.id)};
            await edmAjax({
                url: route("api.promotion.event.cancel-fixed"),
                method: "PATCH",
                data: ids,
                callback: response => {
                    if (response.status == 200 && response.data)
                        alertify.alert("알림", "완료되었습니다.", () => location.reload());
                    else
                        alertify.alert("알림", "오류가 발생했습니다.<br>새로고침 후 다시 시도해주세요.");
                }
            });
        }
    }

    async function handleSubmit() {
        const DATA = eventGrid.getData();
        if (DATA.length < 1) {
            alertify.alert("알림", "최소 1개의 이벤트는 상단 고정되어야 합니다.");
            return;
        }

        if (await alertifyAsync("알림", "변경된 순서대로 저장하시겠습니까?")) {
            const ids = {ids: DATA.map(event => event.id)};
            await edmAjax({
                url: route("api.promotion.event.update-fixed-order"),
                method: "PATCH",
                data: ids,
                callback: response => {
                    if (response.status == 200 && response.data)
                        alertify.alert("알림", "완료되었습니다.", () => location.reload());
                    else
                        alertify.alert("알림", "오류가 발생했습니다.<br>새로고침 후 다시 시도해주세요.");
                }
            });
        }
    }
</script>
@endpush