@extends($service.'.layout')


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


@section($service."-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">아이엘츠 <x-service-name service="{{ $service }}" /> 핫이슈</div>
                        <p class="sub ellipsis_2 mo_tab-text">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"></p>
                            <div class="scroll-x-active">
                                <!-- 활성화 버튼 active class 추가 -->
                                @foreach ($top['videos'] as $key => $video)
                                    <button type="button" @class(["click","thumb", "active" => $key == 0]) data-youtube="{{ $video[0] }}" data-subject="{{ $video[1] }}"><figure style="background-image:url('https://img.youtube.com/vi/{{ $video[0] }}/maxresdefault.jpg')"></figure></button>
                                @endforeach
                            </div>
                            <a href="{{ $top['product_link'] }}" class="moreBtn">
                                초단기 고득점 달성! <x-service-name service="{{ $service }}" />상품 둘러보기 <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'])  id="contents">
                    <form action="{{ route($board['page'] . ".index", ['service' => $service]) }}#contents" id="search_form">
                        <div @class(["sticky-header",  'flex' ])>
                            @if ($service == 'academy')
                                <input type="hidden" name="tab" id="tab" value="{{ Request::get('tab', 'information') }}" >

                                <!-- list-tab -->
                                <div class="categoryWrap customLine">
                                    <div class="flex">
                                        <a href="{{ route($board['page'] . ".index", ['service' => $service]) }}?tab=information" @class(['notSearch','active' => empty(Request::get('tab')) || Request::get('tab') == 'information' ])>특강안내</a> <!-- 활성화 탭 class active 추가 -->
                                        <a href="{{ route($board['page'] . ".index", ['service' => $service]) }}?tab=view" @class(['notSearch','active' => Request::get('tab') == 'view' ])>특강보기</a>
                                    </div>
                                </div>

                                <!-- filter -->
                                <div class="list-filterWrap type2">
                                    <div class="listArea">
                                        @if ( Request::get('tab', 'information') == 'information' )
                                            <input type="hidden" name="status" id="status" value="{{ Request::get('status') }}" >
                                            <div>
                                                <div class="scroll-x-active">
                                                    <!-- 활성화 메뉴 active class 추가 -->
                                                    <a href="javascript:void(0)" data-field='status' data-value='' @class(['click', 'active' => empty(Request::get('status'))])>전체</a>
                                                    <a href="javascript:void(0)" data-field='status' data-value='upcoming' @class(['click', 'active' => Request::get('status') == 'upcoming' ])>예정</a>
                                                    <a href="javascript:void(0)" data-field='status' data-value='completed' @class(['click', 'active' => Request::get('status') == 'completed'])>종료</a>
                                                </div>
                                            </div>
                                        @endif
                                        @if (Request::get('tab') == 'view')
                                        <div>
                                            <div class="scroll-x-active" >
                                                @foreach ($filterSubjects as $type => $name)
                                                    <a href="javascript:void(0)" data-field='subject' data-value="{{ $type }}" @class(['click', 'notSearch', "tag"])>{{ $name }}</a>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            @else
                            <div class="list-filterWrap">
                                {{-- 250429 모바일 가로스크롤 생기는 문제로 아래 DIV 주석 --}}
                                <div class="scroll-x-active">
                                    @foreach ($filterSubjects as $type => $name)
                                    <a href="javascript:void(0)" data-field='subject' data-value="{{ $type }}" @class(['click', 'notSearch', "tag"])>{{ $name }}</a>
                                    @endforeach
                                </div>
                            </div>
                            @endif



                        @if (($service == 'academy' && (
                            Request::get('status') == 'completed' ||
                            Request::get('tab') == 'view'
                        )) || $service == 'ielts')
                    <!-- 리스트 순서 -->
                            <div class="list-order-dropDown">
                                <div class="dropDownMenu type2">
                                    <div class="selectBox">
                                        <button type="button" class="label" data-selected="{{ Request::get("sort", 'last') }}">{{ Request::get("sort", 'last') == 'last' ? "최신순" : "인기순"}}</button>
                                        <input type="hidden" name="sort" id="sort" value="{{ Request::get("sort", 'last') }}" />
                                        <div class="optionListWrap">
                                            <div class="scrollWidth">
                                                <ul class="optionList scrollWrap">
                                                    <!-- 활성화 메뉴 active class 추가 -->
                                                    <li @class(["optionItem", 'active' => empty(Request::get("sort")) || Request::get("sort") == 'last'])>
                                                        <button type="button" @class(['notSearch' => Request::get('status') == 'completed']) data-field='sort' data-account="last">최신순</button>
                                                    </li>
                                                    <li @class(["optionItem", 'active' => Request::get("sort") == 'popularity'])>
                                                        <button type="button" @class(['notSearch' => Request::get('status') == 'completed'])  data-field='sort' data-account="popularity">인기순</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </form>
                </div>
                <div class="listArea">
                    <div @class(['guide' => Request::get("tab", 'information') == 'information', 'take' => Request::get("tab") == 'view'])>
                        <ul class="list" id="special-list">
                            @if ($posts != null )
                                <x-board.special-wrap :posts="$posts" service="{{ $service }}" type="{{ $board['page'] }}" :subjects="$subjects" tab="{{ Request::get('tab', 'information') }}" isStudy="{{ $isStudy }}" />
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section($service.'-script')
    {!! resource('js/components/infinite-scroll.js') !!}
    {!! resource('js/common/board/default.js') !!}

    <script>
        setPageConfig({
            "service" : '{{ $service }}',
            "boardType" : '{{ $board["page"] }}',
            "isActiveInfinity" : true,
            "isLogin" : "{{ Auth::check() }}",

        })


        const infiniteScroll = new InfiniteScroll("special-list", {
            url: getRoute(""),
            page : {{ Request::get('tab', $service == 'academy' ? 'information' : "view") == 'view' ? 1 : 2 }},
            display: "flex",
            getFilter : function() {
                const params = {};
                $.each($('#search_form input[type=hidden]'), function() {
                    params[$(this).attr("name")] = $(this).val();
                })

                if ( $('#search_form .tag.active').length > 0 && $('#search_form .tag.active').length < $('#search_form .tag').length) {
                    const subjects = [];
                    $.each($('#search_form .tag.active'), function() {
                        subjects.push($(this).data("value"));
                    })
                    params['subjects'] = subjects;
                }

                return params;
            }
        })
        @if (($service == 'academy' && Request::get('status') != 'upcoming') || $service == 'ielts')
        function onChangeDropbox(input) {
            @if (Request::get('status') == 'completed')
                $('#search_form').submit();
            @else
                infiniteScroll.reloadContents()
            @endif
        }
        @endif

        function onOpenPlayer(id) {
            @if ($isStudy)
                const popupWidth = 1200;
                const popupHeight = 675;
                const popupX = Math.round(window.screenX + (window.outerWidth/2) - (popupWidth/2));
                const popupY = Math.round(window.screenY + (window.outerHeight/2) - (popupHeight/2));
                const featureWindow = "width=" + popupWidth + ", height="+popupHeight + ", left=" + popupX + ", top=" + popupY;

                const href = getRoute("player", id)
                return window.open(href, '영상 플레이어 팝업', featureWindow);
            @else
                alertPopup("수강중 회원에 한해 제공되는 강의입니다.");
            @endif
        }

        function onBlockUser() {
            alertPopup("수강중 회원에 한해 제공되는 강의입니다.");
        }


        $(function() {
            $('#search_form a.click.tag').on("click", function() {
                if ( $(this).hasClass('active') ) {
                    $(this).removeClass("active");
                } else {
                    $(this).addClass("active");
                }

                infiniteScroll.reloadContents()
            })
        })
    </script>
@endsection