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

@section("academy-css")

    {!! resource('css/academy/sub.css') !!}
    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_academy.css') !!}
@endsection



@section("academy-content")
<div class="container_m">

    <div id="nav">
        <a href="#none" class="ico-back">뒤로가기</a>
        <h2>강의수강</h2>
    </div>
    <div id="container">
        <h2 class="ico-list">
            수강목록
        </h2>
        <div class="lecture-title">
            (General) Kings 6.0 + Reading Reading 이론 Reading 이론 Reading 이론 Reading 이론
        </div>
        <div class="option-info">
            <span>
                총 <strong>24강</strong>
            </span>
        </div>
        <div class="option-wrap">
            <!-- 반복 -->
            <!-- 열림 상태일 때 on class 추가 -->
            <div class="option-list-wrap">
                <div class="option-list-title">
                    <strong>edm 문법 마스터</strong>
                    <i class="ico-option-arrow"></i>
                </div>
                <ul class="option-list">
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject reading">R</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject listening">L</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject writing">W</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject speaking">S</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                </ul>
            </div>
            <!-- //반복 -->
            <!-- 반복 -->
            <!-- 열림 상태일 때 on class 추가 -->
            <div class="option-list-wrap">
                <div class="option-list-title">
                    <strong>edm 문법 마스터</strong>
                    <i class="ico-option-arrow"></i>
                </div>
                <ul class="option-list">
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject reading">R</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject listening">L</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject writing">W</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject speaking">S</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                </ul>
            </div>
            <!-- //반복 -->
            <!-- 반복 -->
            <!-- 열림 상태일 때 on class 추가 -->
            <div class="option-list-wrap">
                <div class="option-list-title">
                    <strong>edm 문법 마스터</strong>
                    <i class="ico-option-arrow"></i>
                </div>
                <ul class="option-list">
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject reading">R</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject listening">L</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject writing">W</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                    <!-- 반복 -->
                    <li>
                        <p>1강 품사와 문장의 형식형식형식형식 형식형식형식식</p>
                        <div>
                            <span class="rate">80%</span>
                            <span class="subject speaking">S</span>
                            <span class="teacher">엘리자베스</span>
                            <span class="time">45:59</span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                </ul>
            </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