@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-6">복제</button>
                        <button class="button btn-style-1">저장</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->


        <div class="row detail-con-wrap3">
            <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>
                                            판매
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">모듈</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio3" name="module" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio3">Academic</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio4" name="module" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio4">General</label>
                                            </div>
                                        </dd>
                                    </dl>

                                    <dl class="input-wrapper">
                                        <dt class="req">
                                            목표 점수
                                            <div class="info">
                                                <i class="ico-info">i</i>
                                                <div class="tooltip-con">
                                                    수강 전 학생들의 점수입니다.
                                                </div>
                                            </div>
                                        </dt>
                                        <dd>
                                            <select name="" id="">
                                                <option value="">선택</option>
                                            </select>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p>선택된 항목이 없습니다.</p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">
                                            대상 점수
                                            <div class="info">
                                                <i class="ico-info">i</i>
                                                <div class="tooltip-con">
                                                    수강 후 학생들의 목표 점수입니다.
                                                </div>
                                            </div>
                                        </dt>
                                        <dd>
                                            <select name="" id="">
                                                <option value="">선택</option>
                                            </select>
                                        </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="flex-1">
                                                <input type="text" class="form-control" id="" name="" placeholder="최대 30자까지 입력 가능합니다.">
                                            </div>
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p>입력된 내용이 없습니다.</p>
                                            <p>동일한 상품명이 존재합니다.</p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>간략 소개</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <input type="text" class="form-control" id="description" name="description" placeholder="">
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>수강 대상</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <textarea name="" id="" cols="30" rows="10"></textarea>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>수강생 혜택</dt>
                                        <dd>
                                            <div class="flex-1">
                                                <div id="tui-editor"></div>
                                            </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">전시 구분</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="customRadio5" name="radio2" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio5">전시</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="customRadio6" name="radio2" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio6">
                                                    비전시(2023.06.15)
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                        비전시 처리 시 사용자 사이트에서 보이지 않으며 이미 구매 처리된 고객의 상품에는 영향을 주지 않습니다.
                                                        </div>
                                                    </div>
                                                </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="customRadio7" name="status" 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="status" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio8">
                                                    마감
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                            상품을 품절 처리 합니다.
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">환급 여부</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio9" name="refund" 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="refund" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio10">
                                                    가능
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                            <!-- 내용 없음 -->
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">휴강 여부</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio11" name="rest" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio11">불가</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio12" name="rest" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio12">
                                                    가능
                                                    <div class="info">
                                                        <i class="ico-info">i</i>
                                                        <div class="tooltip-con">
                                                            [휴강조건]<br>
                                                            -수강기간 중 1회 최대 30일까지 신청 가능 (휴강불가 상품 제외 모든 상품은 1회 신청 가능)<br>
                                                            *휴강불가 상품 목록<br>
                                                            -입문 200% 페이백 (아카데믹/제너럴)<br>
                                                            -실전 200% 페이백 (아카데믹/제너럴)
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">연장 여부</dt>
                                        <dd>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio13" name="extension" class="form-check-input" value="1">
                                                <label class="form-check-label" for="customRadio13">불가</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="radio" id="customRadio14" name="extension" class="form-check-input" value="0">
                                                <label class="form-check-label" for="customRadio14">가능</label>
                                            </div>
                                            <div class="flex-box">
                                                <select name="" id="">
                                                    <option value="">1회 신청</option>
                                                    <option value="">무제한 신청</option>
                                                    <option value="">1회 자동 승인</option>
                                                    <option value="">무제한 자동 승인</option>
                                                </select>
                                                <input type="text">
                                                일
                                                <div class="validation-wrap">
                                                    <p>입력된 내용이 없습니다.</p>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt>
                                            카테고리
                                        </dt>
                                        <dd class="flex-wrap">
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category1" name="category1" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category1">전강좌+응시권패스</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category2" name="category2" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category2">N개월 알짜패스</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category3" name="category3" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category3">페이백 200% 환급반</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category4" name="category4" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category4">W/S 30일 완성</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category5" name="category5" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category5">시험응시권</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category6" name="category6" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category6">1:1 첨삭</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category7" name="category7" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category7">응시권</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category8" name="category8" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category8">캠브리지</label>
                                            </div>
                                            <div class="form-check form-check-inline ">
                                                <input type="checkbox" id="category9" name="category9" class="form-check-input" value="1">
                                                <label class="form-check-label" for="category9">기타</label>
                                                <select name="" id="">
                                                    <option value="">선택</option>
                                                    <option value="">원어민</option>
                                                    <option value="">온라인개강</option>
                                                    <option value="">교재</option>
                                                    <option value="">공통</option>
                                                </select>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>
                                <h2 class="detail-title">
                                    전시 썸네일
                                    <p class="p-alert">드래그를 통해 순서 변경이 가능하며 첫번째 이미지가 대표 이미지가 됩니다.</p>
                                    <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 multi">
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button">이미지 삭제</button>
                                                <img id="thumbnail_image" alt="">
                                            </div>
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button">이미지 삭제</button>
                                                <img id="thumbnail_image" alt="">
                                            </div>
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button">이미지 삭제</button>
                                                <img id="thumbnail_image" alt="">
                                            </div>
                                            <div class="thumbnail-img mb-1">
                                                <button class="btn-delete" type="button">이미지 삭제</button>
                                                <img id="thumbnail_image" alt="">
                                            </div>
                                            <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>
                                <h2 class="detail-title">
                                    프로모션 플래그
                                </h2>
                                <div class="detail-input">
                                    <input type="text" placeholder="최대 10글자까지 입력 가능" class="long-input">
                                    <dl class="flag-color-list">
                                        <dt class="blind">플래그 색상 리스트</dt>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#FB1F89">
                                        </dd>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#8860E5">
                                        </dd>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#89A7EC">
                                        </dd>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#393D83">
                                        </dd>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#55CF82">
                                        </dd>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#F36E23">
                                        </dd>
                                        <dd>
                                            <input type="radio" name="flag-color" style="background-color:#FFD558">
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-btn-wrap">
                        <button class="button btn-style-8">옵션 삭제</button>
                        <button class="button btn-style-1">옵션 추가</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row detail-con-wrap3">
            <div class="detail-con 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>
                                        <select name="" id="" class="w80px">
                                            <option value="">선택</option>
                                        </select>
                                    </dd>
                                    <dd class="validation-wrap">
                                        <p>옵션 순서를 선택해 주세요.</p>
                                        <p>중복된 순서가 있습니다.</p>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">옵션명</dt>
                                    <dd>
                                        <input type="text" placeholder="최대 30자까지 입력 가능합니다.">
                                    </dd>
                                    <dd class="validation-wrap">
                                        <p>입력된 내용이 없습니다.</p>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt>설명글</dt>
                                    <dd>
                                        <input type="text">
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">수령 기간</dt>
                                    <dd>
                                        <input type="text">일
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt>소비자가</dt>
                                    <dd>
                                        <input type="text">원
                                        <div class="discount"><strong>할인율</strong><strong>8%</strong></div>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">
                                        판매가
                                        <div class="info">
                                            <i class="ico-info">i</i>
                                            <div class="tooltip-con">
                                                사용자들이 실제로 결제할 금액입니다. 할인 적용 시 할인가로 노출됩니다.
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <input type="text">원
                                        <div class="discount"></div>
                                    </dd>
                                    <dd class="validation-wrap">
                                        <p>입력된 내용이 없습니다.</p>
                                        <p>1,000원 이상만 입력 가능합니다.</p>
                                    </dd>
                                </dl>

                                <!-- 없음 -->
                                <dl class="input-wrapper">
                                    <dt>
                                        할인가
                                        <div class="info">
                                            <i class="ico-info">i</i>
                                            <div class="tooltip-con">
                                                할인은 첫번째 순서의 강좌 일정을 기준으로 적용됩니다.
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <div class="flex-1">
                                            <select name="" id="">
                                                <option value="" selected>없음</option>
                                                <option value="">기간 지정</option>
                                            </select>
                                        </div>
                                        <div class="flex-1 flex-input">
                                            <input type="text" readonly>원
                                        </div>
                                    </dd>
                                </dl>

                                <!-- 기간 지정 -->
                                <dl class="input-wrapper">
                                    <dt>
                                        할인가
                                        <div class="info">
                                            <i class="ico-info">i</i>
                                            <div class="tooltip-con">
                                                할인은 첫번째 순서의 강좌 일정을 기준으로 적용됩니다.
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <div class="flex-1">
                                            <select name="" id="">
                                                <option value="">없음</option>
                                                <option value="" selected>기간 지정</option>
                                            </select>
                                        </div>
                                        <div class="flex-1 flex-input">
                                            <input type="text" >원
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt></dt>
                                    <dd>
                                        <div class="flex-1">
                                            <input type="date">
                                        </div>
                                        -
                                        <div class="flex-1">
                                            <input type="date">
                                        </div>
                                    </dd>
                                    <dd class="validation-wrap">
                                        <p>할인 종료일이 시작일보다 빠릅니다.</p>
                                    </dd>
                                </dl>

                                <!-- 배송비 -->
                                <dl class="input-wrapper">
                                    <dt>
                                        배송비
                                        <div class="info">
                                            <i class="ico-info">i</i>
                                            <div class="tooltip-con">
                                                <!-- 내용없음 -->
                                            </div>
                                        </div>
                                    </dt>
                                    <dd>
                                        <div class="flex-1 flex-input">
                                            <input type="text" >원
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt></dt>
                                    <dd>
                                        <div class="form-check form-check-inline ">
                                            <input type="checkbox" id="ship1" name="ship1" class="form-check-input" value="1">
                                            <label class="form-check-label" for="ship1">배송비 표기 하지 않음</label>
                                        </div>
                                        <div class="form-check form-check-inline ">
                                            <input type="checkbox" id="ship2" name="ship2" class="form-check-input" value="2">
                                            <label class="form-check-label" for="ship2">해외 배송 가능</label>
                                        </div>
                                    </dd>
                                </dl>

                                <!-- 쿠폰 사용 -->
                                <dl class="input-wrapper">
                                    <dt>쿠폰 사용</dt>
                                    <dd>
                                        <select name="" id="">
                                            <option value="">%쿠폰명% - 10,000원</option>
                                            <option value="">%쿠폰명% - 10,000원</option>
                                            <option value="">%쿠폰명% - 10,000원</option>
                                            <option value="">%쿠폰명% - 10,000원</option>
                                        </select>
                                    </dd>
                                </dl>

                                <!-- 구매 혜택 -->
                                <dl class="input-wrapper">
                                    <dt>구매 혜택</dt>
                                    <dd>
                                        <select name="" id="">
                                            <option value="">밀착 2E</option>
                                            <option value="">밀착 2E</option>
                                            <option value="">밀착 2E</option>
                                            <option value="">밀착 2E</option>
                                        </select>
                                    </dd>
                                </dl>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-con card">
                <div class="card-body">
                    <div class="flex-box">
                        <div class="w100">
                            <div class="pd-con">
                                <!-- 구성항목 타이틀 -->
                                <div class="pd-con-title">
                                    <div class="btn-wrap">
                                        <button type="button" class="button btn-style-8">선택 항목 삭제</button>
                                        <select name="" id="">
                                            <option value="" selected="">강좌</option>
                                            <option value="0">강좌</option>
                                            <option value="1">강좌</option>
                                            <option value="2">강좌{%선택값%}</option>
                                            <option value="3">강좌{%선택값%}</option>
                                            <option value="4">강좌{%선택값%}</option>
                                        </select>
                                        <button type="button" class="button btn-style-1">항목 추가</button>
                                    </div>
                                </div>
                                <div class="validation-wrap">
                                    <p>구성된 항목이 없습니다.</p>
                                </div>
                                <!-- //구성항목 타이틀 -->
                                <div class="table-title mb-1">
                                    <h3>[{%항목 구분%} 강좌, 기타]</h3>
                                </div>
                                <div class="table-alert mb-1">
                                    <p>
                                        수강 시작일을 선택해 주세요.
                                    </p>
                                    <dl>
                                        <dt class="req">지급일</dt>
                                        <dd>
                                            <select name="" id="">
                                                <option value="">결제일</option>
                                                <option value="">결제일+1일</option>
                                                <option value="">결제일+2일</option>
                                                <option value="">결제일+3일</option>
                                                <option value="">결제일+4일</option>
                                                <option value="">결제일+5일</option>
                                                <option value="">결제일+6일</option>
                                                <option value="">결제일+7일</option>
                                                <option value="">결제일+8일</option>
                                                <option value="">결제일+9일</option>
                                                <option value="">결제일+10일</option>
                                                <option value="">결제일+11일</option>
                                                <option value="">결제일+12일</option>
                                                <option value="">결제일+13일</option>
                                                <option value="">결제일+14일</option>
                                                <option value="">결제일+15일</option>
                                                <option value="">결제일+16일</option>
                                                <option value="">결제일+17일</option>
                                                <option value="">결제일+18일</option>
                                                <option value="">결제일+19일</option>
                                                <option value="">결제일+20일</option>
                                                <option value="">결제일+21일</option>
                                                <option value="">결제일+22일</option>
                                                <option value="">결제일+23일</option>
                                                <option value="">결제일+24일</option>
                                                <option value="">결제일+25일</option>
                                                <option value="">결제일+26일</option>
                                                <option value="">결제일+27일</option>
                                                <option value="">결제일+28일</option>
                                                <option value="">결제일+29일</option>
                                                <option value="">결제일+30일</option>
                                            </select>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="validation-wrap">
                                    <p>선택된 항목이 없습니다.</p>
                                </div>
                                <!-- tui table 추가 -->
                                <div id="grid1"></div>
                                <!-- //tui table 추가 -->
                                <!-- 첨삭 -->
                                <!-- //구성항목 타이틀 -->
                                <div class="table-title mb-1">
                                    <h3>첨삭</h3>
                                </div>
                                <!-- tui table 추가 -->
                                <div id="grid2"></div>
                                <!-- //tui table 추가 -->
                                <!-- //첨삭 -->
                                <!-- CDT -->
                                <!-- //구성항목 타이틀 -->
                                <div class="table-title mb-1">
                                    <h3>CDT</h3>
                                </div>
                                <!-- CDT 지급일 -->
                                <div class="table-alert mb-1">
                                    <p>
                                        CDT 지급일을 입력해 주세요.<br>
                                        종강일마다, CDT 모의고사일은 강좌가 구성된 경우에만 선택 가능합니다.
                                    </p>
                                    <dl>
                                        <dt class="req">지급일</dt>
                                        <dd>
                                            <select name="" id="">
                                                <option value="">선택</option>
                                                <option value="">결제일</option>
                                                <option value="">매달 20일</option>
                                            </select>
                                        </dd>
                                    </dl>
                                </div>
                                <!-- //CDT 지급일 -->
                                <!-- CDT 이용조건 -->
                                <div class="table-alert mb-1">
                                    <p>
                                        CDT 이용조건을<br>입력해 주세요.
                                    </p>
                                    <dl>
                                        <dt class="req">이용일</dt>
                                        <dd>
                                            <input type="text">
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt class="req">이용횟수</dt>
                                        <dd>
                                            <input type="text">
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>미이용 차감일</dt>
                                        <dd>
                                            <input type="text">
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt class="req">이용제한</dt>
                                        <dd>
                                            <input type="text">&nbsp;일&nbsp;
                                            <input type="text">&nbsp;회
                                        </dd>
                                    </dl>

                                </div>
                                <!-- //CDT 이용조건 -->
                                <!-- tui table 추가 -->
                                <div id="grid3"></div>
                                <!-- //tui table 추가 -->
                                <div class="validation-wrap">
                                    <p>입력된 내용이 없습니다.</p>
                                    <p>선택된 항목이 없습니다.</p>
                                    <p>미이용 차감일은 이용일 미만으로만 설정 가능합니다.</p>
                                    <p>이용 제한일은 이용일 이하로만 설정 가능합니다.</p>
                                    <p>이용 제한 횟수는 이용 횟수 이하로만 설정 가능합니다.</p>
                                    <p>이용 제한 설정 시 일, 회 모두 입력하셔야 합니다.</p>
                                </div>
                                <!-- //CDT -->
                                <!-- 교재 -->
                                <!-- //구성항목 타이틀 -->
                                <div class="table-title mb-1">
                                    <h3>교재</h3>
                                </div>
                                <!-- tui table 추가 -->
                                <div id="grid4"></div>
                                <!-- //tui table 추가 -->
                                <!-- //교재 -->
                                <!-- 기타 -->
                                <!-- //구성항목 타이틀 -->
                                <div class="table-title mb-1">
                                    <h3>기타</h3>
                                </div>
                                <!-- tui table 추가 -->
                                <div id="grid5"></div>
                                <!-- //tui table 추가 -->
                                <!-- //기타 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">히스토리</h2>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="120">
                            <col width="auto">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">일시</th>
                                <th scope="col">모듈</th>
                                <th scope="col">상품명</th>
                                <th scope="col">전시 구분</th>
                                <th scope="col">접수 상태</th>
                                <th scope="col">카테고리</th>
                                <th scope="col">썸네일</th>
                                <th scope="col">담당자명</th>
                                <th scope="col">자세히보기</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr>
                                <td>2</td>
                                <td>2023.06.15<br>00:00:00</td>
                                <td>Academic</td>
                                <td class="text-left">
                                    %상품명%
                                </td>
                                <td>전시</td>
                                <td>오픈</td>
                                <td>변경</td>
                                <td class="text-left">%파일명%</td>
                                <td>%이름%</td>
                                <td>
                                    <a href="#none">자세히 보기</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>2023.06.15<br>00:00:00</td>
                                <td>General</td>
                                <td class="text-left">
                                    %상품명%
                                </td>
                                <td>비전시</td>
                                <td>마감</td>
                                <td>-</td>
                                <td class="text-left">%파일명%</td>
                                <td>%이름%</td>
                                <td>
                                    <a href="#none">자세히 보기</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </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 = [
            {
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                videoTime: "00:00:00"
            },{
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                videoTime: "00:00:00"
            },{
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                videoTime: "00:00:00"
            },{
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                videoTime: "00:00:00"
            },{
                module: "Academic",
                lectureName: "<a href='#none'>기본반</a>",
                lectureCount: "<strong>N</strong>건",
                book: "<strong>N</strong>권",
                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: 'module',
                    align: 'center',
                    width: 120
                },
                {
                    header: '강좌명',
                    name: 'lectureName',
                },
                {
                    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