@extends("domains.common.layouts.layout")
@section("header")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/common/toastEditor.js',
])
@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>이벤트 관리 상세</h1>
                    <ul class="page-wayfinding">
                        <li>이벤트 관리</li>
                        <li>상세</li>
                    </ul>
                    <div class="page-btn-wrap">
                        <button class="button btn-style-2">목록</button>
                        <button class="button btn-style-1">저장</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->


        <div class="row detail-con-wrap">
            <div class="detail-con card">
                <form action="" class="set-user-form" >
                    <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>%이벤트 유니크값%</dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">서비스 구분</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio1" name="module" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio1">인강</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio2" name="module" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio2">어학원</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio3" name="module" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio3">공통</label>
                                            </div>
                                        </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="customRadio4" name="radio2" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio4">전시</label>
                                            </div>
                                            <div class="flex-box">
                                                <input type="date" id="register_start_date" name="register_start_date"><span class="btw-bullet">-</span><input type="date" id="register_end_date" name="register_end_date">
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="noEndDate" name="noEndDate" class="form-check-input" value="인강">
                                                <label class="form-check-label" for="noEndDate">종료일 없음</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio5" name="radio2" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio5">비전시(2023.06.15)</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="register_start_date" name="register_start_date">
                                                <select name="" id="">
                                                    <option value="">오전 12:00</option>
                                                </select>
                                                <span class="btw-bullet">-</span>
                                                <input type="date" id="register_end_date" name="register_end_date" disabled>
                                                <select name="" id="" disabled>
                                                    <option value="">오전 12:00</option>
                                                </select>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="noEndDate2" name="noEndDate2" class="form-check-input" value="인강" checked>
                                                <label class="form-check-label" for="noEndDate2">종료일 없음</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="customRadio6" name="radio3" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio6">오픈</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio7" name="radio3" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio7">마감</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio8" name="radio3" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio8">당첨자 발표</label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>상단 고정</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio9" name="radio4" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio9">고정 안 함</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio10" name="radio4" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio10">고정</label>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="detail-con card">
                <form action="" class="set-user-form" >
                    <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">찾기</button>
                                        <input type="file" id="thumbnail_img" name="photo" accept="image/*" style="display: none;"/>
                                    </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">이미지 삭제</button>
                                                <img id="thumbnail_image" alt="">
                                            </div>
                                        </dd>
                                        <dd class="thumbnail-img-notice">
                                             * 파일 형식 : jpg, jpeg, png / 권장 이미지 사이즈 : 512*344
                                        </dd>
                                    </dl>
                                    <div class="validation-wrap">
                                        <p>등록된 파일이 없습니다.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </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="" id="">
                                        <option value="">아이디</option>
                                        <option value="">아이디 앞 3글자 노출</option>
                                        <option value="">이름</option>
                                        <option value="">이름 앞뒤 1글자 노출</option>
                                    </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="" id="">
                                        <option value="">전체</option>
                                        <option value="">회원만</option>
                                        <option value="">결제 이력 있는 회원만</option>
                                        <option value="">수강중인 회원만</option>
                                    </select>
                                </div>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt>댓글</dt>
                            <dd>
                                <div>
                                    <select name="" id="">
                                        <option value="">사용하지 않음</option>
                                        <option value="">사용</option>
                                        <option value="">사용, 1개까지만</option>
                                    </select>
                                </div>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt>자동입력 방지</dt>
                            <dd>
                                <div>
                                    <select name="" id="">
                                        <option value="">사용하지 않음</option>
                                        <option value="">사용</option>
                                    </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="" id="">
                                        <option value="">회원만</option>
                                        <option value="">결제 이력 있는 회원만</option>
                                        <option value="">수강중인 회원만</option>
                                        <option value="">회원만 1회</option>
                                        <option value="">결제 이력 있는 회원만 1회</option>
                                        <option value="">수강중인 회원만 1회</option>
                                    </select>
                                </div>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt>참여 방식</dt>
                            <dd>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" id="all" name="all" class="form-check-input">
                                    <label class="form-check-label" for="all">전체</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" id="chk1" name="chk1" class="form-check-input">
                                    <label class="form-check-label" for="chk1">내용 입력</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" id="chk2" name="chk2" class="form-check-input">
                                    <label class="form-check-label" for="chk2">첨부 파일</label>
                                </div>
                                <p class="p-alert">
                                    아무것도 선택 안 하신 경우 참여 버튼만 노출됩니다.
                                </p>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt>최소 글자수</dt>
                            <dd>
                                <input type="text" class="w120"> 자
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt>파일 첨부</dt>
                            <dd>
                                <div>
                                    <select name="" id="">
                                        <option value="">형식 제한 없이 1개만</option>
                                        <option value="">형식 제한 없이 10개까지</option>
                                        <option value="">이미지만 1개만</option>
                                        <option value="">이미지만 10개까지</option>
                                    </select>
                                </div>
                                <p class="p-alert">
                                    이미지만을 선택한 경우 jpg, jpeg, gif, png, tif 확장자의 파일만 업로드 가능합니다.
                                </p>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="flex-box m0">
                        <span class="mr20">등록일시<span class="ml10">2023.12.31 00:00:00</span></span>
                        <span class="mr20">작성자<a class="ml10" href="#none">%이름%</a></span>
                        <span>조회수<span class="ml10">1,111</span></span>
                        
                        <span class="mr20 mlauto">당첨<a class="ml10" href="#none">1</a></span>
                        
                        <span>응모<a class="ml10" href="#none">1,111</a></span>
                    </div>
                </div>
            </div>
        </div>

        <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">
                            </dd>
                            <dd class="validation-wrap">
                                <p>입력된 내용이 없습니다.</p>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt>내용 입력</dt>
                            <dd>
                                <div id="tui-editor" class="w100p"></div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <form action="">
                        <div class="comment-wrap">
                            <div class="comment-con">
                                <h2>
                                    댓글 <span>99</span>건
                                </h2>
                                <div class="comment-textarea-wrap">
                                    <textarea name="" id="" cols="30" rows="10" oninput="" value=""></textarea>
                                    <button class="button btn-style-1" onclick="">등록</button>
                                </div>
                                <div class="comment-row">
                                    <div class="user-comment">
                                    <button class="user-comment-remove" onclick=""></button>
                                        <div class="user-comment-img">
                                            <img id="user_image" src="{{ Vite::asset('resources/images/no-photo.svg') }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                                        </div>
                                        <div class="user-comment-contents">
                                            <div class="user-comment-profile">
                                                <div class="user-comment-name">이름</div>
                                                <p class="comment-date">날짜</p>
                                            </div>
                                            <p class="comment-text">
                                            내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 
                                            </p>
                                            <div class="comment-btn-wrap">
                                                <a href="#none">답글 달기</a>
                                                <a href="#none">답글 2개 숨기기</a>
                                                <!-- <a href="#none">답글 2개 보기</a> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- style margin-left 는 depth의 배수만큼 적용부탁드립니다. 1depth 75, 2depth 150 등 -->
                                <div class="comment-row comment-reply" style="margin-left: 75px">
                                    <div class="user-comment">
                                    <button class="user-comment-remove" onclick=""></button>
                                        <div class="user-comment-img">
                                            <img id="user_image" src="{{ Vite::asset('resources/images/no-photo.svg') }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                                        </div>
                                        <div class="user-comment-contents">
                                            <div class="user-comment-profile">
                                                <div class="user-comment-name">이름</div>
                                                <p class="comment-date">날짜</p>
                                            </div>
                                            <p class="comment-text">
                                            내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 
                                            </p>
                                            <div class="comment-btn-wrap">
                                                <a href="#none">답글 달기</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- // -->
                                <div class="comment-row comment-reply" style="margin-left: 150px">
                                    <div class="user-comment">
                                    <button class="user-comment-remove" onclick=""></button>
                                        <div class="user-comment-img">
                                            <img id="user_image" src="{{ Vite::asset('resources/images/no-photo.svg') }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                                        </div>
                                        <div class="user-comment-contents">
                                            <div class="user-comment-profile">
                                                <div class="user-comment-name">이름</div>
                                                <p class="comment-date">날짜</p>
                                            </div>
                                            <p class="comment-text">
                                            내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 
                                            </p>
                                            <div class="comment-btn-wrap">
                                                <a href="#none">답글 달기</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- // -->
                                <div class="comment-row">
                                    <div class="user-comment">
                                    <button class="user-comment-remove" onclick=""></button>
                                        <div class="user-comment-img">
                                            <img id="user_image" src="{{ Vite::asset('resources/images/no-photo.svg') }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                                        </div>
                                        <div class="user-comment-contents">
                                            <div class="user-comment-profile">
                                                <div class="user-comment-name">이름</div>
                                                <p class="comment-date">날짜</p>
                                            </div>
                                            <p class="comment-text">
                                            내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 
                                            </p>
                                            <div class="comment-btn-wrap">
                                                <a href="#none">답글 달기</a>
                                                <a href="#none">답글 2개 숨기기</a>
                                                <!-- <a href="#none">답글 2개 보기</a> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- end row -->
    </div>

