@extends('partial.html')

@section('template_scripts')
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script type='text/javascript'>
        page.loading.start('#kt_body');
        

        @if(!empty($recommendMemberPhone))
            localStorage.setItem('recommend_member_phone', '{{ $recommendMemberPhone }}');
        @endif

        form_obj.module     = 'Member';
        form_obj.controller = 'MemberController';

        var liffId = '{{ env('LINE_LIFF_ID') }}';
        liff.init({ liffId: liffId }).then(()=>{
            if(liff.isLoggedIn()){
                $('.line_login').show();
                $('.line-logout-btn').show();

                liff.getProfile()
                .then(profile => { 
                    const name = profile.displayName;
                    const lineId = profile.userId;
                    const pictureUrl = profile.pictureUrl;
                    console.log(profile);
                    // getEmp(lineId);

                    $('#name').val(name);
                    $('#line_id').val(lineId);
                    // $('#line_picture_url').val(pictureUrl);
                    // $('#user_pic').prop('src',pictureUrl);

                    page.loading.stop('#kt_body');
                })
                .catch((err) => {
                    console.log('error', err);
                });
            }else{
                $('.line_unlogin').show();
                liff.login();
            }
        }).catch((err) => {
            // Error happens during initialization
            console.log(err.code, err.message);
            alert(err.message);
        });


        // 驗證
        const validator = FormValidation.formValidation(
            document.getElementById('fm'),
            {
                fields: {
                    'name': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Name').__('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'mobile': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Mobile').__('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                    'email': {
                        validators: {
                            notEmpty: {
                                message: "{{ __('basic.Email').__('basic.CanNotEmpty') }}"
                            }
                        }
                    },
                   
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        );

        $(function() {
            
            KTUtil.onDOMContentLoaded(function () {

                var recommend_member_phone = localStorage.getItem('recommend_member_phone');

                if(recommend_member_phone!=''){
                    $('#recommend_member_phone_text').text(recommend_member_phone);
                    $('#recommend_member_phone').val(recommend_member_phone);
                    $('#recommend_member_phone').hide();
                }

                $('#sb').click(function() {
                    if (validator) {
                        page.loading.start('#kt_body');

                        validator.validate().then(function (status) {
                            if($('#line_id').val()==''){
                                Swal.fire({
                                    text: "{{ __('line.PleaseLoginLineFirst') }}" + "!",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "{{ __('basic.OK') }}",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                }).then((function(t) {
                                    location.reload()
                                }));
                            }
                            if (status == 'Valid') {
                                var formData = new FormData($('#fm')[0]);
                                formData.append('module',form_obj.module);
                                formData.append('controller',form_obj.controller);
                                formData.append('type','create');
                                formData.append('password',formData.get('mobile'));
                                formData.append('print_log',false);

                                $.ajax({
                                    data: formData,
                                    dataType: 'json',
                                    contentType: false,
                                    processData: false,
                                    success:function(data,textStatus,jqXHR) {
                                        console.log(data);
                                        if(data.status){
                                            Swal.fire({
                                                text: data.msg + "!",
                                                icon: "success",
                                                buttonsStyling: false,
                                                confirmButtonText: "{{ __('basic.OK') }}",
                                                customClass: {
                                                    confirmButton: "btn btn-primary"
                                                }
                                            }).then((function(t) {
                                                liff.closeWindow();
                                                // location.reload();
                                            }));
                                        }else{
                                            Swal.fire({
                                                html: data.msg.replaceAll("\r\n","<BR>"),
                                                icon: "error",
                                                buttonsStyling: !1,
                                                confirmButtonText: "{{ __('basic.OK') }}",
                                                customClass: {
                                                    confirmButton: "btn btn-primary"
                                                }
                                            }).then(function(){
                                                page.loading.stop('#kt_body');
                                            });
                                        }
                                        
                                    },error: ajaxError
                                });

                                page.loading.stop('#kt_body');
                            }

                        })
                    }
                })

                $('.line-logout-btn').click(function(){
                    liff.logout();
                    location.reload();
                })
            });

        });
    </script>

@endsection

@section('kt_body')
    <div class='container p-5' id='kt_content' >
        <div class='row justify-content-center'>
            <div class='col-12 text-center mb-3'>
                <img alt="Logo" src="{{ asset('media/logo.png')}}" class="h-50px logo " />
            </div>
            <h1 class='text-center mb-3' >{{ __('member.MemberRegister') }}</h1>
        </div>

        <div class='row mt-5' >
            <form id="fm" class="form" method="post" enctype="multipart/form-data" >
                <div class="fv-row mb-5 row justify-content-center">
                    <div class='col-12 col-lg-6 mb-4 mb-lg-0'>
                        <label class="fw-bold fs-6 mb-2">Line Login</label>
                        <span class='text-primary line_login ms-2' style='display: none;'>{{ __('basic.IsLoggedIn') }}</span>
                        <span class='text-danger line_unlogin ms-2' style='display: none;'>{{ __('basic.NotLoggedIn') }}</span>
                        <button type='button' class="btn btn-secondary btn-sm ms-2 line-logout-btn" style='display: none;'>{{ __('basic.Logout') }}</button>
                    </div>

                    {{-- <div class='col-6 col-lg-2'>
                        <img src=''class='w-100px user_pic'/>
                    </div> --}}
                </div>
                <div class="fv-row mb-5 row justify-content-center">
                    <div class='col-12 col-lg-6 mb-4 mb-lg-0'>
                        {{-- 姓名 --}}
                        <label class="required fw-bold fs-6 mb-2">{{ __('basic.Name2') }}</label>
                        <input type="text" id="name" name="name" class="form-control " placeholder="" value="" />
                        <input type="hidden" id="line_id" name="line_id" class="form-control " placeholder="" value="" />
                        {{-- <input type="text" id="line_picture_url" name="line_picture_url" class="form-control " placeholder="" value="" /> --}}
                    </div>
                </div>
                <div class="fv-row mb-5 row justify-content-center">
                    <div class='col-12 col-lg-6 mb-4 mb-lg-0'>
                        {{-- 手機 --}}
                        <label class="required fw-bold fs-6 mb-2">{{ __('basic.Mobile') }} ({{ __('basic.LoginAccount') }}、{{ __('basic.LoginPassword') }}')</label>
                        <input type="phone" class="form-control " id='mobile' name='mobile' maxlength=10 value='' />
                    </div>
                </div>
                <div class="fv-row mb-5 row justify-content-center">
                    <div class='col-12 col-lg-6 mb-4 mb-lg-0'>
                        {{-- Email --}}
                        <label class="required fw-bold fs-6 mb-2">{{ __('basic.Email') }}</label>
                        <input type="mail" class="form-control " id='email' name='email' value='' />
                    </div>
                </div>
                <div class="fv-row mb-5 row justify-content-center">
                    <div class='col-12 col-lg-6 mb-4 mb-lg-0'>
                        {{-- 推薦人 --}}
                        <label class="fw-bold fs-6 mb-2">{{ __('member.RecommendMember') }} {{ __('basic.Mobile') }}</label>
                        <p id='recommend_member_phone_text'></p>
                        <input type="text" class="form-control " id='recommend_member_phone' name='recommend_member_phone' value='' />
                    </div>
                </div>

                <div class="text-center pt-5">
                    <button type="button" class="btn btn-primary me-3" id="sb">
                        <span class="indicator-label">{{ __('basic.Register') }}</span>
                        <span class="indicator-progress">{{ __('basic.PleaseWait') }}...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                    </button>
                    {{-- <button type="reset" class="btn btn-light " data-kt-users-modal-action="cancel" id="modal_cancel">{{ __('basic.Cancel') }}</button> --}}
                </div>

            </form>

        </div>

    </div>

    <div class="overlay-layer bg-dark-o-10" style='display: none;' >
        <div class="spinner spinner-primary"></div>
    </div>
@endsection