@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-group">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>B2B 및 단체 수강 문의</h1>
            </div>

            <div class="board-view">
                <div class="wrap wrap1">
                    <div class="titleWrap customLine">
                        <p class="sub">대학, 기업, 공공기관 등</p>
                        <p class="title">10인 이상 단체 수강 시 <br class="mo_tab-br">특별 할인 혜택을 제공해 드립니다.</p>
                    </div>
                    <div class="boxWrap">
                        <div class="box">
                            <figure class="img1"></figure>
                            <div class="text">
                                <p class="sub">edm어학원 강사진이 직접 강의합니다.</p>
                                <b>아이엘츠 전문 강사 직강</b>
                            </div>
                        </div>
                        <div class="box">
                            <figure class="img2"></figure>
                            <div class="text">
                                <b>단기간 목표 점수 <br class="pc-br">도달을 위한 단독 특별반 개설</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap wrap2">
                    <div class="titleWrap customLine">
                        <p class="title">단체 수강 고객을 위한 특별 혜택</p>
                    </div>
                    <div class="boxWrap">
                        <div class="box">
                            <figure class="img1"></figure>
                            <div class="text">
                                <b><em>최대 20%</em> 특별 가격 혜택</b>
                                <p>단체 규모와 수강 과목에 따라 <br>맞춤 혜택가를 제공합니다.</p>
                            </div>
                        </div>
                        <div class="box">
                            <figure class="img2"></figure>
                            <div class="text">
                                <b>무료 학습 컨설팅 제공</b>
                                <p>단기간 목표 점수 달성을 위한 <br>단체별 맞춤 학습 컨설팅을 제공합니다.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap contact">
                    <div class="titleWrap customLine">
                        <p class="title">단체 수강은 이렇게 진행됩니다</p>
                    </div>
                    <ul class="stepList flex">
                        <li class="step">단체 문의 <br class="mo_tab-br">접수</li>
                        <li class="step">문의내용 <br class="mo_tab-br">상담</li>
                        <li class="step">단체수강 <br class="mo_tab-br">특별혜택 제공</li>
                    </ul>

                    <form action="">
                        <div class="formTopArea">
                            <!-- note 게시판 카테고리 -->
                            <div class="categoryWrap">
                                <div class="flex">
                                    <a href="" class="active">문의 등록</a>
                                    <a href="" class="">문의내역 조회</a>
                                </div>
                            </div>

                            <div class="formArea">
                                <!-- todo 문의 등록 -->
                                <div class="formWrap">
                                    <div class="input">
                                        <p class="tit">기업/기관명<i></i></p>
                                        <div class="inputBox">
                                            <input type="text" placeholder="입력" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">담당자명<i></i></p>
                                        <div class="inputBox">
                                            <input type="text" placeholder="입력" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">연락처<i></i></p>
                                        <div class="inputBox">
                                            <input type="tel" placeholder="전화번호 (‘-’는 제외하고 입력해 주세요.)" autocomplete="off" maxlength="13">
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">이메일<i></i></p>
                                        <div class="inputBox">
                                            <input type="email" placeholder="이메일을 입력해 주세요." autocomplete="off" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="input">
                                        <p class="tit">문의종류<i></i></p>
                                        <div class="inputBox">
                                            <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="선택 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>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="input text">
                                        <p class="tit">내용<i></i></p>
                                        <div class="inputBox">
                                            <textarea name="" id="" placeholder="내용을 입력해 주세요." autocomplete="off"></textarea>
                                        </div>
                                    </div>
                                    <div class="agreementWrap">
                                        <div class="terms-wrap">
                                            <button type="button" class="toggle-btn"><span class="false">보기</span><span class="true">접기</span></button>
                                            <label>
                                                <input type="checkbox">
                                                <span>개인정보 수집 및 이용동의(필수)</span>
                                            </label>
                                            <div class="terms-detail">
                                                <div class="terms-viewer">
                                                    <p>1. 개인정보 수집목적 및 항목</p>
                                                    <p class="dotTxt">edm교육그룹㈜이디엠글로벌캠퍼스의 학습상담, 유학상담, 문의응대, 각종 이벤트 등 최신정보 제공 및 홍보성 정보 제공</p>
                                                    <p class="dotTxt">수집 항목 : 이름, 휴대전화번호, 주소</p>
                                                    <p>2. 개인정보 보유 및 이용기간</p>
                                                    <p class="dotTxt">이용목적 달성 또는 신청자의 삭제요청 시까지</p>
                                                    <p>3. 신청자는 개인정보 수집/이용 동의를 거부하실 수 있습니다.</p>
                                                    <span>*단, 동의 거부 시 학습상담 및 관련 서비스 이용에 제한이 있을 수 있습니다.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- todo 문의내역 조회 -->
                                <div class="formWrap" style="display: none;">
                                    <!-- todo 조회 화면 -->
                                    <div class="findWriting">
                                        <div class="messageBox">
                                            <figure></figure><em>문의내역 조회를 위해 등록하신 연락처와 이메일 주소를 입력해 주세요.</em>
                                        </div>
                                        <div class="input">
                                            <p class="tit">연락처<i></i></p>
                                            <div class="inputBox">
                                                <input type="tel" placeholder="전화번호 (‘-’는 제외하고 입력해 주세요.)" autocomplete="off" maxlength="13">
                                            </div>
                                        </div>
                                        <div class="input">
                                            <p class="tit">이메일<i></i></p>
                                            <div class="inputBox">
                                                <input type="email" placeholder="이메일을 입력해 주세요." autocomplete="off" maxlength="50">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- todo 문의내역이 없을 때 -->
                                    <div id="noData">
                                        <div class="flex"><p>등록된 문의 내역이 없어요.</p></div>
                                    </div>
                                    <!-- todo 문의내역이 있을 때 -->
                                    <div class="myWriting">
                                        <div class="textWrap date">
                                            <b>등록일자</b>
                                            <div class="text">24.10.29</div>
                                        </div>
                                        <div class="textWrap content">
                                            <b>내용</b>
                                            <div class="text">사용자 입력 내용이 노출 됩니다. 200프로 환급반 신청</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- todo 하단 버튼 -->
                        <div class="button-wrap">
                            <!-- 문의 등록 -->
                            <button type="submit" class="submitBtn">문의 남기기</button>

                            <!-- 문의내역 : 조회 화면 -->
                            <button type="submit" class="submitBtn">조회</button>
                            <!-- 문의내역 : 문의내역이 없을 때 (팝업 열림) -->
                            <button type="button" class="submitBtn popupOn">조회</button>
                            <!-- 문의내역 : 문의내역이 있을 때 (팝업 열림) -->
                            <button type="button" class="submitBtn popupOn delete">삭제</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="popupArea">
            <!-- todo 문의내역 : 문의내역이 없을 때 팝업 -->
            <div class="popupWrap">
                <div class="popup textPopup">
                    <div class="closeIcon closeBtn"></div>
                    <div class="textWrap">
                        <p>입력하신 정보로 등록된 문의가 없어요. <br>정보를 다시 입력해 주세요.</p>
                    </div>
                    <button type="button" class="popupClose closeBtn">확인</button>
                </div>
                <div class="dim"></div>
            </div>

            <!-- todo 문의내역 : 문의내역이 없을 때 팝업 -->
            <div class="popupWrap">
                <div class="popup textPopup">
                    <div class="closeIcon closeBtn"></div>
                    <div class="textWrap">
                        <p>문의내용을 삭제 하시겠습니까?</p>
                    </div>
                    <button type="button" class="popupClose closeBtn">확인</button>
                </div>
                <div class="dim"></div>
            </div>
        </div>
    </div>
@endsection

@section('ielts-script')
    <script>
        $(function(){
            // 카테고리 클릭
            $('.categoryWrap a').on('click',function(e){
                e.preventDefault();
                $(this).addClass('active').siblings().removeClass('active');
                $('.board-view .formWrap').eq($(this).index()).show().siblings().hide();

            });

            // 개인정보 수집 및 이용동의 내용 - 보기/접기
            $('.board-view .agreementWrap .toggle-btn').on('click',function(){
                $(this).toggleClass('open').parents('.terms-wrap').find('.terms-detail').stop().slideToggle(300);
            });
        });
    </script>
@endsection