@extends('ielts.layout')

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

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

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

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

@section("ielts-content")
    <div id="wrap" class="boardPage inquiry">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>1:1 문의</h1>
            </div>

            <div class="content">
                <div class="changeArea">
                    <!-- 1:1문의 하기 (카테고리 선택) -->
                    <div class="board-list">
                        <div class="intro">
                            <figure class="logo"></figure>
                            <p><b>고객의 꿈을 사랑하고 꿈을 이룰 '수 있도록 응원하는 <br>이디엠아이엘츠 입니다.</b></p>
                            <p>문제가 아직 해결되지 않았나요? <br>문의내역을 남겨주시면 안내 도와드리겠습니다.</p>
                            <div class="btnWrap">
                                <button type="button" class="inquiry-btn">1:1문의 하기</button>
                                <button type="button" class="inquiry-details">문의 내역 보기</button>
                            </div>
                        </div>
                        <div class="selectValue">
                            <p><b>문의 유형을 선택해 주세요.</b></p>
                            <p>수업자료, 강의내용 등 학습에 대한 질문사항은 <br>내강의실 → 1:1게시판을 이용해 주시기 바랍니다.</p>
                            <div class="value flex">
                                <a href="#none">교재/배송</a>
                                <a href="#none">사이트 이용</a>
                                <a href="#none">동영상/진도율</a>
                                <a href="#none">환급신청</a>
                                <a href="#none">결제/환불</a>
                                <a href="#none">연장/재수강</a>
                                <a href="#none">모의고사</a>
                                <a href="#none">응시권</a>
                                <a href="#none">기타</a>
                            </div>
                            <div class="exit"><a href="" class="hover-primary2">상담 나가기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L13 8M13 8L8 3M13 8L3 8" stroke="#9B9BAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a></div>
                        </div>
                    </div>

                    <!-- 1:1문의 하기 (작성) -->
                    <form action="">
                        <div class="board-write">
                            <div class="scrollWidth outer">
                                <div class="scrollWrap outer">
                                <p class="top-text"><b>문의 내용을 입력해 주세요.</b></p>
                                <div class="infoBox">
                                    <div class="title"><figure></figure>[고객센터 운영시간]&nbsp; <em>상담시간 : 09:00~17:00</em></div>
                                    <p class="dotTxt">운영시간 내에 소중한 시간 내어 주신 회원님께 최선을 다해 답변드릴 수 있도록 하겠습니다. 답변은 고객지원 → 1:1 문의내역을 통해 확인하실 수 있습니다. </p>
                                </div>
                                <div class="scrollWidth inner">
                                    <div class="scrollWrap inner">
                                        <div class="now-date"><span></span></div>
                                        <div class="right talk select-category"><p>교재/배송</p></div> <!-- 선택했던 문의 카테고리 -->
                                        <div class="right backBtn"><button type="button" class="hover-primary2">뒤로가기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L13 8M13 8L8 3M13 8L3 8" stroke="#9B9BAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div>
                                        <div class="message">
                                            <!-- 작성한 메시지가 이 곳에 들어갑니다. -->
                                            <!-- <div class="pic"><figure style="background-image:url('');"></figure></div>
                                            <div class="right talk"><span class="time">10:08</span><p>사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있어요~ </p></div>
                                            <div class="left talk"><span class="time">10:14</span><p>회원님 안녕하세요. <br>이디엠아이엘츠 입니다.<br><br>문의주신 내용은 A상품 옵션에 해당되는 내용입니다. 회원님께서는 B옵션을 구매 하셨기에 교재는 별도 구매하지 않으셔도 되고 내강의실> 수강목록에서 제공되는 PDF를 다운받아서 학습이 가능하십니다.<br><br>추가 문의사항이 있다면 언제든지 남겨주세요.<br>감사합니다. </p></div>
                                            <p class="after-text">답변이 종료되었습니다. <br>추가문의는 새로 등록해 주시기 바랍니다.</p> -->
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>

                            <!-- 메시지 작성 -->
                            <div class="user-inputWrap">
                                <div class="inputWrap">
                                    <button type="button" class="send-text input-btn"><span class="el-hide">입력</span></button>
                                    <label class="send-file input-btn"><input type="file" class="el-hide"><span class="el-hide">첨부 파일</span></label>
                                    <textarea name="" id="" placeholder="내용을 입력해 주세요."></textarea>
                                </div>
                                <div class="btnWrap">
                                    <div class="before">
                                        <div class="flex sb">
                                            <button type="button" class="cancelBtn alertOn">취소하기</button>
                                            <input type="submit" value="1:1 문의 접수하기" class="submitBtn alertOn"></input>
                                        </div>
                                    </div>

                                    <div class="after">
                                        <a href="">확인</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- 문의 내역 보기 -->
                    <div class="history-list">
                        <p class="top-text"><b>문의 내역을 선택해 주세요.</b></p>
                        <div class="scrollWidth">
                            <div class="scrollWrap">
                                <ul class="list">
                                    <!-- 답변 여부에 따라 class 추가
                                        답변완료 : complete class 추가 -->
                                    <li class="complete">
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>강좌/교재</span></div>
                                                <div class="right answer"><span></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">사이트에서는 PDF 제공이라고 되어 있는데 결제하고 보니까 교재구매라고 되어 있</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="flex">
                                                <div class="left category"><span>사이트 이용</span></div>
                                                <div class="right answer"><span class="complete"></span></div>
                                            </div>
                                            <div class="flex">
                                                <p class="left subject ellipsis_1">마지막 글</p>
                                                <div class="right date">24.10.22</div>
                                            </div>
                                        </a>
                                    </li>


                                    <!-- 글이 없을 경우 -->
                                    <li id="noData">
                                        <div class="flex"><p>환급신청 내역이 없습니다.</p></div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- 신청 버튼 -->
                        <div class="applyWrap bottom-fix-btn">
                            <button type="button">1:1문의 하기</button>
                        </div>
                    </div>
                </div>


                <!-- 자주 묻는 질문 -->
                <div class="faq-bottom bottom-sheet type2">
                    <div class="slidingWrap">
                        <button type="button" class="closeBtn"><span>닫기</span></button>
                        <div class="topWrap openBtn">
                            <p class="title"><b>서비스 이용에 어려움을 겪으셨나요?</b></p>
                            <p>1:1 문의 전 아래 내용을 확인하시면 더욱 빠르고 원활하게 서비스를 이용하실 수 있습니다.</p>
                        </div>
                        <div class="listWrap">
                            <div class="title flex sb">
                                <p><b>자주 묻는 질문</b></p>
                                <a href="/ielts/board/faq/list" class="hover-primary2"><b>FAQ 더보기</b><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="#9B9BAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                            </div>
                            <div class="scrollWidth">
                                <ul class="list scrollWrap">
                                    <li>
                                        <div class="q">
                                            <!--
                                                카테고리
                                                : lecture, service, video, payment
                                            -->
                                            <div class="category lecture"><span></span></div>
                                            <div class="subject ellipsis_1">페이백 200%환급챌린지 안내 <figure class="arrow"></figure></div>
                                        </div>
                                        <div class="a">
                                            <p>도서 정가제는 한국출판문화산업진흥법 개정안을 쉽게 부르는 명칭으로 2003년 2월부터 시행되었습니다. <br><br>2014년 11월 개정된 도서 정가제는 모든 도서를 종류에 관계없이 10% 가격할인에 간접 할인(적립)을 5%까지, 최대 15%의 할인으로 제한 하였으며, 출판사가 출간 후 18개월 이상 지난 도서의 정가를 조정할 수 있도록 보완되었습니다.이에 따라 온오프라인 서점의 도서 판매 가격 격차를 줄이고 도서 정가를 인하하도록 유도하는 것입니다. <br><br>감사합니다.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="q">
                                            <!--
                                                카테고리
                                                : lecture, service, video, payment
                                            -->
                                            <div class="category video"><span></span></div>
                                            <div class="subject ellipsis_1">페이백 200%환급챌린지 안내 <figure class="arrow"></figure></div>
                                        </div>
                                        <div class="a">
                                            <p>도서 정가제는 한국출판문화산업진흥법 개정안을 쉽게 부르는 명칭으로 2003년 2월부터 시행되었습니다. <br><br>2014년 11월 개정된 도서 정가제는 모든 도서를 종류에 관계없이 10% 가격할인에 간접 할인(적립)을 5%까지, 최대 15%의 할인으로 제한 하였으며, 출판사가 출간 후 18개월 이상 지난 도서의 정가를 조정할 수 있도록 보완되었습니다.이에 따라 온오프라인 서점의 도서 판매 가격 격차를 줄이고 도서 정가를 인하하도록 유도하는 것입니다. <br><br>감사합니다.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="q">
                                            <!--
                                                카테고리
                                                : lecture, service, video, payment
                                            -->
                                            <div class="category service"><span></span></div>
                                            <div class="subject ellipsis_1">모든 국민은 자기의 행위가 아닌 친족의 행위로 인하여 불이익한 처우를 받지 아니한다. 행정권은 대통령을 수반으로 하는 정부에 속한다. 정부는 예산에 변경을 가할 필요가 있을 때에는 추가경정예산안을 편성하여 국회에 제출할 수 있다. <figure class="arrow"></figure></div>
                                        </div>
                                        <div class="a">
                                            <p>모든 국민은 자기의 행위가 아닌 친족의 행위로 인하여 불이익한 처우를 받지 아니한다. 행정권은 대통령을 수반으로 하는 정부에 속한다. 정부는 예산에 변경을 가할 필요가 있을 때에는 추가경정예산안을 편성하여 국회에 제출할 수 있다.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="q">
                                            <!--
                                                카테고리
                                                : lecture, service, video, payment
                                            -->
                                            <div class="category payment"><span></span></div>
                                            <div class="subject ellipsis_1">누구든지 체포 또는 구속의 이유와 변호인의 조력을 받을 권리가 있음을 고지받지 아니하고는 체포 또는 구속을 당하지 아니한다. 체포 또는 구속을 당한 자의 가족등 법률이 정하는 자에게는 그 이유와 일시·장소가 지체없이 통지되어야 한다. <figure class="arrow"></figure></div>
                                        </div>
                                        <div class="a">
                                            <p>누구든지 체포 또는 구속의 이유와 변호인의 조력을 받을 권리가 있음을 고지받지 아니하고는 체포 또는 구속을 당하지 아니한다. 체포 또는 구속을 당한 자의 가족등 법률이 정하는 자에게는 그 이유와 일시·장소가 지체없이 통지되어야 한다.</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="dim"></div>
                </div>
            </div>
        </div>

        <!-- alert -->
        <div class="alertArea">
            <!-- alert -->
            <div class="alertWrap">
                <!-- alert 가로크기에 따라 클래스 추가 여부 결정 :: max-width: 420 -> large , 기본 : max-width: 360 -->
                <div class="alert large">
                    <div class="closeIcon closeBtn"></div>
                    <div class="alert-contents">
                        <p>남기신 메시지가 저장되지 않고 초기화됩니다. <br>취소하시겠습니까?</p>
                    </div>
                    <a href="" class="btn alert-btn">확인</a>
                </div>

                <div class="dim"></div>
            </div>
            <div class="alertWrap">
                <!-- alert 가로크기에 따라 클래스 추가 여부 결정 :: max-width: 420 -> large , 기본 : max-width: 360 -->
                <div class="alert large">
                    <div class="closeIcon closeBtn"></div>
                    <div class="alert-contents">
                        <p>1:1 문의가 접수 되었습니다. <br>답변은 고객지원> 1:1문의> 문의내역에서 확인하실 수 있습니다. </p>
                    </div>
                    <a href="" class="btn alert-btn">확인</a>
                </div>

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

    </div>
