@extends("academy.layout", ['service' => 'academy'])

@section("academy-css")

    {!! resource('css/academy/sub.css') !!}
    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_academy.css') !!}
@endsection



@section("academy-content")
<div class="container_m cdt">
    <div class="max-width">
        <div id="nav">
            <a href="#none" class="ico-back">뒤로가기</a>
            <h2>CDT모의고사</h2>
        </div>
        <div id="tab">
            <ul>
                <li><a href="#none">상품내역</a></li>
                <li class="on"><a href="#none">응시내역</a></li>
                <li><a href="#none">첨삭내역</a></li>
            </ul>
        </div>
        <div class="cdt-filter">
            <p class="txt">응시하기, 응시결과 상세 보기는 PC(노트북)에서 이용해주시기 바랍니다. <br>모바일에서는 응시 과목에 대한 점수만 확인하실 수 있습니다.</p>
            <div class="filter">
                <div class="dropDownMenu type2">
                    <div class="selectBox">
                        <button type="button" class="label" data-selected="CDT 세트 선택" data-default="CDT 세트 선택">CDT 세트 선택</button>
                        <div class="optionListWrap">
                            <div class="scrollWidth">
                                <ul class="optionList scrollWrap">
                                    <!-- 활성화 메뉴 active class 추가 -->
                                    <li class="optionItem"><button type="button" data-account="5.5">%상품명% %옵션명%</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 1">텍스트 ~~~ 1</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 2">텍스트 ~~~ 2</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 3">텍스트 ~~~ 3</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 4">텍스트 ~~~ 4</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 5">텍스트 ~~~ 5</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 6">텍스트 ~~~ 6</button></li>
                                    <li class="optionItem"><button type="button" data-account="텍스트 ~~~ 7">텍스트 ~~~ 7</button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-gray">
        <div class="max-width">
            <h3>CDT 모의고사 풀패키지</h3>
            <ul class="cdt-history">
                <li id="noData">
                    <div class="flex"><p>응시 가능한 CDT가 없습니다.</p></div>
                </li>
                <li>
                    <div class="correct-detail-wrap">
                        <p class="title">CDT 문제명 제목이 들어갑니다. 들어갑니다.</p>
                        <h4>
                            <i class="ico-score"></i>
                            Overall <strong>9.0</strong>
                        </h4>
                        <div class="score-wrap">
                            <div class="box l">
                                <p class="txt">Listening</p>
                                <p class="score">9.0</p>
                            </div>
                            <div class="box r">
                                <p class="txt">Reading</p>
                                <p class="score">9.0</p>
                            </div>
                            <div class="box w">
                                <p class="txt">Writing</p>
                                <p class="score">9.0</p>
                            </div>
                            <div class="box s">
                                <p class="txt">Speaking</p>
                                <p class="score">9.0</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="correct-detail-wrap">
                        <p class="title">CDT 문제명 제목이 들어갑니다. 들어갑니다.</p>
                        <h4>
                            <i class="ico-score"></i>
                            Overall <strong>9.0</strong>
                        </h4>
                        <div class="score-wrap">
                            <div class="box l">
                                <p class="txt">Listening</p>
                                <p class="score">9.0</p>
                            </div>
                            <div class="box r btnBox">
                                <p class="txt">Reading</p>
                                <div class="buttonWrap"><a href="">첨삭신청</a></div>
                            </div>
                            <div class="box w btnBox">
                                <p class="txt">Writing</p>
                                <!-- 답변 대기 상태에서는 a태그에 class="waiting"가 추가됩니다. -->
                                <div class="buttonWrap"><a href="" class="waiting">답변대기</a></div>
                            </div>
                            <div class="box s btnBox">
                                <p class="txt">Speaking</p>
                                <div class="buttonWrap"><a href="">첨삭신청</a></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</div>
<!-- alert -->
<div class="alert-wrap" id="alert">
    <a href="#none" class="ico-close"></a>
    <i class="ico-alert-icon1"></i>
    <div class="alert-contents">
        첨삭 신청을 하시겠습니까?<br>
        신청 이후에는 수정 및 삭제가 불가합니다.
    </div>
    <div class="alert-btn">
        <a href="#none" class="button">확인</a>
        <a href="#none" class="button error">취소</a>
    </div>
</div>
@endsection



@section("academy-script")

    <script>
        $(document).ready(function () {
            // 팝업 열기
            $(document).on("click", ".info-pop", function (e){
                var target = $(this).attr("data-info");
                $('#'+target).addClass("on");
            });
            // 외부영역 클릭 시 팝업 닫기
            $(document).mouseup(function (e){
            var LayerPopup = $(".info-popup-wrap");
                if(LayerPopup.has(e.target).length === 0){
                    LayerPopup.removeClass("on");
                }
            });
            // 팝업 열기
            $(document).on("click", ".close-info", function (e){
                var targetId = $(e.target).closest('.info-popup-wrap').attr('id');
                $('#'+targetId).toggleClass('on')
            });
            // 팝업 닫기
            $(document).on("click", ".ico-close", function (e){
                $(e.target).closest('.correct-popup-wrap').hide()
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('a[data-alert]').on('click', function () {
                var thisAlert = $(this).attr('data-alert');
                $('#' + thisAlert).addClass('on')
            });
            $('.alert-wrap .ico-close').on('click', function () {
                $(this).parent('.alert-wrap').removeClass('on')
            });
            $('.alert-btn .button').on('click', function () {
                $(this).closest('.alert-wrap').removeClass('on')
            });
        });
    </script>
@endsection