@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 -->

    <div class="lecture-detail-con row">
        <div class="card col-12">
            <div class="search-input-wrap">
                <div class="search-input">
                    <label for="">강좌번호</label>
                    <input type="text" class="form-control" value="%강좌 유니크값%"placeholder="%강좌 유니크값%" readonly>
                </div>
                <div class="search-input">
                    <label for="activated" class="req">활성구분</label>
                    <span>
                        <label for="activatedRadeio1"><input type="radio" name="activated" id="activatedRadeio1"
                                value="" checked onclick="return(false);">활성</label>
                    </span>
                    <span>
                        <label for="activatedRadeio2"><input type="radio" name="activated" id="activatedRadeio2"
                                value="" onclick="return(false);">비활성</label>
                    </span>
                </div>
                <div class="search-input">
                    <label for="charged_by">모듈</label>
                    <input type="text" class="form-control" value="Academic"placeholder="Academic" readonly>
                </div>
                <div>
                    <div class="search-input">
                        <label for="" class="req">강좌번호</label>
                        <input type="text" name="" id="" value="" placeholder="강좌명을 입력해 주세요." readonly>
                    </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>
            <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>
        </div>
        <div class="card col-12">
            <h2 class="mb-3">포함 상품</h2>
            <div id="course-ielts-product-table" class="table-btn-wrap"></div>
        </div>

        <div class="card col-12">
            <h2 class="mb-3">변경 히스토리</h2>
            <div id="course-ielts-history-table" class="table-btn-wrap"></div>
        </div>
    </div>
</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",
        }
    ];
    // 강좌 상세 - 구성 교재
    let courseIeltsProductItems = [{
        number: "1",
        time: "2023.06.15 00:00:00",
        service: "인강",
        product: "판매",
        module: "공통",
        productName: "<a href='#'>%상품명%</a>",
    }];


    // 강좌 상세 - 히스토리
    let courseIeltsHistoryItems = [{
        number: "1",
        time: "2023.06.15 00:00:00",
        active: "활성",
        thumbnail: "%파일명%",
        courseName: "%입력값%",
        courseTime: "변경/삭제",
        subjectInstructor: "WT1 - %선택값%",
        manager: "%담당자명%",
        historyView: "<a href=''>자세히보기</a>"
    }];


    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
            }
        });

        // 강좌 상세 - 포함 상품
        courseIeltsProductTable = new Grid({
            el: document.getElementById('course-ielts-product-table'),
            scrollX: false,
            scrollY: false,
            data: courseIeltsProductItems,
            columns: [{
                    header: '번호',
                    name: 'number',
                    sortable: true
                },
                {
                    header: '등록일시',
                    name: 'time',
                },
                {
                    header: '서비스 구분',
                    name: 'service'
                },
                {
                    header: '상품 구분',
                    name: 'product'
                },
                {
                    header: '모듈',
                    name: 'module'
                },
                {
                    header: '상품명',
                    name: 'productName'
                }
            ],
            columnOptions: {
                resizable: true
            }
        });


        // 강좌 상세 - 변경 히스토리
        courseIeltsHistoryTable = new Grid({
            el: document.getElementById('course-ielts-history-table'),
            scrollX: false,
            scrollY: false,
            data: courseIeltsHistoryItems,
            columns: [{
                    header: '번호',
                    name: 'number',
                    sortable: true
                },
                {
                    header: '일시',
                    name: 'time',
                },
                {
                    header: '활성 구분',
                    name: 'active',
                },
                {
                    header: '썸네일',
                    name: 'thumbnail',
                },
                {
                    header: '강좌명',
                    name: 'courseName',
                },
                {
                    header: '강좌 일정',
                    name: 'courseTime',
                },
                {
                    header: '과목별 강사',
                    name: 'subjectInstructor',
                },
                {
                    header: '담당자',
                    name: 'manager',
                },
                {
                    header: '자세히보기',
                    name: 'historyView',
                },
            ],
            columnOptions: {
                resizable: true
            }
        });
    }

</script>
@endpush