@extends('layouts.default')

@section('content')

    <link rel="stylesheet" type="text/css" href="/css/inquiry.css"/>

    <div class="container inquiry">
        <!-- 사이트 경로 표시 -->
        <div class="area-pages-wayfinding">
            <div class="flex-wrap">
                <div class="way-prev-dep">
                    <a href="#">간편상담</a>
                </div>
                <ul class="way-curr-dep">
                    <li>
                        <!-- [D]: 카카오상담 팝업 확인을 위해 넣어둠. 확인 후 삭제해주세요 - way-curr-dep 전체 삭제 가능 -->
                        <a href="#popup-inquiry-kakao" class="popup-open" id="popOpen">카카오톡상담</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 제목 및 현재위치 표시 -->
        <div class="area-pages-top bg">
            <h1 class="page-title">간편상담</h1>
            <div class="add-text">
                간편하게 상담을 신청하세요.<br>
                전문 컨설턴트가 24시간 이내 친절히 상담해 드리겠습니다
            </div>
        </div>
        <div class="area-pages-content">
            <div class="flex-wrap">
                <div class="area-inquiry-form">
                    <div class="input-wrap">
                        <div class="input">
                            <p class="tit"><label for="aif-name">이름</label></p>
                            <p class="line-style">
                                <input type="text" id="aif-name" name="" value="" placeholder="이름을 입력하세요." class="line-style">
                            </p>
                        </div>
                        <div class="input">
                            <p class="tit"><label for="aif-phone">휴대폰</label></p>
                            <p class="line-style">
                                <input type="text" id="aif-phone" name="" value="" placeholder="'-'없이 숫자만 입력하세요" maxlength="11">
                            </p>
                        </div>
                        <div class="input sel-box">
                            <p class="tit"><label for="aif-region"><i class="req">*</i>거주지역</label></p>
                            <p class="line-style">
                                <select id="aif-region" name="">
                                    <option value="">거주지역을 선택하세요.</option>
                                    <option value="서울">서울</option>
                                    <option value="부산">부산</option>
                                    <option value="대구">대구</option>
                                    <option value="대전">대전</option>
                                    <option value="광주">광주</option>
                                    <option value="울산">울산</option>
                                    <option value="인천">인천</option>
                                    <option value="제주">제주</option>
                                    <option value="경기">경기</option>
                                    <option value="강원">강원</option>
                                    <option value="충북">충북</option>
                                    <option value="충남">충남</option>
                                    <option value="경북">경북</option>
                                    <option value="경남">경남</option>
                                    <option value="전북">전북</option>
                                    <option value="전남">전남</option>
                                    <option value="런던">런던</option>
                                </select>
                            </p>
                        </div>
                        <div class="input column">
                            <div class="col2 ims-active"> <!-- [D]: .input-multi-select 가 활성화될 경우 인풋과 해당요소를 감싼 상위요소에 .ims-active -->
                                <p class="tit"><label for="aif-country">유학국가</label></p>
                                <div class="line-style">
                                    <input type="text" id="aif-country" name="" value="" class="select-style" placeholder="국가를 선택해주세요">
                                </div>
                                <div class="input-multi-select">
                                    <div class="chk-custom-wrap">
                                        <span><input type="checkbox" id="aif-country1" name=""><label for="aif-country1">미국</label></span>
                                        <span><input type="checkbox" id="aif-country2" name=""><label for="aif-country2">영국</label></span>
                                        <span><input type="checkbox" id="aif-country3" name=""><label for="aif-country3">캐나다</label></span>
                                        <span><input type="checkbox" id="aif-country4" name=""><label for="aif-country4">호주</label></span>
                                        <span><input type="checkbox" id="aif-country5" name=""><label for="aif-country5">필리핀</label></span>
                                        <span><input type="checkbox" id="aif-country6" name=""><label for="aif-country6">아일랜드</label></span>
                                        <span><input type="checkbox" id="aif-country7" name=""><label for="aif-country7">뉴질랜드</label></span>
                                        <span><input type="checkbox" id="aif-country8" name=""><label for="aif-country8">몰타</label></span>
                                        <span><input type="checkbox" id="aif-country9" name=""><label for="aif-country9">스위스</label></span>
                                        <span><input type="checkbox" id="aif-country10" name=""><label for="aif-country10">네덜란드</label></span>
                                        <span><input type="checkbox" id="aif-country11" name=""><label for="aif-country11">싱가포르</label></span>
                                        <span><input type="checkbox" id="aif-country12" name=""><label for="aif-country12">말레이시아</label></span>
                                        <span><input type="checkbox" id="aif-country13" name=""><label for="aif-country13">기타국가</label></span>
                                    </div>
                                    <div class="button-wrap">
                                        <input type="reset" class="button half" value="선택해지">
                                        <input type="submit" class="button color half" value="선택완료">
                                    </div>
                                </div>
                            </div>
                            <div class="col2"><!-- [D]: .input-multi-select 가 활성화될 경우 인풋과 해당요소를 감싼 상위요소에 .ims-active -->
                                <p class="tit"><label for="aif-interest">관심분야</label></p>
                                <div class="line-style">
                                    <input type="text" id="aif-interest" name="" value="" class="select-style"  placeholder="관심분야를 선택해주세요">
                                </div>
                                <div class="input-multi-select">
                                    <div class="chk-custom-wrap">
                                        <span><input type="checkbox" id="aif-interest1" name=""><label for="aif-interest1">어학연수</label></span>
                                        <span><input type="checkbox" id="aif-interest2" name=""><label for="aif-interest2">대학/대학원</label></span>
                                        <span><input type="checkbox" id="aif-interest3" name=""><label for="aif-interest3">아트유학</label></span>
                                        <span><input type="checkbox" id="aif-interest4" name=""><label for="aif-interest4">포트폴리오</label></span>
                                        <span><input type="checkbox" id="aif-interest5" name=""><label for="aif-interest5">초중고유학</label></span>
                                        <span><input type="checkbox" id="aif-interest6" name=""><label for="aif-interest6">캠프&middot;주니어연수</label></span>
                                        <span><input type="checkbox" id="aif-interest7" name=""><label for="aif-interest7">비자</label></span>
                                    </div>
                                    <div class="button-wrap">
                                        <input type="reset" class="button half" value="선택해지">
                                        <input type="submit" class="button color half" value="선택완료">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="input">
                            <p class="tit"><label for="aif-write">문의사항</label></p>
                            <div class="">
                                <textarea id="aif-write" name=""></textarea>
                            </div>
                        </div>

                        <div class="input">
                            <span class="chk"><input type="checkbox" id="agree-info"><label for="agree-info">[필수] 개인정보수집 및 이용안내 동의</label></span>
                        </div>

                        <div class="button-wrap">
                            <button type="submit" class="button color wide">상담신청하기</button>
                        </div>
                    </div>
                </div>
                <div class="area-promotion-inquiry">
                    <div class="aip-title">
                        지금 상담신청하고<br>
                        <strong>이 모든 <span class="text-point">혜택</span>  받으세요</strong>
                    </div>
                    <div class="aip-slide slide-simple-arr no-pager">
                        <ul class="aib-slide-banner">
                            <li><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/banner/inquiry-banner-akmu01.png" alt=""></li>
                            <li><img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/banner/inquiry-banner-akmu02.png" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 카카오톡 친구추가 -->
    <div class="area-layer-popup inquiry-kakao" id="popup-inquiry-kakao">
        <div class="popup-container">
            <div class="popup-title">
                <h2>카카오톡 1:1 상담</h2>
            </div>
            <div class="popup-content">
                <div class="ik-wrap">
                    <div class="ik-title">
                        <p>카카오톡 아이디 <em class="deco-box">edm유학센터</em></p>
                        <p><strong>edm유학센터 <span class="color">카카오톡 1:1 상담</span> </strong></p>
                    </div>
                    <div class="ik-info-time">
                        <p>카카오톡으로 언제 어디서나 빠르게 상담 받으세요!</p>
                        <p class="color">상담가능시간: 평일 9:00~18:00</p>
                    </div>
                    <div class="ik-howto1">
                        <h3 class="tit"><i class="num-circle">1</i>카카오톡에서 ‘edm유학센터’ 친구추가</h3>
                        <ul class="add-friend">
                            <li>
                                <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/inquiry-kakao-howto1.png" alt="">
                                <span class="txt">카카오톡 친구찾기 검색창에 edm유학센터 입력 후 친구추가</span>
                            </li>
                            <li>
                                <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/inquiry-kakao-howto2.png" alt="">
                                <span class="txt">친구추가 화면에서 확인 버튼 클릭</span>
                            </li>
                            <li>
                                <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/inquiry-kakao-howto3.png" alt="">
                                <span class="txt">1:1채팅을 통해 실시간 상담 시작</span>
                            </li>
                        </ul>
                    </div>
                    <div class="ik-howto2">
                        <h3 class="tit"><i class="num-circle">2</i>‘친구추가 링크’ 문자로 받기</h3>
                        <div class="input-wrap">
                            <span class="input line-style"><input type="text" id="" name="" placeholder="‘-’ 없이 숫자만 입력하세요."></span>
                            <input type="submit" value="문자전송" class="button color">
                        </div>
                    </div>
                    <div class="exp-txt">* 기존 상담 고객은 담당 컨설턴트에게 연락주시기 바랍니다.</div>
                </div>
            </div>
            <div class="popup-close">
                <i class="ui-layout-close" onclick="popClose();">팝업닫기</i>
            </div>
        </div>
    </div>

    <!-- [D]: 레이어팝업에 필요한 요소들입니다. 개발 후 삭제해주세요 -->
    <script>
        // 레이아웃팝업 활성화시 body.fixed
        $('.popup-open').click(function () {
            $('body').addClass('fixed');
            $('.area-layer-popup').fadeIn();
            // 팝업 높이: 2로 나누어떨어져야 함
            var popHeight = $('.popup-container').height();
            if ((popHeight % 2) == true){
                // alert ('나머지있음')
                var reHeight = popHeight + 1;
                $('.popup-container').height(reHeight);
            }
        });
        // 팝업 닫을 때 body.fixed 삭제
        $('.popup-close').click(function () {
            $('body').removeClass('fixed');
            $('.area-layer-popup').fadeOut(0);
        });
    </script>

@endsection