@extends("domains.common.layouts.layout")
@section("header")
@routes("board")
@vite([
    'resources/js/domains/common/toastEditor.js',
])
@yield("header-child")
@endsection

@section("main-content")
    <div class="container-fluid detail">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1><span class="point-color">{{ $viewName }}</span> 게시글 관리 상세</h1>
                    <ul class="page-wayfinding">
                        <li onclick="location.href = {{ Js::from(route('board.post-list', $board->id)) }}">게시글 관리</li>
                        <li>
                            @if ($post?->id)
                            상세
                            @else
                            등록
                            @endif
                        </li>
                    </ul>
                    <div class="page-btn-wrap">
                        <button type="button" class="button btn-style-2" onclick="location.href = {{ Js::from(route('board.post-list', $board->id)) }}">목록</button>
                        <button class="button btn-style-1" onclick="handleSubmit()">
                            @if ($post?->id)
                            저장
                            @else
                            등록
                            @endif
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="post-form" name="post-form" class="post-form">
            <div class="row detail-con-wrap3">
                <div class="detail-con card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <h2 class="detail-title">게시글 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt>게시글 번호</dt>
                                        <dd>{{ $post?->id ?? "-" }}</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="detail-con card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <h2 class="detail-title">전시 구분</h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt class="req">전시 상태</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="activated0" name="activated" class="form-check-input" value="1" @checked(!$post || $post?->activated)>
                                                <label class="form-check-label" for="activated0">전시</label>
                                            </div>
                                            <div class="flex-box">
                                                <input type="date" id="activated_start_date" name="activated_start_date" value="{{ explode(' ', $post?->activated_start_date)[0] ?? '' }}">
                                                <span class="btw-bullet">-</span>
                                                <input type="date" id="activated_end_date" name="activated_end_date" value="{{ explode(' ', $post?->activated_end_date)[0] ?? '' }}" @disabled(!$post || $post?->is_activated_end_date_disabled)>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="is_activated_end_date_disabled" name="is_activated_end_date_disabled" class="form-check-input" value="1" onchange="changeEndDateDisabled(event)" @checked(!$post || $post?->is_activated_end_date_disabled)>
                                                <label class="form-check-label" for="is_activated_end_date_disabled">종료일 없음</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="activated1" name="activated" class="form-check-input" value="0" @checked($post?->activated === 0)>
                                                <label class="form-check-label" for="activated1">
                                                    비전시
                                                    @if ($post?->activated === 0 && $post?->deactivated_at)
                                                    ({{ $post->deactivated_at }})
                                                    @endif
                                                </label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">서비스 구분</dt>
                                        <dd>
                                            @foreach ($services as $key => $service)
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="service_id{{ $key }}" name="service_id" class="form-check-input" value="{{ $service->id }}" @checked($post?->service_id == $service->id)>
                                                <label class="form-check-label" for="service_id{{ $key }}">{{ $service->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>상단 고정</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="fixed0" name="fixed" class="form-check-input" value="0" @checked(!$post || $post?->fixed === 0)>
                                                <label class="form-check-label" for="fixed0">고정 안 함</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="fixed1" name="fixed" class="form-check-input" value="1" @checked($post?->fixed)>
                                                <label class="form-check-label" for="fixed1">고정</label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <div class="detail-input">
                                    <dl class="input-wrapper mb-0">
                                        <dt>비밀글</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_secret0" name="is_secret" class="form-check-input" value="0" @checked(!$post || $post?->is_secret === 0)>
                                                <label class="form-check-label" for="is_secret0">설정 안 함</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="is_secret1" name="is_secret" class="form-check-input" value="1" @checked($post?->is_secret)>
                                                <label class="form-check-label" for="is_secret1">설정</label>
                                            </div>
                                            <p class="p-alert">
                                                설정 시 로그인된 작성자와 직원만 조회 가능 합니다.
                                            </p>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if ($post?->id)
            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <div class="flex-box m0">
                            <span class="mr20">등록일시<span class="ml10">{{ $post?->created_at }}</span></span>
                            <span class="mr20">작성자<a class="ml10" href="{{ route('user.detail', $post?->createdBy?->id) }}">{{ $post?->createdBy?->edm_id }}</a></span>
                            <span class="mr-auto">조회수<span class="ml10">{{ $post?->views }}</span></span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- 게시판별 커스터마이징 START --}}
            @yield("custom-columns")
            {{-- 게시판별 커스터마이징 END --}}

            {{-- 게시글 제목, 컨텐츠 --}}
            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <div class="flex-box">
                            <div class="w100">
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dt class="req">제목</dt>
                                        <dd>
                                            <input id="title" name="title" type="text" value="{{ $post?->title }}">
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>내용 입력</dt>
                                        <dd>
                                            <div id="contentEditor" class="w100p"></div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>파일 첨부</dt>
                                        <dd class="align-start">
                                            <button type="button" class="button btn-style-8" onclick="document.getElementById('attachment_file').click()">파일 첨부</button>
                                            <input type="file" name="attachment_file" id="attachment_file" class="hidden" onchange="changeImage(event)" hidden>
                                            <ul id="file-list" name="file-list" class="file-list">
                                                @foreach ($post?->attachments ?? [] as $attachment)
                                                <li data-id="{{ $attachment->id }}" data-s3_key="{{ $attachment->s3_key }}">
                                                    <a onclick="fileDownload(event)">{{ $attachment->name }}</a>
                                                    <span>{{ $attachment->size / 1000 }}K</span>
                                                    <a onclick="deleteAttachment(event)" class="ico-delete"></a>
                                                </li>
                                                @endforeach
                                            </ul>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>메타 태그 입력</dt>
                                        <dd>
                                            <div class="w100p">
                                                <input type="text" id="metaTags" value="{{ $post?->metaTags?->implode("name", ",") }}" autocomplete="off">
                                            </div>
                                        </dd>
                                        <dd>
                                            <p class="p-alert">
                                                Tab이나 Enter로 태그를 추가할 수 있습니다.
                                            </p>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>


        <!-- 캡챠 넣으시면 됩니다 -->

        {{-- 댓글 --}}
        @if ($post?->id)
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="comment-wrap">
                        <div class="comment-con">
                            <h2>
                                댓글 <span>{{ count($post->comments->where("activated", 1)) }}</span>건
                            </h2>
                            <span id="reply-badge" name="reply-badge" class="badge badge-style-1 mb-1 hidden" style="min-width: auto; border-radius: 15px;">
                            </span>
                            <div class="comment-textarea-wrap">
                                <textarea name="comment_content" id="comment_content" cols="30" rows="10" oninput="" value=""></textarea>
                                <button type="button" class="button btn-style-1" onclick="applyComment()">등록</button>
                            </div>
                            @foreach ($post->comments->whereNull("parent_comment_id")->all() as $comment)
                                @php
                                    $childrenComments = $comment->getAllChildren($post->comments);
                                @endphp
                                <div class="comment-row comment-root" data-id="{{ $comment->activated ? $comment->id : '' }}" data-edm_id="{{ $comment->activated ? $comment->createdBy->edm_id : '' }}">
                                    <div class="user-comment" @if(!$comment->activated) style="margin-bottom: 0;" @endif>
                                        @if ($comment->activated)
                                        <button type="button" class="user-comment-remove" onclick="deleteComment(event)"></button>
                                        @endif
                                        <div class="user-comment-img">
                                            <img src="{{ $comment->activated && $comment->createdBy?->photo ? app(\S3Helper::class)->getDownloadPresignedUrl($comment->createdBy?->photo) : '' }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                                        </div>
                                        <div class="user-comment-contents">
                                            <div class="user-comment-profile">
                                                @if ($comment->activated)
                                                <div class="user-comment-name">{{ $comment->createdBy->edm_id }}</div>
                                                <p class="comment-date">{{ $comment->created_at }}</p>
                                                @endif
                                            </div>
                                            <p class="comment-text" @style(["color: " . ($comment->activated ? "black" : "gray")])>{{ $comment->activated ? $comment->content : "삭제된 댓글입니다." }}</p>
                                            <div class="comment-btn-wrap">
                                                @if ($comment->activated)
                                                    <a style="cursor: pointer;" onclick="setReply(event)">답글 달기</a>
                                                    @if (count($childrenComments->where("activated", 1)))
                                                    <a style="cursor: pointer;" onclick="toggleCommentReply(event)">답글 {{ count($childrenComments->where("activated", 1)) }}개 <span>보기</span></a>
                                                    @endif
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if ($comment->activated)
                                    @while ($tmpComment = $childrenComments->shift())
                                        <div class="comment-row comment-reply hidden" data-id="{{ $tmpComment->activated ? $tmpComment->id : '' }}" data-edm_id="{{ $tmpComment->activated ? $tmpComment->createdBy->edm_id : '' }}" data-root_id="{{ $comment->id }}" data-parent_id="{{ $tmpComment->parent_comment_id }}" style="margin-left: {{ 75 * $tmpComment->getDepth() }}px">
                                            <div class="user-comment">
                                                @if ($tmpComment->activated)
                                                <button type="button" class="user-comment-remove" onclick="deleteComment(event)"></button>
                                                @endif
                                                <div class="user-comment-img">
                                                    <img src="{{ $tmpComment->activated && $tmpComment->createdBy?->photo ? app(\S3Helper::class)->getDownloadPresignedUrl($tmpComment->createdBy?->photo) : '' }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                                                </div>
                                                <div class="user-comment-contents">
                                                    <div class="user-comment-profile">
                                                        @if ($tmpComment->activated)
                                                        <div class="user-comment-name">{{ $tmpComment->createdBy->edm_id }}</div>
                                                        <p class="comment-date">{{ $tmpComment->created_at }}</p>
                                                        @endif
                                                    </div>
                                                    <p class="comment-text" @style(["color: " . ($tmpComment->activated ? "black" : "gray")])>
                                                        @if ($tmpComment->activated)
                                                        <span class="badge badge-style-1 mb-1" style="min-width: auto; border-radius: 15px;">{{ "@" . $post->comments->firstWhere("id", $tmpComment->parent_comment_id)->createdBy->edm_id }}</span>
                                                        {{ $tmpComment->content }}
                                                        @else
                                                        삭제된 댓글입니다.
                                                        @endif
                                                    </p>
                                                    <div class="comment-btn-wrap">
                                                        @if ($tmpComment->activated)
                                                        <a style="cursor: pointer;" onclick="setReply(event)">답글 달기</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @php
                                        if (!$tmpComment->activated)
                                            $childrenComments = $childrenComments->where("parent_comment_id", "!=", $tmpComment->id);
                                        @endphp
                                    @endwhile
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <!-- end row -->
    </div>

