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

@section("academy-css")

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



@section("academy-content")
<!-- 수강 리스트 -->
<div class="container lecture-container list-container">
    <div class="lecture-top-wrapper">
        <div class="wrapper">
            <div class="lecture-top-container">
                <ul class="lecture-tab-list">
                    <li class="lecture-tab common-tab">
                        <strong>BEST 인기강좌</strong>
                        <p>
                            <a href="#none" class="active">오전종합반</a>
                            <a href="#none">종일 밀착관리반</a>
                            <a href="#none">점수보장반</a>
                        </p>
                    </li> 
                    <li class="lecture-tab common-tab">
                        <strong>저녁 단과</strong>
                        <p>
                            <a href="#none">저녁반</a>
                            <a href="#none">문법 단기 속성반</a>
                        </p>
                    </li>
                    <li class="lecture-tab common-tab">
                        <strong>집중패키지</strong>
                        <p>
                            <a href="#none">4개월 인센티브 코스</a>
                        </p>
                    </li>
                    <li class="lecture-tab common-tab">
                        <strong>공식시험 패키지</strong>
                        <p>
                            <a href="#none">공식시험+모의고사 패키지</a>
                        </p>
                    </li>
                </ul>
                <div class="lecture-tab-module common-tab">
                    <strong>모듈을 선택하세요</strong>
                    <p>
                        <a href="#none" class="active">Academic</a>
                        <a href="#none">General</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="lecture-cont-wrapper">
        <div class="wrapper">
            <ul class="lecture-catagory-list">
                <li>
                    <a href="#none">오전종합반<button class="icon-close"></button></a>
                </li>
                <li>
                    <a href="#none">종일 밀착관리반<button class="icon-close"></button></a>
                </li>
                <li>
                    <a href="#none">4개월 인텐시브 코스<button class="icon-close"></button></a>
                </li>
                <li>
                    <a href="#none">공식시험+모의고사 패키지<button class="icon-close"></button></a>
                </li>
            </ul>
            <div class="lecture-section">
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">BEST 인기강좌</strong>
                    <div class="lecture-cont-box">
                        <div class="lecture-thumbnail">
                            <img src="https://placehold.co/400x250" alt="">
                        </div>
                        <div class="lecture-info">
                            <div class="lecture-detail-title">
                                <div class="flag red">
                                    <span>BEST</span>
                                </div>
                                <!-- <div class="flag green">
                                    <span>text</span>
                                </div>
                                <div class="flag blue">
                                    <span>text</span>
                                </div>
                                <div class="flag purple">
                                    <span>text</span>
                                </div>
                                <div class="flag pink">
                                    <span>text</span>
                                </div>
                                <div class="flag orange">
                                    <span>text</span>
                                </div>
                                <div class="flag skyblue">
                                    <span>text</span>
                                </div> -->
                                <p>IELTS 입문</p>
                            </div>
                            <div class="lecture-detail-desc">
                                IELTS를 처음 준비하는 수강생 4영역 기본기 완성반
                            </div>
                            <div class="lecture-detail-badge">
                                <span class="badge red">최대 70%할인</span>
                                <span class="badge purple">CDT 모의고사 2회</span>
                                <span class="badge yellow">노란단어</span>
                                <span class="badge green">W단어</span>
                                <span class="badge green">태그 최대 5개</span>
                            </div>
                            <div class="lecture-detail-list">
                                <ul>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-wrap">
                                                    <span class="price-before">260,000원</span>
                                                    <span class="price">160,000원</span>
                                                </span>
                                                <span class="desc">4개월 등록 시, 최대 90%할인dfdfdfdfdfdfdf</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">260,000원</span>
                                                <span class="price">160,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">260,000원</span>
                                                <span class="price">160,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">260,000원</span>
                                                <span class="price">160,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">2,000원</span>
                                                <span class="price">1,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">BEST 인기강좌</strong>
                    <div class="lecture-cont-box">
                        <div class="lecture-thumbnail">
                            <img src="https://placehold.co/400x250" alt="">
                        </div>
                        <div class="lecture-info">
                            <div class="lecture-detail-title">
                                <div class="flag red">
                                    <span>BEST</span>
                                </div>
                                <!-- <div class="flag green">
                                    <span>text</span>
                                </div>
                                <div class="flag blue">
                                    <span>text</span>
                                </div>
                                <div class="flag purple">
                                    <span>text</span>
                                </div>
                                <div class="flag pink">
                                    <span>text</span>
                                </div>
                                <div class="flag orange">
                                    <span>text</span>
                                </div>
                                <div class="flag skyblue">
                                    <span>text</span>
                                </div> -->
                                <p>IELTS 입문</p>
                            </div>
                            <div class="lecture-detail-desc">
                                IELTS를 처음 준비하는 수강생 4영역 기본기 완성반
                            </div>
                            <div class="lecture-detail-badge">
                                <span class="badge red">최대 70%할인</span>
                                <span class="badge purple">CDT 모의고사 2회</span>
                            </div>
                            <div class="lecture-detail-list">
                                <ul>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">1,260,000원</span>
                                                <span class="price">1,160,000원</span>
                                                <span class="desc">4개월 등록 시, 최대 90%할인dfdfdfdfdfdfdf</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#none" class="scroll-up">
        <img src="{{ env('AWS_S3_IMG_URL') }}/common/lecture/ico-scroll-top.png" alt="TOP">TOP
    </a>
</div>
<!-- // 수강 리스트 -->
@endsection



@section("academy-script")
<script>
    $(document).ready(function () {
        // 수강신청 카테고리 관련
        $('.common-tab a').on('click', function () {
            $(this).parent('p').find('a').removeClass('active');
            $(this).addClass('active');
        });
        // 수강신청 선택 삭제
        $('.lecture-catagory-list li').on('click', function () {
            $(this).remove();
        });
        // scroll top
        $(window).scroll(function() {
            if ($(this).scrollTop() > 600) {
                $(".scroll-up").fadeIn();
            } else {
                $(".scroll-up").fadeOut();
            }
        })
        $(".scroll-up").click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            return false;
        });
    });
</script>
@endsection