@extends("common.layout")

@section("header")
{!! resource('js/components/multiSelect.js') !!}
{!! resource('css/components/multiSelect.css') !!}

{!! resource('css/form.css') !!}

@endsection

@section("content")
    @php
    use Carbon\Carbon;
    $useComment = $board['isComment'] && $post;

    $content=null;
    if ( $post ) {
        if ( $board['prefix'] == 'center') {
            $content = $post?->content();
        } else {
            $content = $post?->content;
        }

        if ( $board['prefix'] == 'event') {
            $useComment = $post->is_use_comment == 1;
        }
    }

    @endphp

<div class="split">
    <h1>
        <a href="{{ route('board.post-list', ['service' => $service, "prefix" => $board['prefix'] ]) }}" class="mr-3">
            <i class="bi bi-arrow-left-circle"></i>
        </a> {{ $board['name'] }} 게시글 {{ $post ? "수정" : "등록" }}
    </h1>
</div>
<div class="row">
    <div class="{{ $useComment ? "col-lg-8" : "col-12" }} mx-0">
        <form class="default" id="postForm" enctype="multipart/form-data">

            <div class="align-right">
                {{-- todo 실 오픈 전 아래 주석 활성화 하기 -> 데이터 수동 변경 필요하여 주석처리 --}}
                <button class="btn btn-primary" type="button" onclick="{{ $board['isWrite'] ? 'onSubmit()' : "onDisplaySubmit()" }}">저장</button>
                {{-- <button class="btn btn-primary" type="button" onclick="onSubmit()">저장</button> --}}
            </div>

            <div @class(['mt-3', 'layout-2-cols', 'lb-layout' => $board['isWrite']])>
                <section>
                    <header>기본정보</header>
                    <main class="split-form"  style="33%">
                        <ul class="list-item-none">
                            <li class="mb-3 row mx-0 align-middle">
                                <label class="col-3">서비스 구분</label>
                                <span class="col-9">
                                    <input type="hidden" name="service" value="{{ $service }}">
                                    {{-- {{ $service == 'ielts' ? "인강" : "어학원" }} --}}
                                    <x-service-name service="{{ $service }}" />
                                </span>
                            </li>
                            @if ($post)
                                <li class="mb-3 row mx-0 align-middle">
                                    <label class="col-3">게시글 번호</label>
                                    <span class="col-9">{{ $post?->id }}</span>
                                </li>
                                <li class="mb-3 row mx-0 align-middle">
                                    <label class="col-3">작성자</label>
                                    <span class="col-9">{{ $content->writer?->name }}</span>
                                </li>
                                <li class="mb-3 row mx-0 align-middle">
                                    <label class="col-3">조회수</label>
                                    <span class="col-9">{{ number_format($content->views) }}</span>
                                </li>
                                @if (isset($post->likeables))
                                <li class="mb-3 row mx-0 align-middle">
                                    <label class="col-3">좋아요 수</label>
                                    <span class="col-9">{{ number_format($post->likeCnt()) }}</span>
                                </li>
                                @endif
                                <li class="mb-3 row mx-0 align-middle">
                                    <label class="col-3">등록일시</label>
                                    <span class="col-9">{{ $post?->created_at }}</span>
                                </li>
                            @endif
                        </ul>
                    </main>
                </section>


                    <section class="board" id="displayForm">
                        <header>전시정보</header>
                        <main>
                            <ul class="list-item-none">
                                <li class="mb-3 row mx-0 align-middle">
                                    <label class="col-2">전시상태</label>
                                    <div class="col-10">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" id="activated" name="activated" value="1" @checked( empty($post) || $post?->enable?->activated == 1)>
                                            <label class="form-check-label" for="activated">활성</label>
                                        </div>
                                        @if ($board['isWrite'])
                                        <div class="col-12 mt-2 align-items-center" id='date_form' style="{{ empty($post) || $post?->enable?->activated == 1 ? "display: flex" : "display: none" }}">
                                            <input type='date' name="started_at" class="form-control form-control-sm w-25" id='started_at' value="{{ $post?->enable?->started_at ? Carbon::parse($post?->enable?->started_at)->format("Y-m-d") : date("Y-m-d") }}">
                                            <label class="col-1 text-center">~</label>
                                            <input type='date' name="ended_at" class="form-control form-control-sm w-25" id='ended_at' value="{{ $post?->enable?->ended_at ? Carbon::parse($post?->enable?->ended_at)->format("Y-m-d") : "" }}">
                                            <label class="form-check-label mx-3">
                                                <input type="checkbox" name="is_infinite" id='is_infinite' value="1" @checked($post?->enable?->is_infinite) /> 종료일 없음
                                            </label>
                                            <div class="validation-wrap" style="display: none"><p class='m-0 mt-2'></p></div>
                                        </div>
                                        @endif
                                    </div>
                                </li>

                                @if ($board['isFixed'])
                                    <li class="mb-3 row mx-0 align-middle">
                                        <label class="col-2">{{ $board['isGnbView'] ? "GNB노출" : "상단고정" }}</label>
                                        <span class="col-10">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="is_fixed" name="is_fixed" value="1" @checked($post?->enable?->is_fixed)>
                                                <label class="form-check-label" for="is_fixed">활성</label>
                                            </div>
                                        </span>
                                    </li>
                                @endif

                                @yield("board-display")
                            </ul>
                        </main>
                    </section>

            </div>

            @yield("board-group")

            <section class="mt-3 board">
                <header>게시글 정보</header>
                <main class="split-form">
                    @if ($board['prefix'] == 'refund')
                        <div class="alert alert-warning">
                            * 환급승인 및 거절 후 상태를 변경하실 수 없습니다. 신중하게 검토해주세요
                        </div>
                    @endif

                    <ul class="list-item-none">
                        @yield("board-content")

                        @if (! in_array($board['prefix'], ['center', 'qna']))
                            <li class="mb-3 row mx-0 align-middle">
                                <label class="col-1 required" {!! $board['prefix'] == 'event' ? 'data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="GNB에 노출됩니다."' : "" !!}>
                                    제목

                                    @if ($board['prefix'] == 'event')
                                        <i class="bi bi-info-circle"></i>
                                    @endif
                                </label>
                                <div class="col-11">
                                    @if ($board['prefix'] == 'free')
                                        @yield("board-title-custom")
                                    @else
                                        <input type="text" name="title" value="{{ isset($post?->title_html) ? $post?->title_html : $content?->title }}" id="title" class="form-control" data-accept="false" @disabled(! $board['isWrite'])/>
                                    @endif
                                    <div class="validation-wrap" style="display: none"><p class='m-0 mt-2'></p></div>
                                </div>
                            </li>

                            <li class="mb-3 row mx-0 align-middle">
                                @if ($board['prefix'] == 'event')
                                    <label class="col-1 required">본문 Html</label>
                                    <div class="col-4">
                                        <input type="file" name="content_html" value="" id="content_html" class="form-control" accept="html" />
                                        {{ $post?->content_html }}
                                    </div>
                                @elseif (in_array($board['prefix'], ['pass', 'center', 'class']) )
                                    <label class="col-1 required">본문</label>
                                    <textarea class="form-control" rows="30" name="content">{!! $post ? $content?->content : "" !!}</textarea>
                                @else
                                    <label class="col-12 required">본문</label>
                                    <div class="col-12 mt-2">
                                        @if ($board['isWrite'])
                                            <x-editor id='content' height='545px' content="{!! $post ? $content?->content : $board['template'] !!}" />
                                            <div class="validation-wrap" style="display: none"><p class='m-0 mt-2'></p></div>
                                        @else
                                            <div class="review-text">
                                                {!! $post ? nl2br($content?->content) : "" !!}
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            </li>
                        @endif

                        @if ($board['isAttachment'] > 0 && $board['isWrite'] && ! in_array($board['prefix'], ['pass', 'center', 'class']))
                            <li class="mb-3 row mx-0 align-middle">
                                <label class="col-12">첨부파일</label>
                                <div class="col-12 mt-2">
                                    <x-board.attachments isMultiple="{{ $board['isAttachment'] == 1 ? 0 : 1 }}" :files="$post?->getAttachments()"/>
                                </div>
                            </li>
                        @else
                            @if (isset($post->attachments) && ! in_array($board['prefix'], ['qna', 'event']))
                                <li class="mb-3">
                                    <label class="col-12">이미지</label>
                                    <div class="image-wrap" id="image-viewer">
                                    @foreach ($post->getAttachments() as $attachment)

                                        <div @class(['image-box', 'docs' => ! in_array($attachment->extension, ['png', 'jpg', 'jpeg', 'gif']) ])>
                                            @if (in_array($attachment->extension, ['png', 'jpg', 'jpeg', 'gif']))
                                            <img src="{{ app(\S3Helper::class)->getPublicUrl($attachment->s3_key) }}">
                                            @else
                                            <i class="bi bi-file-earmark-text-fill"></i>
                                            <div class="docs-name">
                                                <a href="{{ app(\S3Helper::class)->getPublicUrl($attachment->s3_key) }}" download="1" class="text-white">{{ $attachment->name }}</a>
                                            </div>
                                            @endif
                                        </div>
                                    @endforeach
                                    </div>
                                </li>
                            @endif
                        @endif
                    </ul>
                </main>
            </section>

        </form>
    </div>
    @if ($useComment)
        @php
            $configComment = ['type' => 'board', 'prefix' => $board['prefix'], 'id' => $post?->id ];
            if (isset($board['is_limit'])) {
                $configComment['is_limit'] = $board['is_limit'];
            }
        @endphp
        <div class="col-lg-4">
            <x-board.comments :config="$configComment" :templates="isset($commentTemplates) ? $commentTemplates : []"/>
        </div>
    @endif
