@extends('mypage.template', [
    'menu' => 'apply',
    'pageType' => 'Auth'
])

@push('head')
    <script type="text/javascript" src="/js/form.js?ver=20200716"></script>
@endpush

@section('page')
    <!-- content -->
    <div class="area-mypage-wrap">
        <h2 class="cont-title">수속신청</h2>
        <!-- 단계표시 -->
        <ul class="md-process-step">
            <li><span class="pc-text">수속</span>기본정보 <span class="pc-text">입력</span></li>
            <li class="current">학교/과정/기타<span class="pc-text">정보 입력</span></li>
            <li><span class="pc-text">수속신청</span>완료</li>
        </ul>

        <div class="exp-txt">
            <p>ㆍ* 표시 항목은 필수입력사항입니다.</p>
            <p>ㆍ작성하기 어려운 부분은 입력하지 않으셔도 됩니다.<br class="mo-br"><span class="mo-inline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>담당 컨설턴트가  자세히 안내해드립니다.</p>
        </div>

        <div class="area-mypage-form">
            <form method="POST" action="{{ route('mypage.apply.store') }}">
                @csrf
                <input type="hidden" name="first_name" value="{{ $basic_info->first_name }}">
                <input type="hidden" name="last_name" value="{{ $basic_info->last_name }}">
                <input type="hidden" name="birth_date" value="{{ $basic_info->birth_date }}">
                <input type="hidden" name="kakaotalk_id" value="{{ $basic_info->kakaotalk_id }}">
                <input type="hidden" name="zipcode" value="{{ $basic_info->zipcode }}">
                <input type="hidden" name="address" value="{{ $basic_info->address }}">
                <input type="hidden" name="country" value="{{ $basic_info->country }}">
                <input type="hidden" name="uhak_type" value="{{ $basic_info->uhak_type }}">
                <input type="hidden" name="uhak_course" value="{{ $basic_info->uhak_course }}">
                <input type="hidden" name="branch" value="{{ $basic_info->branch }}">

                @yield('detail')

                <!-- 약관동의 -->
                <div class="input-wrap agreement">
                    <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="" id="agree1" /><label for="agree1">[필수] 개인정보수집 및 이용안내 동의</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="" id="agree2" /><label for="agree2">[필수] 수속약관 동의</label></p>
                            <span class="toggle-btn">자세히보기</span>
                            <div class="terms-detail">
                                {{ S3Policy::find('terms-and-conditions-'.Str::lower($uhakType->config_code))->render() }}
                            </div>
                        </div>
                        <div class="terms-wrap">
                            <p class="chk"><input type="checkbox" name="" id="agree3" /><label for="agree3">[필수] 수집한 개인정보 위탁동의</label></p>
                            <span class="toggle-btn">자세히보기</span>
                            <div class="terms-detail">
                                {{ S3Policy::find('data-transfer')->render() }}
                            </div>
                        </div>
                        <div class="terms-wrap">
                            <p class="chk"><input type="checkbox" name="" id="agree4" /><label for="agree4">[필수] 고유식별정보 수집처리동의</label></p>
                            <span class="toggle-btn">자세히보기</span>
                            <div class="terms-detail">
                                {{ S3Policy::find('unique-identification')->render() }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 신청하기 -->
                <div class="button-wrap next">
                    <button type="submit" class="button color wide">신청하기</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        $(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);
                    }
                }
            });
        });

        $('.layout-container form').submit(function() {
            var $form = $(this);
            var $error = null;
            var $area = $('#app');

            $.ui_ajax({
                ajax: {
                    method: $form.attr('method'),
                    url: $form.attr('action'),
                    data: $form.serialize(),
                },
                dialog: {
                    text_process: '신청중입니다.<br/>잠시만 기다려 주세요.',
                    text_done: '신청이 완료되었습니다.',
                    text_fail: '신청에 실패했습니다.',
                    done: function(data) {
                        $error = null;
                        if (data.view) {
                            $area.html(data.view);
                        }

                        $('html').scrollTop(0);
                    },
                    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