@extends('layout')

@section('css')
    <link rel="stylesheet" href="{{ env('AWS_S3_LIB_URL') }}/swiper/9.4.1/swiper.min.css">
    <script src="{{ env('AWS_S3_LIB_URL') }}/swiper/9.4.1/swiper.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    {!! resource('css/slick-theme.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="wrapper lecture-detail">
        <div class="lecture-detail-wrap">
            <div class="lecture-detail-cont">
                <div class="swiper lecture-thumb-swiper">
                    <div class="swiper-wrapper">
                        @foreach($product->productThumbnails as $thumb)
                            <div class="swiper-slide">
                                <img src="{{ app(\App\Common\Helper\S3Helper::class)->getDownloadPresignedUrl($thumb->s3_key) }}" alt="썸네일">
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-button-prev swiper-button"><p class="bg-button"></p></div>
                    <div class="swiper-button-next swiper-button"><p class="bg-button"></p></div>
                    <p class="lecture-thumb-num-box"><span class="lecture-thumb-num">1</span>/{{ $product->productThumbnails->count() }}</p>
                </div>
                
                <div class="lecture-detail-cont-inner">
                    {{-- 모바일용 상품헤더 --}}
                    <div class="m-display">
                        <div class="lecture-article-title">
                            <div class="flag {{ $product->promotionFlag->css_class }}">
                                <span>{{ $product->promotion_flag_word }}</span>
                            </div>
                            <h2>{{ $product->name }}</h2>
                        </div>
                        <p class="lecture-article-tag">{{ $product->description }}</p>
                        <ul class="lecture-article-list">
                            @if(!empty($product->targets))
                                @foreach($product->targets as $item)
                                    <li>
                                        {!! $item !!}
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>

                    <!-- 수강생 혜택 -->
                    <div class="lecture-benefit">
                        <strong>수강생 혜택</strong>
                        <ul class="lecture-benefit-list">
                            @if(!empty($product->benefits))
                                @foreach($product->benefits as $item)
                                    <li>
                                        {!! $item !!}
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>

                    @if ($content)
                    <div class="lecure-view">
                        <div class="lecure-view-box" style="background-color: gray;">
                            <!-- 콘텐츠 들어갈 영역 -->
                            {!! $content !!}
                        </div>
                        <button class="lecure-button-white lecture-view-button">상세페이지 더보기</button>
                    </div>
                    @endif

                    <ul class="lecture-detail-tab">
                        <li><a href="#none" class="active">인강의 내용이 들어갑니다.</a></li>
                        <li><a href="#none">2개월 강좌명</a></li>
                        <li><a href="#none">강좌명이 들어갑니다</a></li>
                        <li><a href="#none">강좌명이 들어갑니다</a></li>
                    </ul>

                    <!-- 교재구성 -->
                    <div class="lecture-detail-section">
                        <strong class="lectrue-detail-title">교재구성</strong>
                        <div class="lecture-book-list-wrap pc-display">
                            <ul class="lecture-book-list">
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                                <li class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </li>
                            </ul>
                            <button class="lecure-button-white">더보기</button>
                        </div>
                        <div class="lecture-book-list-wrap m-display">
                            <div class="lecture-book-list lecture-book-slider">
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                                <div class="lecture-book">
                                    <p>
                                        <img src="https://placehold.co/106x138" alt="교재">
                                        <span>아이엘츠 입문 Build-up 1</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 강사진 -->
                    <div class="lecture-detail-section">
                        <strong class="lectrue-detail-title">강사진</strong>
                        <div class="lecture-teacher-cont">
                            <div class="pc-display">
                                <ul class="lecture-teacher-list">
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag green">W</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag orange">S</em>
                                                </span>
                                                <span>엘리자베스</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>엘리자베스</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>엘리자베스</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <img src="https://placehold.co/90" alt="강사">
                                            <p>
                                                <span class="lecture-subject-tag-wrap">
                                                    <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                                </span>
                                                <span>헤더</span>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="m-display">
                                <div class="lecture-teacher">
                                    <div>
                                        <div>
                                            <p>
                                                <img src="https://placehold.co/90" alt="강사">
                                            </p>
                                            <span class="lecture-subject-tag-wrap">
                                                <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                            </span>
                                            <span>헤더</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <p>
                                                <img src="https://placehold.co/90" alt="강사">
                                            </p>
                                            <span class="lecture-subject-tag-wrap">
                                                <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                            </span>
                                            <span>헤더</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <p>
                                                <img src="https://placehold.co/90" alt="강사">
                                            </p>
                                            <span class="lecture-subject-tag-wrap">
                                                <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                            </span>
                                            <span>헤더</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <p>
                                                <img src="https://placehold.co/90" alt="강사">
                                            </p>
                                            <span class="lecture-subject-tag-wrap">
                                                <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                            </span>
                                            <span>헤더</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <p>
                                                <img src="https://placehold.co/90" alt="강사">
                                            </p>
                                            <span class="lecture-subject-tag-wrap">
                                                <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                            </span>
                                            <span>헤더</span>
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <p>
                                                <img src="https://placehold.co/90" alt="강사">
                                            </p>
                                            <span class="lecture-subject-tag-wrap">
                                                <em class="lecture-subject-tag purple">R</em><em class="lecture-subject-tag blue">L</em>
                                            </span>
                                            <span>헤더</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 추가구성 -->
                    <div class="lecture-detail-section">
                        <strong class="lectrue-detail-title">추가구성</strong>
                        <ul class="lecture_construction">
                            <li>
                                <img src="{{ env('AWS_S3_IMG_URL') }}/common/ico-lecture-construction01.png" alt="첨삭">
                                <p>
                                    <strong>첨삭</strong>
                                    Basic 첨삭 5회
                                </p>
                            </li>
                            <li>
                                <img src="{{ env('AWS_S3_IMG_URL') }}/common/ico-lecture-construction01.png" alt="첨삭">
                                <p>
                                    <strong>첨삭</strong>
                                    Premium 첨삭 5회
                                </p>
                            </li>
                            <li>
                                <img src="{{ env('AWS_S3_IMG_URL') }}/common/ico-lecture-construction03.png" alt="CDT">
                                <p>
                                    <strong>CDT</strong>
                                    <span class="m-br">CDT모의고사 </span>풀패키지 2회 제공
                                </p>
                            </li>
                            <li>
                                <img src="{{ env('AWS_S3_IMG_URL') }}/common/ico-lecture-construction04.png" alt="기타">
                                <p>
                                    <strong>기타</strong>
                                    <span class="m-br">영국문화원 IELTS </span>시험응시권 포함
                                </p>
                            </li>
                        </ul>
                    </div>

                    <!-- 성적표 인증 합격후기 -->
                    <div class="lecture-detail-section lecture-review">
                        <strong class="lectrue-detail-title">성적표 인증 합격후기</strong>
                        <div class="lecture-review-wrap pc-display">
                            <ul class="lecture-review-list">
                                <li>
                                    <a href="#none">
                                        <span class="lecture-review-list-thumb">
                                            <img src="https://placehold.co/146X154" alt="합격후기">
                                            <em><span class="score">7.0</span><span>Pass</span></em>
                                        </span>
                                        <span class="lecture-review-list-text">
                                            <strong>1개월 7.0달성</strong>
                                            윤*진 수강생
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#none">
                                        <span class="lecture-review-list-thumb">
                                            <img src="https://placehold.co/146X154" alt="합격후기">
                                            <em><span class="score">7.0</span><span>Pass</span></em>
                                        </span>
                                        <span class="lecture-review-list-text">
                                            <strong>1개월 7.0달성</strong>
                                            윤*진 수강생
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#none">
                                        <span class="lecture-review-list-thumb">
                                            <img src="https://placehold.co/146X154" alt="합격후기">
                                            <em><span class="score">7.0</span><span>Pass</span></em>
                                        </span>
                                        <span class="lecture-review-list-text">
                                            <strong>1개월 7.0달성</strong>
                                            윤*진 수강생
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#none">
                                        <span class="lecture-review-list-thumb">
                                            <img src="https://placehold.co/146X154" alt="합격후기">
                                            <em><span class="score">7.0</span><span>Pass</span></em>
                                        </span>
                                        <span class="lecture-review-list-text">
                                            <strong>1개월 7.0달성</strong>
                                            윤*진 수강생
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            <button class="lecure-button-white lecure-button-review">더보기</button>
                        </div>
                        <div class="lecture-review-wrap m-display">
                            <div class="swiper lecture-review-slider">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <span class="lecture-review-list-thumb">
                                                <img src="https://placehold.co/146X154" alt="합격후기">
                                                <em><span class="score">7.0</span><span>Pass</span></em>
                                            </span>
                                            <span class="lecture-review-list-text">
                                                <strong>1개월 7.0달성</strong>
                                                윤*진 수강생
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <span class="lecture-review-list-thumb">
                                                <img src="https://placehold.co/146X154" alt="합격후기">
                                                <em><span class="score">7.0</span><span>Pass</span></em>
                                            </span>
                                            <span class="lecture-review-list-text">
                                                <strong>2개월 7.0달성</strong>
                                                윤*진 수강생
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <span class="lecture-review-list-thumb">
                                                <img src="https://placehold.co/146X154" alt="합격후기">
                                                <em><span class="score">7.0</span><span>Pass</span></em>
                                            </span>
                                            <span class="lecture-review-list-text">
                                                <strong>3개월 7.0달성</strong>
                                                윤*진 수강생
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <span class="lecture-review-list-thumb">
                                                <img src="https://placehold.co/146X154" alt="합격후기">
                                                <em><span class="score">7.0</span><span>Pass</span></em>
                                            </span>
                                            <span class="lecture-review-list-text">
                                                <strong>4개월 7.0달성</strong>
                                                윤*진 수강생
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <span class="lecture-review-list-thumb">
                                                <img src="https://placehold.co/146X154" alt="합격후기">
                                                <em><span class="score">7.0</span><span>Pass</span></em>
                                            </span>
                                            <span class="lecture-review-list-text">
                                                <strong>5개월 7.0달성</strong>
                                                윤*진 수강생
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <span class="lecture-review-list-thumb">
                                                <img src="https://placehold.co/146X154" alt="합격후기">
                                                <em><span class="score">7.0</span><span>Pass</span></em>
                                            </span>
                                            <span class="lecture-review-list-text">
                                                <strong>6개월 7.0달성</strong>
                                                윤*진 수강생
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 이 강의 추천해요 -->
                    <div class="lecture-detail-section lecture-recommend">
                        <strong>이 강의 추천해요</strong>
                        <div class="lecture-recommend-slider-wrapper">
                            <div class="swiper lecture-recommend-slider">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <img src="https://placehold.co/192X120" alt="강의 추천">
                                            <span class="lecture-recommend-text">
                                                IELTS 1개월 수강팩 + 모의고사 풀이 / 단어장
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <img src="https://placehold.co/192X120" alt="강의 추천">
                                            <span class="lecture-recommend-text">
                                                IELTS 1개월 수강팩 + 모의고사 풀이 / 단어장
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <img src="https://placehold.co/192X120" alt="강의 추천">
                                            <span class="lecture-recommend-text">
                                                IELTS 1개월 수강팩 + 모의고사 풀이 / 단어장
                                            </span>
                                        </a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="#none">
                                            <img src="https://placehold.co/192X120" alt="강의 추천">
                                            <span class="lecture-recommend-text">
                                                IELTS 1개월 수강팩 + 모의고사 풀이 / 단어장
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lecture-article-pop">
                <div class="bg-pop"></div>
                <div class="lecture-article">
                    <div>
                        {{-- pc용 상품헤더 --}}
                        <div class="pc-display">
                            <div class="lecture-article-title">
                                <div class="flag {{ $product->promotionFlag->css_class }}">
                                    <span>{{ $product->promotion_flag_word }}</span>
                                </div>
                                <h2>{{ $product->name }}</h2>
                            </div>
                            <p class="lecture-article-tag">{{ $product->description }}</p>
                            <ul class="lecture-article-list">
                                @if(!empty($product->targets))
                                    @foreach($product->targets as $item)
                                        <li>
                                            {!! $item !!}
                                        </li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>

                        {{-- 상품목록 --}}
                        <form name="checkout" method="get" action="{{ route('checkout') }}">

                            <div class="m-display lecture-toggle">
                                <button type="button" onclick="toggleLectures(this)"><span class="material-symbols-outlined">keyboard_arrow_up</span></button>
                            </div>

                            <ul class="lecture-box-list">
                                @foreach($product->productOptions as $option)
                                    <li class="lecture-box {{ $option_id == $option->id ? 'open':'' }}">
                                        <h6>
                                            <strong>
                                                <input type="radio" name="product_option_id" value="{{ $option->id }}" data-price="{{ number_format($option->sales_price) }}" data-name="{{ $option->name }}"> {{ $option->name }}
                                            </strong>
                                            <span class="icon-fold"></span>
                                            <p class="wrap_text">
                                                <em>{{ number_format($option->discount_rate) }}%</em>
                                                <span class="right">
                                                    <span class="price">{{ $option->is_discounted && $option->isInDiscountPeriod() ? number_format($option->discount_price):number_format($option->sales_price) }}원</span>
                                                    <span class="price-before">{{ number_format($option->consumer_price) }}원</span>
                                                </span>
                                            </p>
                                        </h6>
                                        <div class="lecture-box-detail">
                                            <div class="lecture-box-text">
                                                <span class="has-icon-flag">
                                                    @foreach ($option->courses as $course)
                                                        {{ $course->name }},
                                                    @endforeach
                                                </span>
                                                <span class="has-icon-flag">
                                                    구성강의 총 {{ $option->courses->count() }}건
                                                    
                                                    @if ($option->courses->count()>1)
                                                    ({{ $option->courses->first()->name }} 외 {{ $option->courses->count() - 1 }}개)
                                                    @endif
                                                </span>
                                            </div>
                                            <div class="lecture-box-text">
                                                <span class="has-icon-pen">Basic 첨삭 5회</span>
                                                <span class="has-icon-pen">Premium 첨삭 20회</span>
                                                <span class="has-icon-computer">CDT모의고사 풀패키지 2회 제공</span>
                                                <span class="has-icon-ticket">응시권 %상품명% N회</span>
                                            </div>
                                            <div class="lecture-box-text">
                                                <span class="has-icon-note">구성 교재 총 N권</span>
                                                <span class="has-icon-note">노란단어 (종강일마다 지급)</span>
                                                <span class="has-icon-note">W단어 (결제일 지급)</span>
                                            </div>
                                            <p>수강시작일<span>2023년 12월 11일 예정</span></p>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="lecture-article-price">
                                <div class="left">결제금액</div>
                                <div class="right">
                                    <span id="option_name"></span>
                                    <span class="price" id="price">0원</span>
                                </div>
                            </div>
                            <button id="submitBtn" type="submit" class="lecture-red-button lecture-article-button">수강신청</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#none" class="scroll-up">
        <img src="{{ env('AWS_S3_IMG_URL') }}/common/ico-scroll-top.png" alt="TOP">TOP
    </a>
