@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">
            <button class="button btn-style-2">목록</button>
            <button class="button btn-style-4">복제</button>
            <button class="button btn-style-1">저장</button>
        </div>
        <div class="card col-7">
            <form action="" class="set-user-form" onsubmit="">
                <input type="hidden" name="id" value="">
                <div class="card-body">
                    <div class="flex-box">
                        <div class="w50" style="margin-bottom: 1rem;">
                            <h2 class="detail-title">강좌 구분</h2>
                            <div class="detail-input">
                                <dl class="input-wrapper">
                                    <dt>강좌 번호</dt>
                                    <dd>-</dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt class="req">활성 구분</dt>
                                    <dd>
                                        <div class="form-check form-check-inline ">
                                            <input type="radio" id="customRadio1" name="activated"
                                                class="form-check-input" value="1" checked>
                                            <label class="form-check-label" for="customRadio1">활성</label>
                                        </div>
                                        <div class="form-check form-check-inline ">
                                            <input type="radio" id="customRadio2" name="activated"
                                                class="form-check-input" value="0">
                                            <label class="form-check-label" for="customRadio2">비활성</label>
                                        </div>
                                    </dd>
                                </dl>
                                <dl class="input-wrapper">
                                    <dt>모듈</dt>
                                    <dd>
                                        <input type="text" class="form-control" value="Academic"
                                                placeholder="Academic" readonly>
                                    </dd>
                                </dl>
                                <p class="detail-img-title req mb-1">썸네일</p>
                                <div class="thumbnail-img mb-1">
                                    <img id="user_image" src="" alt="">
                                </div>
                                <div class="thumbnail-img-btn-wrap">
                                    <button class="button btn-style-4 w40" type="button" onclick="">이미지 삭제</button>
                                    <button class="button btn-style-1 w60" type="button" onclick="">이미지 등록</button>
                                    <input onchange="" type="file" id="user_profile_img" name="photo" accept="image/*"
                                        hidden />
                                </div>
                                <div>* 파일 형식 : jpg, jpeg, png / 권장 이미지 사이즈 : 512*344</div>
                                <div class="validation-wrap">
                                    <p>등록된 파일이 없습니다.</p>
                                </div>
                            </div>
                        </div>
                        <div class="w50">
                            <h2 class="detail-title">기본 정보</h2>
                            <div class="detail-input">
                                <div class="input-wrapper mb-3">
                                    <label class="form-label req" for="validationCustom01">강좌명</label>
                                    <div>
                                        <div class="flex-box">
                                            <input type="text" class="form-control" value=""
                                                placeholder="강좌명을 입력해 주세요.">
                                        </div>
                                        <div class="validation-wrap">
                                            <p>입력된 내용이 없습니다.</p>
                                            <p>동일한 강좌명이 있습니다.</p>
                                        </div>
                                    </div>

                                </div>
                                <div class="input-wrapper mb-3">
                                    <label class="form-label" for="validationCustom02">간략 소개</label>
                                    <div>
                                        <div class="flex-box">
                                            <input type="text" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="input-wrapper mb-3">
                                    <label class="form-label">설명</label>
                                    <div>
                                        <div class="flex-box">
                                            <textarea name="" id="" cols="30" rows="10"></textarea>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="card col-5">
            <div class="calendar-wrap">
                <h2>강좌 일정</h2>
                <p><span>%선택월%</span> 수업 총 <span class="point-color">0</span>회, 모의고사 총 <span
                        class="point-color">0</span>회 </p>
            </div>
            <div class="schedule-calendar"></div>
        </div>

        <div class="card col-12">
            <h2 class="req mb-3">과목별 강사 및 커리큘럼</h2>
            <div class="instructors-curriculum">
                <dl class="instructors-curriculum-col detail-input ">
                    <dt>
                        <span>Listening</span>
                        <select class="form-select">
                            <option value="">%강사%</option>
                        </select>
                    </dt>
                    <dd class="input-wrapper">
                        <textarea name="" id=""></textarea>
                    </dd>
                </dl>
                <dl class="instructors-curriculum-col detail-input ">
                    <dt>
                        <span>Reading</span>
                        <select class="form-select">
                            <option value="">%강사%</option>
                        </select>
                    </dt>
                    <dd class="input-wrapper">
                        <textarea name="" id=""></textarea>
                    </dd>
                </dl>
                <dl class="instructors-curriculum-col detail-input ">
                    <dt>
                        <span>Speaking</span>
                        <select class="form-select">
                            <option value="">%강사%</option>
                        </select>
                    </dt>
                    <dd class="input-wrapper">
                        <textarea name="" id=""></textarea>
                    </dd>
                </dl>
                <dl class="instructors-curriculum-col detail-input ">
                    <dt>
                        <span>Writing task1</span>
                        <select class="form-select">
                            <option value="">%강사%</option>
                        </select>
                    </dt>
                    <dd class="input-wrapper">
                        <textarea name="" id=""></textarea>
                    </dd>
                </dl>
                <dl class="instructors-curriculum-col detail-input ">
                    <dt>
                        <span>Writing task2</span>
                        <select class="form-select">
                            <option value="">%강사%</option>
                        </select>
                    </dt>
                    <dd class="input-wrapper">
                        <textarea name="" id=""></textarea>
                    </dd>
                </dl>
            </div>
            <div class="validation-wrap">
                <p>입력된 내용이 없습니다.</p>
            </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-academy-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-academy-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 class="card col-12">
            <h2 class="mb-3">포함 상품</h2>
            <div id="course-academy-product-table" class="table-btn-wrap"></div>
        </div>

        <div class="card col-12">
            <h2 class="mb-3">변경 히스토리</h2>
            <div id="course-academy-history-table" class="table-btn-wrap"></div>
        </div>
    </div>
</form>
</div>

@endsection

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

    // 강좌 상세 - 구성 강의 영상 길이
    let courseAcademyIectureItems = [{
        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 courseAcademyTextbookItems = [
    {
        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 courseAcademyProductItems = [{
        number: "1",
        time: "2023.06.15 00:00:00",
        service: "인강",
        product: "판매",
        module: "공통",
        productName: "<a href='#'>%상품명%</a>",
    }];


    // 강좌 상세 - 히스토리
    let courseAcademyHistoryItems = [{
        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-academy-lecture-table'),
            scrollX: false,
            scrollY: false,
            draggable: true,
            data: courseAcademyIectureItems,
            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
            }
        });

        // 강좌 상세 - 구성 교재
        courseAcademyTextbookTable = new Grid({
            el: document.getElementById('course-academy-textbook-table'),
            scrollX: false,
            scrollY: false,
            data: courseAcademyTextbookItems,
            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
            }
        });

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


        // 강좌 상세 - 변경 히스토리
        courseAcademyHistoryTable = new Grid({
            el: document.getElementById('course-academy-history-table'),
            scrollX: false,
            scrollY: false,
            data: courseAcademyHistoryItems,
            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