@extends('ielts.layout')

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

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

@section('ielts-css')
    <!-- slide -->
    <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
    <!-- board -->
    {!! resource('css/common/board.css') !!}
@endsection

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

@section("ielts-content")
    <!-- 로그인 상태면 class login 추가  -->
    <div id="wrap" class="boardPage review pass">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>합격 후기</h1>
            </div>

            <!-- 합격자's pick -->
            <div class="passPick">
                <p class="pc-text title">합격자's Pick</p>
                <p class="sub-title customLine mo_tab-text">인강으로 목표 달성! 합격자가 전하는 리얼 후기</p>
                <div class="slide splide">
                    <div class="splide__track">
                        <div class="splide__list">
                            <div class="videoWrap splide__slide">
                                <div class="playWrap" data-youtube="djKYUszYHDg">
                                    <iframe src="" title="시험대비 무료특강 동영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                    <figure style="background-image:url('https://img.youtube.com/vi/djKYUszYHDg/mqdefault.jpg')"></figure>
                                </div>
                                <div class="subject ellipsis_1">N개월 알짜패스]인강만으로 한 달 만에 overall 6.5</div>
                            </div>
                            <div class="videoWrap splide__slide">
                                <div class="playWrap" data-youtube="djKYUszYHDg">
                                    <iframe src="" title="시험대비 무료특강 동영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                    <figure style="background-image:url('https://img.youtube.com/vi/djKYUszYHDg/mqdefault.jpg')"></figure>
                                </div>
                                <div class="subject ellipsis_1">N개월 알짜패스]인강만으로 한 달 만에 overall 6.5 N개월 알짜패스]인강만으로 한 달 만에 overall 6.5</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- filter -->
            <div class="filterWrap">
                <div class="flex sb">
                    <div class="selectWrap flex">
                        <button type="button" data-list="option1">달성점수</button>
                        <button type="button" data-list="option2">달성기간</button>
                    </div>
                    <div class="writeBtnWrap pc-btn">
                        <button type="button" class="writeBtn">후기 작성 <figure></figure></button>
                    </div>
                </div>

                <div class="filter-bottom bottom-sheet type2 verChange">
                    <form action="">
                        <div class="slidingWrap">
                            <button type="button" class="closeBtn"><span>닫기</span></button>
                            <div class="optionArea noCategory" data-list="option1">
                                <div class="scrollArea">
                                    <div class="scrollWidth">
                                        <div class="scrollWrap">
                                            <ul class="checkWrap">
                                                <li><label><input type="checkbox"><span>%Overall Score%</span></label></li>
                                                <li><label><input type="checkbox"><span>5.5</span></label></li>
                                                <li><label><input type="checkbox"><span>5.5</span></label></li>
                                                <li><label><input type="checkbox"><span>5.5</span></label></li>
                                                <li><label><input type="checkbox"><span>5.5</span></label></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="optionArea noCategory" data-list="option2">
                                <div class="scrollArea">
                                    <div class="scrollWidth">
                                        <div class="scrollWrap">
                                            <ul class="checkWrap">
                                                <li><label><input type="checkbox"><span>%달성기간%</span></label></li>
                                                <li><label><input type="checkbox"><span>1주</span></label></li>
                                                <li><label><input type="checkbox"><span>1주</span></label></li>
                                                <li><label><input type="checkbox"><span>1주</span></label></li>
                                                <li><label><input type="checkbox"><span>1주</span></label></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="buttonWrap flex sb">
                                <button type="button" class="resetBtn">전체 초기화</button>
                                <input type="submit" class="submitBtn" value="리뷰보기"></input>
                            </div>
                        </div>
                    </form>

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

            <!-- 리스트 -->
            <div class="listArea">
                <div class="listWrap">
                    <a href="view" class="roundArea">
                        <!-- subject -->
                        <div class="topWrap">
                            <div class="topTitle customLine">
                                <div class="flex sb">
                                    <div class="box info flex">
                                        <div>ABCDEFG</div>
                                        <div><span>응시일 :&nbsp;</span>24.10.11</div>
                                    </div>
                                    <p class="subject ellipsis_2">사법권은 법관으로 구성된 법원에 속한다. 헌법개정안이 제2항의 찬성을 얻은 때에는 헌법개정은 확정되며, 대통령은 즉시 이를 공포하여야 한다. 국가는 청원에 대하여 심사할 의무를 진다.</p>
                                </div>
                            </div>
                            <div class="tagWrap flex">
                                <div class="tag"><span>달성기간3개월</span></div>
                                <div class="tag"><span>오직인강</span></div>
                                <div class="tag"><span>노베이스</span></div>
                                <div class="tag"><span>직장인</span></div>
                            </div>
                        </div>
                        <!-- 본문 -->
                        <div class="userContentText">
                            <ul class="scoreWrap">
                                <li class="flex">
                                    <div class="box"><span class="l">Listening</span><p>6.5</p></div>
                                    <div class="box"><span class="r">Reading</span><p>6.5</p></div>
                                    <div class="box"><span class="w">Writing</span><p>7.0</p></div>
                                    <div class="box"><span class="s">Speaking</span><p>8.0</p></div>
                                </li>
                                <li>
                                    <div class="box flex"><span class="o">Overall</span><p>7.5</p></div>
                                </li>
                            </ul>
                        </div>
                    </a>
                </div>
                <div class="listWrap">
                    <a href="view" class="roundArea">
                        <!-- subject -->
                        <div class="topWrap">
                            <div class="topTitle customLine">
                                <div class="flex sb">
                                    <div class="box info flex">
                                        <div>ABCDEFG</div>
                                        <div><span>응시일 :&nbsp;</span>24.10.11</div>
                                    </div>
                                    <p class="subject ellipsis_2">사법권은 법관으로 구성된 법원에 속한다. 헌법개정안이 제2항의 찬성을 얻은 때에는 헌법개정은 확정되며, 대통령은 즉시 이를 공포하여야 한다. 국가는 청원에 대하여 심사할 의무를 진다.</p>
                                </div>
                            </div>
                            <div class="tagWrap flex">
                                <div class="tag"><span>달성기간3개월</span></div>
                                <div class="tag"><span>오직인강</span></div>
                                <div class="tag"><span>노베이스</span></div>
                                <div class="tag"><span>직장인</span></div>
                            </div>
                        </div>
                        <!-- 본문 -->
                        <div class="userContentText">
                            <ul class="scoreWrap">
                                <li class="flex">
                                    <div class="box"><span class="l">Listening</span><p>6.5</p></div>
                                    <div class="box"><span class="r">Reading</span><p>6.5</p></div>
                                    <div class="box"><span class="w">Writing</span><p>7.0</p></div>
                                    <div class="box"><span class="s">Speaking</span><p>8.0</p></div>
                                </li>
                                <li>
                                    <div class="box flex"><span class="o">Overall</span><p>7.5</p></div>
                                </li>
                            </ul>
                        </div>
                    </a>
                </div>
            </div>

            <!-- 신청 버튼 -->
            <div class="writeBtnWrap bottom-fix-btn">
                <button type="button" class="writeBtn">후기 작성</button>
            </div>

            <!-- 글 작성 bottom-sheet -->
            <div class="write-bottom bottom-sheet type2 verChange">
                <form action="">
                    <div class="slidingWrap">
                        <button type="button" class="closeBtn"><span>닫기</span></button>
                        <p class="sheetTitle">합격 후기</p>
                        <div class="contentArea scrollArea">
                            <div class="scrollWidth">
                                <div class="scrollWrap">
                                    <ul class="formList">
                                        <li class="required score">
                                            <div class="title"><p>점수</p></div>
                                            <div class="inputArea noLine col2Type">
                                                <div class="inputWrap o">
                                                    <p>Overall</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label invalid" data-selected="점수 선택" data-default="점수 선택">점수 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="5.5">5.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.0">6.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.5">6.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.0">7.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.5">7.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.0">8.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.5">8.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="9.0">9.0</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="inputWrap left">
                                                    <p>Listening</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label" data-selected="점수 선택" data-default="점수 선택">점수 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="4.0">4.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="4.5">4.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.0">5.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.5">5.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.0">6.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.5">6.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.0">7.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.5">7.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.0">8.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.5">8.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="9.0">9.0</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="inputWrap right">
                                                    <p>Reading</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label" data-selected="점수 선택" data-default="점수 선택">점수 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="4.0">4.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="4.5">4.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.0">5.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.5">5.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.0">6.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.5">6.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.0">7.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.5">7.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.0">8.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.5">8.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="9.0">9.0</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="inputWrap left">
                                                    <p>Speaking</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label" data-selected="점수 선택" data-default="점수 선택">점수 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="4.0">4.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="4.5">4.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.0">5.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.5">5.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.0">6.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.5">6.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.0">7.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.5">7.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.0">8.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.5">8.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="9.0">9.0</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="inputWrap right">
                                                    <p>Writing</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label" data-selected="점수 선택" data-default="점수 선택">점수 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="4.0">4.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="4.5">4.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.0">5.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="5.5">5.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.0">6.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="6.5">6.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.0">7.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="7.5">7.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.0">8.0</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="8.5">8.5</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="9.0">9.0</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="message error">점수를 선택해 주세요.</div>
                                            </div>
                                        </li>
                                        <li class="required motive">
                                            <div class="title"><p>공부계기</p></div>
                                            <div class="inputArea noLine flex sb col2Type">
                                                <div class="inputWrap nation left">
                                                    <p class="pc-text">국가</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label" data-selected="국가 선택" data-default="국가 선택">국가 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="영국">영국</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="미국">미국</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="호주">호주</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="캐나다">캐나다</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="싱가폴">싱가폴</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="중국">중국</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="베트남">베트남</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="독일">독일</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="네덜란드">네덜란드</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="스위스">스위스</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="한국">한국</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="일본">일본</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="아랍에미레이트">아랍에미레이트</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="기타">기타</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="inputWrap goal right">
                                                    <p class="pc-text">목적</p>
                                                    <div class="dropDownMenu type2">
                                                        <div class="selectBox">
                                                            <button type="button" class="label invalid" data-selected="목적 선택" data-default="목적 선택">목적 선택</button>
                                                            <div class="optionListWrap">
                                                                <div class="scrollWidth">
                                                                    <ul class="optionList scrollWrap">
                                                                        <!-- 활성화 메뉴 active class 추가 -->
                                                                        <li class="optionItem"><button type="button" data-account="유학">유학</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="교환학생">교환학생</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="영주권">영주권</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="이민">이민</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="해외취업">해외취업</button></li>
                                                                        <li class="optionItem"><button type="button" data-account="기타" data-state="direct">기타</button></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="directWrap">
                                                    <label><input type="text"></label>
                                                </div>
                                                <div class="message error">공부계기를 선택해 주세요.</div>
                                            </div>
                                        </li>
                                        <li class="required">
                                            <div class="title"><p>달성기간</p></div>
                                            <div class="inputArea noLine">
                                                <div class="dropDownMenu type2">
                                                    <div class="selectBox">
                                                        <button type="button" class="label" data-selected="기간 선택" data-default="기간 선택">기간 선택</button>
                                                        <div class="optionListWrap">
                                                            <div class="scrollWidth">
                                                                <ul class="optionList scrollWrap">
                                                                    <!-- 활성화 메뉴 active class 추가 -->
                                                                    <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="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>
                                                                    <li class="optionItem"><button type="button" data-account="8개월">8개월</button></li>
                                                                    <li class="optionItem"><button type="button" data-account="9개월">9개월</button></li>
                                                                    <li class="optionItem"><button type="button" data-account="10개월">10개월</button></li>
                                                                    <li class="optionItem"><button type="button" data-account="11개월">11개월</button></li>
                                                                    <li class="optionItem"><button type="button" data-account="12개월">12개월</button></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="message error">달성기간을 선택해 주세요.</div>
                                            </div>
                                        </li>
                                        <li class="required tag">
                                            <div class="title"><p>태그선택</p></div>
                                            <div class="inputArea noLine">
                                                <p class="description">*나에게 해당되는 태그를 선택해 주세요. (최대 4개까지 선택)</p>
                                                <!-- 인강 / 어학원에에 따라 태그 내용이 바뀝니다. -->
                                                <div class="tagBox"> <!-- ielts -->
                                                    <label><input type="checkbox"><span>노베이스</span></label>
                                                    <label><input type="checkbox"><span>독학</span></label>
                                                    <label><input type="checkbox"><span>직장인</span></label>
                                                    <label><input type="checkbox"><span>학생</span></label>
                                                    <label><input type="checkbox"><span>단기달성</span></label>
                                                    <label><input type="checkbox"><span>성적급상승</span></label>
                                                    <label><input type="checkbox"><span>효율극대화</span></label>
                                                    <label><input type="checkbox"><span>모의고사맛집</span></label>
                                                    <label><input type="checkbox"><span>시험완벽대비</span></label>
                                                    <label><input type="checkbox"><span>약점보완</span></label>
                                                    <label><input type="checkbox"><span>환급성공</span></label>
                                                    <label><input type="checkbox"><span>시험적중</span></label>
                                                    <label><input type="checkbox"><span>실전력상승</span></label>
                                                </div>
                                                <div class="tagBox" style="display: none;"> <!-- academy / 임시 display none -->
                                                    <label><input type="checkbox"><span>노베이스</span></label>
                                                    <label><input type="checkbox"><span>직장인</span></label>
                                                    <label><input type="checkbox"><span>학생</span></label>
                                                    <label><input type="checkbox"><span>단기달성</span></label>
                                                    <label><input type="checkbox"><span>오전종합반</span></label>
                                                    <label><input type="checkbox"><span>저녁종합반</span></label>
                                                    <label><input type="checkbox"><span>인텐시브코스</span></label>
                                                    <label><input type="checkbox"><span>무제한첨삭</span></label>
                                                    <label><input type="checkbox"><span>밀착케어</span></label>
                                                    <label><input type="checkbox"><span>원어민스피킹</span></label>
                                                    <label><input type="checkbox"><span>모의고사맛집</span></label>
                                                    <label><input type="checkbox"><span>고득점꿀팁</span></label>
                                                </div>
                                            </div>
                                            <div class="message error">태그를 선택해 주세요.</div>
                                        </li>
                                        <li class="required editWrap">
                                            <div class="title"><p>상세후기</p></div>
                                            <div class="inputArea noLine">
                                                <label><input type="text" placeholder="제목을 입력해 주세요." autocomplete="off" required class="invalid"></label>
                                                <div class="message error">제목을 입력해 주세요.</div>
                                                <p class="description">예시) 제로 베이스에서 7.0이 되기까지!, 2.8개월 걸린 밀착반 6.5 후기</p>
                                            </div>
                                            <div class="textWrap" data-error="">
                                                <textarea name="" id="" placeholder="" maxlength=""></textarea>
                                            </div>
                                            <div class="message error">내용을 입력해 주세요. (최소 100자 이상)</div>
                                        </li>
                                        <li class="required file">
                                            <div class="title"><p>IELTS 성적표 첨부</p></div>
                                            <div class="inputArea noLine">
                                                <p class="description">*성적표와 무관한 사진을 첨부한 경우 통보없이 삭제 및 이벤트 혜택 대상에서 제외됩니다.</p>
                                                <!-- 파일 첨부 -->
                                                <div class="uploadFile scroll-x-active">
                                                    <label class="uploadArea">
                                                        <figure class="upload-icon"></figure>
                                                        <input type="file" class="el-hide" class="file"><span class="hidden">파일 첨부</span>
                                                        <p><span>0</span>/3</p>
                                                    </label>
                                                    <div class="file-list"></div>
                                                </div>
                                                <div class="message error">IELTS 성적표를 첨부해 주세요.</div>
                                                <div class="agreeWrap">
                                                    <label><input type="checkbox" required><span>최소 100자 이상 작성, 회원정보에 입력된 휴대번호로 상품 발송, 이벤트 상품은 품절 등의 사유로 동일 가격의 상품으로 대체될 수 있는 점. ID당 1회만 참여 가능 등 후기 이벤트 유의사항에 대해 확인하였습니다. </span></label>
                                                    <div class="message error">유의사항을 체크해 주세요.</div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="buttonWrap flex sb">
                            <input type="reset" class="resetBtn cancel" value="취소"></input>
                            <input type="submit" class="submitBtn" value="등록"></input>
                        </div>
                    </div>
                </form>

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

        </div>
    </div>