@endsection

@push("script")
<script>
    let editorTmp;

    window.addEventListener("load", () => {

        editorTmp = new Editor({
            el: document.querySelector("#tui-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]
        });

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


    window.addEventListener("load", () => {
        let gridTmp1;
        let gridItems1 = [
            {
                service: "어학원",
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                count: "15",
                videoTime: "00:00:00"
            },{
                service: "어학원",
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                count: "15",
                videoTime: "00:00:00"
            },{
                service: "어학원",
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                count: "15",
                videoTime: "00:00:00"
            },{
                service: "어학원",
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                count: "15",
                videoTime: "00:00:00"
            },{
                service: "어학원",
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                count: "15",
                videoTime: "00:00:00"
            }
        ];

        gridTmp1 = new Grid({
            el: document.getElementById("grid1"),
            data: gridItems1,
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '강좌 순서',
                    name: 'row_num',
                    sortable: true,
                    width: 80,
                    align: 'center'
                },
                {
                    header: '서비스 구분',
                    name: 'service',
                    align: 'center',
                    width: 120
                },
                {
                    header: '모듈',
                    name: 'module',
                    align: 'center',
                },
                {
                    header: '강좌명',
                    name: 'lectureName',
                },
                {
                    header: '회차',
                    name: 'count',
                    align: 'center',
                    width: 50,
                },
                {
                    header: '강의수',
                    name: 'lectureCount',
                    align: 'center',
                    width: 80
                },
                {
                    header: '영상 길이',
                    name: 'videoTime',
                    align: 'center',
                    width: 80
                },
                {
                    header: '구성교재',
                    name: 'book',
                    align: 'center',
                    width: 80
                }
            ],
            draggable: true,
            scrollX: false,
            scrollY: false,
        });

        gridTmp1.on('onGridMounted', ({ instance }) => {
            instance.getData().forEach(({rowKey}) => {
                instance.setValue(rowKey, 'row_num', rowKey + 1);
            });
        });

        //첨삭

        let gridTmp2;
        let gridItems2 = [
            {
                service: "어학원",
                correctName: "<a href='#none'>%첨삭명%</a>",
                price: "1,500,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
                useRestricDay: "1",
                useRestricCount: "1",
                correction: "Basic"
            },
            {
                service: "어학원",
                correctName: "<a href='#none'>%첨삭명%</a>",
                price: "1,500,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
                useRestricDay: "1",
                useRestricCount: "1",
                correction: "Basic"
            },
            {
                service: "어학원",
                correctName: "<a href='#none'>%첨삭명%</a>",
                price: "1,500,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
                useRestricDay: "1",
                useRestricCount: "1",
                correction: "Premium"
            },
            {
                service: "어학원",
                correctName: "<a href='#none'>%첨삭명%</a>",
                price: "1,500,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
                useRestricDay: "1",
                useRestricCount: "1",
                correction: "Basic"
            },
            {
                service: "인강",
                correctName: "<a href='#none'>%첨삭명%</a>",
                price: "1,500,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
                useRestricDay: "1",
                useRestricCount: "1",
                correction: "Basic"
            }
        ];

        gridTmp2 = new Grid({
            el: document.getElementById("grid2"),
            data: gridItems2,
            columnOptions: {
                minWidth: 10
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            header: {
                complexColumns: [
                    {
                        header: '이용 제한',
                        name: 'useRestric',
                        childNames: ['useRestricDay', 'useRestricCount'],
                        hideChildHeaders: true,
                    }
                ],
            },
            columns: [
                {
                    header: '번호',
                    name: 'row_num',
                    sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '서비스구분',
                    name: 'service',
                    align: 'center',
                    width: 120
                },
                {
                    header: '첨삭 유형',
                    name: 'correction',
                    align: 'center',
                    width: 120
                },
                {
                    header: '첨삭명',
                    name: 'correctName',
                },
                {
                    header: '판매가',
                    name: 'price',
                    align: 'center',
                    width: 'auto'
                },
                {
                    header: '이용일',
                    name: 'usePeriod',
                    align: 'center',
                    width: 80
                },
                {
                    header: '이용횟수',
                    name: 'useCount',
                    align: 'center',
                    width: 80
                },
                {
                    header: '미이용 차감일',
                    name: 'count',
                    align: 'center',
                    width: 100
                },
                {
                    header: '',
                    name: 'useRestricDay',
                    align: 'center',
                    width: 60,
                    className: 'useRestricDayBullet'
                },
                {
                    header: '',
                    name: 'useRestricCount',
                    align: 'center',
                    width: 60,
                    className: 'useRestricCountBullet'
                }
            ],
            // draggable: true,
            scrollX: false,
            scrollY: false,
        });

        gridTmp2.on('onGridMounted', ({ instance }) => {
            instance.getData().forEach(({rowKey}) => {
                instance.setValue(rowKey, 'row_num', rowKey + 1);
            });
        });

        //cdt

        let gridTmp3;
        let gridItems3 = [
            {
                module: "Acedemic",
                subject: "L / R / WT1 / WT2 / S",
                cdtName: "<a href='#none'>%CDT_세트명%</a>",
                price: "1,500,000",
                service: "인강"
            },
            {
                module: "Acedemic",
                subject: "L",
                cdtName: "<a href='#none'>%CDT_세트명%</a>",
                price: "1,500,000",
                service: "어학원"
            },
            {
                module: "General",
                subject: "R",
                cdtName: "<a href='#none'>%CDT_세트명%</a>",
                price: "1,500,000",
                service: "인강"
            },
            {
                module: "General",
                subject: "WT1",
                cdtName: "<a href='#none'>%CDT_세트명%</a>",
                price: "1,500,000",
                service: "인강"
            },
            {
                module: "General",
                subject: "S",
                cdtName: "<a href='#none'>%CDT_세트명%</a>",
                price: "1,500,000",
                service: "인강"
            },
        ];

        gridTmp3 = new Grid({
            el: document.getElementById("grid3"),
            data: gridItems3,
            columnOptions: {
                minWidth: 10
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '번호',
                    name: 'row_num',
                    sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '서비스 구분',
                    name: 'service',
                    align: 'center',
                    width: 120
                },
                {
                    header: '모듈',
                    name: 'module',
                    align: 'center',
                    width: 120
                },
                {
                    header: '과목',
                    name: 'subject',
                    align: 'center',
                    width: 'auto'
                },
                {
                    header: 'CDT 세트명',
                    name: 'cdtName',
                },
                {
                    header: '판매가',
                    name: 'price',
                    align: 'center',
                    minWidth: 120,
                    width: 'auto'
                }
            ],
            // draggable: true,
            scrollX: false,
            scrollY: false,
        });

        gridTmp3.on('onGridMounted', ({ instance }) => {
            instance.getData().forEach(({rowKey}) => {
                instance.setValue(rowKey, 'row_num', rowKey + 1);
            });
        });

        //교재

        let gridTmp4;
        let gridItems4 = [
            {
                date: "2023.04.06<br>00:06:15",
                bookName: "<a href='#none'>%교재명%</a>",
                module: "Academic",
                subject: "L, R",
                sell: "내외부",
                level: "시작",
                audioFile: "%파일명%",
                price: "10,000",
            },
            {
                date: "2023.04.06<br>00:06:15",
                bookName: "<a href='#none'>%교재명%</a>",
                module: "Academic",
                subject: "WT1, WT2",
                sell: "내외부",
                level: "시작",
                audioFile: "%파일명%",
                price: "10,000",
            },
            {
                date: "2023.04.06<br>00:06:15",
                bookName: "<a href='#none'>%교재명%</a>",
                module: "Academic",
                subject: "공통",
                sell: "내부",
                level: "기본",
                audioFile: "%파일명%",
                price: "10,000",
            },
            {
                date: "2023.04.06<br>00:06:15",
                bookName: "<a href='#none'>%교재명%</a>",
                module: "Academic",
                subject: "공통",
                sell: "내부",
                level: "기본",
                audioFile: "-",
                price: "10,000",
            },
            {
                date: "2023.04.06<br>00:06:15",
                bookName: "<a href='#none'>%교재명%</a>",
                module: "Academic",
                subject: "공통",
                sell: "내부",
                level: "실전",
                audioFile: "-",
                price: "10,000",
            },
            {
                date: "2023.04.06<br>00:06:15",
                bookName: "<a href='#none'>%교재명%</a>",
                module: "Academic",
                subject: "공통",
                sell: "내부",
                level: "실전",
                audioFile: "-",
                price: "10,000",
            },
        ];

        gridTmp4 = new Grid({
            el: document.getElementById("grid4"),
            data: gridItems4,
            columnOptions: {
                minWidth: 10
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '번호',
                    name: 'row_num',
                    sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '등록일시',
                    name: 'date',
                    align: 'center',
                    width: 100
                },
                {
                    header: '교재명',
                    name: 'bookName',
                },
                {
                    header: '모듈',
                    name: 'module',
                    align: 'center',
                    width: 100
                },
                {
                    header: '과목',
                    name: 'subject',
                    align: 'center',
                    width: 'auto'
                },
                {
                    header: '판매 구분',
                    name: 'sell',
                    align: 'center',
                    width: 80
                },
                {
                    header: '레벨',
                    name: 'level',
                    align: 'center',
                    width: 'auto'
                },
                {
                    header: '오디오 파일',
                    name: 'audioFile',
                    align: 'center',
                    width: 100
                },
                {
                    header: '판매가',
                    name: 'price',
                    align: 'center',
                    minWidth: 100,
                    width: 'auto'
                },
            ],
            // draggable: true,
            scrollX: false,
            scrollY: false,
        });

        gridTmp4.on('onGridMounted', ({ instance }) => {
            instance.getData().forEach(({rowKey}) => {
                instance.setValue(rowKey, 'row_num', rowKey + 1);
            });
        });

        //기타

        let gridTmp5;
        let gridItems5 = [
            {
                service: "어학원",
                contents: "응시권",
                contentsName: "<a href='#none'>일반 PBT</a>",
                price: "10,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
            },
            {
                service: "어학원",
                contents: "응시권",
                contentsName: "<a href='#none'>일반 CDT</a>",
                price: "10,000",
                usePeriod: "180",
                useCount: "1",
                count: "1",
            },
            {
                service: "인강",
                contents: "응시권",
                contentsName: "<a href='#none'>UKVI PBT</a>",
                price: "10,000",
                usePeriod: "180",
                useCount: "5",
                count: "5",
            },
            {
                service: "인강",
                contents: "응시권",
                contentsName: "<a href='#none'>UKVI CDT</a>",
                price: "10,000",
                usePeriod: "180",
                useCount: "5",
                count: "5",
            }
        ];

        gridTmp5 = new Grid({
            el: document.getElementById("grid5"),
            data: gridItems5,
            columnOptions: {
                minWidth: 10
            },
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '번호',
                    name: 'row_num',
                    sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '서비스구분',
                    name: 'service',
                    align: 'center',
                    width: 120
                },
                {
                    header: '항목 구분',
                    name: 'contents',
                    width: 'auto'
                },
                {
                    header: '항목명',
                    name: 'contentsName',
                },
                {
                    header: '판매가',
                    name: 'price',
                    align: 'center',
                    width: 'auto'
                },
                {
                    header: '이용일',
                    name: 'usePeriod',
                    align: 'center',
                    width: 80
                },
                {
                    header: '이용횟수',
                    name: 'useCount',
                    align: 'center',
                    width: 80
                },
                {
                    header: '미이용 차감일',
                    name: 'count',
                    align: 'center',
                    width: 100
                },
            ],
            // draggable: true,
            scrollX: false,
            scrollY: false,
        });

        gridTmp5.on('onGridMounted', ({ instance }) => {
            instance.getData().forEach(({rowKey}) => {
                instance.setValue(rowKey, 'row_num', rowKey + 1);
            });
        });

    });
</script>
@endpush