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

@section("header")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/common/tomSelect.js',
])
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>구성 CDT 문제 추가</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
        CDT 세트에 구성할 문제를 추가합니다.<br>
        서버에 업로드된 문제 목록이 노출됩니다.
    </p>
    <!-- 조회조건 -->
    <form action="" class="mb-3">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap">
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <label for="" class="form-label">과목</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <select name="subjects" id="subjects">
                                <option value="0" >전체</option>
                                <option value="1" >L</option>
                                <option value="2" >R</option>
                                <option value="3" >W1</option>
                                <option value="4" >W2</option>
                                <option value="5" >S</option>
                            </select>
                        </div>
                    </div>
                    <div class="input-wrapper grow3">
                        <label for="" class="form-label">CDT 문제명</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <input type="text" name="" id="">
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="search-button">조회</button>
        </div>
    </form>
    <!-- 상품 추가 버튼 클릭시 해당 영역 복제 -->
    <div class="pd-wrap">
        <div class="pd-con-wrap">
            <div class="pd-con">
                <!-- 구성항목 타이틀 -->
                <div class="user-btn-wrap">
                    <div class="pagination-result">
                        <span>조회 결과 <strong class="point-color">999</strong>건</span>,&nbsp;<span>선택된 CDT 문제 총 <strong class="point-color">999</strong>건</span>
                    </div>
                    <div class="pagination-helper">
                        <div class="pagination-wrapper">
                        </div>
                        <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                            <option value="10">10개씩 보기</option>
                            <option value="30">30개씩 보기</option>
                            <option value="50">50개씩 보기</option>
                            <option value="100">100개씩 보기</option>
                        </select>
                    </div>
                </div>
                <!-- //구성항목 타이틀 -->
                <!-- tui table 추가 -->
                <div id="grid1"></div>
                <!-- //tui table 추가 -->
                <div class="validation-wrap">
                    <p>선택된 항목이 없습니다.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- //상품 추가 버튼 클릭시 해당 영역 복제 -->
    <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