@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.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>
                                <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>
                                <!-- 수강 중인 강의 및 다음 강의가 없을 때 -->
                                <li>
                                    <strong>수강 중인 강의</strong>
                                    <div class="lecture-name">
                                        <p>최근 수강한 강의가 없습니다.</p>
                                    </div>
                                </li>
                                <li>
                                    <strong>다음 강의</strong>
                                    <div class="lecture-name">
                                        <p>다음 강의가 없습니다.</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="sub-tab mt60">
                                <ul>
                                    <li class="on">
                                        <a href="#none">학습중</a>
                                    </li>
                                    <li>
                                        <a href="#none">휴강/학습종료</a>
                                    </li>
                                </ul>
                                <div class="list-info">
                                    <div class="badge green">무료연장</div>
                                    <span>수강기간 연장 가능한 상품</span>
                                </div>
                                <div id="tab-cont1">
                                    <div class="my-class-list">
                                        <ul>
                                            <!-- 반복 -->
                                            <li>
                                                <img src="https://placehold.co/238x149?text=thumbnail" alt="">
                                                <div>
                                                    <p class="pd-name">N개월 알짜<span class="badge green">무료연장</span></p>
                                                    <a href="#none" class="pd-option">(제너럴) 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성</a>
                                                    <p class="pd-detail">수강기간: 2024.03.15 ~ 2024.04.30&nbsp;&nbsp;잔여 수강일: 30일&nbsp;&nbsp;Academic</p>
                                                    <p class="pd-detail">교재: edm문법마스터ㅣCam18 l Cam17 l edm 아이엘츠 교재 ㅣ Kings Work-Sheet 12 Kings Work-Sheet 12</p>
                                                    <div class="process-wrap">
                                                        <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 sm">강의실 입장<i class="ico-arrow"></i></a>
                                                    </div>
                                                </div>
                                                <ul class="mini-menu">
                                                    <li>
                                                        <a href="#none">휴강신청</a>
                                                    </li>
                                                    <!-- <li>
                                                        <a href="#none">휴강내역</a>
                                                    </li> -->
                                                    <li>
                                                        <a href="#none">출석확인</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">수강평 작성</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <!-- 반복 -->
                                            <li>
                                                <img src="https://placehold.co/238x149?text=thumbnail" alt="">
                                                <div>
                                                    <p class="pd-name">N개월 알짜<span class="badge green">무료연장</span></p>
                                                    <a href="#none" class="pd-option">(제너럴) 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성</a>
                                                    <p class="pd-detail">수강기간: 2024.03.15 ~ 2024.04.30&nbsp;&nbsp;잔여 수강일: 30일&nbsp;&nbsp;Academic</p>
                                                    <p class="pd-detail">교재: edm문법마스터ㅣCam18 l Cam17 l edm 아이엘츠 교재 ㅣ Kings Work-Sheet 12 Kings Work-Sheet 12</p>
                                                    <div class="process-wrap">
                                                        <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 sm">강의실 입장<i class="ico-arrow"></i></a>
                                                    </div>
                                                </div>
                                                <ul class="mini-menu">
                                                    <li>
                                                        <a href="#none">휴강내역</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">출석확인</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">수강평 작성</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div id="tab-cont2" style="display: none;">
                                    <div class="my-class-list">
                                        <ul>
                                            <!-- 반복 -->
                                            <li>
                                                <img src="https://placehold.co/238x149?text=thumbnail" alt="">
                                                <div>
                                                    <p class="pd-name">N개월 알짜<span class="badge green">무료연장</span></p>
                                                    <a href="#none" class="pd-option">(제너럴) 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성</a>
                                                    <p class="pd-detail">수강기간: 2024.03.15 ~ 2024.04.30&nbsp;&nbsp;잔여 수강일: 30일&nbsp;&nbsp;Academic</p>
                                                    <p class="pd-detail">교재: edm문법마스터ㅣCam18 l Cam17 l edm 아이엘츠 교재 ㅣ Kings Work-Sheet 12 Kings Work-Sheet 12</p>
                                                    <div class="process-wrap">
                                                        <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 sm">강의실 입장<i class="ico-arrow"></i></a>
                                                    </div>
                                                </div>
                                                <ul class="mini-menu">
                                                    <li>
                                                        <a href="#none">휴강해제</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">출석확인</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">수강평 작성</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <!-- 반복 -->
                                            <li>
                                                <img src="https://placehold.co/238x149?text=thumbnail" alt="">
                                                <div>
                                                    <p class="pd-name">N개월 알짜<span class="badge green">무료연장</span></p>
                                                    <a href="#none" class="pd-option">(제너럴) 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성 라이팅 스피킹 30일 완성 PACK 30일 완성 PACK30일 완성</a>
                                                    <p class="pd-detail">수강기간: 2024.03.15 ~ 2024.04.30&nbsp;&nbsp;잔여 수강일: 30일&nbsp;&nbsp;Academic</p>
                                                    <p class="pd-detail">교재: edm문법마스터ㅣCam18 l Cam17 l edm 아이엘츠 교재 ㅣ Kings Work-Sheet 12 Kings Work-Sheet 12</p>
                                                    <div class="process-wrap">
                                                        <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 sm">강의실 입장<i class="ico-arrow"></i></a>
                                                    </div>
                                                </div>
                                                <ul class="mini-menu">
                                                    <li>
                                                        <a href="#none">휴강해제</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">출석확인</a>
                                                    </li>
                                                    <li>
                                                        <a href="#none">수강평 작성</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="sub-text">
                                    <p>
                                        휴강신청은 각 상품당 수강기간 내에 단 1회만 가능합니다.
                                    </p>
                                    <p>
                                        무제한 상품의 경우 휴강신청 기능이 제공되지 않으며 연장신청만 가능합니다.
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section('ielts-script')

    <script>
        $(document).ready(function () {
            $('.sub-tab ul li').on('click', function () {
                $(this).addClass('on').siblings('li').removeClass('on')
                var nowTab = $(this).index() + 1;
                // alert(nowTab);
                $('.sub-tab').children('#tab-cont'+nowTab).show().siblings('[id^="tab-cont"]').hide()
            });
        });
    </script>
@endsection