@extends('academy.layout')

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

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

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

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

            <!-- 배너 -->
            <div class="mainBanner max-width">
                <!--
                    관리자 이미지 등록
                    :: mobile, pc 등록
                    :: 이미지 alt 설명글 작성도 필요함
                -->
                <picture class="banner">
                    <source srcset="{{ env('AWS_S3_IMG_URL') }}/common/promotion/payback_banner_pc.jpg" media="(min-width: 1200px)"> <!--width : 792px 고정크기 -->
                    <img src="{{ env('AWS_S3_IMG_URL') }}/common/promotion/payback_banner.jpg" alt="공부한 만큼 돌려받는 페이백! 수강료 200% 환급반"> <!--width : 712px 크기여야 깨지지 않음 (최대) -->
                </picture>
            </div>

            <!-- 수강생 혜택 -->
            <article class="studentBenefit">
                <div class="max-width">
                    <p class="title">수강생 ffddd혜택</p>
                    <ul class="dotList">
                        <li>수업 <em>녹화영상 다시보기</em>로 복습 가능 (현장 강의는 촬영일 포함 7일간 제공됩니다. <br class="tab_pc-br">예기치 못한 기계 오류 발생 시, 시청에 일부 제한이 있을 수 있습니다.)</li>
                        <li><em>시험센터 모의고사 월 2회</em> 무료 제공및 풀이 강의, Writing 코멘트 제공</li>
                        <li>145강 이상 시험대비 특강 제공 (온/오프라인)</li>
                    </ul>
                </div>
            </article>

            <div class="page-nav">
                <div class="max-width flex">
                    <button type="button" class="active">상세정보</button>
                    <button type="button" class="cautionBtn">유의사항</button>
                </div>
            </div>


            <div class="promotion-moreArea" data-more="true">
                <div class="promotionContents">
                    <div class="changePage detailPage">
                        <!--
                            html로 들어가는 영역
                        -->
                        @yield("promotion-contents")
                    </div>
                    <div class="changePage cautionPage">
                        <article>
                            <div class="max-width">
                                유의사항 내용
                                <!-- 상품마다 변경되며, 관리자에서 불러올 예정 -->
                            </div>
                        </article>
                    </div>
                    <div class="changePage coursePage">
                        강좌목록
                        <!-- 관리자에 등록된 강좌목록이 노출됩니다.  -->
                    </div>
                </div>
            </div>

            <!-- 상세페이지 더보기 -->
            <div class="moreBtnWrap" data-page="promotion-moreArea">
                <button type="button" class="moreBtn">상세페이지 더보기</button>
            </div>

            <!-- 강의일정 -->
            <article class="lectureSchedule">
                <div class="max-width">
                    <div class="tabMenu">
                        <div class="scroll">
                            <a href="" class="active">밀착 관리반12</a> <!-- 활성화된 메뉴 active class 추가 -->
                            <a href="">밀착 관리반12</a>
                            <a href="">밀착 관리반12</a>
                        </div>
                    </div>
                    <div class="titleWrap">
                        <p class="title">강의일정</p>
                    </div>
                    <div class="calendarWrap">
                        <!-- 달력
                            class update 추가 : 일정 미정(업데이트 중입니다)
                        -->
                        <div class="calendar update">
                            <!-- 스케줄이 들어갑니다. -->
                            <p class="notice">일정 미정(업데이트 중입니다)</p>
                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/academy/promotion/test-calendar.png" style="width: 100%; height: 100%;"> <!-- 퍼블리싱 확인용으로만 사용되는 이미지입니다. -->
                        </div>

                        <!-- 안내 -->
                        <div class="info flex">
                            <div class="box"><span style="background-color: #C7F2FF;"></span>수업일(오후2시)</div>
                            <div class="box"><span style="background-color: #FFDEEA;"></span>모의고사</div>
                            <div class="box"><span style="background-color: #9FF8A8;"></span>시험일</div>
                        </div>
                    </div>
                </div>
            </article>


            <!-- 교재안내 -->
            <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">
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 1</p></div> <!-- p 태그에 교재 이름이 들어갑니다. -->
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 2</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 3</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 4</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 5</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 6</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 7</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 8</p></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="imgWrap">
                                    <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
                                </div>
                                <div class="textWrap"><p>아이엘츠 입문 Build-up 9</p></div>
                            </div>
                        </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="flex sb otherWrap">
                        <div class="info">
                            <div class="flex">
                                <p class="w">Writing</p>
                                <p class="s">Speaking</p>
                            </div>
                            <div class="teacherName">
                                <p></p>
                            </div>
                        </div>
                        <div class="slide">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="imgWrap">
                                        <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                    </div>
                                    <div class="textWrap">
                                        <p>헤더1</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgWrap">
                                        <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                    </div>
                                    <div class="textWrap">
                                        <p>다니엘2</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgWrap">
                                        <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                    </div>
                                    <div class="textWrap">
                                        <p>엘리자베스</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgWrap">
                                        <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                    </div>
                                    <div class="textWrap">
                                        <p>헤더2</p>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgWrap">
                                        <figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
                                    </div>
                                    <div class="textWrap">
                                        <p>헤더3</p>
                                    </div>
                                </div>
                            </div>
                            <div class="pc-nav nav-btn nav-prev"><button type="button"><span>이전</span></button></div>
                            <div class="pc-nav nav-btn nav-next"><button type="button"><span>다음</span></button></div>
                        </div>
                    </div>

                    <div class="teacher-info">
                        <div class="boxWrap">
                            <div class="box active">
                                <button type="button" class="title">Listening</button>
                                <div class="textWrap">
                                    <p>IELTS Listening 문제 유형을 학습합니다.</p>
                                    <p>IELTS Listening 접근 3단계를 통한 정답 개수 늘리기</p>
                                    <p>IELTS Listening 에서 많이 실수하는 부분 개선</p>
                                </div>
                            </div>
                            <div class="box">
                                <button type="button" class="title">Reading</button>
                                <div class="textWrap">
                                    <p>내용 1</p>
                                    <p>내용 1</p>
                                </div>
                            </div>
                        </div>
                        <div class="boxWrap">
                            <div class="box active">
                                <button type="button" class="title">Listening</button>
                                <div class="textWrap">
                                    <p>설명 2</p>
                                </div>
                            </div>
                            <div class="box">
                                <button type="button" class="title">Reading</button>
                                <div class="textWrap">
                                    <p>내용 2</p>
                                </div>
                            </div>
                        </div>
                        <div class="boxWrap">
                            <div class="box active">
                                <button type="button" class="title">Listening</button>
                                <div class="textWrap">
                                    <p>설명 3</p>
                                </div>
                            </div>
                            <div class="box">
                                <button type="button" class="title">Reading</button>
                                <div class="textWrap">
                                    <p>내용3</p>
                                </div>
                            </div>
                        </div>
                        <div class="boxWrap">
                            <div class="box active">
                                <button type="button" class="title">Listening</button>
                                <div class="textWrap">
                                    <p>설명 4</p>
                                    <p>설명 4</p>
                                </div>
                            </div>
                            <div class="box">
                                <button type="button" class="title">Reading</button>
                                <div class="textWrap">
                                    <p>내용 4</p>
                                    <p>내용 4</p>
                                </div>
                            </div>
                        </div>
                        <div class="boxWrap">
                            <div class="box active">
                                <button type="button" class="title">Listening</button>
                                <div class="textWrap">
                                    <p>설명 5</p>
                                    <p>설명 5</p>
                                    <p>설명 5</p>
                                </div>
                            </div>
                            <div class="box">
                                <button type="button" class="title">Reading</button>
                                <div class="textWrap">
                                    <p>내용 5</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>

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

                <form action="">
                    <div class="registerInfo">
                        <div class="productTitle">
                            <div class="ico-box" style="background: linear-gradient(90deg, #FF5448 0%, #FF4063 100%);">
                                텍스트관리
                                <span class="tail"></span>
                            </div>

                            <p>전강좌 + 응시권패스</p>
                        </div>

                        <div class="moduleSelect flex">
                            <p class="title">모듈선택 </p>
                            <div class="selectWrap">
                                <label><input type="radio" name="moduleSelect"><span>Acaemic </span></label>
                                <label><input type="radio" name="moduleSelect"><span>General</span></label>
                            </div>
                        </div>

                        <ul class="optionSelect scrollWrap">
                            <li class="active">
                                <div class="top">
                                    <p>Final! One-stop academy(180일)</p>
                                    <div class="price">
                                        <em class="sale">47%</em>
                                        <div class="number">
                                            <p class="after"><span>1,160,000</span>원</p>
                                            <p class="before"><span>1,260,000</span> 원</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="middle">
                                    <div class="box subject">
                                        <p><span>%강좌명1%</span><span>%강좌명2%</span><span>%강좌명3%</span></p>
                                        <p>구성강의 총 N건 (%강좌명% 외 N개)</p>
                                    </div>
                                    <div class="box benefit">
                                        <p class="pencil">Basic 첨삭 5회</p>
                                        <p class="pencil">Premium 첨삭 20회</p>
                                        <p class="computer">CDT모의고사 풀패키지 2회 제공</p>
                                        <p class="ticket">응시권 %상품명% N회</p>
                                    </div>
                                    <div class="box book">
                                        <p>구성 교재 총 N권</p>
                                        <p>노란단어 (종강일마다 지급)</p>
                                        <p>W단어 (결제일 지급)</p>
                                    </div>
                                    <div class="box date">
                                        <p>수강시작일</p>
                                        <p>2024년 10월 11일 예정</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="top">
                                    <p>Final! One-stop academy(180일)</p>
                                    <div class="price">
                                        <em class="sale">47%</em>
                                        <div class="number">
                                            <p class="after"><span>1,160,000</span>원</p>
                                            <p class="before"><span>1,260,000</span> 원</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="middle">
                                    <div class="box subject">
                                        <p><span>%강좌명1%</span><span>%강좌명2%</span><span>%강좌명3%</span></p>
                                        <p>구성강의 총 N건 (%강좌명% 외 N개)</p>
                                    </div>
                                    <div class="box benefit">
                                        <p class="pencil">Basic 첨삭 5회</p>
                                        <p class="pencil">Premium 첨삭 20회</p>
                                        <p class="computer">CDT모의고사 풀패키지 2회 제공</p>
                                        <p class="ticket">응시권 %상품명% N회</p>
                                    </div>
                                    <div class="box book">
                                        <p>구성 교재 총 N권</p>
                                        <p>노란단어 (종강일마다 지급)</p>
                                        <p>W단어 (결제일 지급)</p>
                                    </div>
                                    <div class="box date">
                                        <p>수강시작일</p>
                                        <p>2024년 10월 11일 예정</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="top">
                                    <p>Final! One-stop academy(180일)</p>
                                    <div class="price">
                                        <em class="sale">47%</em>
                                        <div class="number">
                                            <p class="after"><span>1,160,000</span>원</p>
                                            <p class="before"><span>1,260,000</span> 원</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="middle">
                                    <div class="box subject">
                                        <p><span>%강좌명1%</span><span>%강좌명2%</span><span>%강좌명3%</span></p>
                                        <p>구성강의 총 N건 (%강좌명% 외 N개)</p>
                                    </div>
                                    <div class="box benefit">
                                        <p class="pencil">Basic 첨삭 5회</p>
                                        <p class="pencil">Premium 첨삭 20회</p>
                                        <p class="computer">CDT모의고사 풀패키지 2회 제공</p>
                                        <p class="ticket">응시권 %상품명% N회</p>
                                    </div>
                                    <div class="box book">
                                        <p>구성 교재 총 N권</p>
                                        <p>노란단어 (종강일마다 지급)</p>
                                        <p>W단어 (결제일 지급)</p>
                                    </div>
                                    <div class="box date">
                                        <p>수강시작일</p>
                                        <p>2024년 10월 11일 예정</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="resultWrap">
                        <div class="checkWrap flex">
                            <label><input type="checkbox"><span>수강/환불/환급 등 상품 유의사항에 대하여 확인했습니다.</span></label>
                            <button type="button" class="goCautionBtn">유의사항보기</button>
                            <!--
                                class="goCautionBtn" 클릭
                                => pc : 좌측 탭 메뉴중 '유의사항' 탭이 활성화됩니다.
                                => mo : 옵션창이 닫히며 '유의사항' 탭이 활성화됩니다. (class="sticky-option"에서 active 클래스가 제거되면 옵션이 닫힘)
                            -->
                        </div>

                        <div class="resultPrice">
                            <div class="subject">%옵션명1%</div> <!-- 선택된 강좌의 이름이 들어갑니다. -->
                            <div class="flex sb">
                                <p>결제금액</p>
                                <p class="all"><em>1,160,000원</em></p>
                            </div>
                        </div>
                        <button type="button" class="registerBtn openBtn">수강신청</button> <!-- 옵션을 열기위한 가짜 버튼 -->
                        <a href="#none" class="registerBtn submitBtn">수강신청</a> <!-- 진짜 수강신청 버튼 -->
                    </div>
                </form>
            </div>

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

