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

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

@section('content')

    <div class="container inquiry consultation">
        <!-- 제목 및 현재위치 표시 -->
        <div class="area-pages-top bg">
            <h1 class="page-title">견적요청</h1>
            <div class="add-text">
                예상 유학 비용이 궁금하신가요?<br>
                모든 항목의 예상비용을 자세하게 알려 드리겠습니다
            </div>
        </div>
        <div class="area-pages-content">
            <div class="flex-wrap">
                <form method="POST" action="{{ route('inquiry.quote.store') }}">
                    <input type="hidden" name="counsel_type" value="simple">
                    <input type="hidden" name="register_root[category]" value="견적요청">
                    @csrf
                    <div class="area-inquiry-form" style="float:none; margin:0 auto">
                        <div class="require-notice"><i class="req">*</i> 필수입력사항</div>
                        <div class="input-wrap">
                            <div class="input">
                                <p class="tit"><label for="aif-name"><i class="req">*</i>이름</label></p>
                                <p class="line-style">
                                    <input type="text" id="aif-name" name="name" value="{{ auth()->user() ? auth()->user()->mm_name : old('name') }}" placeholder="이름을 입력하세요." class="line-style">
                                </p>
                            </div>
                            <div class="input">
                                <p class="tit"><label for="aif-phone"><i class="req">*</i>휴대폰</label></p>
                                <p class="line-style">
                                    <input type="tel" id="aif-phone" name="phone" value="{{ str_replace('-', '', auth()->user() ? auth()->user()->mm_mobile : old('phone')) }}" placeholder="'-'없이 숫자만 입력하세요" maxlength="11">
                                </p>
                            </div>
                            <div class="input sel-box" id="hopeDateTimePhone">
                                <p class="tit"><label for="aif-departTime"><i class="req">*</i>연락희망시간</label></p>
                                <p class="line-style">
                                    <select id="departTimePhone" name="departTimePhone">
                                        <option value="">연락받기 편한 시간대를 선택하세요.</option>
                                        <option value="오전 (10시~12시)">오전 (10시~12시)</option>
                                        <option value="오후 (2시~4시)">오후 (2시~4시)</option>
                                    </select>
                                </p>
                                <p class="tit"><label for="aif-departTime"><small><span style="color:red;">※ 정확한 상담일시 확정을 위해 담당 컨설턴트가 사전에 연락을 드리오니 전화를 꼭 받아주세요.</span></small></label></p>
                            </div>
                            <div class="input">
                                <p class="tit"><label for="aif-email"><i class="req">*</i>이메일</label></p>
                                <p class="line-style">
                                    <input type="text" id="aif-email" name="email" value="{{ auth()->user() ? auth()->user()->mm_email : old('email') }}" placeholder="이메일 주소를 입력하세요." >
                                </p>
                            </div>
                            <div class="input">
                                <p class="tit"><label for="aif-kakaotalkid">카카오톡 ID</label></p>
                                <p class="line-style">
                                    <input type="text" id="aif-kakaotalkid" name="kakaotalkid" value="{{ auth()->user() ? auth()->user()->mm_homepage : old('kakaotalkid') }}" placeholder="카카오톡 ID를 입력하세요." >
                                </p>
                                <p><small>※ 카카오톡에서 [전화번호로 친구 추가 허용]을 비활성화 하신 경우, [카카오톡 ID]를 입력해 주시면 담당 컨설턴트가 카톡으로 연락드리겠습니다.</small></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="aif-region"><i class="req">*</i>거주지역</label></p>
                                <p class="line-style">
                                    <select id="aif-region" name="region">
                                        <option value="">거주지역을 선택하세요.</option>
                                        @foreach ($regions as $region)
                                            <option value="{{ $region }}" @selected(old('region'), $region)>{{ $region }}</option>
                                        @endforeach
                                    </select>
                                </p>
                            </div>
                            <div class="input-wrap 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="input-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="input-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="aif-write">문의사항</label></p>
                                <div class="">
                                    @php
                                        $content = old('content');
                                        if (!$content) {
                                            $content = ['- 숙소형태: ', '- 예산범위: ', '- 기간: ', '- 기타: '];
                                            $content = implode(PHP_EOL, $content);
                                           }
                                    @endphp
                                    <textarea id="aif-write" name="content">{{ $content }}</textarea>
                                </div>
                            </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 class="button-wrap">
                                <button type="submit" class="button color wide">견적요청하기</button>
                            </div>
                        </div>
                    </div>
                </form>
                {{-- <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">
                        @contentManager('INQUIRY', 'QUOTE-BANNERS')
                        <div class="swiper-wrapper">
                            @foreach ($items = @contentItems('INQUIRY', 'QUOTE-BANNERS')->get() as $item)
                                <div class="swiper-slide">
                                    @contentItem(['item' => $item])
                                    @endcontentItem
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="swiper-controls">
                        <div class="swiper-controls-direction">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            new Swiper('.area-promotion-inquiry .aip-slide', {
                loop: true,
                autoplay: true,
                slideClass: 'swiper-slide',
                slidesPerView: 1,
                navigation: {
                    prevEl: '.area-promotion-inquiry .swiper-button-prev',
                    nextEl: '.area-promotion-inquiry .swiper-button-next',
                },
            });

            //희망유학 국가,분야 선택
            $('.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');
            });

            //약관 체크박스
            $('.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);
                    }
                }
            });


            $('.layout-container form').submit(function() {
                if( $("#departTimePhone").val() == "" ) {
                        alert('견적요청 신청 시 연락희망시간은 필수 입력 항목입니다.');
                        return false;
                    }

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

                $.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('quote.created', event_region, event_country, event_type);
                        }
                    },
                    dialog: {
                        text_process: '견적 요청중입니다.<br/>잠시만 기다려 주세요.',
                        text_done: '견적요청이 완료되었습니다.<br/>고객님의 담당컨설턴트가 직접 연락 드려 궁금한 점에 대해 안내해드리도록 하겠습니다.<br/>감사합니다.',
                        text_fail: '견적 요청에 실패했습니다.',
                        done: function(data) {
                            $error = null;
                            window.location.href = '{!! route('main.index') !!}';
                        },
                        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;
            });

            {{-- 파라메터가 넘어오는경우 자동으로 타입과 국가 셋팅--}}
            @if(request()->has('country'))
                $('#country_names').trigger('click'); $('[id^="aif-country"][value="{{ trim(request('country', '')) }}"]').trigger('click'); $('input[data-class="country"]').trigger('click');
            @endif

            @if(request()->has('type'))
                $('#type_names').trigger('click'); $('[id^="aif-interest"][value="{{ trim(request('type', '')) }}"]').trigger('click'); $('input[data-class="type"]').trigger('click');
            @endif
        });
    </script>
@endsection