@extends("domains.common.layouts.layout")
@section("header")

@endsection

@section("main-content")
<div class="container-fluid lecture-detail">

    <!-- start page title -->
    <div class="row">
        <div class="page-title-box">
            <h1>인강 강좌 등록</h1>
            <ul class="page-wayfinding">
                <li><a href="">강좌 관리</a></li>
                <li>인강 강좌 등록</li>
            </ul>
        </div>

    </div>
    <!-- end page title -->
<form action="">
    <div class="lecture-detail-con row">
        <div class="page-btn-wrap">
            <a href="/product/lecture-list" class="button btn-style-2">목록</a>
            <a href="/product/lecture-list" class="button btn-style-1">저장</a>
        </div>
        <div class="card col-12">
            <div class="search-input-wrap" >
                <div class="search-input">
                    <label for="">강좌번호</label>
                    <input type="text" name="" id="" autocomplete='on' value="%강좌 유니크값%">
                </div>
                <div class="search-input">
                    <label for="activated" class="req">활성구분</label>
                    <span>
                        <label for="activatedRadeio1"><input type="radio" name="activated" id="activatedRadeio1" value="" checked>활성</label>
                    </span>
                    <span>
                        <label for="activatedRadeio2"><input type="radio" name="activated" id="activatedRadeio2" value="">비활성</label>
                    </span>
                </div>
                <div class="search-input">
                    <label for="charged_by">모듈</label>
                    <select name="charged_by" id="charged_by">
                        <option value="">공통</option>
                    </select>
                    <div class="validation-wrap">
                        <p>선택된 항목이 없습니다.</p>
                    </div>
                </div>
                <div>
                    <div class="search-input">
                        <label for="" class="req">강좌명</label>
                        <input type="text" name="" id="" autocomplete='on' value="" placeholder="강좌명을 입력해 주세요.">
                        <div class="validation-wrap">
                            <p>입력된 내용이 없습니다.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="card col-12">
            <h2 class="mb-3"><span style="display: inline-block; margin-right: 1rem;">구성 강의 총 <span
                        class="point-color">N</span>건 총</span> <span>영상 길이 <span
                        class="point-color">00:00:01</span></span></h2>
            <div id="course-ielts-lecture-table" class="table-btn-wrap">
                <div class="table-btn">
                    <button type="button" class="button btn-style-4" onclick="">선택 삭제</button>
                    <button type="button" class="button btn-style-1" onclick="courseLectureAddPopupOpen()">강의 추가</button>
                </div>
            </div>
            <div class="validation-wrap">
                <p>입력된 내용이 없습니다.</p>
            </div>
        </div>

        <div class="card col-12">
            <h2 class="mb-3">구성 교재 <span class="point-color">N</span>건</h2>
            <div id="course-ielts-textbook-table" class="table-btn-wrap">
                <div class="table-btn">
                    <button type="button" class="button btn-style-4" onclick="">선택 삭제</button>
                    <button type="button" class="button btn-style-1" onclick="textbookAddPopupOpen()">교재 추가</button>
                </div>
            </div>
        </div>
    </div>
</form>
</div>
@endsection

@push("script")
<script>
    function fileInput() {
        document.getElementById("file-input").click();
    }

    // 강좌 추가 - 구성 강의 영상 길이
    let courseIeltsIectureItems = [{
            number: "1",
            time: "2023.06.15 00:00:00",
            lectureName: "<a href='#'>%강의명%</a>",
            module: "공통",
            subject: "L",
            instructor: "%강사명%",
            videoLength: "00:00:00",
        },
        {
            number: "2",
            time: "2023.06.15 00:00:00",
            lectureName: "<a href='#'>%강의명%</a>",
            module: "공통",
            subject: "L",
            instructor: "%강사명%",
            videoLength: "00:00:00",
        }
    ];

    // 강좌 추가 - 구성 교재
    let courseIeltsTextbookItems = [{
            number: "1",
            time: "2023.06.15 00:00:00",
            textboxName: "<a href='#'>%교재명%</a>",
            module: "공통",
            subject: "L",
            salesClassification: "내외부",
            level: "시작",
            audio: "%파일명%",
            sellingPrice: "10,000",
        },
        {
            number: "1",
            time: "2023.06.15 00:00:00",
            textboxName: "<a href='#'>%교재명%</a>",
            module: "공통",
            subject: "L",
            salesClassification: "내외부",
            level: "시작",
            audio: "%파일명%",
            sellingPrice: "10,000",
        }
    ];



    window.onload = () => {
        // 강좌 추가 - 구성 강의 영상 길이
        lectureCourseTable = new Grid({
            el: document.getElementById('course-ielts-lecture-table'),
            scrollX: false,
            scrollY: false,
            draggable: true,
            data: courseIeltsIectureItems,
            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: 'videoLength'
                }
            ],
            columnOptions: {
                resizable: true
            }
        });

        // 강좌 추가 - 구성 교재
        courseIeltsTextbookTable = new Grid({
            el: document.getElementById('course-ielts-textbook-table'),
            scrollX: false,
            scrollY: false,
            data: courseIeltsTextbookItems,
            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: 'textboxName'
                },
                {
                    header: '모듈',
                    name: 'module'
                },
                {
                    header: '과목',
                    name: 'subject'
                },
                {
                    header: '판매 구분',
                    name: 'salesClassification'
                },
                {
                    header: '레벨',
                    name: 'level'
                },
                {
                    header: '오디오 파일',
                    name: 'audio'
                },
                {
                    header: '판매가',
                    name: 'sellingPrice'
                }
            ],
            columnOptions: {
                resizable: true
            }
        });

    }

</script>
@endpush