@extends('academy.layout')

@section('gnb', view('gnb', ['service'=>'academy']))

@section('subgnb', view('academy.gnb'))

@section('academy-css')
    <!-- promotion -->
    {!! resource('css/common/board.css') !!}
@endsection

@section("progress")
    <!-- @//include('ielts.progress') -->
@endsection

@section("academy-content")
    <div id="wrap" class="boardPage special-lecture">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1><p>시험대비 무료특강</p> <div class="subTitle pc-text"><span>수강생 전용</span></div></h1>
            </div>
            <div class="subTitle mo_tab-text"><span>수강생 전용</span></div>

            <!-- 게시판 리스트 -->
            <div class="lectureArea">
                <div class="lecturePlayerArea">
                    <div class="titleWrap">
                        <div class="title customLine">아이엘츠 학원 핫이슈</div>
                        <p class="sub ellipsis_2 mo_tab-text">3주 만에 IELTS 7.5 달성! 실제 합격생 후기로 초단기 달성 가보자고~ 최대 2줄, 초과시 말줄임 됩니다. 3주 만에 IELTS 7.5 달성! 실제 합격생 후기</p>
                    </div>
                    <div class="videoWrap">
                        <div class="playWrap">
                            <iframe src="" title="시험대비 무료특강 동영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                        <div class="thumbnailWrap">
                            <p class="video-subject pc-text">[N개월 알짜패스]인강만으로 한 달 만에 overall 6.5</p>
                            <div class="scroll-x-active">
                                <!-- 활성화 버튼 active class 추가 -->
                                <button type="button" class="click thumb active" data-youtube="djKYUszYHDg"><figure style="background-image:url('https://img.youtube.com/vi/djKYUszYHDg/mqdefault.jpg')"></figure></button>
                                <button type="button" class="click thumb" data-youtube="oG9CrJ244Mc"><figure style="background-image:url('https://img.youtube.com/vi/oG9CrJ244Mc/mqdefault.jpg')"></button>
                                <button type="button" class="click thumb" data-youtube="bzTaEZaFMlA"><figure style="background-image:url('https://img.youtube.com/vi/bzTaEZaFMlA/mqdefault.jpg')"></button>
                            </div>
                            <a href="" class="moreBtn">초단기 고득점 달성! 학원상품 둘러보기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="var(--p-color2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                        </div>
                    </div>
                </div>

                <div class="lecture-list">
                    <!-- list-tab -->
                    <div class="categoryWrap customLine">
                        <div class="flex">
                            <a href="" class="active">특강안내</a> <!-- 활성화 탭 class active 추가 -->
                            <a href="">특강보기</a>
                        </div>
                    </div>

                    <!-- filter -->
                    <div class="list-filterWrap type2">
                        <div class="listArea">
                            <div>
                                <div class="scroll-x-active">
                                    <!-- 활성화 메뉴 active class 추가 -->
                                    <a href="" class="click active">전체</a>
                                    <a href="" class="click">예정</a>
                                    <a href="" class="click">종료</a>
                                </div>
                            </div>
                            <div style="display: none;">
                                <div class="scroll-x-active">
                                    <!-- 활성화 메뉴 active class 추가 -->
                                    <a href="" class="click active">전체</a>
                                    <a href="" class="click">Writing </a>
                                    <a href="" class="click">Speaking</a>
                                    <a href="" class="click">Listening</a>
                                    <a href="" class="click">Reading</a>
                                    <a href="" class="click">기타(자소서/문법/발음)</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 리스트 순서 -->
                    <div class="list-order-dropDown">
                        <div class="dropDownMenu type2">
                            <div class="selectBox">
                                <button type="button" class="label" data-selected="최신순">최신순</button>
                                <div class="optionListWrap">
                                    <div class="scrollWidth">
                                        <ul class="optionList scrollWrap">
                                            <!-- 활성화 메뉴 active class 추가 -->
                                            <li class="optionItem"><a href="" data-account="최신순">최신순</a></li>
                                            <li class="optionItem active"><a href="" data-account="인기순">인기순</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="listArea">
                        <!-- 특강안내 -->
                        <div class="guide">
                            <ul class="list">
                                <!--
                                    ul.list>li의 class 명에 따라 date 색상, color / list의 상태가 변경됩니다.
                                    종료 : end class 추가
                                -->
                                <li class="flex">
                                    <a href="view" class="go-viewPage"></a>
                                    <div class="teacher">
                                        <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="date">24.10.24 (토요일)</span>
                                        </div>
                                        <!-- subject에 class color 가 들어갑니다. (red, blue, green, purple) -->
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면?</p></div>
                                        <a href="view" class="more">자세히 보기<figure></figure></a>
                                    </div>
                                    <div class="bottomWrap"><p class="ellipsis_1">Writing Task2 기출문제 아이디어 정리 게시글 타이틀이</p></div>
                                </li>
                                <li class="flex">
                                    <a href="view" class="go-viewPage"></a>
                                    <div class="teacher">
                                        <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="date">24.10.24 (토요일)</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                        <a href="view" class="more">자세히 보기<figure></figure></a>
                                    </div>
                                    <div class="bottomWrap"><p class="ellipsis_1">Writing Task2 기출문제 아이디어 정리 게시글 타이틀이</p></div>
                                </li>
                                <li class="flex end">
                                    <a href="view" class="go-viewPage"></a>
                                    <div class="teacher">
                                        <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">강사명강사명강사명강사명</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="date">24.10.24 (토요일)</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                        <a href="view" class="more">자세히 보기<figure></figure></a>
                                    </div>
                                    <div class="bottomWrap"><p class="ellipsis_1">Writing Task2 기출문제 아이디어 정리 게시글 타이틀이</p></div>
                                </li>
                                <li class="flex end">
                                    <a href="view" class="go-viewPage"></a>
                                    <div class="teacher">
                                        <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="date">24.10.24 (토요일)</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                        <a href="view" class="more">자세히 보기<figure></figure></a>
                                    </div>
                                    <div class="bottomWrap"><p class="ellipsis_1">Writing Task2 기출문제 아이디어 정리 게시글 타이틀이</p></div>
                                </li>
                                <li class="flex end">
                                    <a href="view" class="go-viewPage"></a>
                                    <div class="teacher">
                                        <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="date">24.10.24 (토요일)</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">대법관은 대법원장의 제청으로 국회의 동의를 얻어 대통령이 임명한다. 사회적 특수계급의 제도는 인정되지 아니하며, 어떠한 형태로도 이를 창설할 수 없다.</p></div>
                                        <a href="view" class="more">자세히 보기<figure></figure></a>
                                    </div>
                                    <div class="bottomWrap"><p class="ellipsis_1">Writing Task2 기출문제 아이디어 정리 게시글 타이틀이</p></div>
                                </li>
                            </ul>
                        </div>

                        <!-- 특강보기 -->
                        <div class="take" style="display: none;">
                            <ul class="list">
                                <li class="flex">
                                    <div class="teacher">
                                        <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <!--
                                                class 명에 따라 filter 색상, color가 변경됩니다.
                                                writing, speaking, listening, reading, etc
                                            -->
                                            <span class="title writing">writing</span>
                                            <span class="date">24.10.28</span>
                                        </div>
                                        <!-- subject에 class color 가 들어갑니다. (red, blue, green, purple) -->
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면?</p></div>
                                        <a href="" class="file" download>학습자료<figure></figure></a>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="teacher">
                                        <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="title speaking">speaking</span>
                                            <span class="date">24.10.28</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                        <a href="" class="file" download>학습자료<figure></figure></a>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="teacher">
                                        <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">강사명강사명강사명강사명</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="title listening">listening</span>
                                            <span class="date">24.10.28</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                        <a href="" class="file" download>학습자료<figure></figure></a>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="teacher">
                                        <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="title reading">reading</span>
                                            <span class="date">24.10.28</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                        <a href="" class="file" download>학습자료<figure></figure></a>
                                    </div>
                                </li>
                                <li class="flex">
                                    <div class="teacher">
                                        <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                        <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                                    </div>
                                    <div class="textWrap">
                                        <div class="tag">
                                            <span class="title">기타</span>
                                            <span class="date">24.10.28</span>
                                        </div>
                                        <div class="subject"><p class="ellipsis_2">대법관은 대법원장의 제청으로 국회의 동의를 얻어 대통령이 임명한다. 사회적 특수계급의 제도는 인정되지 아니하며, 어떠한 형태로도 이를 창설할 수 없다.</p></div>
                                        <a href="" class="file" download>학습자료<figure></figure></a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('academy-script')
    <script>
        $(function(){
            // 탭 메뉴
            $('.categoryWrap a').on('click',function(e){
                e.preventDefault();

                let _thisSelectInx = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.listArea').each(function(index, item){
                    $(item).find('> div').eq(_thisSelectInx).show().siblings().hide();
                });
                if(_thisSelectInx == '1'){
                    $('.dropDownMenu.type2').addClass('marginPlus');
                    $('.lecture-list .filterWrap').removeClass('type2');
                }else{
                    $('.dropDownMenu.type2').removeClass('marginPlus');
                    $('.lecture-list .filterWrap').addClass('type2');
                }
            });
        });
    </script>
@endsection