@extends('ielts.layout')

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

    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_ielts.css') !!}
@endsection



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

    <div id="nav">
        <a href="#none" class="ico-back">뒤로가기</a>
        <h2>강의수강</h2>
    </div>
    <div id="my-lecture">
        <strong>수강 중인 강의</strong>
        <div class="process">
            <div class="title-bar">
                <div class="title">Kings 6.0+_Reading_True False abc def ghi</div>
                <div class="bar-wrap">
                    <div class="bar">
                        <div style="width:79%"></div>
                    </div>
                    <span>
                        10강/10강
                    </span>
                </div>
            </div>
            <a href="#none" class="btn-play">
            </a>
        </div>
    </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="filter">
            <select name="" id="">
                <option value="">과목 선택</option>
                <option value="">과목1</option>
                <option value="">과목2</option>
                <option value="">과목3</option>
            </select>
            <select name="" id="">
                <option value="">선생님 선택</option>
                <option value="">선생님1</option>
                <option value="">선생님2</option>
                <option value="">선생님3</option>
            </select>
        </div>
        <div class="option-info">
            <span>
                총 <strong>24강</strong>
            </span>
            <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 on">
                <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>
                            <span class="down">자료
                                <i class="ico-download"></i>
                            </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>
                            <span class="down">자료
                                <i class="ico-download"></i>
                            </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>
                            <span class="down">자료
                                <i class="ico-download"></i>
                            </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>
                            <span class="down">자료
                                <i class="ico-download"></i>
                            </span>
                            <a href="#none" class="btn-down"></a>
                        </div>
                    </li>
                    <!-- //반복 -->
                </ul>
            </div>
            <!-- //반복 -->
        </div>
    </div>
</div>
@endsection



@section('ielts-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