@extends('layouts.default', [
    'activatedNavItem' => 'SERVICE',
])

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/service.css"/>
    <script type="text/javascript" src="/js/form.js?ver=20200716"></script>
    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css"/>
@endpush

@section('content')

<div class="container service guidebook">
    <!-- 페이지타이틀 -->
    <div class="area-guidebook-top">
        <div class="agt-bg">
            <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/service/guide1-akmu.jpg" alt="" class="pc-img">
            <img src="https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/service/guide1-mo-akmu.jpg" alt="" class="mo-img">
        </div>
        <div class="agt-content">
            <div class="md-edm-logo">이디엠유학센터</div>
            <h1 class="page-title"><small>국가별 유학 &middot; 어학연수</small> 가이드북 <span class="text-color">문자 무료 발송</span></h1>
            <p class="add-text">
                국가별 유학생활 가이드, 추천학교 및 <br class="mo-br">진학방법 고객 후기 등<br class="pc-br">
                최신 유학정보가 담긴 가이드북을 컨설턴트가 문자로 전송해드립니다.<br>
                언제든지 내 폰에서 최신 유학정보를 확인해보세요
            </p>
        </div>
    </div>

    <!-- 컨텐츠 -->
    <div class="area-pages-content">
        <div class="cont-title">
            <h2>가이드북 <span class="text-color">신청정보</span></h2>
        </div>
        <div class="area-guidebook">
            <div class="require-notice">* 필수입력사항</div>
        <form id="guidebookForm" method="POST" action="{{ route('service.guidebook-download.store') }}">
            @csrf
            <!-- 숨김 변수-->
                <input type="hidden" name="counsel_type" value="simple">
            @if(getUserAgent() == 'pc')
                <input type="hidden" name="register_root[category]" value="가이드북신청PC">
            @else
                <input type="hidden" name="register_root[category]" value="가이드북신청M">
            @endif

            <!-- 기본정보 -->
            <div class="input-wrap">
                <div class="input join-name">
                    <p class="tit"><label for=""><i class="req">*</i>이름</label></p>
                    <div class="column">
                        <div class="line-style">
                            <input type="text" id="name" name="name" placeholder="이름을 입력하세요" value="{{ auth()->user() ? auth()->user()->mm_name : old('name') }}"/>
                        </div>
                    </div>
                </div>
                <div class="input">
                    <p class="tit"><label for=""><i class="req">*</i>휴대폰</label></p>
                    <p class="line-style">
                        <input type="tel" id="" name="phone" placeholder="' - ' 없이 숫자만 입력하세요" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" value="{{ str_replace('-', '', auth()->user() ? auth()->user()->mm_mobile : old('phone')) }}"/>
                    </p>
                </div>
                <div class="input">
                    <p class="tit"><label for=""><i class="req">*</i>이메일</label></p>
                    <p class="line-style">
                        <input type="text" id="" name="email" placeholder="이메일 주소를 입력하세요" value="{{ auth()->user() ? auth()->user()->mm_email : old('email') }}"/>
                    </p>
                </div>
                <div class="input">
                    <p class="tit"><label for="">카카오톡</label></p>
                    <p class="line-style">
                        <input type="text" id="" name="kakaotalkid" placeholder="카카오톡 ID를 입력하세요" value="{{ auth()->user() ? auth()->user()->mm_homepage : old('kakaotalkid') }}"/>
                    </p>
                    <p>카카오톡에서 [전화번호로 친구 추가 허용]을 비활성화 하신 경우, 담당 컨설턴트와의 카톡 채팅상담을 위해 [카카오톡 ID]를 입력하세요.</p>
                    <p class="text-right"><a class="text-color " href="javascript:void(0);" onclick="kakaoTalkIdCheckGuide()">카카오톡 ID 확인방법</a></p>
                </div>
                <div class="input sel-box">
                    <p class="tit"><label for=""><i class="req">*</i>거주지역</label></p>
                    <p class="line-style">
                        <select id="aif-region" name="region">
                            <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> --}}
                            <option value="해외">해외</option>
                        </select>
                    </p>
                </div>
                <div class="input hope">
                    <div class="input country">
                        <p class="tit"><label for="aif-country">유학국가</label></p>
                        <div class="line-style">
                            <input type="text" id="country_names" name="country_names" value="{{ old('country_names') }}" class="select-style" placeholder="국가를 선택해주세요" autocomplete="off" readonly>
                        </div>
                        <div class="multi-select">
                            <div class="chk-custom-wrap">
                                @foreach ($countries as $key => $country)
                                    <span><input type="checkbox" id="aif-country{{ $key }}" name="country[]" value="{{ $country->code }}" @checked(old('country.'.$key), $country->code)><label for="aif-country{{ $key }}">{{ $country->name }}</label></span>
                                @endforeach
                            </div>
                            <div class="button-wrap">
                                <input type="button" class="reset button half" value="선택해지">
                                <input type="button" class="save button color half" value="선택완료" data-class="country">
                            </div>
                        </div>
                    </div>
                    <div class="input type">
                        <p class="tit"><label for="aif-interest"><i class="req">*</i>관심분야</label></p>
                        <div class="line-style">
                            <input type="text" id="type_names" name="type_names" value="{{ old('type_names') }}" class="select-style" placeholder="관심분야를 선택해주세요" autocomplete="off" readonly>
                        </div>
                        <div class="multi-select">
                            <div class="chk-custom-wrap">
                                @foreach ($types as $key => $type)
                                    <span><input type="checkbox" id="aif-interest{{ $key }}" name="type[]" class="checktype" value="{{ $type->code }}" @checked(old('type.'.$key), $type->code)><label for="aif-interest{{ $key }}">{{ $type->name }}</label></span>
                                @endforeach
                            </div>
                            • 최대 2개까지 선택 가능합니다.<br/>
                            • 만 17세이하 어학연수는 조기유학을 선택해주시기 바랍니다.
                            <div class="button-wrap">
                                <input type="button" class="reset button half" value="선택해지">
                                <input type="button" class="save button color half" value="선택완료" data-class="type">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="input">
                    <p class="tit"><label for="">문의사항</label></p>
                    <textarea name="content" placeholder="문의 내용을 입력해주시면 자세히 안내해드리겠습니다"></textarea>
                </div>

                <!-- 약관 및 개인정보수집동의 -->
                <div class="input-wrap agreement">
                    <p class="tit">이용약관 및 개인정보수집 동의</p>
                    <p class="agreement-all">
                        <span class="chk"><input type="checkbox" name="agreement" id="agreementAll" /><label for="agreementAll">약관에 모두 동의합니다.</label></span>
                    </p>
                    <div class="agreement-each">
                        <div class="terms-wrap">
                            <p class="chk"><input type="checkbox" name="agreement_data_collection" id="data_collection" /><label for="data_collection">[필수] 개인정보수집 및 이용</label></p>
                            <span class="toggle-btn">자세히보기</span>
                            <div class="terms-detail">
                                {{ S3Policy::find('data-collection')->render() }}
                            </div>
                        </div>
                        <div class="terms-wrap">
                            <p class="chk"><input type="checkbox" name="agreement_age_check" id="age_check" /><label for="age_check">[필수] 만 14세 이상입니다.</label></p>
                            <span class="toggle-btn">자세히보기</span>
                            <div class="terms-detail">
                                {{ S3Policy::find('age-check')->render() }}
                            </div>
                        </div>
                    </div>
                    @if (!empty($errors->get('agreement')))
                        <div class="message error">{{ $errors->first('agreement') }}</div>
                    @endif
                </div>
            </div>

            <div class="button-wrap">
                <a href="#" id="guidebookSubmit" onclick="event.preventDefault();" class="button color wide">가이드북 파일 문자 받기</a>
            </div>
            <small class="exp">※ 가이드북 신청 시 신청자 확인 차 해피콜 서비스를 실시하고 있습니다.</small>
        </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        //약관 체크박스
        $('.agreement input[type=checkbox]').click(function(){
            if ($(this).attr('id') == 'agreementAll') {
                if ($(this).prop("checked")) {
                    $(".agreement-each input[type=checkbox]").prop("checked",true);
                } else {
                    $(".agreement-each input[type=checkbox]").prop("checked",false);
                }
            } else {
                if ($('.agreement-each input[type=checkbox]:checked').length == $('.agreement-each input[type=checkbox]').length) {
                    $('#agreementAll').prop('checked',true);
                } else {
                    $('#agreementAll').prop('checked',false);
                }
            }
        });

        // 희망유학 국가,분야 선택
        $('.hope .line-style').click(function(){
            if ($(this).parent().siblings().hasClass('ims-active')) {
                $(this).parent().siblings().toggleClass('ims-active');
            }
            $(this).parent().toggleClass('ims-active');
        });

        $('.hope .reset').click(function(){
            $(this).parent().parent().find('input[type=checkbox]').prop('checked', false);
        });

        $('.hope .save').click(function(){
            const data = $(this).data('class');
            var value = [];
            $('.hope .'+data+' input[type=checkbox]:checked').each(function() {
                var checkedId = $(this).attr('id');
                value.push($('label[for='+checkedId+']').text());
            });
            $('.hope .'+data+' input[type=text]').val(value.join(','));
            $('.hope .'+data).toggleClass('ims-active');
        });

        $('#guidebookSubmit').click(function(e) {
            if($("input:checkbox[class=checktype]:checked").length > 2)   {
                alert('관심분야는 2개 이하로 체크해주세요.');
                return false;
            }

            // 사전 체크
            if($('#data_collection').is(":checked") !== true) {
                Swal.mixin({
                    html: '개인정보 수집 및 이용안내 동의는 필수 선택 항목 입니다.',
                    type: 'warning',
                    cancelButtonClass: 'cancel',
                    cancelButtonText: '취소',
                    confirmButtonClass: 'warning',
                    confirmButtonText: '확인',
                    allowOutsideClick: function() {!Swal.isLoading()},
                    allowEscapeKey: function() {!Swal.isLoading()}
                }).fire();

                return false;
            }

            // 사전 체크
            if($('#age_check').is(":checked") !== true) {
                Swal.mixin({
                    html: '만 14세 이상 여부는 필수 선택 항목 입니다.',
                    type: 'warning',
                    cancelButtonClass: 'cancel',
                    cancelButtonText: '취소',
                    confirmButtonClass: 'warning',
                    confirmButtonText: '확인',
                    allowOutsideClick: function() {!Swal.isLoading()},
                    allowEscapeKey: function() {!Swal.isLoading()}
                }).fire();

                return false;
            }

            //if(confirm('가이드북을 신청하시겠습니까 ?')) {
                var $form = $('#guidebookForm');

                $.ui_ajax({
                    ajax: {
                        method: $form.attr('method'),
                        url: $form.attr('action'),
                        data: $form.serialize(),
                        done: function() {
                            var event_region = $("#aif-region").val();
                            var event_country = $("#country_names").val();
                            var event_type = $("#type_names").val();

                            Analytics.call('guidebook.created', event_region, event_country, event_type);
                        }
                    },
                    dialog: {
                        //confirm: true,
                        text_process: '상담 신청중입니다.<br/>잠시만 기다려 주세요.',
                        text_done: '신청이 완료되었습니다.<br/>담당 컨설턴트가 문자로 가이드북 다운로드 링크를 보내드리겠습니다.',
                        text_fail: '상담 신청에 실패했습니다.',
                        //text_confirm: '가이드북을 신청하시겠습니까',
                        done: function(data) {
                            $error = null;
                            window.location.href = '{!! route('service.guidebook-download.request') !!}';
                        },
                        fail: function(jqXHR, textStatus, errorThrown) {
                            var response = jqXHR.responseJSON;
                            if (response) {
                                $error = response.errors;
                            }
                        },
                        close: function() {
                            if ($error) {
                                for (var key in $error) {
                                    $form.find('[name="' + key + '"]').focus();
                                    break;
                                }
                            }
                        }
                    }
                });
                return false;
            //}
        });
    });
</script>

@endsection