@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-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>
                                        <select class="form-select">
                                            <option value="">Academic</option>
                                        </select>
                                        <div class="validation-wrap">
                                            <p>선택된 항목이 없습니다.</p>
                                        </div>
                                    </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-3 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>
</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",
    }
    ];



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


</script>
@endpush