@php
    $prefix = "";
    if ( $product?->details_file  ) {
        $fileUrls = explode("/", $product?->details_file);
        $prefix = end($fileUrls);
        $prefix = str_replace(".html", "", $prefix);
    }

    $promotionFlags = config('edmclass.promotion_flags');
@endphp

@extends($service.'.layout')

@section('page-title', "상품 상세: ".$product?->name)

@section($service.'-css')
<!-- aos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- splide -->
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
{!! resource('css/common/promotion.css') !!}
{!! resource("css/components/calendar.css") !!}
@endsection

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

@section($service."-content")
<div id="wrap" @class(["promotionPage",$prefix])>
    <div class="contents">
        <p class="pageTitle">상품</p>

        @if (!empty($product->thumbnail))
        <!-- 배너 -->
        <div class="mainBanner max-width">
            <picture class="banner">
                <source srcset="{{ $product->thumbnail }}" media="(min-width: 1200px)">
                <img src="{{ $product->thumbnail }}" alt="{{ $product->name }}">
            </picture>
        </div>
        @endif

        @if(!empty($product->benefit))
        <!-- 수강생 혜택 -->
        <!-- <article class="studentBenefit">
            <div class="max-width editor-content">
                <p class="title">수강생 혜택</p>
                {!! $product?->benefit !!}
            </div>
        </article> -->
        @endif

        <div class="page-nav">
            <div class="max-width flex">
                <button type="button" class="active" data-target="detailPage" data-area="">상세정보</button>
                <button type="button" data-target="notesPage" id="notesPageBtn" data-area="other">유의사항</button>
                @if ( $service == 'ielts' )
                    <button type="button" data-target="coursePage" data-area="other">강좌목록</button>
                @endif

            </div>
        </div>

        <div class="promotionContents">
            {{--상세정보--}}
            <div class="changePage detailPage" id="detailPage">
                @if ($product?->details_file)
                    @php
                        $html = app(S3Helper::class)->download($product->details_file);
                    @endphp

                    {!! $html !!}
                @endif
            </div>

            {{--유의사항--}}
            <div class="changePage" id="notesPage">
                <article>
                    <div class="max-width editor-content">
                        {!! $product->notes !!}
                    </div>
                </article>
            </div>

            @if ($service == 'ielts')
            {{--강좌목록--}}
            <div class="changePage" id="coursePage">
                <article>
                    <div class="max-width">
                        <div class="flex color-category">
                            <span class="category listening">Listening</span>
                            <span class="category reading">Reading</span>
                            <span class="category writing">Writing</span>
                            <span class="category speaking">Speaking</span>
                        </div>
                        @foreach ($courses as $course)
                            <div class="option-list-wrap">
                                <div class="option-list-title">
                                    <p>{{ $course->name }}</p>
                                    <i class="ico-option-arrow"></i>
                                </div>

                                <ul class="option-list">
                                    @foreach ($course->lectures->where('activated', 1) as $lecture)
                                    <li>
                                        <span class="{{ $lecture->video?->subject }}"></span>
                                        <p>
                                            {{ $lecture->name }}
                                        </p>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>
                </article>
            </div>
            @endif
        </div>

        <div id="detailPageContents">
        @if ($service == 'academy')
            <!-- 강의일정 -->
            <article class="lectureSchedule">
                <div class="max-width">

                    <div class="titleWrap">
                        <p class="title">강의일정</p>
                    </div>
                    <div class="calendarWrap product">
                        <input type="hidden" name="id" id="id" value="{{ $product->id }}" />
                        <!-- 달력
                            class update 추가 : 일정 미정(업데이트 중입니다)
                        -->
                        <div class="calendar" id="calendar"></div>

                        <!-- 안내 -->
                        <div class="calendar-info">
                            <div class="calendar-header">일정 상세</div>
                            <div class="calendar-box" id="schedule-list">
                                <div class="calendar-list" id="default">
                                    <div class="date"></div>
                                    <div class="calendar-item">
                                        <div class="title">
                                            <span></span> <div></div>
                                        </div>
                                        <div class="timer"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </article>
        @endif

        <!-- 교재안내 -->
        <article class="textbookGuide" data-more="true">
            <div class="max-width">
                <div class="titleWrap type2">
                    <p class="title">교재안내</p>
                </div>

                <div class="slide customSlide">
                    <div class="swiper-wrapper">
                        @foreach ($textbooks as $textbook)
                        <div class="swiper-slide">
                            <div class="imgWrap">
                                <figure style="background-image: url('{{ $textbook->thumbnail }}');"></figure>
                            </div>
                            <div class="textWrap"><p>{{ $textbook->name }}</p></div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </article>

        <!-- 교재안내 더보기 -->
        <div class="moreBtnWrap tab_pc-btn" data-page="textbookGuide">
            <button type="button" class="moreBtn">더보기</button>
        </div>

        <!-- 강사진 -->
        <article class="teacherWrap">
            <div class="max-width">
                <div class="titleWrap type2">
                    <p class="title">강사진</p>
                </div>

                <div class="slide customSlide">
                    <div class="swiper-wrapper">
                        @foreach($teachers as $teacher)
                        <div class="swiper-slide">
                            <div class="imgWrap">
                                <figure style="background-image: url('{{ $teacher['photo'] ? $teacher['photo'] : env('AWS_S3_IMG_URL').'/common/promotion/test_promotion_teacher.png' }}');"></figure>
                            </div>
                            <div class="textWrap">
                                @foreach ($teacher['subjects'] as $subject)
                                <span class="{{ $subject }}"></span>
                                @endforeach

                                <p>{{ $teacher['name'] }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </article>

        @if ($service == 'ielts')
            <!-- 추가구성 -->
            <article class="addOption">
                <div class="max-width">
                    <div class="titleWrap">
                        <p class="title">추가구성</p>
                    </div>
                    <ul class="list flex">
                        @if ($basicFeedbackCount>0)
                        <li>
                            <div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_01.svg');"></figure></div>
                            <div class="textWrap">
                                <p>첨삭</p>
                                <span>Basic 첨삭 {{ $basicFeedbackCount }}회</span>
                            </div>
                        </li>
                        @endif

                        @if ($premiumFeedbackCount>0)
                        <li>
                            <div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_01.svg');"></figure></div>
                            <div class="textWrap">
                                <p>첨삭</p>
                                <span>Premium 첨삭 {{ $premiumFeedbackCount }}회</span>
                            </div>
                        </li>
                        @endif

                        @if ($cdtCount>0)
                        <li>
                            <div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_02.svg');"></figure></div>
                            <div class="textWrap">
                                <p>CDT</p>
                                <span>CDT모의고사 <br class="mo-br">풀패키지 {{ $cdtCount }}회 제공</span>
                            </div>
                        </li>
                        @endif

                        @if ($etcCount>0)
                        <li>
                            <div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_03.svg');"></figure></div>
                            <div class="textWrap">
                                <p>기타</p>
                                <span>영국문화원 IELTS <br class="mo-br">시험응시권 포함</span>
                            </div>
                        </li>
                        @endif
                    </ul>
                </div>
            </article>

            <!-- 성적표 인증 합격후기 -->
            <article class="acceptance" data-more="true">
                <div class="max-width">
                    <div class="titleWrap type2">
                        <p class="title">성적표 인증 합격후기</p>
                    </div>
                    <div class="slide customSlide">
                        <div class="swiper-wrapper">
                            <a href="#none" class="swiper-slide">
                                <div class="imgWrap">
                                    <div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                </div>
                                <div class="textWrap">
                                    <p>1개월 7.0달성</p>
                                    <span>윤*진 수강생</span>
                                </div>
                            </a>
                            <a href="#none" class="swiper-slide">
                                <div class="imgWrap">
                                    <div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                </div>
                                <div class="textWrap">
                                    <p>1개월 7.0달성</p>
                                    <span>윤*진 수강생2</span>
                                </div>
                            </a>
                            <a href="#none" class="swiper-slide">
                                <div class="imgWrap">
                                    <div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                </div>
                                <div class="textWrap">
                                    <p>1개월 7.0달성</p>
                                    <span>윤*진 수강생3</span>
                                </div>
                            </a>
                            <a href="#none" class="swiper-slide">
                                <div class="imgWrap">
                                    <div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                </div>
                                <div class="textWrap">
                                    <p>1개월 7.0달성</p>
                                    <span>윤*진 수강생4</span>
                                </div>
                            </a>
                            <a href="#none" class="swiper-slide">
                                <div class="imgWrap">
                                    <div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                </div>
                                <div class="textWrap">
                                    <p>1개월 7.0달성</p>
                                    <span>윤*진 수강생5</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </article>

            <!-- 성적표 인증 합격후기 더보기 -->
            <div class="moreBtnWrap tab_pc-btn" data-page="acceptance">
                <button type="button" class="moreBtn">더보기</button>
            </div>

            <!-- 강의 추천 -->
            @if ($recommends->count() > 2)
            <article class="recommendation">
                <div class="max-width">
                    <div class="titleWrap">
                        <p class="title">강의 추천</p>
                    </div>
                    <div class="slide">
                        <div class="navigation">
                            <button type="button" class="prev navi"><span>이전</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g transform="translate(-26 72) rotate(-90)"><rect width="32" height="32" rx="16" transform="translate(40 26)" fill="none"/><path d="M51.5,44,56,39.5,60.5,44" fill="none" stroke="#40404e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg></button>
                            <button type="button" class="next navi"><span>다음</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g transform="translate(58 -40) rotate(90)"><rect width="32" height="32" rx="16" transform="translate(40 26)" fill="none"/><path d="M51.5,44,56,39.5,60.5,44" fill="none" stroke="#40404e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg></button>
                        </div>
                        <div class="swiper-wrapper">
                            @foreach ($recommends as $rp)
                            <div class="swiper-slide">
                                <a href="{{ route('product', ['service' => $service, 'product_id' => $rp->id]) }}">
                                    <div class="imgWrap"><figure style="background-image: url('{{ $product->thumbnail }}');"></figure></div>
                                    <div class="textWrap ellipsis_2">{{ $product->name }}</div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </article>
            @endif
        @endif
        </div>

        <!-- 간편하게 상담 신청하기 -->
        <div id="go-contact">
            <button type="button" class="btn popupOn" data-check="apply02"><span>간편하게 상담 신청하기 <figure></figure></span></button>
        </div>

        <!-- 유의사항 팝업 -->
        <div class="cautionAlert">
            <div class="alert">
                <div class="closeIcon closeBtn"></div>
                <i class="icon-e"></i>
                <p class="title">유의사항</p>
                <div class="alert-contents">
                    <div class="scrollWidth">
                        <div class="scrollWrap">
                            <div class="cautionWrap">
                                {!! $product->notes !!}
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn alert-btn closeBtn">확인</button>
            </div>
            <div class="dim-caution"></div>
        </div>
    </div>

    <!-- 어학원 > 간편하게 상담 신청하기 클릭 > 팝업 -->
    @if ($service == 'academy')
        @include("common.popup.consult" )
    @endif

    <div class="sticky-option bottom-sheet">
        <div class="registerWrap slidingWrap">
            <button type="button" class="closeBtn"><span>닫기</span></button>

            <form name="checkout" method="get" action="{{ route('checkout') }}">
                <input type="hidden" name="product_option_id" id="product_option_id" value="">

                <div class="registerInfo">
                    <div class="productTitle">
                        {{--<div class="ico-box" style="background: {{ isset($promotionFlags[$product?->promotion_flag]) ? $promotionFlags[$product?->promotion_flag] : "" }};">
                            {{ $product?->promotion_flag_word }}
                            <span class="tail"></span>
                        </div>--}}

                        <div class="flag" style="background: {{ isset($promotionFlags[$product?->promotion_flag]) ? $promotionFlags[$product?->promotion_flag] : "" }};">{{ $product?->promotion_flag_word }}</div>

                        <p>{{ $product?->name }}</p>
                    </div>

                    <div class="scrollWidth">
                        <div class="scrollWrap">
                            <div class="moduleSelect flex">
                                @php
                                    $modules = explode("|", $product->module);
                                @endphp

                                @if (count($modules) == 1)
                                    <p class="title">모듈</p>
                                    <div class="selectWrap">
                                        <label><input type="radio" name="module" value="{{ $modules[0] }}" checked><span>{{ ucfirst($modules[0]) }}</span></label>
                                    </div>
                                @else
                                    <p class="title">모듈선택</p>
                                    <div class="selectWrap">
                                        <label><input type="radio" name="module" value="academic"><span>Academic</span></label>
                                        <label><input type="radio" name="module" value="general"><span>General</span></label>
                                        @error('module')
                                        <span class="error">모듈을 선택해 주세요</span>
                                        @enderror
                                    </div>
                                @endif
                            </div>

                            @error('product_option_id')
                                <span class="error">상품을 선택해 주세요</span>
                            @enderror
                            <ul class="optionSelect">
                                @foreach($product->productOptions as $option)
                                    @php
                                        $courses = $option->courses->where('activated', 1);
                                        $courseCount = $courses->count();
                                    @endphp
                                    <li data-product-option-id="{{ $option->id }}">
                                        <div class="top">
                                            <p class="product-option-name">
                                                {{ $option->name }} ({{ $option->period }}일)
                                            </p>

                                            <div class="price">
                                                @php
                                                    $dr = explode("|", $option->discount_rate);
                                                    $discountRate = isset($dr[1]) ? $dr[1] : $dr[0];
                                                @endphp
                                                <em class="sale">{{ $discountRate ? number_format($discountRate) : 0 }}%</em>
                                                <div class="number">
                                                    <p class="before"><span>{{ number_format($option->consumer_price) }}</span>원</p>
                                                    <p class="after"><span>{{ $option->is_discounted && $option->isInDiscountPeriod() ? number_format($option->discount_price) : number_format($option->sales_price) }}</span>원</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="middle">
                                            @if ($service == 'ielts')
                                            <div class="box subject">
                                                <p>
                                                    구성강의 총 {{ $courseCount }}건
                                                    @if ($courseCount>1)({{ $courses->first()->name }} 외 {{ $courseCount - 1 }}개)@endif
                                                </p>
                                            </div>

                                            <div class="box benefit">
                                                @if ($option->feedbackPasses->where('activated', 1)->where('type', 'Basic')->count() > 0)
                                                    <p class="pencil">Basic 첨삭 {{ $option->feedbackPasses->where('activated', 1)->where('type', 'Basic')->count() }}회</p>
                                                @endif

                                                @if ($option->feedbackPasses->where('activated', 1)->where('type', 'Premium')->count() > 0)
                                                    <p class="pencil">Premium 첨삭 {{ $option->feedbackPasses->where('activated', 1)->where('type', 'Premium')->count() }}회</p>
                                                @endif

                                                @if ($option->cdtPasses->where('activated', 1)->count() > 0)
                                                    <p class="computer">CDT모의고사 풀패키지 {{ $option->cdtPasses->where('activated', 1)->count() }}회 제공</p>
                                                @endif

                                                @if ($option->etcProducts->where('activated', 1)->where('etc_product_type', '응시권')->count() > 0)
                                                    <p class="ticket">응시권 {{ $option->etcProducts->where('activated', 1)->where('etc_product_type', '응시권')->count() }}회</p>
                                                @endif
                                            </div>
                                            @endif

                                            <div class="box book">
                                                @if ($option->textbooks->where('activated', 1)->count() > 0)<p>구성 교재 총 {{ $option->textbooks->where('activated', 1)->count() }}권</p>@endif
                                                @if ($option->bonus_items)
                                                    @php
                                                        $bonus_items = explode("|", $option->bonus_items);
                                                    @endphp

                                                    @foreach ($bonus_items as $bonus)
                                                        <p>{{ isset(config("edmclass.bonus_items")[$service][$bonus]) ? config("edmclass.bonus_items")[$service][$bonus]['title'] : $bonus }}</p>
                                                    @endforeach
                                                @endif
                                            </div>

                                            @if ($service == 'ielts')
                                            <div class="box date">
                                                <p>수강시작일</p>
                                                <p>{{ now()->addDays($option->enrollment_start_day)->format('Y년 m월 d일') }} 예정</p>
                                            </div>
                                            @endif
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="resultWrap">
                    <div class="resultConfirmWrap">
                        <div class="resultPrice">
                            <div class="subject" id="productOptionName">
                                <p></p><em class="sale"></em>
                                <div class="before"></div>
                            </div>
                            <div class="flex sb">
                                <p>결제금액</p>
                                <p class="all"><span id="price"></span></p>
                            </div>
                        </div>
                        <div class="checkWrap flex">
                            <label><input type="checkbox" id="check-notes"><span>수강∙환불∙환급 등의 상품 <button type="button" class="goCautionBtn" id="cautionPopupBtn">유의사항</button type="button">을 확인했습니다.</span></label>
                        </div>
                    </div>
                    <button type="button" class="registerBtn openBtn">수강신청</button>
                    <button type="submit" class="registerBtn submitBtn">수강신청</button>
                </div>
            </form>
        </div>

        <div class="dim"></div>
    </div>
</div>
@endsection

@section($service.'-script')
    <!-- aos -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- splide -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-intersection@0.2.0/dist/js/splide-extension-intersection.min.js"></script>
    {!! resource('js/common/promotion.js') !!}

    @if ( $service == 'academy' )
    {!! resource('js/components/calendar.js') !!}
    {!! resource('js/academy/schedule.js') !!}
    <script>
        $(function() {
            setCalendar('product', { theme: 'product', indicatorView: 'tag' }, "&id=" +  $('#id').val() )
        })
    </script>
    @endif

    @error("overlay_refundable")
    <script>
        alertPopup("{{ $message }}")
    </script>
    @enderror

    <script>
        function showPopup() {
            var popupWidth = 1200;
            var popupHeight = 675;
            var popupX = Math.round(window.screenX + (window.outerWidth/2) - (popupWidth/2));
            var popupY = Math.round(window.screenY + (window.outerHeight/2) - (popupHeight/2));
            var featureWindow = "width=" + popupWidth + ", height="+popupHeight + ", left=" + popupX + ", top=" + popupY;

            return window.open('/player-popup', '영상 플레이어 팝업', featureWindow);
        }

        $(document).ready(function(){
            $('.courseBtn').each(function(){
                const $btn = $(this);

                $btn.on('click', function(e){
                    e.preventDefault();

                    $('.courseBtn').removeClass('active');
                    $btn.addClass('active');

                    const courseId = $btn.data('course-id');
                    const $textbookTarget = $('#course-textbooks-'+courseId);
                    const $teacherTarget = $('#course-teachers-'+courseId);

                    $('.academy-textbooks').hide();
                    $textbookTarget.show();

                    if ($teacherTarget.length > 0) {
                        $('.teacherWrap').show();
                        $('.academy-teachers').hide();
                        $teacherTarget.show();
                    } else {
                        $('.teacherWrap').hide();
                    }
                });
            });

            $('.courseBtn').first().click();

            // productOptions
            $('.optionSelect > li').on('click',function(){
                const $li = $(this);
                const productOptionId = $li.data("product-option-id");
                const productOptionName = $li.find('.product-option-name').text();
                const productOptionSale = $li.find('.price .sale').text();
                const priceBefore = $li.find('.price .before').text();
                const price = $li.find('.price .after').text();

                $("#product_option_id").val(productOptionId);
                $('#productOptionName p').text(productOptionName).next('.sale').text(productOptionSale).next('.before').text(priceBefore);
                $('#price').text(price);

                if ($li.hasClass("active")) {
                    $li.removeClass("active").find(".middle").slideUp(300);
                } else {
                    $li.addClass("active").find(".middle").slideDown(300);
                    $li.closest("li").siblings().removeClass("active").find(".middle").slideUp(300);
                }
            });

            @if (! empty($option_id))
                $('li[data-product-option-id="{{ $option_id }}"]').click();;
            @endif

            // 교재안내
            var textbookGuide = new Swiper("article.textbookGuide .slide", {
                slidesPerView: '2.3',
                slidesPerGroup: 1,
                spaceBetween: 0,
                simulateTouch: true,
                loop: true,
                centeredSlides: true,
                speed: 700,
                touchRatio: 0.2,
                threshold: 5,
                autoHeight: false,
                breakpoints: {
                    576: {
                        loop: false,
                    }
                },
            });

            // 강사진
            @if ($service == 'ielts')
                var teacherWrap = new Swiper("article.teacherWrap .slide", {
                    slidesPerView: '2.3',
                    slidesPerGroup: 1,
                    spaceBetween: 0,
                    simulateTouch: true,
                    touchRatio: 0.2,
                    threshold: 5,
                    loop: true,
                    centeredSlides: true,
                    speed: 700,
                    breakpoints: {
                        576: {
                            loop: false,
                        }
                    },
                    on: {
                        init: function(){
                            let teacherNumber = $('.teacherWrap .swiper-slide[data-swiper-slide-index="' + this.realIndex + '"]').text();
                            $('.teacherWrap .teacherName').text(teacherNumber);
                        },
                        slideChange : function(){
                            let teacherNumber = $('.teacherWrap .swiper-slide[data-swiper-slide-index="' + this.realIndex + '"]').text();
                            $('.teacherWrap .teacherName').text(teacherNumber);
                        },
                    },
                });
            @else

            $("article.teacherWrap .academy-teachers").each(function(){
                const $obj = $(this);
                const slideElement = $obj.find(".slide")[0];
                let _loopState = null;

                // 강사진 4명 이하일 때
                if($obj.css('display') == 'block'){
                    let _thisObj = $(this);
                    console.log($(this).find('.info-box .info').length)
                    if($(this).find('.info-box .info').length < 5){
                        _loopState = false;
                        $(this).find('.slide').addClass('noneSlide');
                        $(this).find('.slide .swiper-slide').on('click',function(){
                            let _thisT_inx =$(this).index();
                            $(this).addClass('swiper-slide-active').siblings().removeClass('swiper-slide-active');
                            _thisObj.find('.info-box .info').eq(_thisT_inx).show().siblings().hide();
                            _thisObj.find('.teacher-info .boxWrap').eq(_thisT_inx).show().siblings().hide();
                        });
                    }else{
                        _loopState = true;
                    }
                }

                var teacherWrap = new Swiper(slideElement, {
                    slidesPerView: 'auto',
                    slidesPerGroup: 1,
                    spaceBetween: 0,
                    simulateTouch: true,
                    touchRatio: 0.2,
                    threshold: 5,
                    loop: _loopState,
                    loopedSlides: 1,
                    centeredSlides: true,
                    speed: 700,
                    navigation: {
                        nextEl: 'article.teacherWrap .slide .nav-next',
                        prevEl: 'article.teacherWrap .slide .nav-prev',
                    },
                    breakpoints: {
                        576: {
                            slidesPerView: '3',
                            centeredSlides: true,
                        },
                        1200: {
                            slidesPerView: '4',
                            spaceBetween: '36',
                            centeredSlides: false,
                        },
                    },
                    on: {
                        init: function(){
                            $obj.find(".info").first().show();
                            $obj.find(".boxWrap").first().show();
                            $obj.find(".boxWrap").first().find('.box').addClass('active');
                        },
                        slideChangeTransitionStart : function(){
                            let index = this.realIndex;
                            $obj.find(".info").hide();
                            $obj.find(".info").eq(index).show();

                            $obj.find(".boxWrap").hide();
                            $obj.find(".boxWrap").eq(index).show();
                        },
                    },
                });



            });

            $('.teacherWrap .teacher-info .box .title').on('click',function(){
                if($(this).parent().hasClass('active')){
                    console.log('1');
                    $(this).parent().removeClass('active').find('.textWrap').stop().slideUp(300);
                }else{
                    console.log('2');
                    $(this).parent().addClass('active').find('.textWrap').stop().slideDown(300);
                }
            });
            @endif

            // 성적표 인증 합격후기
            var acceptance = new Swiper("article.acceptance .slide", {
                slidesPerView: '2.3',
                slidesPerGroup: 1,
                spaceBetween: 0,
                simulateTouch: true,
                loop: true,
                centeredSlides: true,
                speed: 700,
                touchRatio: 0.2,
                threshold: 5,
                autoHeight: false,
                breakpoints: {
                    576: {
                        loop: false,
                    }
                },
            });

            // 강의 추천
            var recommendation = new Swiper("article.recommendation .slide", {
                slidesPerView: '1.45',
                slidesPerGroup: 1,
                spaceBetween: 16,
                simulateTouch: true,
                loop: true,
                slidesOffsetBefore : 16,
                longSwipes: false,
                speed: 700,
                touchRatio: 0.2,
                threshold: 5,
                navigation: {
                    nextEl: '.recommendation .slide .navigation .next',
                    prevEl: '.recommendation .slide .navigation .prev',
                },
                breakpoints: {
                    576: {
                        slidesPerView: '2.9',
                    },
                    745: {
                        slidesPerView: '2.4',
                        slidesOffsetBefore : 0,
                    }
                },
            });

            // 강좌목록
            $('.option-list-title').on('click', function () {
                $(this).toggleClass('on').parents('.option-list-wrap').find('.option-list').stop().slideToggle(300);
                $(this).parents('.option-list-wrap').siblings('.option-list-wrap').children('.option-list-title').removeClass('on').parents('.option-list-wrap').find('.option-list').stop().slideUp(300);
            });

            $('form[name="checkout"]').on('submit', function(){
                if ($('input[name="module"]:checked').length === 0) {
                    alertPopup("모듈을 선택해 주세요");
                    return false;
                }

                if ($('#product_option_id').val() == '') {
                    alertPopup("상품을 선택해 주세요");
                    return false;
                }

                if (!$('#check-notes').prop('checked')) {
                    alertPopup("수강/환불/환급 등 상품 유의사항에 대하여 확인해 주세요");
                    return false;
                }

                return true;
            });
        });
    </script>
@endsection