@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}

    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_ielts.css') !!}
    {!! resource('css/common/nice-select-mo.css') !!}
@endsection



@section("ielts-content")
<div class="container_m">

    <div id="nav">
        <a href="#none" class="ico-back">뒤로가기</a>
        <h2>첨삭학습</h2>
    </div>
    <div id="tab">
        <ul>
            <li class="on">
                <a href="#none">첨삭 등록</a>
            </li>
            <li>
                <a href="#none">첨삭 내역</a>
            </li>
            <li>
                <a href="#none">임시저장</a>
            </li>
        </ul>
    </div>
    <div id="container" class="bg-gray">
        <div class="filter">
            <select class="select-option wide" name="" id="" required>
                <option value="" disabled selected>첨삭 상품 선택</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30" correct="첨삭명첨삭명첨삭명첨삭명첨삭명첨삭명삭명">%상품명% %옵션명%</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30" correct="첨삭명첨삭명첨삭명첨삭명첨삭명첨삭명삭명">%상품명% %옵션명%</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30" correct="첨삭명첨삭명첨삭명첨삭명첨삭명첨삭명삭명">%상품명% %옵션명%</option>
                <option value="" date="수강기간 : 2024.03.19~24.09.30" correct="첨삭명첨삭명첨삭명첨삭명첨삭명첨삭명삭명">%상품명% %옵션명%</option>
            </select>
        </div>
        <ul class="product-list">
            <li>
                <div class="title">
                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-correct-pr.svg" alt="" class="ml4">
                    <div>
                        <dl class="badge">
                            <dd class="bg-red">Premium</dd>
                        </dl>
                        <h4>N개월 알짜 <span>옵션명이 들어갑니다.</span></h4>
                        <p>첨삭명이 들어갑니다.</p>
                        <p class="date">이용기간 24.03.14~24.06.30</p>
                    </div>
                </div>
                <div class="detail correct">
                    <dl>
                        <dt>총 첨삭 횟수</dt>
                        <dd>30일</dd>
                    </dl>
                    <dl>
                        <dt>잔여 첨삭 횟수</dt>
                        <dd class="red">10회<span>(20회소진)</span></dd>
                    </dl>
                    <dl class="w100">
                        <dt>미이용 차감일(등록주기)</dt>
                        <dd>7일</dd>
                    </dl>
                </div>
                <a href="#none" class="btn-go">
                    첨삭등록
                </a>
            </li>
            <li>
                <div class="title">
                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-correct-bs.svg" alt="" class="ml4">
                    <div>
                        <dl class="badge">
                            <dd class="bg-blue">Basic</dd>
                        </dl>
                        <h4>N개월 알짜 <span>옵션명이 들어갑니다.</span></h4>
                        <p>첨삭명이 들어갑니다.</p>
                        <p class="date">이용기간 24.03.14~24.06.30</p>
                    </div>
                </div>
                <div class="detail correct">
                    <dl>
                        <dt>총 첨삭 횟수</dt>
                        <dd>무제한</dd>
                    </dl>
                    <dl>
                        <dt>잔여 첨삭 횟수</dt>
                        <dd>무제한</dd>
                    </dl>
                    <dl class="w100">
                        <dt>미이용 차감일(등록주기)</dt>
                        <dd>7일</dd>
                    </dl>
                </div>
                <a href="#none" class="btn-go">
                    첨삭등록
                </a>
            </li>
        </ul>
        <a href="#none" class="info-pop" data-info="info01">
            매주 첨삭, 무제한 첨삭, 모두의 첨삭은 어떻게 다른가요?
        </a>
    </div>
    <div id="info01" class="info-popup-wrap">
        <div class="info-popup">
            <a href="#none" class="close-info">닫기</a>
            <ul class="correct-info">
                <li>
                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-correct-01.svg" alt="">
                    <div>
                        <strong>매주첨삭</strong>
                        <p>수강일로부터 7일에 한 번씩 가능</p>
                        <p>기간 내 미등록 시 해당 회차는 자동소멸</p>
                        <p>Premium 서비스 불포함</p>
                    </div>
                </li>
                <li>
                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-correct-02.svg" alt="">
                    <div>
                        <strong>무제한 첨삭</strong>
                        <p>수강 기간 내 무제한 첨삭 등록</p>
                        <p>Premium 서비스 불포함</p>
                    </div>
                </li>
                <li>
                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-correct-03.svg" alt="">
                    <div>
                        <strong>모두의 첨삭</strong>
                        <p>등록주기 제한 없이 부여된 횟수만큼 수강 기간 내 사용 가능</p>
                        <p>Premium 서비스 포함</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="correct01" class="correct-popup-wrap">
        <div class="correct-popup-header">
            <h2>
                <span>첨삭 작성</span>
                <strong>기본 옵션 선택</strong>
            </h2>
            <a href="#none" class="ico-close">닫기</a>
        </div>
        <div class="correct-popup-container">
            <div class="correct-popup-button">
                <a href="#none" class="btn-go">다음</a>
            </div>
            <div class="correct-popup-contents">
                <ul class="border-list">
                    <li>
                        <dl>
                            <dt>모듈 선택</dt>
                            <dd>
                                <input type="radio" id="module01" name="module">
                                <label for="module01">Academic</label>
                            </dd>
                            <dd>
                                <input type="radio" id="module02" name="module">
                                <label for="module02">General</label>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>과목 선택</dt>
                            <dd>
                                <input type="radio" id="subject01" name="subject">
                                <label for="subject01">Writing</label>
                            </dd>
                            <dd>
                                <input type="radio" id="subject02" name="subject">
                                <label for="subject02">Speaking</label>
                            </dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>타입 선택</dt>
                            <dl class="vertical">
                                <dd>
                                    <input type="radio" id="type01" name="type">
                                    <label for="type01">Task1</label>
                                </dd>
                                <dd>
                                    <input type="radio" id="type02" name="type">
                                    <label for="type02">Task2</label>
                                </dd>
                                <dd>
                                    <input type="radio" id="type03" name="type">
                                    <label for="type03">Part 2&3</label>
                                </dd>
                            </dl>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="correct02" 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">
                <ul class="label-list">
                    <li>
                        <input type="radio" id="pattern01" name="pattern">
                        <label for="pattern01">
                            <dl>
                                <dt>Pattern 1</dt>
                                <dd>Analysing figures based on the flow of time(BAR/ LINE/ PIE/ TABLE/ MIXED)</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="pattern02" name="pattern">
                        <label for="pattern02">
                            <dl>
                                <dt>Pattern 2</dt>
                                <dd>Analysing figures based on the flow of time(BAR/ LINE/ PIE/ TABLE/ MIXED)</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="pattern03" name="pattern">
                        <label for="pattern03">
                            <dl>
                                <dt>Pattern 3</dt>
                                <dd>MAP</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="pattern04" name="pattern">
                        <label for="pattern04">
                            <dl>
                                <dt>Pattern 4</dt>
                                <dd>Process</dd>
                            </dl>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="correct03" 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">
                <ul class="label-list">
                    <li>
                        <input type="radio" id="chart01" name="chart">
                        <label for="chart01">
                            <dl>
                                <dt>Chart 1</dt>
                                <dd>BAR CHART</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="chart02" name="chart">
                        <label for="chart02">
                            <dl>
                                <dt>Chart 2</dt>
                                <dd>LINE CHART</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="chart03" name="chart">
                        <label for="chart03">
                            <dl>
                                <dt>Chart 3</dt>
                                <dd>PIE CHART</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="chart04" name="chart">
                        <label for="chart04">
                            <dl>
                                <dt>Chart 4</dt>
                                <dd>TABLE CHART</dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="chart05" name="chart">
                        <label for="chart05">
                            <dl>
                                <dt>Chart 5</dt>
                                <dd>MIXED CHART</dd>
                            </dl>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="correct04" 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-button">
                <a href="#none" class="btn-go">에세이 작성</a>
            </div>
            <div class="correct-popup-contents">
                <ul class="topic-select">
                    <li class="on">
                        <a href="#none">Topic 1</a>
                    </li>
                    <li>
                        <a href="#none">Topic 2</a>
                    </li>
                    <li>
                        <a href="#none">Topic 3</a>
                    </li>
                    <li>
                        <a href="#none">Topic 4</a>
                    </li>
                    <li>
                        <a href="#none">Topic 5</a>
                    </li>
                </ul>
                <div class="topic-wrap">
                    <div class="topic">
                        <p>Topic 1</p>
                        <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 class="topic-chart">
                        <img src="https://placehold.co/328x212" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="correct05" 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">
                <ul class="teacher-list">
                    <li>
                        <input type="radio" id="teacher01" name="teacher">
                        <label for="teacher01">
                            <dl>
                                <dt>
                                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                    <span>엘리자베스베스</span>
                                </dt>
                                <dd>
                                    <a href="#none">
                                        샘플영상
                                        <i class="ico-video"></i>
                                    </a>
                                </dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="teacher02" name="teacher">
                        <label for="teacher02">
                            <dl>
                                <dt>
                                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                    <span>엘리자베스베스</span>
                                </dt>
                                <dd>
                                    <a href="#none">
                                        샘플영상
                                        <i class="ico-video"></i>
                                    </a>
                                </dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="teacher03" name="teacher">
                        <label for="teacher03">
                            <dl>
                                <dt>
                                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                    <span>엘리자베스베스</span>
                                </dt>
                                <dd>
                                    <a href="#none">
                                        샘플영상
                                        <i class="ico-video"></i>
                                    </a>
                                </dd>
                            </dl>
                        </label>
                    </li>
                    <li>
                        <input type="radio" id="teacher04" name="teacher">
                        <label for="teacher04">
                            <dl>
                                <dt>
                                    <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                    <span>엘리자베스베스</span>
                                </dt>
                                <dd>
                                    <a href="#none">
                                        샘플영상
                                        <i class="ico-video"></i>
                                    </a>
                                </dd>
                            </dl>
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="correct06" 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-header-button">
            <!-- 액티브시 on 클래스 추가 -->
            <a href="#none" class="btn-line">임시저장</a>
            <a href="#none" class="btn-prm">제출</a>
            <a href="#none" class="btn-line on">임시저장</a>
            <a href="#none" class="btn-prm on">제출</a>
        </div>
        <div class="correct-popup-container">
            <div class="correct-popup-contents">
                <textarea name="" id="" placeholder="내용을 입력해주세요." class="text-essay"></textarea>
            </div>
            <div id="info02" class="info-popup-wrap">
                <div class="info-popup">
                    <a href="#none" class="close-info">열기</a>
                    <div class="info-popup-contents">
                        <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="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="correct07" 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-header-button">
            <!-- 액티브시 on 클래스 추가 -->
            <a href="#none" class="btn-line">임시저장</a>
            <a href="#none" class="btn-prm">제출</a>
            <a href="#none" class="btn-line on">임시저장</a>
            <a href="#none" class="btn-prm on">제출</a>
        </div>
        <div class="correct-popup-header-essay">
            <div class="speaking-textarea">
                <div class="swiper-pagination3"></div>
                <div class="swiper skSwiper3 essay-wrap">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div>
                                Describe a kind of weather you like You should say; · What it is · Where you usually experience it · What you will do in this weather and explain why you like it Describe a kind of weather you like You should say;Describe a kind of weather you like You should say; Describe a kind of weather you like You should say; Describe a kind of weather you like You should say;
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                Describe a kind of weather you like You should say; · What it is · Where you usually experience it · What you will do in this weather and explain why you like it Describe a kind of weather you like You should say;Describe a kind of weather you like You should say; Describe a kind of weather you like You should say; Describe a kind of weather you like You should say;
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    var bullet = ['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-popup-container">
            <div class="correct-popup-contents">
                <!-- <div class="record-wrap">
                    <p>버튼을 눌러 녹음을 시작하세요.</p>
                    <a href="#none" class="ico-record">녹음하기</a>
                    <a href="#none" class="add-file">파일추가</a>
                </div> -->
                <!-- <div class="record-wrap disabled">
                    <p>버튼을 눌러 녹음을 시작하세요.</p>
                    <a href="#none" class="ico-record">녹음하기</a>
                    <div class="add-file">
                        <span>%첨부파일명%. 확장자2(용량)</span>
                        <i class="ico-file-delete"></i>
                    </a>
                </div> -->
                <!-- <div class="record-wrap recording">
                    <p>01:20</p>
                    <div class="voice"></div>
                    <div class="record-btn">
                        <a href="#none" class="ico-speaker"></a>
                        <a href="#none" class="ico-playing"></a>
                        <a href="#none" class="ico-setting"></a>
                    </div>
                </div> -->
                <div class="record-wrap playing">
                    <div class="timeline">
                        <span class="now">1:10</span>
                        <div class="bar">
                            <div class="inner"></div>
                        </div>
                        <span class="end">3:10</span>
                    </div>
                    <div class="record-btn">
                        <a href="#none" class="ico-speaker"></a>
                        <a href="#none" class="ico-playing"></a>
                        <a href="#none" class="ico-setting"></a>
                    </div>
                    <a href="#none" class="re-record">
                        <i class="ico-refresh"></i>
                        다시 녹음하기
                    </a>
                    <a href="#none" class="re-down">
                        녹음파일 다운로드
                        <i class="ico-download"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section('ielts-script')

    {!! resource('js/common/jquery.nice-select-mo.js') !!}
    <script>
        $(document).ready(function () {
            $('.select-option').niceSelect();
            // 팝업 열기
            $(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