@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}

    {!! resource('css/common/nice-select.css') !!}
    {!! resource('css/myclass/my_class.css') !!}
@endsection



@section("ielts-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>
            </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-02"></i>
                            <span>강의수강</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-03"></i>
                            <span>첨삭 학습</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-04"></i>
                            <span>CDT 모의고사</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-05"></i>
                            <span>게시판</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-06"></i>
                            <span>휴강/연장 신청</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <h4>바로 수강하기</h4>
                            <ul class="my-lecture-list">
                                <li>
                                    <strong>수강 중인 강의</strong>
                                    <div class="lecture-name">
                                        <span>[(General) Kings 6.0+ Reading 이론]</span>
                                        <a href="#none">Kings 6.0+_Reading_True False Not Given_3강</a>
                                    </div>
                                    <div class="process">
                                        <div class="bar">
                                            <div class="bar-inner" style="width:80%"></div>
                                        </div>
                                        <p>진도율 <span>80%</span></p>
                                    </div>
                                    <a href="#none" class="my-btn-default"><i class="ico-go-class"></i>수강하기</a>
                                </li>
                            </ul>
                            <select class="select-option wide mt32" 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="dw-btn">
                                        <i class="ico-pdf"></i>
                                        학습자료 일괄 다운받기
                                        <i class="ico-download"></i>
                                    </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('ielts-script')

    {!! resource('js/common/jquery.nice-select.js') !!}
    <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')
            });
            $('.select-option').niceSelect();
        });
    </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>
@endsection