@endsection

@push("script")
<script>
    const BOARD = {{ Js::from($board) }};
    const POST = {{ Js::from($post) }};
    let contentEditor = null;
    let metaTags = null;

    window.addEventListener("load", () => {
        metaTags = new TomSelect("#metaTags", {
            plugins: ['remove_button'],
			persist: false,
			create: true,
        });

        if (metaTags) {
            metaTags.control_input.addEventListener("keydown", function(e) {
                if (e.key == "Tab") {
                    e.preventDefault();
                    e.stopPropagation();
                    e.target.dispatchEvent(new KeyboardEvent("keydown", {
                        bubbles: true,
                        cancelable: true,
                        keyCode: 13, // Enter key
                    }));
                }
            });
        }

        contentEditor = new Editor({
            el: document.querySelector("#contentEditor"),
            height: 'auto',
            initialEditType: 'wysiwyg',
            previewStyle: 'vertical',
            language: 'ko-KR',
            toolbarItems: [
                ['heading', 'bold', 'italic', 'strike'],
                ['hr', 'quote'],
                ['ul', 'ol', 'task', 'indent', 'outdent'],
                ['table', 'image', 'link'],
                ['code', 'codeblock'],
                ['scrollSync'],
            ],
            plugins: [colorSyntax]
        });

        if (contentEditor) {
            if (POST?.content)
                contentEditor.setMarkdown(POST.content);

            document.querySelectorAll("div.toastui-editor.ww-mode").forEach(element => {
                element.addEventListener("click", (e) => {
                    let editElem = e.target.querySelector("div.ProseMirror.toastui-editor-contents");
                    if (editElem)
                        editElem.focus();
                });
            });
        }

    });

    async function handleSubmit() {
        if (!(await validateDefault()))
            return;

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

    async function validateDefault() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");
        let $validationWrap = null;

        // 서비스 구분
        const $serviceId = document.querySelector("input[name='service_id']:checked");
        const serviceId = $serviceId?.value;
        if (!serviceId)
            $validationWrap = displayValidationForm(document.querySelector("input[name='service_id']"), "입력된 내용이 없습니다.");

        // 전시 상태
        const $activatedStartDate = document.getElementById('activated_start_date');
        const activatedStartDate = $activatedStartDate?.value;
        if (!activatedStartDate)
            $validationWrap = displayValidationForm($activatedStartDate, "입력된 내용이 없습니다.");

        const $isActivatedEndDateDisabled = document.getElementById('is_activated_end_date_disabled');
        const isActivatedEndDateDisabled = $isActivatedEndDateDisabled?.checked;
        const $activatedEndDate = document.getElementById('activated_end_date');
        const activatedEndDate = $activatedEndDate?.value;
        if (!isActivatedEndDateDisabled && !activatedEndDate)
            $validationWrap = displayValidationForm($activatedEndDate, "입력된 내용이 없습니다.");
        else if (!isActivatedEndDateDisabled && activatedStartDate && activatedEndDate) {
            const fromDate = new Date(activatedStartDate);
            const toDate = new Date(activatedEndDate);
            if (fromDate.getTime() > toDate.getTime())
                $validationWrap = displayValidationForm($activatedEndDate, "전시 종료일이 시작일보다 빠릅니다.");
        }

        const $title = document.getElementById('title');
        const title = $title?.value;
        if (!title)
            $validationWrap = displayValidationForm($title, "입력된 내용이 없습니다.");

        if ((typeof validate) == "function") {
            const tmpWrap = await validate();
            if (tmpWrap)
                $validationWrap = tmpWrap;
        }

        if ($validationWrap)
            return false;
        else
            return true;
    }

    function execSubmit() {
        let formData = getDefaultRequestBody();
        if ((typeof getRequestBody) == "function") {
            const tmpFormData = getRequestBody(formData);
            if (tmpFormData)
                formData = tmpFormData;
        }

        const URL_PARAMS = {id: BOARD.id};
        if (POST?.id)
            URL_PARAMS["postId"] = POST.id;

        const URL = route("api.board.set-post", URL_PARAMS);
        edmAjax({
            url: URL,
            method: "POST",
            data: formData,
            callback: response => {
                if ((response.status == 201 || response.status == 200) && response.data)
                    POST?.id ? location.reload() : location.href = route("board.post-list", {id: BOARD.id});
                else
                    alertify.alert("알림", "저장하지 못했습니다.");
            },
        });
    }

    function getDefaultRequestBody() {
        const formData = new FormData(document.getElementById("post-form"));

        if (contentEditor)
            formData.append("content", contentEditor.getMarkdown());

        if (metaTags)
            metaTags.getValue().split(",").forEach(item => formData.append("metaTags[]", item));

        document.getElementById("file-list").querySelectorAll("li[data-id='0']").forEach(item => item.file ? formData.append("attachments[]", item.file) : "");

        if (document.getElementById("is_activated_end_date_disabled").checked)
            formData.append("activated_end_date", "");
        else
            formData.append("is_activated_end_date_disabled", 0);

        return formData;
    }

    function changeEndDateDisabled(e) {
        const $TARGET = document.getElementById("activated_end_date");
        $TARGET.disabled = e.target.checked;
        $TARGET.value = "";
    }

    function toggleCommentReply(e) {
        const PARENT_ID = e.target.closest("div.comment-row").dataset.id;
        e.target.closest("div.comment-con").querySelectorAll(`div.comment-reply[data-root_id='${PARENT_ID}']`).forEach(item => item.classList.toggle("hidden"));
    }

    function setReply(e) {
        const $REPLY = document.getElementById("reply-badge");
        const $COMMENT = e.target.closest("div.comment-row");
        $REPLY.innerHTML = `@${$COMMENT.dataset.edm_id}<span onclick="cancelReply(event)" style="border-left: 1px solid white; padding-left: 5px; margin-left: 5px; color: white;">X</span>`;
        $REPLY.dataset.parent_id = $COMMENT.dataset.id;
        $REPLY.classList.remove("hidden");

        document.getElementById("comment_content").focus();
    }

    function cancelReply(e) {
        const $REPLY = e.target.parentElement;
        $REPLY.classList.add("hidden");
        $REPLY.innerText = "";
        $REPLY.dataset.parent_id = "";
    }

    async function applyComment() {
        const $COMMENT_CONTENT = document.getElementById("comment_content");
        const $REPLY = document.getElementById("reply-badge");

        if ($COMMENT_CONTENT.value.length < 1) {
            alertify.alert("알림", "댓글을 입력해주세요.");
            return;
        }

        if (!(await alertifyAsync("알림", "댓글을 등록 하시겠습니까?")))
            return;

        const URL = route('api.board.set-comment-by-post', {boardId: BOARD.id, postId: POST.id});
        const BODY = {
            content: $COMMENT_CONTENT.value,
            parent_comment_id: $REPLY.dataset?.parent_id ?? null
        };

        edmAjax({
            url: URL,
            method: "POST",
            data: BODY,
            callback: response => {
                if ((response.status == 201 || response.status == 200) && response.data)
                    location.reload();
                else
                    alertify.alert("알림", "댓글을 등록하지 못했습니다.<br>새로고침 후 다시 시도해주세요.");
            },
        });
    }

    async function deleteComment(e) {
        const COMMENT_ID = e.target.closest("div.comment-row").dataset.id;
        if (!COMMENT_ID) {
            alertify.alert("알림", "새로고침 후 다시 시도해주세요.");
            return;
        }

        if (!(await alertifyAsync("알림", "댓글을 삭제 하시겠습니까?")))
            return;

        const URL = route('api.board.delete-comment', {id: COMMENT_ID});
        edmAjax({
            url: URL,
            method: "DELETE",
            callback: response => {
                if ((response.status == 201 || response.status == 200) && response.data)
                    location.reload();
                else
                    alertify.alert("알림", "댓글을 삭제하지 못했습니다.<br>새로고침 후 다시 시도해주세요.");
            },
        });
    }

    function changeImage(e) {
        const $UL = document.getElementById("file-list");
        const FILE_LIMIT = (BOARD.attachment_type_id == 2 || BOARD.attachment_type_id == 4) ? 10 : 1;

        Array.from(e.target.files).forEach(item => {
            if ($UL.querySelectorAll("li").length < FILE_LIMIT)
                $UL.append(getAttachmentElement(item));
        });

        e.target.value = null;
    }

    function getAttachmentElement(file) {
        const $ELEMENT = document.createElement("li");
        $ELEMENT.innerHTML = `<a onclick="fileDownload(event)">${file.name}</a>`;
        $ELEMENT.innerHTML += `<span>${file.size / 1000}K - <strong style="color:red;">Pending</strong></span>`;
        $ELEMENT.innerHTML += `<a onclick="deleteAttachment(event)" class="ico-delete"></a>`;
        $ELEMENT.dataset.id = "0";
        $ELEMENT.file = file;
        return $ELEMENT;
    }

    async function deleteAttachment(e) {
        const $TARGET = e.target.closest("li");
        if (!(POST?.id) || $TARGET.dataset.id === "0")
            e.target.closest("li").remove();
        else {
            if ($TARGET.dataset?.id) {
                if (!(await alertifyAsync("알림", "댓글을 삭제 하시겠습니까?")))
                    return;

                const URL = route("api.board.delete-attachment", {id: $TARGET.dataset.id});
                edmAjax({
                    url: URL,
                    method: "DELETE",
                    callback: response => {
                        if ((response.status == 201 || response.status == 200) && response.data)
                            location.reload();
                        else
                            alertify.alert("알림", "첨부 파일을 삭제하지 못했습니다.<br>새로고침 후 다시 시도해주세요.");
                    },
                });
            }
        }
    }

    async function fileDownload(e) {
        const $TARGET = e.target.parentElement;
        if ($TARGET.dataset?.s3_key) {
            const FILE = await getS3File($TARGET.dataset.s3_key);
            downloadFileFromBlob(FILE, e.target.innerText);
        }
    }

</script>
@endpush