@extends('.frontend.default')

@section('content')
    <section class="ragister-form">
        <div class="ragist-wrapper">
            <div class="container">
                <div class="row">
                    <form id="form" action="{{ route('register') }}" method="post" class="col-md-12 mb-4"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="recaptcha-1" name="g-recaptcha-response_v3" class="g-recaptcha-response_v3" value="">
                        <p class="title-base mb-2">新用戶註冊</p>
                        <p class="text-size-l text-secondary mb-5">用戶申請人必須是通過香港教育局認可的香港學校教師<a href="/#common_problem_totle" target="_blank">（我是否符合資格？）</a></p>
                        <div class="form-main-reg">
                            <div class="row">
                                @if ($errors->any())
                                    <div class="alert alert-danger w-100">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <p class="sub-title-base mb-3">登入資料</p>
                                </div>
                            </div>
                            <div>
                                <div class="form-row no-height row">
                                    <div class="col-12 max-auto ps">
                                        <label class="text-size-l">註冊電郵*</label>
                                        <input type="email" name="email" id="register_email" class="normal_ragister form-control text-size-l" value="{{ old('email') }}" style="" />
                                    </div>

                                    <div class="col-12 max-auto ps">
                                        <label class="text-size-l">重新輸入註冊電郵*</label>
                                        <input type="email" name="email_confirmation" id="register_email_confirmation"
                                            class="normal_ragister form-control text-size-l"
                                            value="{{ old('email_confirmation') }}" style=""/>
                                    </div>
                                    <div class="col-12 max-auto ps">
                                        <label class="text-size-l">設定密碼*</label>
                                        <input type="password" name="password" id="register_password" class="normal_ragister form-control text-size-l" style="margin-bottom: 5px;"/>
                                        <span class="text-right" style="margin: 0 0 20px 10px; display:block;">{{__('passwords.hint')}}</span>
                                    </div>

                                    <div class="col-12 max-auto ps">
                                        <label class="text-size-l">重新輸入密碼*</label>
                                        <input type="password" name="password_confirmation"
                                            id="register_password_confirmation" class="normal_ragister form-control text-size-l"  style=""/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="form-main-reg">
                            <div>
                                <div class="form-row no-height row">
                                    <div class="col-12">
                                        <p class="sub-title-base mb-3">教師任教資料</p>
                                    </div>
                                    <div class="col-12 max-auto">
                                        <div class="dropdown show margin-zero">
                                            @include('frontend.template.school.school_type_option_select_menu',[
                                            'label' => '',
                                            'name'=>'school_type_id',
                                            'id'=>'school_type_id',
                                            'option_value_field' => 'id',
                                            'class' => 'pl-4',
                                            'default' => old('school_type_id',null)
                                            ])
                                        </div>
                                    </div>
                                    <div class="col-12 max-auto" id="district_area" style="display:none">
                                        <div class="dropdown show margin-zero">
                                            @include('frontend.template.district_select_menu',[
                                            'label' => '',
                                            'name'=>'district_id',
                                            'id'=>'district_id',
                                            'class' => 'pl-4',
                                            'default' => old('district_id',null)
                                            ])
                                        </div>
                                    </div>
                                    <div class="col-12 max-auto mb-3" id='school_menu_col' style="display:none">
                                        <div class="dropdown show margin-zero">
                                            <select name="school_id" id="school_id" class="school_menu form-select pl-4">
                                            </select>
                                            <div id="school_menu_loading" style='display:none'>
                                                <div class="fa-2x">
                                                    <i class="fas fa-circle-notch fa-spin"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 max-auto mb-3 ps" id="register_school_address_area">
                                        <label class="text-size-l">請輸入學校地址*</label>
                                        <input type="text" id="register_school_address"
                                            class="col-12 form-control text-size-l" name="register_school_address"
                                            style="margin-bottom: 10px;"
                                            value="{{ old('register_school_address',null) }}"/>
                                    </div>
                                    <div class="col-12 max-auto mb-3 ps" id="register_other_school_area">
                                        <label class="text-size-l">請輸入學校名稱*</label>
                                        <input type="text" id="register_other_school" class="col-12 form-control text-size-l"
                                        name="register_other_school"
                                        style=""
                                        value="{{ old('register_other_school',null) }}"/>
                                    </div>
                                    <div class="col-12">
                                        @php
                                            $teacher_subjects = [];
                                            if(!empty(old('teacher_subjects')) && count(old('teacher_subjects')) > 0){
                                                foreach (old('teacher_subjects') as $teacher_subject) {
                                                    $subject = explode(',',$teacher_subject);
                                                    $teacher_subjects[] = [
                                                        'grade' => $subject[1],
                                                        'subject_id' => $subject[2],
                                                    ];
                                                }
                                            }
                                        @endphp
                                        @include('.frontend.template.school.subject',[
                                            'id' => 'register',
                                            'default' => $teacher_subjects,
                                            'dropdown_class' => 'pl-3',
                                        ])
                                    </div>

                                    <div class="col-md-12">
                                        <p class="text-size-l mb-3">校內其他工作</p>
                                    </div>
                                    <div class="col-12 max-auto">
                                        <div class="dropdown show">
                                            @include('frontend.template.position_select_menu', [
                                                "default" => old('position',''),
                                                'class' => 'pl-4',
                                            ])
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                    <br>
                                        <p class="sub-title-base mb-3">個人資料(請填寫中/英文全名以核實文件)</p>
                                    </div>
                                    <div class="col-12"></div>
                                    <div class="col-12 col-md-4 max-auto ps">
                                        <label>姓氏*</label>
                                        <input type="text" name="surname" id="surname" class="normal_ragister form-control" value="{{ old('surname') }}"/>
                                    </div>
                                    <div class="col-12 col-md-4 max-auto ps">
                                        <label>名字*</label>
                                        <input type="text" name="given_name" id="given_name" class="normal_ragister form-control" value="{{ old('given_name') }}"/>
                                    </div>
                                    <div class="col-12 col-md-8 max-auto ps">
                                        <label>聯絡電話*</label>
                                        <input type="tel" name="phone" id="phone" class="normal_ragister form-control" value="{{ old('phone') }}"/>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        @include(
                                            'frontend.template.teacher.authentication.normal',[
                                            'id' => 'teacher_authentication_file',
                                            'teacher_authentication_file' => null
                                        ])
                                    </div>
                                </div>
                                <br />
                                <br />
                                <br />
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="checks register-check">
                                            <label class="checkmark_box">
                                                <input type="checkbox" name="has_agree_school_portal_statement"
                                                    id="has_agree_school_portal_statement"
                                                    value="{{ \App\Models\School\Teacher\Teacher::ENUM_YES }}" />
                                                <span class="checkmark"></span>
                                            </label>
                                            <label for="has_agree_school_portal_statement">
                                                <span class="text-size-l">本人已閱覽並同意有關<a href="{{route('.terms_of_use')}}" target="_blank">使用條款</a>及<a href="{{route('.private_policy')}}" target="_blank">私隱政策聲明</a>。如違反有關條款及聲明，本人明白校易網(EasySchoolConnect)有權暫停或終止本人的帳號。</span>
                                            </label>
                                        </div>
                                        <div class="checks register-check">
                                            <label class="checkmark_box">
                                                <input type="checkbox" name="has_agree_promote" id="has_agree_promote"
                                                    value="{{ \App\Models\School\Teacher\Teacher::ENUM_YES }}" />
                                                <span class="checkmark"></span>
                                            </label>
                                            <label for="has_agree_promote"><span class="text-size-l">本人同意香港青年協會使用本人之個人資料作推廣用途。</span></label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </form>
                    <div class="rest-button text-center w-100">
                        <button id="form_button" class="btn btn-primary w-100 border-radius-30 p-2">提交註冊</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include("frontend.includes.google_recaptcha")

    <script>
        var url = "{{ asset('') }}";
        var is_submit = false;

        $(document).ready(function() {

            if({{ !empty(old('school_type_id')) ? 1 : 0 }}){
                $('#district_area').show();

                if({{ !empty(old('district_id')) ? 1 : 0 }}){
                    $('#school_menu_col').show();
                }
            }

            getSchoolByDistrict();
            $('#district_id, #school_type_id').change(function() {
                getSchoolByDistrict();
            });

            $('#school_type_id, #district_id').change(function(){
                if($('#school_type_id').val().length > 0){
                    $('#district_area').show();

                    if($('#district_id').val().length > 0){
                        $('#school_menu_col').show();
                    }else{
                        $('#school_menu_col').hide();
                    }
                }else{
                    $('#district_area').hide();
                    $('#district_id').val('');
                    $('#school_menu_col').hide();
                }
            });

            $("#teacher_authentication_file").change(function() {
                let file = $(this)[0].files[0];
                $("#button-upload-text").text(file.name);

                if (file) {
                    $("#teacher_certified_document_preview").attr('src', URL.createObjectURL(file));
                    $("#teacher_certified_document_preview").css({
                        'width': "50%",
                        'margin': 0
                    });
                }
            });

            $('#school_id').change(function() {
                if ($('#school_id option:selected').val() == 'other') {
                    showRegisterOtherSchool();
                } else {
                    hideRegisterOtherSchool()
                }
            });

            $('#form_button').click(function(e) {
                let self = this;

                if (!is_submit) {
                    is_submit = true;

                    grecaptcha.ready(function() {
                        grecaptcha.execute(google_recaptcha_client_Id, {
                            action: 'submit'
                        }).then(function(token) {
                            $('#form #recaptcha-1').val(token);

                            callAjax(self,{
                                'url': $('#form').attr('action'),
                                'method': $('#form').attr('method'),
                                'data': new FormData($('#form')[0]),
                                processData: false,
                                contentType: false,
                            },function(response){
                                location.href = "{{route('registered.verify_message')}}"
                                // registerSuccessPopup();
                                // setTimeout(function(){
                                //     location.href = '/';
                                // },8000)
                            },function(response){
                                failMessage(JSON.parse(response.responseText)['errors']);
                                is_submit = false;
                            });
                        });
                    });
                }
            });
        });//ready

        function registerSuccessPopup(){
            let message = '';
            message = "<p class='mb-3'>歡迎，您已成功建立帳戶!</p>";
            message += "<p class='mb-3'>驗證電郵已傳送到您的電子郵件信箱，請點擊郵件內的連結激活帳戶。</p>";
            message += "<p class='mb-3'>我們會儘快驗證您的教師證明文件以開通報價管理功能，您亦可以在驗證電郵及登入後重新上傳文件。</p>";
            message += "<p style='text-align:center'>-5秒後將跳至主頁-</p>";

            let registerSuccessPopup = bootbox.dialog({
                size: 'large',
                title: '註冊成功',
                message: message,
                closeButton: false
            });
        }

        function addSchoolOptionsToSchoolSelectMenu(schools) {
            $('#school_id').find('option').remove();
            $('#school_id').append('<option value="">請選擇學校</option>');
            $.each(schools, function(index, school) {
                $('#school_id').append('<option value="' + school.id + '">' + school.name +
                    '</option>');
            });
            $('#school_id').append('<option value="other">其他</option>');
        }

        var old_school_id = "{{ old('school_id',null) }}";
        function getSchoolByDistrict() {
            let district_id = $('#district_id option:selected').val();
            let school_type_id = $('#school_type_id option:selected').attr('model_id');

            $('#school_menu_loading').show();

            $.get(url + "api/school?district=" + district_id + "&school_type=" + school_type_id, function(
                data) {
                addSchoolOptionsToSchoolSelectMenu(data);
                $('#school_menu_loading').hide()
                hideRegisterOtherSchool();

                $('#register_school_address').val('');
                $('#register_other_school').val('');

                if(old_school_id.length > 0){
                    console.log(old_school_id);
                    $('#school_id').val(old_school_id);
                    old_school_id = '';

                    if ($('#school_id option:selected').val() == 'other') {
                        showRegisterOtherSchool();
                    }
                }

                showSubjectBySchoolType($('#school_type_id option:selected').data('name'));
            });
        }

        function showRegisterOtherSchool() {
            $('#register_school_address_area').show();
            $('#register_other_school_area').show();
        }

        function hideRegisterOtherSchool() {
            $('#register_school_address_area').hide();
            $('#register_other_school_area').hide();
        }
    </script>
@endsection