@extends('academy.layout')


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

@section("progress")
    @include('progress')
@endsection

@section("academy-content")
    <div id="wrap" class="boardPage free-study-room">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>IELTS 무료 자료실</h1>
            </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"></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 flex">
                    <!-- filter -->
                    <form action="{{ route($board['page'] . ".index", ['service' => $service]) }}" id="search_form">
                        <div class="flex list-top">
                            <div class="list-filterWrap">
                                <div class="scroll-x-active">
                                    <input type="hidden" name="material_type" id="material_type" value="{{ Request::get('material_type') }}" />
                                    <!-- 활성화 메뉴 active class 추가 -->
                                    <a href="javascript:void(0)" data-field='material_type' data-value="" @class(['click', 'active' => empty(Request::get('material_type'))])>전체</a>
                                    @foreach ($materials as $type => $name)
                                        <a href="javascript:void(0)" data-field='material_type' data-value="{{ $type }}" @class(['click', 'active' => $type == Request::get('material_type')])>{{ $name }}</a>
                                    @endforeach
                                </div>
                            </div>

                            <!-- 리스트 순서 -->
                            <div class="list-order-dropDown">
                                <div class="dropDownMenu type2">
                                    <div class="selectBox">
                                        <button type="button" class="label" data-selected="{{ Request::get("sort") }}">{{ Request::get("sort") == 'popularity' ? "인기순" : "최신순" }}</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'])><a href="javascript:void(0)" data-field='sort' data-account="last">최신순</a></li>
                                                    <li @class(["optionItem", 'active' => Request::get("sort") == 'popularity'])><a href="javascript:void(0)" data-field='sort' data-account="popularity">인기순</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- 리스트 -->
                    <ul class="list flex" id="free-list">
                        <x-board.free-wrap :posts="$posts" type="{{ $board['page'] }}" :materials="$materials" />
                    </ul>
                </div>

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

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

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

    new InfiniteScroll("free-list", {
        url: getRoute(""),
        getFilter : function() {
            const params = {};
            $.each($('#search_form input[type=hidden]'), function() {
                params[$(this).attr("name")] = $(this).val();
            })
            return params;
        }
    })
</script>
@endsection