@endsection

@section('ielts-script')
<!-- slide  -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

    <script>
        $(function(){
            /************************************************************************
                list
            ************************************************************************/
            // 합격자's pick slide
            var passPick = new Splide( '.passPick .splide', {
                type   : 'slide',
                perPage: 1,
                gap: 16,
                arrows: false,
                classes: {
                    pagination: 'pagination',
                    page      : 'btn',
                },
                drag: true,
                mediaQuery: 'min',
                breakpoints: {
                    1200: {
                        destroy: true,
                    },
                }
            });
            passPick.mount();

            // 본문 > 이미지 개수
            $('.listWrap .userContentText .imgWrap').each(function(index,item){
                let _uploadImgLength = $(item).find('img').length;
                $(item).find('.allNum').text(_uploadImgLength);
            });

            // 좋아요, 별점 개수에 따라 class 변경
            $('.listWrap .topWrap .reaction .icon').each(function(index,item){
                let _thisLikeNum = $(item).find('.num').text();
                $(item).attr('data-number', _thisLikeNum);
            });



            /************************************************************************
                write (bottom-sheet)
            ************************************************************************/
            // 국가 선택 > 기타 선택
            $('.write-bottom .goal .optionListWrap .optionItem').on('click',function(){
                if($(this).find('>*').data('state') == 'direct'){
                    $('.write-bottom .slidingWrap .formList > li.motive').addClass('directInput');
                }else{
                    $('.write-bottom .slidingWrap .formList > li.motive').removeClass('directInput');
                }
            });

            // 태그 최대 4개까지만 선택 가능
            $('.write-bottom .formList > li.tag input[type="checkbox"]').on('click',function(e){
                let count = $('.write-bottom .formList > li.tag input[type="checkbox"]:checked').length;
                $('.write-bottom .formList > li.tag input[type="checkbox"]:checked').parent().addClass('active');
                if(count >= 4){
                    $('.write-bottom .formList > li.tag label.active').siblings().addClass('deactivate');
                }else{
                    $('.write-bottom .formList > li.tag label').removeClass('deactivate active');
                }
            });

        });
    </script>
@endsection