@section("header")
@endsection

<div class="user-add-popup-wrap course-lecture-add-popup-wrap popup-wrap">
    {{-- <div class="lds-ring"><div></div><div></div><div></div><div></div></div> --}}
    <form class="ss needs-validation register-user-form" action="">
        <div class="user-add-popup">
            <div class="user-add-popup-titleBox">
                <h2>구성 강의 추가</h2>
                <span class="user-add-popup-close" onclick="edmModalClose()"><i class="dripicons-cross"></i></span>
            </div>
            <div class="user-add-popup-con">
                <p class="mb-1">강좌에 구성할 강의를 추가합니다. <br>활성 상태인 강의만 추가 가능합니다.</p>

                <div class="lecture-add-popup-row">
                    <div class="flex-box " style="display: inline-block;">
                        <div class="search-input">
                            <label>등록일</label>
                            <input type="date" id="register_start_date" name="register_start_date" value=""> - <input
                                type="date" name="register_end_date" value="">
                        </div>
                    </div>
                    <div class="flex-box " style="display: inline-block;">
                        <div class="search-input">
                            <label>강의명</label>
                            <input type="text">
                        </div>
                    </div>
                    <div class="search-input">
                        <div style="display: inline-block;">
                            <div class="flex-box">
                                <label class="req">과목</label>
                                <div>
                                    <span class="form-check form-check-inline">
                                        <input type="checkbox" id="customCheckbox1" name="activated" value=1
                                            class="form-check-input" checked>
                                        <label class="form-check-label" for="customCheckbox1">공통</label>
                                    </span>
                                    <span class="form-check form-check-inline">
                                        <input type="checkbox" id="customCheckbox2" name="activated" value=1
                                            class="form-check-input">
                                        <label class="form-check-label" for="customCheckbox2">L</label>
                                    </span>
                                    <span class="form-check form-check-inline">
                                        <input type="checkbox" id="customCheckbox3" name="activated" value=1
                                            class="form-check-input">
                                        <label class="form-check-label" for="customCheckbox3">R</label>
                                    </span>
                                    <span class="form-check form-check-inline">
                                        <input type="checkbox" id="customCheckbox4" name="activated" value=1
                                            class="form-check-input">
                                        <label class="form-check-label" for="customCheckbox4">WT1</label>
                                    </span>
                                    <span class="form-check form-check-inline">
                                        <input type="checkbox" id="customCheckbox5" name="activated" value=1
                                            class="form-check-input">
                                        <label class="form-check-label" for="customCheckbox5">WT2</label>
                                    </span>
                                    <span class="form-check form-check-inline">
                                        <input type="checkbox" id="customCheckbox6" name="activated" value=1
                                            class="form-check-input">
                                        <label class="form-check-label" for="customCheckbox6">S</label>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-box " style="display: inline-block;">
                        <div class="search-input">
                            <label>강사</label>
                            <select name="activated" id="activated">
                                <option value="" selected="">전체</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex-box " style="display: inline-block;">
                        <div class="search-input">
                            <label>특강</label>
                            <select name="activated" id="activated">
                                <option value="" selected="">전체</option>
                            </select>
                        </div>
                    </div>
                    <div class="search-form" style="display: inline-block;"><button type="submit"
                            class="button btn-style-1">조회</button></div>
                </div>
                <div class="lecture-add-popup-row">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span>조회 결과 <strong class="point-color">N</strong>건,</span> &#160; <span>선택된 강의 총
                                <strong class="point-color">N</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            {{-- <div class="pagination-wrapper">
                                {{ $users->links("vendor.pagination.default") }}
                        </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" @selected(Request::get("paginate")==null ||
                                Request::get("paginate")==10)>10개씩 보기</option>
                            <option value="30" @selected(Request::get("paginate")==30)>30개씩 보기</option>
                            <option value="50" @selected(Request::get("paginate")==50)>50개씩 보기</option>
                            <option value="100" @selected(Request::get("paginate")==100)>100개씩 보기</option>
                        </select>
                        <button type="button" class="button btn-style-1" onclick="">추가</button>
                        </div>
                    </div>
                    <div id="popup-course-lecture-add"></div>
                </div>

            <div class="lecture-add-popup-row">
                <div class="user-btn-wrap">
                    <div class="pagination-result">
                        <span class="req">추가 예정 강의 총<strong class="point-color">N</strong>건</span></span>
                    </div>
                    <div class="pagination-helper">
                        <button type="button" class="button btn-style-4" onclick="">선택 삭제</button>
                    </div>
                </div>

                <div id="popup-course-lecture-add-schedule"></div>
                <div class="validation-wrap">
                    <p>구성 예정 강의가 없습니다.</p>
                </div>
            </div>
            <div class="text-right">
                <button class="button btn-style-1" type="submit">적용</button>
            </div>
        </div>
        </div>
    </form>
</div>
@push("script")
<script>
    let courseLectureAddPopup

    // 강좌 상세 - 강의 추가 - 구성 강의 추가
    let courseLectureAddPopupItems = [{
        number: "2",
        time: "2023.06.15 00:00:00",
        lectureName: "%강의명%",
        module: "공통",
        subject: "L",
        instructor: "%강사명%",
        specialLecture: "비해당",
        videoLength: "00:00:00",
    }];
    // 강좌 상세 - 강의 추가 - 추가 예정 강의
    let popupLectureAddCcheduleItems = [{
        number: "2",
        time: "2023.06.15 00:00:00",
        lectureName: "%강의명%",
        module: "공통",
        subject: "L",
        instructor: "%강사명%",
        specialLecture: "비해당",
        videoLength: "00:00:00",
    }];

    function popupIectureAdd() {
        // 강좌 상세 - 강의 추가 - 구성 강의 추가
        courseLectureAddPopup = new Grid({
            el: document.getElementById('popup-course-lecture-add'),
            scrollX: false,
            scrollY: false,
            data: courseLectureAddPopupItems,
            rowHeaders: [{
                type: 'checkbox',
                header: `
        <label for="all-checkbox" class="checkbox">
            <input type="checkbox" id="all-checkbox" class="hidden-input" name="_checked" />
            <span class="custom-input"></span>
        </label>
        `
            }],
            columns: [{
                    header: '번호',
                    name: 'number',
                    sortable: true
                },
                {
                    header: '등록일시',
                    name: 'time',
                },
                {
                    header: '강의명',
                    name: 'lectureName'
                },
                {
                    header: '모듈',
                    name: 'module'
                },
                {
                    header: '과목',
                    name: 'subject'
                },
                {
                    header: '강사',
                    name: 'instructor'
                },
                {
                    header: '특강',
                    name: 'specialLecture',
                },
                {
                    header: '영상 길이',
                    name: 'videoLength'
                }
            ],
            columnOptions: {
                resizable: true
            }
        });
        // 강좌 상세 - 강의 추가 - 추가 예정 강의
        popupLectureAddCchedule = new Grid({
            el: document.getElementById('popup-course-lecture-add-schedule'),
            scrollX: false,
            scrollY: false,
            draggable: true,
            data: popupLectureAddCcheduleItems,
            rowHeaders: [{
                type: 'checkbox',
                header: `
        <label for="all-checkbox" class="checkbox">
            <input type="checkbox" id="all-checkbox" class="hidden-input" name="_checked" />
            <span class="custom-input"></span>
        </label>
        `
            }],
            columns: [{
                    header: '번호',
                    name: 'number',
                    sortable: true
                },
                {
                    header: '등록일시',
                    name: 'time',
                },
                {
                    header: '강의명',
                    name: 'lectureName'
                },
                {
                    header: '모듈',
                    name: 'module'
                },
                {
                    header: '과목',
                    name: 'subject'
                },
                {
                    header: '강사',
                    name: 'instructor'
                },
                {
                    header: '특강',
                    name: 'specialLecture',
                },
                {
                    header: '영상 길이',
                    name: 'videoLength'
                }
            ],
            columnOptions: {
                resizable: true
            }
        });

        // 튤팁
        let popupTooltip = document.querySelectorAll(
            '#popup-lecture-add-schedule .tui-grid-header-area th[data-column-name="_draggable"]');
        for (let i = 0; i < popupTooltip.length; i++) {
            popupTooltip[i].innerHTML =
                '</div><div class="tooltip"><span class="tooltip-btn" onclick="tooltipBtn(this)"><span>i</span></span><div class="tooltip-box"><span class="tooltip-close" onclick="tooltipClose(this)"></span><p>설정한 순서대로 강좌에 구성됩니다.</p></div></div>'
        }
    }

    function tooltipClose(e) {
        e.parentNode.classList.remove('open')
    }

    function tooltipBtn(e) {
        e.parentNode.querySelector('.tooltip-box').classList.add('open')
    }

</script>
@endpush