@extends('layout')

@section('css')
    {!! resource('css/product.css') !!}
    {!! resource('css/product.ielts.css') !!}
@endsection

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

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

@section('content')
<main class="container">
    <div class="lecture-top-wrapper">
        <div class="wrapper">
            <div class="lecture-top-container">
                <div class="lecture-category-select-wrapper">
                    <p>나에게 맞는 강좌는?</p>
                    <div>
                        <div class="lecture-category-select">
                            <select name="" id="">
                                <option value="">목표 점수</option>
                                <option value="">5.5 ~ 6.0</option>
                                <option value="">6.5 ~ 7.0</option>
                            </select>
                            <select name="" id="">
                                <option value="">나의 영어실력</option>
                                <option value="">IELTS입문/영어초보</option>
                                <option value="">토익 600점 이상 수준</option>
                            </select>
                            <select name="" id="">
                                <option value="">시험 응시권</option>
                                <option value="">포함</option>
                                <option value="">미포함</option>
                            </select>
                        </div>
                        <button class="button">검색</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="lecture-cont-wrapper">
        <div class="wrapper">
            <div class="lecture-tab-nav-wrapper">
                <ul class="lecture-tab-nav-list">
                    <li>
                        <a href="#none" class="active" onclick="fnMove('best')"><span>BEST 강좌패키지</span></a>
                    </li>
                    <li>
                        <a href="#none" onclick="fnMove('official')"><span>공식시험 패키지</span></a>
                    </li>
                    <li>
                        <a href="#none" onclick="fnMove('ielts')"><span>IELTS 단과</span></a>
                    </li>
                    <li>
                        <a href="#none" class="fnMove('english')"><span>대학영어</span></a>
                    </li>
                </ul>
            </div>

            <div class="lecture-section">
                <span class="lecture-cont-anchor" id="best"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">BEST 인기강좌</strong>
                    @foreach($best_products as $product)
                        @include('products.product-list-item')
                    @endforeach
                </div>

                <span class="lecture-cont-anchor" id="official"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">공식시험 패키지</strong>
                    @foreach($official_products as $product)
                        @include('products.product-list-item')
                    @endforeach
                </div>

                <span class="lecture-cont-anchor" id="ielts"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">IELTS 단과</strong>
                    @foreach($ielts_products as $product)
                        @include('products.product-list-item')
                    @endforeach
                </div>

                <span class="lecture-cont-anchor" id="english"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">대학 영어</strong>
                    @foreach($english_products as $product)
                        @include('products.product-list-item')
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    $(document).ready(function () {
        let headerHeight = document.querySelector('.header').offsetHeight
        window.onload = () => {
            $(".lecture-tab-nav-wrapper").css({
                "top": headerHeight +'px'
                // $(".lecture-tab-nav-wrapper").style.top = headerHeight +'px';
            })
        }
    });

    function fnMove(idName) {
        var offset = $("#"+idName).offset();
        $('html,body').animate({scrollTop:offset.top},400);
    }
</script>
@endsection

@section('footer', view('footer'))