</main>
@endsection

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

@section('script')
<script>    
    $(document).ready(function () {

        toggleSubmitButton();

        $('input[name="product_option_id"]').change(toggleSubmitButton);

        // top 썸네일 슬라이드
        var thumbSwiper = new Swiper(".lecture-thumb-swiper", {
            slidesPerView: 1,
            loop: true,
            navigation: {
                nextEl: ".lecture-thumb-swiper .swiper-button-next",
                prevEl: ".lecture-thumb-swiper .swiper-button-prev",
            },
            on: {
                slideChangeTransitionEnd : function() {
                    $(".lecture-thumb-num").text(thumbSwiper.realIndex+1);
                }
            }
        });

        // 강좌 탭
        $(".lecture-detail-tab a").click(function() {
            $(".lecture-detail-tab a").removeClass("active");
            $(this).addClass("active");
        });

        // 상품 내용 open
        $(".lecture-box").click(function() {
            let chk = $(this).find('input[name="product_option_id"]');
            let price = $(chk).attr('data-price');
            let option_name = $(chk).attr('data-name');

            $(chk).prop('checked', true);
            $('#price').text(price+'원');
            $('#option_name').text(option_name);

            if ($(this).hasClass("open")) {
                $(".lecture-box").removeClass("open");
            } else {
                $(".lecture-box").removeClass("open");
                $(this).addClass("open");
            }
        });

        // 교재안내 모바일 슬라이드
        $('.lecture-book-slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,     
            loop: true,
            responsive: [
                {
                breakpoint: 769,
                    settings: {
                        slidesToShow: 5
                    }
                },
                {
                breakpoint: 601,
                    settings: {
                        slidesToShow: 4
                    }
                },
                {
                breakpoint: 415,
                    settings: {
                        slidesToShow: 3
                    }
                }
            ]
        });

        // 담당 선생님 소개 슬라이드
        $('.lecture-teacher').slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            arrows: true,
            focusOnSelect: true,
            responsive: [
                {
                    breakpoint: 769,
                    settings: {
                        slidesToShow: 5
                    }
                },
                {
                    breakpoint: 415,
                    settings: {
                        slidesToShow: 4
                    }
                }
            ]
        });

        // 리뷰 슬라이드 
        let reviewSwiper = new Swiper(".lecture-review-slider", {
            slidesPerView: "auto",
            spaceBetween: 16,
            loop: false,
            navigation: {
                nextEl: ".lecture-review-slider .swiper-button-next",
                prevEl: ".lecture-review-slider .swiper-button-prev",
            },
            pagination: {
                clickable: true,
            }
        });

        // 강의 추천 슬라이드 
        let recommendSwiper = new Swiper(".lecture-recommend-slider", {
            slidesPerView: "3",
            slidesToScroll: 1,     
            spaceBetween: 32,
            freeMode: true,
            loop: false,
            navigation: {
                nextEl: ".lecture-recommend-slider-wrapper .swiper-button-next",
                prevEl: ".lecture-recommend-slider-wrapper .swiper-button-prev",
            },
            pagination: {
                clickable: true,
            },
            breakpoints: {
                320: {
                slidesPerView: "auto",
                spaceBetween: 14,
                },
                501: {
                slidesPerView: 3,
                spaceBetween: 32,
                }
            }
        });

        // 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;
        });

        // 모바일 수강신청 팝업
        $(".lecture-article-button.m-display").click(function() {
            $(".lecture-article-pop").toggleClass("show");
        });

        // 모바일 수강신청 팝업 닫기 
        $(".lecture-article-pop .bg-pop").click(function() {
            $(".lecture-article-pop").removeClass("show");
        });

    });

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

    function toggleSubmitButton() {
        if ($('input[name="product_option_id"]:checked').length > 0) {
            $('#submitBtn').prop('disabled', false);
        } else {
            $('#submitBtn').prop('disabled', true);
        }
    }

    function toggleLectures(obj) {
        if ($('.lecture-box-list').hasClass('open')) {
            $('.lecture-box-list').removeClass('open');
            $(obj).find('span').text('keyboard_arrow_up');
        } else {
            $('.lecture-box-list').addClass('open');
            $(obj).find('span').text('keyboard_arrow_down');
        }
    }
</script>
@endsection