@extends(env('APP_NAME').'.layout')

@push('head')
    {!! resource('asset/inquiry.css') !!}
    <link rel="stylesheet" href="/asset/swiper/swiper.min.css">
    <script src="/asset/swiper/swiper.min.js"></script>
@endpush

@section('content')

    <div class="inquiry consultation">
        <!-- 제목 및 현재위치 표시 -->
        <div class="area-pages-top">
            <div class="container">
                <h1 class="page-title">간편상담</h1>
                <p>간편하게 상담을 신청하세요. 전문 컨설턴트가 24시간 이내 친절히 상담해 드리겠습니다. <br><b>전화 • 방문 • 화상(ZOOM) 상담 가능</b></p>
            </div>
        </div>

        <div class="area-pages-content">
            <div class="container contentsWrap" style="margin-bottom: 5rem;">
                <form method='POST' action="/hanaedu/inquiry/store" class="requestForm" id="hanaeduInquiryRequest">
                    @csrf
                    <input type="hidden" name="gc_token" id="gc_token" value="">
                    <input type="hidden" name="register_root[category]" value="간편상담">
                    <input type="hidden" name="branch" value="HN">
                    <div class="area-inquiry-form">
                        <p class="essential"><label for="aif-name"><i class="req">* 필수항목</i></label></p>
                        <div class="input-wrap">
                            <div class="input">
                                <label class="tit" for="id-input-popup"><i class="req">*</i>이름</label>
                                <input id="id-input-popup" type="text" name="name" value="{{ auth()->user() ? auth()->user()->name : old('name') }}" placeholder="이름을 입력하세요." required>
                            </div>
                            <div class="input">
                                <label class="tit" for="phone-input-popup"><i class="req">*</i>연락처</label>
                                <input id="phone-input-popup" type="tel" name="phone" value="{{ str_replace('-', '', auth()->user() ? auth()->user()->phone : old('phone')) }}" placeholder="‘-’ 없이 숫자만 입력하세요." required>
                            </div>
                            <div class="input kakaoWrap">
                                <label class="tit" for="kakaotalkid-input-popup"><span>카카오톡 ID</span><div class="subTxt">*카카오톡에서 [전화번호로 친구 추가 허용]을 비활성화 하신 경우, [카카오톡 ID]를 입력해 주시면 담당 컨설턴트가 카톡으로 연락드리겠습니다.</div></label>
                                <input id="kakaotalkid-input-popup" type="text" name="kakaotalkid" value="" placeholder="카카오톡 ID를 입력하세요.">
                                <div><button type="button" class="howKakao" onclick="kakaoTalkIdCheckGuide()">카카오톡 ID 확인방법</button></div>
                            </div>
                            <div class="input">
                                <label class="tit" for="email-input-popup"><i class="req">*</i>이메일</label>
                                <input id="email-input-popup" type="email" name="email" autocomplete="off" placeholder="이메일 주소를 입력하세요." required>
                            </div>
                            <div class="input">
                                <label class="tit" for="textarea-input-popup">문의사항</label>
                                <textarea name="memo" id="textarea-input-popup" cols="30" rows="10" placeholder="문의사항을 입력해 주시면 자세히 안내해드리겠습니다."></textarea>
                            </div>

                            <div class="input terms-wrap">
                                <div class="all-agree">
                                    <input type="checkbox" id="agreementAll"><label for="agreementAll">약관에 모두 동의합니다.</label>
                                </div>
                                <div class="agreement-each">
                                    <input type="checkbox" name="storage" id="storage-input-popup"><label for="storage-input-popup"><b>[필수]&nbsp;</b> 개인정보수집 및 이용안내 동의</label>
                                    <button type="button" class="privacy-btn">자세히 보기</button>
                                    <div class="area-terms policy-privacy">
                                        <div class="scroll">
                                            본사는 개인정보 보호를 위하여 개인정보 보호 지침을 마련하고 이를 준수하고 있습니다. 수집 정보는 아래 수집 목적에 따라 사용되고, 이메일이나 문자 등을 통한 교육 프로그램 정보 또는 기타 서비스의 제공 등에 활용될 수 있습니다.<br>
                                            <br>
                                            1. 수집목적 : 유학상담, 문의응대, 각종 이벤트 등 최신 정보 제공 및 홍보성 정보 제공<br>
                                            2. 수집 항목 : 이름, 휴대폰, 이메일, 카카오톡ID<br>
                                            3. 보유 및 이용 기간 : 회원탈퇴 시까지<br>
                                            <br>
                                            신청자는 개인정보 수집 및 이용 동의를 거부하실 수 있습니다. 단, 동의 거부 시 서비스 이용에 제한이 있을 수 있습니다.
                                        </div>
                                    </div>
                                </div>
                                <div class="agreement-each">
                                    <input type="checkbox" name="privacy_agreement" id="age_check"><label for="age_check"><b>[필수]&nbsp;</b> 만 14세 이상입니다.</label>
                                    <button type="button" class="privacy-btn">자세히 보기</button>
                                    <div class="area-terms policy-privacy">
                                        <div class="scroll">
                                            본사는 법정대리인의 동의가 필요한 만 14세 미만의 아동의 개인정보를 수집하지 않으며, 회원가입을 불허하고 있습니다. 다만 상담 서비스나 수속 서비스를 진행하는 경우 부모 등 친권을 보유하는 자의 동의를 받고 회사의 서비스를 진행하고 있습니다.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-submit hana-btn-wrap input-btn-wrap">
                                <button type="button" onClick="checkRecaptchaV3('hanaeduInquiryRequest')" class="hana-btn button">신청하기</button>
                            </div>
                        </div>
                    </div>
                </form>

                @include('hana.component.inquiry.idcheck-kakao')

            </div>
        </div>
    </div>

    <script src="https://www.google.com/recaptcha/api.js?render={{ config('var.RECAPTCHA_V3_SITEKEY') }}"></script>

    <script>
        function checkRecaptchaV3(requestName) {
            grecaptcha.ready(function() {
                grecaptcha.execute("{{ config('var.RECAPTCHA_V3_SITEKEY') }}").then(function(token) {
                    $('#gc_token').val(token);
                    inquiryRequest(requestName);
                });
            });
        }

        // popup
        function kakaoTalkIdCheckGuide(){
            $('body').css({
                'height':'100%','overflow':'hidden'
            });
            document.getElementById('popup-idcheck-kakao').classList.add('open');
        }
        function popClose(){
            $('body').css({
                'height':'auto','overflow':'initial'
            });
            document.getElementById('popup-idcheck-kakao').classList.remove('open');
        }

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

@endsection