@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">

    <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>
                <a href="#none">응시내역</a>
            </li>
            <li class="on">
                <a href="#none">첨삭내역</a>
            </li>
        </ul>
    </div>
    <div id="container" class="bg-gray">
        <ul class="product-list">
            <li>
                <div class="title">
                    <div>
                        <p class="date">24.03.25(월)</p>
                        <dl class="badge">
                            <dd class="bg-red">Premium</dd>
                            <dd class="normal"><strong>3</strong>회차/40회</dd>
                        </dl>
                        <h4>첨삭명이 들어갑니다.첨삭명이 들어갑니다.갑니다.</h4>
                    </div>
                </div>
                <div class="detail correct mt4">
                    <dl>
                        <dt>첨삭과목</dt>
                        <dd>- Writing</dd>
                    </dl>
                    <dl>
                        <dt>첨삭타입</dt>
                        <dd>- Task 1</dd>
                    </dl>
                </div>
                <a href="#none" class="btn-go disabled">
                    답변대기
                </a>
            </li>
            <li>
                <div class="title">
                    <div>
                        <p class="date">24.03.25(월)</p>
                        <dl class="badge">
                            <dd class="bg-blue">Basic</dd>
                            <dd class="normal"><strong>32</strong>회차/40회</dd>
                        </dl>
                        <h4>첨삭명이 들어갑니다.첨삭명이 들어갑니다.갑니다.</h4>
                    </div>
                </div>
                <div class="detail correct mt4">
                    <dl>
                        <dt>첨삭과목</dt>
                        <dd>- Speaking</dd>
                    </dl>
                    <dl>
                        <dt>첨삭타입</dt>
                        <dd>- Task 1</dd>
                    </dl>
                </div>
                <a href="#none" class="btn-go">
                    첨삭보기
                </a>
            </li>
        </ul>
    </div>
    <div id="correct01" class="correct-popup-wrap">
        <div class="correct-popup-header">
            <a href="#none" class="ico-back">뒤로가기</a>
            <h2>
                <span>첨삭 내역</span>
                <strong>첨삭 피드백</strong>
            </h2>
            <a href="#none" class="ico-close">닫기</a>
        </div>
        <div class="correct-popup-container">
            <div class="correct-popup-contents">
                <!-- cdt w -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Task Achievement
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Cohesion & Coherence</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <h3>
                        첨삭 내용
                    </h3>
                    <h5>
                        <strong>Writing 1</strong>
                    </h5>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                    <h5>
                        <strong>Writing 2</strong>
                    </h5>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- // -->
                <!-- basic s -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Fluency
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Pronunciation</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <div class="speaking-textarea">
                        <div class="swiper-pagination3"></div>
                        <div class="swiper skSwiper3">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                            </div>
                        </div>
                        <script>
                            var bullet = ['Part 1', 'Part 2', 'Part 3'];
                            var swiper = new Swiper(".skSwiper3", {
                                pagination: {
                                    el: ".swiper-pagination3",
                                    clickable: true,
                                    renderBullet: function (index, className) {
                                        return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                                    }
                                },
                            });
                        </script>
                    </div>
                </div>
                <!-- // -->
                <div class="correct-detail-wrap">
                    <div class="cmt-wrap">
                        <div class="cmt-write">
                            <textarea name="" id="" placeholder="내용을 입력해주세요."></textarea>
                            <button>등록</button>
                        </div>
                        <div class="cmt-view">
                            <ul>
                                <!-- depth 1 cmt -->
                                <li>
                                    <div class="cmt-view-wrap">
                                        <div class="cmt-info">
                                            <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile_edm.svg);"></i>
                                            <strong>edm아이엘츠</strong>
                                            <span>2020-12-31 00:09:51</span>
                                        </div>
                                        <div class="cmt-contents">
                                            메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                        </div>
                                        <div class="cmt-button">
                                            <a href="#none">답글</a>
                                            <a href="#none">답글 1개 숨기기</a>
                                        </div>
                                        <a href="#none" class="ico-delete"></a>
                                    </div>
                                    <!-- depth 2 cmt -->
                                    <ul class="depth">
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                    </ul>
                                </li>
                                <!-- depth 1 cmt -->
                                <li>
                                    <div class="cmt-view-wrap">
                                        <div class="cmt-info">
                                            <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile_edm.svg);"></i>
                                            <strong>edm아이엘츠</strong>
                                            <span>2020-12-31 00:09:51</span>
                                        </div>
                                        <div class="cmt-contents">
                                            메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                        </div>
                                        <div class="cmt-button">
                                            <a href="#none">답글</a>
                                            <a href="#none">답글 1개 숨기기</a>
                                        </div>
                                        <a href="#none" class="ico-delete"></a>
                                    </div>
                                    <!-- depth 2 cmt -->
                                    <ul class="depth">
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="info01" class="info-popup-wrap">
                <div class="info-popup height-auto">
                    <a href="#none" class="close-info">열기</a>
                    <h3>
                        <i class="ico-pencil"></i>
                        내답변 보기
                    </h3>
                    <div class="overflow-wrap">
                        <div class="bg-skyblue">
                            <h4>Topic 1</h4>
                            <p>The charts below show the levels of participation in education and science in developing and industrialised ountries in 1980 and 1990. Summarise the information by information by information by information by</p>
                        </div>
                        <img src="https://placehold.co/328x212" alt="">
                        <h3>
                            <i class="ico-pencil"></i>
                            답변내용
                        </h3>
                        <p>
                            The charts below show the levels of participation in education and science in developing and industrialised countries in 1980 and 1990. Summarise the information by selecting and reporting the main features and make comparisons where relevant. Write at least 150 words.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </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>
@endsection