@section('academy-script')
    <script>
        $(function(){
            // 탭 메뉴
            $('.promotionPage .page-nav button').on('click',function(){
                $(this).addClass('active').siblings().removeClass('active');
                $('.promotionContents .changePage').eq($(this).index()).show().siblings().hide();
                if($(this).index() != '0'){
                    $('.moreBtnWrap[data-page="promotion-moreArea"]').hide();
                }else{
                    $('.moreBtnWrap[data-page="promotion-moreArea"]').show();
                }
            });

            // 상세페이지 더보기
            $('.moreBtnWrap .moreBtn').on('click',function(e){
                $(this).parent().hide();
                let thisData = $(e.target.parentElement).data('page');
                $("." + thisData).addClass('active').find('.swiper-slide').css({'display':'block'});
            });


            // default : 첫번째 옵션은 열려있는 상태
            $('.optionSelect > li').eq(0).addClass('active').find('.middle').show();
            $('.optionSelect > li').on('click',function(){
                $(this).addClass('active').find('.middle').stop().slideDown(300).closest('li').siblings().removeClass('active').find('.middle').stop().slideUp(300);
            });

            // 교재안내
            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,
                    }
                },
            });

            // 강사진
            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,
                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(){
                        let teacherNumber = $('.teacherWrap .swiper-slide[data-swiper-slide-index="' + this.realIndex + '"]').text();
                        $('.teacherWrap .teacherName').text(teacherNumber);
                        $('article.teacherWrap .teacher-info .boxWrap').eq(this.realIndex).show().siblings().hide();
                    },
                    slideChangeTransitionStart : function(){
                        let teacherNumber = $('.teacherWrap .swiper-slide[data-swiper-slide-index="' + this.realIndex + '"]').text();
                        $('.teacherWrap .teacherName').text(teacherNumber);
                        $('article.teacherWrap .teacher-info .boxWrap').eq(this.realIndex).show().siblings().hide();
                    },
                },
            });

            $('.teacherWrap .teacher-info .box.active').find('.textWrap').show();
            $('.teacherWrap .teacher-info .box .title').on('click',function(){
                if($(this).parent().hasClass('active')){
                    $(this).parent().removeClass('active').find('.textWrap').stop().slideUp(300);
                }else{
                    $(this).parent().addClass('active').find('.textWrap').stop().slideDown(300);
                }
            });
        });
    </script>
@endsection