@extends("domains.common.layouts.layout-popup")

@section("header")
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>상품 지급 사유 선택</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
        지급 사유를 선택합니다.<br>
        확인 버튼 선택 시 지급할 상품을 선택할 수 있습니다.
    </p>
    <!-- 조회조건 -->
    <form action="" class="mb-3">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap full">
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label">상품 구분</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <select name="" id="">
                                <option value="1" >지급</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label req">사유</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <select name="" id="">
                                <option value="1" >선택 %선택값%</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="text-center">
        <button class="button btn-style-1" type="submit">확인</button>
    </div>
</div>
@endsection

@push("script")
<script>

    let selectTmp;

    window.addEventListener("load", () => {
        selectTmp = new TomSelect("#subjects", {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow"
            ],
            maxItems: null
        });
        let gridTmp1;
        let gridItems1 = [
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'L',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'R',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'WT1',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'WT2',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'S',
                mp3: "<a href='#none'>%파일명%</a>",
            }
        ];

        gridTmp1 = new Grid({
            el: document.getElementById("grid1"),
            data: gridItems1,
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '번호',
                    name: 'row_num',
                    sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '등록일시',
                    name: 'date',
                    align: 'center',
                    width: 100
                },
                {
                    header: 'CDT 문제명',
                    name: 'name',
                    editor: 'text',
                },
                {
                    header: '과목',
                    name: 'subject',
                    align: 'center',
                    width: 80,
                },
                {
                    header: 'MP3 파일',
                    name: 'mp3',
                    width: 100,
                    align: 'center'
                },
            ],
            scrollX: false,
            scrollY: false,
        });

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