@endsection

@section('ielts-script')
    <script>
        $(function(){
            /*********************************************************************
                문의 카테고리 선택 화면
                boardPage.inquiry에 category-select class 추가
            *********************************************************************/
            $('.inquiry-btn').on('click',function(){
                $('body').addClass('category-select').removeClass('history-select write-select');
            });



            /*********************************************************************
                메시지 작성 화면
                boardPage.inquiry에 write-select class 추가
            *********************************************************************/
            $('.selectValue .value a').on('click',function(){
                $('body').addClass('write-select').removeClass('category-select history-select');
            });

            // 텍스트, 사진첨부 영역 버튼
            $(".changeArea .board-write .user-inputWrap textarea").on("change input paste keyup", function() {
                if($(this).val() == ''){
                    $('.changeArea .board-write .user-inputWrap .send-text').hide();
                    $('.changeArea .board-write .user-inputWrap .send-file').show();
                }else{
                    $('.changeArea .board-write .user-inputWrap .send-text').show();
                    $('.changeArea .board-write .user-inputWrap .send-file').hide();
                }
            });

            // 메시지 입력
                // progress : 메시지 작성중일 때 (textarea, 취소, 문의버튼 block)
                // after : 1:1 문의 접수하기 클릭 후 (확인 버튼 block)
            var now = new Date();
            var arrDayStr = ['일','월','화','수','목','금','토'];
            var nowDate = now.getFullYear() + '-' + ('0' + now.getMonth()).slice(-2) + '-' + ('0' + now.getDate()).slice(-2) + ' ' + arrDayStr[now.getDay()] + '요일';
            var nowTime = ('0' + now.getHours()).slice(-2) + ':' + ('0' + now.getMinutes()).slice(-2);

            $('.changeArea .board-write .user-inputWrap .send-text').on('click',function(){
                $('.changeArea .board-write .now-date span').text(nowDate);
                $('.changeArea .board-write .message').append('<div class="right talk"><span class="time">'+ nowTime +'</span><p>' + $('.changeArea .user-inputWrap textarea').val() + '</p></div>');
                $('.changeArea .board-write .user-inputWrap textarea').val('');
                $('.changeArea .board-write .user-inputWrap .send-text').hide();
                $('.changeArea .board-write .user-inputWrap .send-file').show();
                $('.changeArea .board-write').addClass('progress'); // 메시지 상태 변경

                $('.changeArea .board-write .scrollWrap').scrollTop($('.changeArea .board-write .scrollWrap')[0].scrollHeight);
            });

            $(".changeArea .board-write .user-inputWrap textarea").on('keyup',function(key){
                if(key.keyCode==13) {
                    $('.changeArea .board-write .user-inputWrap .send-text').trigger('click');
                }
            });



            // 1:1 문의 접수하기 버튼 클릭 이후
            // $('.changeArea .board-write').removeClass('progress').addClass('after');
            // $('.changeArea .board-write .message .left.talk .time').text(nowTime);



            /*********************************************************************
                문의 내역 보기
                boardPage.inquiry에 history-select class 추가
            *********************************************************************/
            $('.inquiry-details').on('click',function(){
                $('body').addClass('history-select').removeClass('write-select category-select');
            });





            /*********************************************************************
                자주 묻는 질문 (bottom sheet)
            *********************************************************************/
            $('.bottom-sheet .list .q').on('click',function(){
                $(this).parent().toggleClass('active').find('.a').stop().slideToggle(300).parent().siblings().removeClass('active').find('.a').stop().slideUp(300);
            });
        });
    </script>
@endsection