@extends("academy.layout", ['service' => 'academy'])

@section("academy-css")

    {!! resource('css/academy/sub.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
    {!! resource('css/myclass/my_class_academy.css') !!}
@endsection



@section("academy-content")
<div class="container">
    <div class="path-wrapper">
        <div class="wrapper">
            <dl class="path">
                <dt class="blind">path</dt>
                <dd>전체</dd>
                <dd>나의 강의실</dd>
                <dd>현장 강의</dd>
                <dd>학습중 목록</dd>
            </dl>
        </div>
    </div>
    <div class="my-class-wrapper">
        <div class="wrapper">
            <div class="my-class-menu">
                <ul>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-01"></i>
                            <span>메인</span>
                        </a>
                    </li>
                    <li class="on">
                        <a href="#none">
                            <i class="ico-myclass-07"></i>
                            <span>현장 강의</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-03"></i>
                            <span>CDT<br>모의고사</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-02"></i>
                            <span>자료실</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-05"></i>
                            <span>1:1<br>게시판</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <select class="select-option" name="" id="" required>
                                <option value="" disabled selected>수강옵션 선택</option>
                                <option value="">라이팅 스피킹 30일완성 PACK Writing Task2</option>
                                <option value="">(제너럴)라이팅 스피킹 30일완성 PACK Writing Task1</option>
                                <option value="">라이팅 스피킹 30일완성 PACK Speaking</option>
                                <option value="">%상품명% %옵션명%</option>
                            </select>
                            <h5 class="option-title mt60">
                                (General) Kings 6.0 + Reading 이론
                            </h5>
                            <div class="option-cont">
                                <div class="option-category">
                                    <dl>
                                        <dt>
                                            과목 선택
                                        </dt>
                                        <dd>
                                            <select name="" id="" required>
                                                <option value="" disabled selected>과목 선택</option>
                                                <option value="">%과목%</option>
                                            </select>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>
                                            선생님 선택
                                        </dt>
                                        <dd>
                                            <select name="" id="" required>
                                                <option value="" disabled selected>선생님 선택</option>
                                                <option value="">%선생님%</option>
                                            </select>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="option-info mt40">
                                    <strong>
                                        강의목록
                                        <span class="point-color">총 4강</span>
                                    </strong>
                                    <a href="#none" class="teacher-board">선생님 자료실</a>
                                </div>
                                <div class="option-wrap">
                                    <!-- 반복 -->
                                    <!-- 열림 상태일 때 on class 추가 -->
                                    <div class="option-list-wrap">
                                        <div class="option-list-title">
                                            <strong>(제너럴)라이팅 스피킹 30일 완성 PACK Writing Task1</strong>
                                            <i class="ico-option-arrow"></i>
                                        </div>
                                        <ul class="option-list">
                                            <!-- 반복 -->
                                            <li>
                                                <div class="rate">
                                                    80%
                                                </div>
                                                <p>
                                                    1강 품사와 문장의 형식품사와 문장의 형식품사와 문장의 형식문장의 형식문장의 형식 1강 품사와 문장의
                                                    형식품사와 문장의 형식품사와 문장의 형식문장의 형식문장의 형식
                                                </p>
                                                <ul>
                                                    <li>Listening</li>
                                                    <li>엘리자베스 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <!-- //반복 -->
                                            <li>
                                                <div class="rate">
                                                    0%
                                                </div>
                                                <p>
                                                    2강 현재, 과거, 미래시제
                                                </p>
                                                <ul>
                                                    <li>Speaking</li>
                                                    <li>클라라 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="rate">
                                                    0%
                                                </div>
                                                <p>
                                                    3강 진행형
                                                </p>
                                                <ul>
                                                    <li>Writing</li>
                                                    <li>조니 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- //반복 -->
                                    <!-- 반복 -->
                                    <!-- 열림 상태일 때 on class 추가 -->
                                    <div class="option-list-wrap">
                                        <div class="option-list-title">
                                            <strong>(제너럴)라이팅 스피킹 30일 완성 PACK Writing Task1</strong>
                                            <i class="ico-option-arrow"></i>
                                        </div>
                                        <ul class="option-list">
                                            <!-- 반복 -->
                                            <li>
                                                <div class="rate">
                                                    80%
                                                </div>
                                                <p>
                                                    1강 품사와 문장의 형식품사와 문장의 형식품사와 문장의 형식문장의 형식문장의 형식 1강 품사와 문장의
                                                    형식품사와 문장의 형식품사와 문장의 형식문장의 형식문장의 형식
                                                </p>
                                                <ul>
                                                    <li>Listening</li>
                                                    <li>엘리자베스 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <!-- //반복 -->
                                            <li>
                                                <div class="rate">
                                                    0%
                                                </div>
                                                <p>
                                                    2강 현재, 과거, 미래시제
                                                </p>
                                                <ul>
                                                    <li>Speaking</li>
                                                    <li>클라라 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="rate">
                                                    0%
                                                </div>
                                                <p>
                                                    3강 진행형
                                                </p>
                                                <ul>
                                                    <li>Writing</li>
                                                    <li>조니 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- //반복 -->
                                    <!-- 반복 -->
                                    <!-- 열림 상태일 때 on class 추가 -->
                                    <div class="option-list-wrap">
                                        <div class="option-list-title">
                                            <strong>(제너럴)라이팅 스피킹 30일 완성 PACK Writing Task1</strong>
                                            <i class="ico-option-arrow"></i>
                                        </div>
                                        <ul class="option-list">
                                            <!-- 반복 -->
                                            <li>
                                                <div class="rate">
                                                    80%
                                                </div>
                                                <p>
                                                    1강 품사와 문장의 형식품사와 문장의 형식품사와 문장의 형식문장의 형식문장의 형식 1강 품사와 문장의
                                                    형식품사와 문장의 형식품사와 문장의 형식문장의 형식문장의 형식
                                                </p>
                                                <ul>
                                                    <li>Listening</li>
                                                    <li>엘리자베스 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <!-- //반복 -->
                                            <li>
                                                <div class="rate">
                                                    0%
                                                </div>
                                                <p>
                                                    2강 현재, 과거, 미래시제
                                                </p>
                                                <ul>
                                                    <li>Speaking</li>
                                                    <li>클라라 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="rate">
                                                    0%
                                                </div>
                                                <p>
                                                    3강 진행형
                                                </p>
                                                <ul>
                                                    <li>Writing</li>
                                                    <li>조니 선생님</li>
                                                </ul>
                                                <div class="time">(45:59)</div>
                                                <div class="btn">
                                                    <a href="#none" class="my-btn-default ico">
                                                        <i class="ico-go-class"></i>
                                                    </a>
                                                    <a href="#none" class="my-btn-default2 ico">
                                                        <i class="ico-download"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- //반복 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section("academy-script")

    <script>
        let downloadButton = document.querySelector('.dw-btn');
        if(downloadButton) {
        downloadButton.addEventListener('click', function(event) {
            event.preventDefault();

            /* Start loading process. */
            downloadButton.classList.add('loading');

            /* Set delay before switching from loading to success. */
            window.setTimeout(function() {
            downloadButton.classList.remove('loading');
            downloadButton.classList.add('success');
            }, 3000);

            /* Reset animation. */
            window.setTimeout(function() {
            downloadButton.classList.remove('success');
            }, 8000);
        });
        };
    </script>
    <script>
        $(document).ready(function () {
            $('.option-list-title').on('click', function () {
                $(this).toggleClass('on')
                $(this).parent('.option-list-wrap').toggleClass('on').siblings('.option-list-wrap').removeClass('on').children('.option-list-title').removeClass('on')
            });
        });
    </script>
@endsection