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

@section("main-content")
    <div class="container-fluid detail" style="padding-bottom: 0.5rem;">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <h1>
                        이벤트 관리
                        @if ($event)
                        상세
                        @else
                        등록
                        @endif
                    </h1>
                    <ul class="page-wayfinding">
                        <li onclick="window.location.href={{ Js::from(route('promotion.event.list')) }}">이벤트 관리</li>
                        <li>
                            @if ($event)
                            상세
                            @else
                            등록
                            @endif
                        </li>
                    </ul>
                    <div class="page-btn-wrap">
                        <button type="button" class="button btn-style-2" onclick="window.location.href={{ Js::from(route('promotion.event.list')) }}">목록</button>
                        <button type="button" class="button btn-style-1" onclick="handleSubmit()">
                            @if ($event)
                            저장
                            @else
                            등록
                            @endif
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->

        <form id="event-form" class="set-event-form">
            <input type="hidden" name="id" value="{{ $event?->id }}">
            <div class="row detail-con-wrap">
                <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>
                                            @if ($event)
                                            {{ $event->id }}
                                            @else
                                            -
                                            @endif
                                        </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="customRadio{{ $key }}" name="service_id" class="form-check-input" value="{{ $service->id }}" @checked((empty($event) && $service->id == 1) || $service->id == $event?->id)>
                                                <label class="form-check-label" for="customRadio{{ $key }}">{{ $service->name }}</label>
                                            </div>
                                            @endforeach
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                </div>
                                <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(!$event || $event?->activated == 1)>
                                                <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(" ", $event?->activated_start_date ?? " ")[0] }}">
                                                <span class="btw-bullet">-</span>
                                                <input type="date" id="activated_end_date" name="activated_end_date" value="{{ explode(" ", $event?->activated_end_date ?? " ")[0] }}" @disabled(!$event || ($event?->is_activated_end_date_disabled === 0))>
                                            </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(!$event || ($event?->is_activated_end_date_disabled == 1))>
                                                <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($event?->activated === 0)>
                                                <label class="form-check-label" for="activated1">
                                                    비전시
                                                    @if ($event?->activated === 0 && $event?->deactivated_at)
                                                    ({{ explode(" ", $event->deactivated_at)[0] }})
                                                    @endif
                                                </label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">이벤트 기간</dt>
                                        <dd>
                                            <div class="flex-box">
                                                <input type="date" id="event_start_date" name="event_start_date" value="{{ explode(" ", $event?->event_start_date ?? " ")[0] }}">
                                                <input type="time" id="event_start_time" name="event_start_time" value="{{ $event?->event_start_time }}">
                                                <span class="btw-bullet">-</span>
                                                <input type="date" id="event_end_date" name="event_end_date" value="{{ explode(" ", $event?->event_end_date ?? " ")[0] }}" @disabled(!$event || ($event?->is_event_end_date_disabled == 1))>
                                                <input type="time" id="event_end_time" name="event_end_time" value="{{ $event?->event_end_time }}" @disabled(!$event || ($event?->is_event_end_date_disabled == 1))>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="is_event_end_date_disabled" name="is_event_end_date_disabled" class="form-check-input" value="1" onchange="changeEndDateDisabled(event)" @checked(!$event || ($event?->is_event_end_date_disabled == 1))>
                                                <label class="form-check-label" for="is_event_end_date_disabled">종료일 없음</label>
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">이벤트 상태</dt>
                                        <dd>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="status0" name="status" class="form-check-input" value="1" @checked(!$event || ($event?->status == 1))>
                                                <label class="form-check-label" for="status0">오픈</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="status1" name="status" class="form-check-input" value="0" @checked($event?->status === 0)>
                                                <label class="form-check-label" for="status1">마감</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="status2" name="status" class="form-check-input" value="2" @checked($event?->status == 2)>
                                                <label class="form-check-label" for="status2">당첨자 발표</label>
                                            </div>
                                        </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(!$event || ($event?->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($event?->fixed == 1)>
                                                <label class="form-check-label" for="fixed1">고정</label>
                                            </div>
                                        </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">
                                    썸네일
                                    <div class="button-wrap">
                                        <button class="button btn-style-1" type="button" onclick="findThumbnail()">찾기</button>
                                        <input type="file" id="thumbnail" name="thumbnail" accept="image/*" style="display: none;" onchange="thumbnailChange(event)"/>
                                    </div>
                                </h2>
                                <div class="detail-input">
                                    <dl class="input-wrapper">
                                        <dd class="thumbnail-img-wrap">
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button" onclick="deleteThumbnail()">이미지 삭제</button>
                                                <img id="thumbnail_image" alt=""
                                                @if ($event?->s3_key)
                                                src="{{ app(\S3Helper::class)->getDownloadPresignedUrl($event->s3_key) }}"
                                                @endif
                                                >
                                            </div>
                                        </dd>
                                        <dd class="thumbnail-img-notice">
                                            * 파일 형식 : jpg, jpeg, png / 권장 이미지 사이즈 : 512*344
                                        </dd>
                                    </dl>
                                    <dd class="validation-wrap"><p></p></dd>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">노출 옵션</h2>
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt>참여자 표시</dt>
                                <dd>
                                    <div>
                                        <select name="reply_author_display_type_id" id="reply_author_display_type_id">
                                            @foreach ($replyAuthorDisplayTypes as $replyAuthorDisplayType)
                                            <option value="{{ $replyAuthorDisplayType->id }}" @selected($event?->reply_author_display_type_id == $replyAuthorDisplayType->id)>{{ $replyAuthorDisplayType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <p class="p-alert">
                                        이름이 1글자인 경우 성을 마스킹 처리 합니다.
                                    </p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">읽기/쓰기 옵션</h2>
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt>읽기 제한</dt>
                                <dd>
                                    <div>
                                        <select name="event_read_type_id" id="event_read_type_id">
                                            @foreach ($eventReadTypes as $eventReadType)
                                            <option value="{{ $eventReadType->id }}" @selected($event?->event_read_type_id == $eventReadType->id)>{{ $eventReadType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>댓글</dt>
                                <dd>
                                    <div>
                                        <select name="event_comment_type_id" id="event_comment_type_id">
                                            @foreach ($eventCommentTypes as $eventCommentType)
                                            <option value="{{ $eventCommentType->id }}" @selected($event?->event_comment_type_id == $eventCommentType->id)>{{ $eventCommentType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                            </dl>
                            {{-- <dl class="input-wrapper">
                                <dt>자동입력 방지</dt>
                                <dd>
                                    <div>
                                        <select name="event_captcha_type" id="event_captcha_type">
                                            @foreach ($EVENT_CLASS::EVENT_CAPTCHA_TYPE as $letter => $value)
                                            <option value="{{ $value }}" @selected($event?->event_captcha_type == $value)>{{ $letter }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                            </dl> --}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <h2 class="detail-title">참여 조건 옵션</h2>
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt class="req">참여 제한</dt>
                                <dd>
                                    <div>
                                        <select name="event_permission_type_id" id="event_permission_type_id">
                                            @foreach ($eventPermissionTypes as $eventPermissionType)
                                            <option value="{{ $eventPermissionType->id }}" @selected($event?->event_permission_type_id == $eventPermissionType->id)>{{ $eventPermissionType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">참여 방식</dt>
                                <dd>
                                    @foreach ($eventParticipationTypes as $key => $eventParticipationType)
                                    <div class="form-check form-check-inline">
                                        <input type="radio" id="event_participation_type{{ $key }}" name="event_participation_type_id" class="form-check-input" value="{{ $eventParticipationType->id }}" @checked($event?->event_participation_type_id == $eventParticipationType->id)>
                                        <label class="form-check-label" for="event_participation_type{{ $key }}">{{ $eventParticipationType->name }}</label>
                                    </div>
                                    @endforeach
                                    {{-- <p class="p-alert">
                                        아무것도 선택 안 하신 경우 참여 버튼만 노출됩니다.
                                    </p> --}}
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>최소 글자수</dt>
                                <dd>
                                    <input id="event_min_char" name="event_min_char" type="text" class="w120" value="{{ $event?->event_min_char }}"> 자
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>파일 첨부</dt>
                                <dd>
                                    <div>
                                        <select name="attachment_type_id" id="attachment_type_id">
                                            @foreach ($attachmentTypes as $attachmentType)
                                            <option value="{{ $attachmentType->id }}" @selected($event?->attachment_type_id == $attachmentType->id)>{{ $attachmentType->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <p class="p-alert">
                                        이미지만을 선택한 경우 jpg, jpeg, gif, png, tif 확장자의 파일만 업로드 가능합니다.
                                    </p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

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

                            <span class="mr20 mlauto">당첨<a class="ml10" onclick="edmPopupOpen({{ Js::from(route('promotion.event.popup.event-participants', $event->id)) }}, null)">{{ count($event->eventParticipants->whereNotNull("won_at")->all()) }}</a></span>

                            <span>응모<a class="ml10" onclick="edmPopupOpen({{ Js::from(route('promotion.event.popup.event-participants', $event->id)) }}, null)">{{ count($event->eventParticipants) }}</a></span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <div class="row">
                <div class="card">
                    <div class="card-body">
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt class="req">이벤트명</dt>
                                <dd>
                                    <input type="text" id="title" name="title" value="{{ $event?->title }}">
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt>내용 입력</dt>
                                <dd>
                                    <div id="content-editor" class="w100p"></div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        @if ($event)
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <form action="">
                        <div class="comment-wrap">
                            <div class="comment-con">
                                <h2>
                                    댓글 <span>{{ count($event->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 ($event->comments->whereNull("parent_comment_id")->all() as $comment)
                                    @php
                                        $childrenComments = $comment->getAllChildren($event->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;">{{ "@" . $event->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>
                    </form>
                </div>
            </div>
        </div>
        @endif
    </div>

@endsection

@push("script")
<script>
    const EVENT = {{ Js::from($event) }};
    let contentEditor;

    window.addEventListener("load", () => {
        contentEditor = new Editor({
            el: document.getElementById("content-editor"),
            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]
        });

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

        if (EVENT)
            contentEditor.setMarkdown(EVENT.content);
    });

    async function handleSubmit() {
        const result = await validate();
        if (!result)
            return;

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

    async function validate() {
        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 $eventStartDate = document.getElementById('event_start_date');
        const eventStartDate = $eventStartDate?.value;
        const $eventStartTime = document.getElementById('event_start_time');
        const eventStartTime = $eventStartTime?.value;
        if (!eventStartDate || !eventStartTime)
            $validationWrap = displayValidationForm($eventStartDate, "입력된 내용이 없습니다.");

        const $isEventEndDateDisabled = document.getElementById('is_event_end_date_disabled');
        const isEventEndDateDisabled = $isEventEndDateDisabled?.checked;
        const $eventEndDate = document.getElementById('event_end_date');
        const eventEndDate = $eventEndDate?.value;
        const $eventEndTime = document.getElementById('event_end_time');
        const eventEndTime = $eventEndTime?.value;
        if (!isEventEndDateDisabled && (!eventEndDate || !eventEndTime))
            $validationWrap = displayValidationForm($eventEndDate, "입력된 내용이 없습니다.");
        else if (!isEventEndDateDisabled && eventStartDate && eventStartTime && eventEndDate && eventEndTime) {
            const fromDate = new Date(`${eventStartDate} ${eventStartTime}`);
            const toDate = new Date(`${eventEndDate} ${eventEndTime}`);
            if (fromDate.getTime() > toDate.getTime())
                $validationWrap = displayValidationForm($eventEndTime, "이벤트 종료일이 시작일보다 빠릅니다.");
        }

        // 이벤트 상태
        const $status = document.querySelector("input[name='status']:checked");
        const status = $status?.value;
        if (!status)
            $validationWrap = displayValidationForm(document.querySelector("input[name='status']"), "입력된 내용이 없습니다.");

        // 참여 제한
        const $eventPermissionTypeId = document.getElementById('event_permission_type_id');
        const eventPermissionTypeId = $eventPermissionTypeId?.value;
        if (!eventPermissionTypeId)
            $validationWrap = displayValidationForm($eventPermissionTypeId, "입력된 내용이 없습니다.");

        // 참여 방식
        const $eventParticipationTypeId = document.querySelector("input[name='event_participation_type_id']:checked");
        const eventParticipationTypeId = $eventParticipationTypeId?.value;
        if (!eventParticipationTypeId)
            $validationWrap = displayValidationForm(document.querySelector("input[name='event_participation_type_id']"), "입력된 내용이 없습니다.");

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

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

    function execSubmit() {
        const BODY = new FormData(document.getElementById("event-form"));

        const $isActivatedEndDateDisabled = document.getElementById('is_activated_end_date_disabled');
        if (!$isActivatedEndDateDisabled.checked)
            BODY.append("is_activated_end_date_disabled", 0);

        const $isEventEndDateDisabled = document.getElementById('is_event_end_date_disabled');
        if (!$isEventEndDateDisabled.checked)
            BODY.append("is_event_end_date_disabled", 0);

        BODY.append("content", contentEditor.getMarkdown());

        const CALLBACK = response => {
            if (response.status == 200 || response.status == 201)
                alertify.alert("알림", "완료되었습니다.", () => {
                    if (EVENT)
                        location.reload();
                    else
                        window.location.href = route('promotion.event.list');
                });
            else
                alertify.alert('Error', '오류가 발생했습니다.');

        };

        let setUrl = route('api.promotion.event.set');
        if (EVENT)
            setUrl += "/" + EVENT.id;

        edmAjax({
            method: "POST",
            url: setUrl,
            data: BODY,
            callback: CALLBACK,
        });
    }

    function findThumbnail() {
        const $thumbnailElem = document.getElementById("thumbnail");
        $thumbnailElem.click();
    }

    function thumbnailChange(e) {
        const $thumbnailImageElem = document.getElementById("thumbnail_image");
        const imageSource = URL.createObjectURL(e.target.files[0]);
        $thumbnailImageElem.src = imageSource;
        URL.revokeObjectURL(e.target.files[0]);
    }

    function deleteThumbnail() {
        if (!EVENT) {
            const $thumbnailElem = document.getElementById("thumbnail");
            if ($thumbnailElem)
                $thumbnailElem.value = null;

            const $imageElem = document.getElementById("thumbnail_image");
            if ($imageElem)
                $imageElem.src = "";

        } else {
            alertify.confirm("알림", "정말 삭제하시겠습니까?", () => {
                const URL = route('api.promotion.event.delete-thumbnail', {id: EVENT.id});
                edmAjax({
                    method: "DELETE",
                    url: URL,
                    callback: (response) => {
                        if (response.data)
                            alertify.alert("알림", "완료되었습니다.", () => location.reload());
                        else
                            alertify.alert("알림", "오류가 발생했습니다.");
                    },
                    errorCallback: (error) => {
                        alertify.alert("알림", "오류가 발생했습니다.");
                    }
                });
            }, () => 1);
        }
    }

    function changeEndDateDisabled(e) {
        const isDisabled = e.target.checked;
        const targetElems = [];
        if (e.target.name == "is_activated_end_date_disabled")
            targetElems.push(document.getElementById("activated_end_date"));
        else if (e.target.name == "is_event_end_date_disabled") {
            targetElems.push(document.getElementById("event_end_date"));
            targetElems.push(document.getElementById("event_end_time"));
        }

        targetElems.forEach(item => item.disabled = isDisabled);
    }

    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 = "";
    }

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

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

        const URL = route('api.promotion.event.set-comment-by-event', {id: EVENT.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.data)
                    location.reload();
                else
                    alertify.alert("알림", "댓글을 등록하지 못했습니다.<br>새로고침 후 다시 시도해주세요.");
            },
        });
    }

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

        const URL = route('api.promotion.event.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>새로고침 후 다시 시도해주세요.");
            },
        });

    }

</script>
@endpush