@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>
                                    <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="0">
                                                <label class="form-check-label" for="customRadio4">활성</label>
                                            </div>
                                            <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>
                                            <p class="p-alert">비활성 처리 시 쿠폰의 사용 기간과 무관하게 사용이 불가합니다.</p>
                                        </dd>
                                    </dl>
                                    <dl class="input-wrapper">
                                        <dt class="req">쿠폰명</dt>
                                        <dd>
                                            <input type="text">
                                        </dd>
                                        <dd class="validation-wrap">
                                            <p>입력된 내용이 없습니다.</p>
                                            <p>중복된 쿠폰명이 있습니다.</p>
                                        </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 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="noEndDate" name="noEndDate" class="form-check-input" value="종료일 없음" checked>
                                    <label class="form-check-label" for="noEndDate">종료일 없음</label>
                                </div>
                            </dd>
                            <dd class="validation-wrap">
                                <p>종료일이 시작일보다 빠릅니다.</p>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt class="req">발행 매수</dt>
                            <dd>
                                <div>
                                    <input type="text">
                                </div>
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" id="inf" name="inf" class="form-check-input" value="무제한">
                                    <label class="form-check-label" for="inf">무제한</label>
                                </div>
                            </dd>
                            <dd class="validation-wrap">
                                <p>1~1,000,000까지 입력 가능합니다.</p>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt class="req">쿠폰 코드</dt>
                            <dd>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="coupon_code1" name="coupon_code" class="form-check-input" value="1">
                                    <label class="form-check-label" for="coupon_code1">자동 발행</label>
                                </div>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="coupon_code2" name="coupon_code" class="form-check-input" value="0">
                                    <label class="form-check-label" for="coupon_code2">고정 발행</label>
                                </div>
                                <div>
                                    <input type="text" placeholder="최대 20글자 입력">
                                </div>
                                <p class="p-alert">
                                    고정 발행하는 경우 고정된 코드 하나만 사용 가능합니다.
                                </p>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt class="req">배포 방식</dt>
                            <dd>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="method1" name="method" class="form-check-input" value="1">
                                    <label class="form-check-label" for="method1">자동</label>
                                </div>
                                <div class="mr20">
                                    <select name="" id="">
                                        <option value="">선택</option>
                                        <option value="">회원가입</option>
                                        <option value="">수강 완료</option>
                                    </select>
                                </div>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="method2" name="method" class="form-check-input" value="0">
                                    <label class="form-check-label" for="method2">수동</label>
                                </div>
                            </dd>
                            <dd class="validation-wrap">
                                <p>선택된 항목이 없습니다.</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 class="req">사용 기간</dt>
                            <dd>
                                <div class="flex-box">
                                    <input type="date" id="use_start_date" name="use_start_date">
                                    <select name="" id="">
                                        <option value="">오전 12:00</option>
                                    </select>
                                    <span class="btw-bullet">-</span>
                                    <input type="date" id="use_end_date" name="use_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>
                                <p>사용기간이 발행기간보다 빠릅니다.</p>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt class="req">할인 방식</dt>
                            <dd>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="dc_method1" name="dc_method" class="form-check-input" value="1">
                                    <label class="form-check-label" for="dc_method1">정액</label>
                                </div>
                                <div class="">
                                    <input type="text" placeholder="소수점 입력 불가">
                                </div>원
                                <div class="form-check form-check-inline ml20">
                                    <input type="radio" id="dc_method2" name="dc_method" class="form-check-input" value="0">
                                    <label class="form-check-label" for="dc_method2">정률</label>
                                </div>
                                <div class="">
                                    <input type="text" placeholder="소수점 입력 불가">
                                </div>%
                                <div class="ml20">
                                    최대 할인 금액
                                </div>
                                <div>
                                    <input type="text" placeholder="소수점 입력 불가">
                                </div>
                                <p class="p-alert">
                                    상품 금액에 소수점 발생 시 절삭 처리됩니다.
                                </p>
                            </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="use1" name="use" class="form-check-input" value="0">
                                    <label class="form-check-label" for="use1">가능</label>
                                </div>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="use2" name="use" class="form-check-input" value="1">
                                    <label class="form-check-label" for="use2">불가능</label>
                                </div>
                            </dd>
                        </dl>
                        <dl class="input-wrapper">
                            <dt class="req">발행 제한</dt>
                            <dd>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="limit1" name="limit" class="form-check-input" value="0">
                                    <label class="form-check-label" for="limit1">없음</label>
                                </div>
                                <div class="form-check form-check-inline ">
                                    <input type="radio" id="limit2" name="limit" class="form-check-input" value="1">
                                    <label class="form-check-label" for="limit2">ID 당 1회 발급</label>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="row">
            <div class="card">
                <div class="card-body">
                    <h2 class="detail-title">
                        사용 가능 상품 옵션
                        <p class="p-alert">추가된 상품이 없는 경우 모든 상품에 사용 가능합니다.</p>
                        <div class="button-wrap">
                            <button class="button btn-style-8" type="button">행 삭제</button>
                            <button class="button btn-style-1" type="button">상품 추가</button>
                        </div>
                    </h2>
                    <table class="default-table">
                        <colgroup>
                            <col width="50">
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox">
                                </th>
                                <th>번호</th>
                                <th>상품 구분</th>
                                <th>서비스 구분</th>
                                <th>카테고리</th>
                                <th>모듈</th>
                                <th>상품명</th>
                                <th>옵션명</th>
                                <th>회차/이용일</th>
                                <th>강의수</th>
                                <th>구성교재</th>
                                <th>쿠폰/<br>구매 혜택</th>
                                <th>판매가</th>
                                <th>할인가</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>판매</td>
                                <td>어학원</td>
                                <td>오전종합반</td>
                                <td>Academic</td>
                                <td class="text-left">
                                    <a href="#none">기본반</a>
                                </td>
                                <td class="text-left">
                                    %옵션명%
                                </td>
                                <td>18</td>
                                <td>N건</td>
                                <td>N권</td>
                                <td>-</td>
                                <td class="text-right warning">10,000</td>
                                <td class="text-right warning">10,000</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="validation-wrap">
                        <p>결제 금액이 0원 미만인 상품이 존재합니다.</p>
                    </div>
                </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