</div>



@endsection

@push("script")
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js"crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
    $(function() {
        $('#activated').on("click", function() {
            if ($(this).is(":checked")) {
                $('#date_form').css("display", "flex");
            } else {
                $('#date_form').hide();
            }
        });

        $('#is_infinite').on("click", function() {
            $('#ended_at').prop("disabled", $(this).is(":checked"));
        })

        if ($('#is_infinite').is(":checked"))  {
            $('#ended_at').prop("disabled", true);
        }

        $('.image-box').on("click", function() {

            const gallery = new Viewer(document.getElementById('image-viewer'), {
                toolbar: false,
                movable: false,

            });

        })
    })


    let editor;
    function onSubmit() {
        editor = $.isEmptyObject(window.toastuiEditors) ? null : window.toastuiEditors['content'];
        let isValid = checkValidation();
        if (! isValid) {
            return false;
        }

        // if ($('input[name=upload-file]').length > 0) {
        //     $('input[name=upload-file]').val(null);
        // }
        const formData = new FormData(document.getElementById("postForm"));

        if ( editor ) {
            formData.append("content", editor.getHTML());
        } else {
            @if (! $post?->content_html)
                if ( $('#content_html').length > 0 ) {
                    formData.append("content_html", $('#content_html').get(0).files[0]);
                }
            @endif
        }
        if ($('.board #attachments').length > 0) {
            if (attachments) {
                $.each(attachments , function(index) {
                    formData.append("attachments[]", attachments[index]);
                })
            }

            if (fileIds.length > 0) {
                $.each(fileIds , function(index) {
                    formData.append("attachmentIds[]", fileIds[index]);
                })
            }
        } else {
            // 이걸 어떤 경우에 사용하는지 알 수없음, 일단 주석처리
            // if ($('input[type=file]:not(#toastuiImageFileInput)').length > 0) {
            //     $.each($('input[type=file]:not(#toastuiImageFileInput)') , function(index) {
            //         formData.append("attachments[]", $(this).prop('files')[0]);
            //     })
            // }
        }
        send(formData);
    }

    function onDisplaySubmit() {
        let formData = new FormData();
        formData.append("activated", $('#activated').is(":checked") ? 1 : 0);
        if ( typeof getApproval == 'function') {
            formData = getApproval(formData);
        }

        if ($('#displayForm input[type=text]').length > 0) {
            $.each($('#displayForm input[type=text]'), function() {
                formData.append($(this).attr("name"), $(this).val())
            })
        }

        send(formData);
    }

    let isProcessing = false;
    function send(formData) {
        if ( isProcessing ) {
            return false;
        }

        isProcessing = true;

        alertify.confirm("알림", "저장하시겠습니까?", async () => {
            const result = await customFetch( "{{ route('api.board.set-post', [ 'prefix' => $board['prefix'], 'postId' => $post?->id ]) }}", {
                method: "POST",
                body : formData,
            });

            if (result.status) {
                alertify.alert("성공", "저장되었습니다.", () => {

                    const href = "{{ route('board.post-detail', ['service' => $service, 'prefix' => $board['prefix'], 'postId' => ':id']) }}";
                    location.href= href.replace(":id", result.postId);
                    isProcessing = false;
                })
            } else {
                alertify.alert("Error", result.message, () => {
                    isProcessing = false;
                })
            }
        }, () => {
            $('#file').prop("disable", false);
            isProcessing = false;
        })
    }

    function checkValidation() {
        resetValidationsForm();
        let isValid = true;
        if ($("#title").length > 0 && $.isEmptyObject($("#title").val())) {
            displayValidationForm($("#title"), "제목을 입력해주세요", "div")
            isValid = false;
        }

        if (editor && $.isEmptyObject(editor.getMarkdown())) {
            alertify.alert("Error", "본문을 입력하세요", () => {})
            isValid = false;
        }

        @if (! $post?->content_html)
            if (editor == null && $('#content_html').length > 0 && $.isEmptyObject($('#content_html').get(0).files[0])) {
                alertify.alert("Error", "본문 Html 파일을 업로드 하세요", () => {})
                isValid = false;
            }
        @endif

        if ($('#displayForm').length > 0) {
            isValid = checkEnableValidation(isValid);
        }

        if (typeof checkPostValidation == 'function') {
            isValid = checkPostValidation(isValid);
        }

        return isValid;
    }

    function checkEnableValidation(isValid) {

        if ($('#activated').is(":checked")) {
            if ($.isEmptyObject($('#started_at').val())) {
                displayValidationForm($("#started_at"), "시작일이 입력되지 않았습니다.", "div");
                isValid = false;
            }

            if (! $('#is_infinite').is(":checked")) {
                if ($('#started_at').val() > $('#ended_at').val()) {
                    displayValidationForm($("#started_at"), "시작일이 종료일 보다 큽니다.", "div")
                    isValid = false;
                }
            }
        }

        return isValid;
    }

</script>

    @yield("board-script")
@endpush