@extends("common.layout-popup")

@section("header")

@endsection

@section("page-title", "[". $board['name'] ."] 노출순서 관리")
@section("content")
<div class="alert alert-info">
    게시물의 순서를 변경하거나 설정 해제할 수 있습니다.<br>
    비전시 처리된 게시물은 자동 설정 해제 처리됩니다.<br>
    1:1문의에는 최대 7개의 FAQ가 노출됩니다.
</div>

<section>
    <header>게시물 목록</header>
    <main>
        <table class="table table-hover">
            <colgroup>
                <col width="5%">
                <col width="20%">
                <col width="/">
                <col width="10%">
            </colgroup>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" class="form-check-input"/>
                    </th>
                    <th>등록일시</th>
                    <th>제목</th>
                    <th>순서변경</th>
                </tr>
            </thead>
            <tbody id="sortable">
                @foreach ($posts as $post)

                <tr @class(['post-disabled' => ! $post->isVisible])>
                    <td>
                        <input type="checkbox" name="post_id" class="form-check-input" value="{{ $post->id }}"/>
                    </td>
                    <td>{{ $post->created_at }}</td>
                    <td>{{ $post->content->title }}</td>
                    <td class="align-center handle">
                        <i class="bi bi-list"></i>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </main>
    <footer class="align-right">
        <button class="btn btn-danger" type="button" onclick="handleSubmit(false)">노출해제</button>
        <button class="btn btn-primary" type="button" onclick="handleSubmit(true)">저장</button>
    </footer>
</section>

@endsection

@push("script")
<script>
    $(function() {
        $("#sortable").sortable({
            handle: ".handle",
            axis: "y",
            placeholder: "ui-state-highlight",
            helper: function(e, ui) {
                ui.children().each(function() {
                    $(this).width($(this).width());
                });
                return ui;
            },

        }).disableSelection();
    })



    async function handleSubmit(isFixed = true) {
        const id = [];
        const checkboxs = isFixed ? $("input[name=post_id]") : $("input[name=post_id]:checked");
        if (checkboxs.length == 0) {
            alertify.alert("Error", "변경할 데이터를 선택하세요", () => {});
            return false;
        }
        $.each(checkboxs, function() {
            id.push($(this).val());
        })
        const result = await customFetch("{{ route('api.board.posts.sortable') }}", {
            method: "POST",
            body : JSON.stringify({ "ids" : id , 'isFixed' : isFixed, 'prefix' : 'qna'}) ,
            headers: { "Content-Type" : "application/json"}
        });

        if (result.status) {
            alertify.alert("완료", "변경되었습니다.", () => {
                if (isFixed) {
                    window.close();
                } else {
                    window.close();
                    window.opener.location.reload();
                }
            });
        } else {
            alertify.alert("error", result.message);
        }

    }
</script>
@endpush