@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');

        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:',profile);

                    o.getMember(lineId);

                    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);
        });


        var o = {

            recommend_url:"{!! 'https://liff.line.me/'.env('LINE_LIFF_ID').'?'!!}",
            recommend_name: '',

            message: {
                type: "flex",
                altText: "{{ 'CLC '.__('member.MemberRegister') }}",
                contents: {
                    type: "bubble",

                    hero: {
                        type: "image",
                        url: "https://gcp.i2csolution.com/media/clc_line.png",
                        size: "full",
                        aspectRatio: "20:13",
                        aspectMode: "cover",
                        action: {
                            type: "uri",
                            uri: ""
                        }
                    },

                    body: {
                        type: "box",
                        layout: "vertical",
                        spacing: "md",
                        contents: [
                            {
                                type: "text",
                                text: "CLC {{ __('member.MemberRegisterInvitation') }}",
                                weight: "bold",
                                size: "xl",
                                gravity: "center",
                                wrap: true,
                            }, 
                            {
                                type: "text",
                                text: "Roy You !",
                                color: "#aaaaaa",
                                margin: "sm",
                                wrap: true,
                            },
                        ]
                    },
                    footer: {
                        type: "box",
                        layout: "vertical",
                        spacing: "sm",
                        contents: [
                            {
                                type: "button",
                                style: "primary",
                                height: "md",
                                action: {
                                    type: "uri",
                                    label: "GO !!",
                                    uri: ""
                                },
                            },
                            {
                                type: "button",
                                style: "link",
                                height: "sm",
                                action: {
                                    type: "uri",
                                    label: "前往官方網站",
                                    uri: "https://clc-shop.com"
                                },
                            },
                        ]
                    }
                }
            },

            setRecommendUrl: function(mobile)
            {
                this.recommend_url+='recommend_member_phone='+mobile;
            },

            getRecommendUrl: function()
            {
                return this.recommend_url;
            },

            setRecommendName: function(name)
            {
                this.recommend_name = name;
            },

            getRecommendName: function()
            {
                return this.recommend_name;
            },

            getMessage: function()
            {
                var msg = this.message;
                msg.contents.hero.action.uri = this.getRecommendUrl();
                msg.contents.hero.action.uri = this.getRecommendUrl();
                msg.contents.body.contents[1].text = this.getRecommendName()+', {{ __('line.SendInvitation') }}'+'!';
                msg.contents.footer.contents[0].action.uri = this.getRecommendUrl();

                // console.log('msg:',msg);
                return msg;
            },

            getMember: function(lineId)
            {
                $.ajax({
                    dataType: 'json',
                    data: {
                        module: form_obj.module,
                        controller: form_obj.controller,
                        type: 'read',
                        where: {
                            line_id: lineId,
                        },
                        print_log: false,
                    },
                    // async:false,
                    success: function(data,textStatus,jqXHR) {
                        console.log('ajax Data:',data);

                        if(!data.status || data.data.list.length ==0){
                            Swal.fire({
                                text: "{{ __('line.PleaseLoginLineFirst') }}" + "!",
                                icon: "error",
                                buttonsStyling: false,
                                confirmButtonText: "{{ __('basic.OK') }}",
                                customClass: {
                                    confirmButton: "btn btn-primary"
                                }
                            }).then((function(t) {
                                location.href='line.register';
                            }));

                            return;
                        }
                        var memRow = data.data.list[0];
                        console.log('memRow:',memRow);

                        o.setRecommendUrl(memRow.mobile);
                        o.setRecommendName(memRow.name);
                        o.sendMessage(o.getMessage());


                        // if(isJson(data)) {
                        //     var json = JSON.parse(data);
                        //     form_obj.detail.displayData(json['data']['list'][0]);

                        //     $("#detail_modal").modal('show');
                        // }
                    },
                    error: ajaxError
                });
            },

            sendMessage: function(message)
            {

                if (liff.isApiAvailable('shareTargetPicker')) {
                    // alert('yes');
                    liff.shareTargetPicker([message])
                    .then(function (res) {
                        // console.log(res);
                        if (res) {
                            console.log(`[${res.status}] Message sent!`);
                            // alert('※分享成功!※');

                            Swal.fire({
                                text: '{{ __('line.ShareSuccess') }}'+ "!",
                                icon: "success",
                                buttonsStyling: false,
                                confirmButtonText: "{{ __('basic.OK') }}",
                                customClass: {
                                    confirmButton: "btn btn-primary"
                                }
                            }).then((function(t) {
                                liff.closeWindow();
                                window.close();
                            }));

                        } else {
                            const [majorVer, minorVer] = (liff.getLineVersion() || "").split('.');
                            if (parseInt(majorVer) == 10 && parseInt(minorVer) < 11) {
                            // LINE 10.3.0 - 10.10.0
                            // Old LINE will access here regardless of user's action
                                console.log('TargetPicker was opened at least. Whether succeeded to send message is unclear')
                                // alert('LINE 10.3.0 - 10.10.0');
                            } else {
                              // LINE 10.11.0 -
                              // sending message canceled
                                console.log('TargetPicker was closed!')
                                // alert('LINE 10.11.0 -');
                            }
                        }
                    }).catch(function (error) {
                        // something went wrong before sending a message
                        console.log(error.code+' '+error.message)

                        Swal.fire({
                            text: '{{ __('line.ShareFail') }}, {{ __('line.PleaceContactSystemAdminstrator') }}' + "!",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "{{ __('basic.OK') }}",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        }).then((function(t) {
                            liff.closeWindow();
                            window.close();
                        }));
                    });

                }else{
                    Swal.fire({
                        text: "{{ __('basic.ThisDeviceNowNotSupportShare') }}" + "!",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "{{ __('basic.OK') }}",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    }).then((function(t) {
                        liff.closeWindow();
                        window.close();
                    }));
                }
            }

        }

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

                $('.share_btn').click(function(){
                    o.sendMessage(o.getMessage());
                });

                $('.close_btn').click(function(){
                    liff.closeWindow();
                    window.close();
                });
            });

        });
    </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.MemberRegisterInvitation') }}</h1>
        </div>

        <div class='row mt-5' >
            <div class='col-12 col-lg-12 mb-4 mb-lg-0 text-center'>
                <button type="button" class="btn btn-primary share_btn w-100px">
                    {{ __('line.ReShare') }}
                </button> 
            </div>
        </div>

        <div class='row mt-5' >
            <div class='col-12 col-lg-12 mb-4 mb-lg-0 text-center'>
                <button type="button" class="btn btn-danger close_btn w-100px">
                    {{ __('basic.Close') }}
                </button>
            </div>
        </div>

    </div>
    

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