@extends('layout.master')

@section('content')
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script type='text/javascript'>
        console.log('data:',{{ Js::from($data) }});
        var userData = {{ Js::from($data) }};
        // page.loading.start('#kt_body');

        var liffId = '{{ env('LINE_LIFF_ID_'.strtoupper($country_id)) }}';
        // alert(liffId);
        liff.init({ liffId: liffId }).then(()=>{
            if(empty(userData.id)){
                // if(liff.isLoggedIn()){
                //     liff.getProfile()
                //         .then((profile) => {
                //             // o.getMember(profile);
                //             if(user)
                //         })
                //         .catch((err) => {
                //             console.log("error", err);

                //             Swal.fire({
                //                 title: '{{ __('basic.Error') }}!',
                //                 // text: resp.message,
                //                 html: resp.msg.replaceAll("\r\n", "<BR>"),
                //                 icon: 'error',
                //                 confirmButtonText: '{{ __('basic.OK') }}',
                //             });
                            
                //             liff.closeWindow();
                //             window.close();
                //         });

                // }else{
                //     liff.login();
                // }

            }else{
                // o.setRecommendUrl( btoa(userData.id) );
                o.setRecommendUrl( userData.id.substring(0,8).toUpperCase() );
                o.setRecommendName( userData.name );
                o.sendMessage(o.getMessage());
            }
            
        }).catch((err) => {
            $('.content').show();
            $('.loading').hide();

            // Error happens during initialization
            console.log(err.code, err.message);
            alert(err.message);
        });


        var o = {

            recommend_url:"{!! config('app.url').'/register?'!!}",
            recommend_name: '',

            message: {
                type: "flex",
                altText: "{{ 'CLC '.__('member.MemberRegister') }}",
                contents: {
                    
                    type: "carousel",
                    contents: [
                        // 主選單
                        {
                            type: "bubble",
                            hero: {
                                type: "image",
                                url: "{{ config('app.url').'/image/line_share/clc-line-main.jpg' }}",
                                size: "full",
                                aspectRatio: "20:13",
                                aspectMode: "cover",
                            },
                            body: {
                                type: "box",
                                layout: "vertical",
                                contents: [
                                    {
                                        type: "text",
                                        text: "Welcome to CLC !",
                                        weight: "bold",
                                        size: "xl",
                                    }, 
                                    {
                                        type: "text",
                                        text: "Bahasa Indonesia",
                                        weight: "regular",
                                        size: "md",
                                        margin: "md",
                                    }, 
                                    {
                                        type: "text",
                                        text: "English",
                                        weight: "regular",
                                        size: "md",
                                    }, 
                                    {
                                        type: "text",
                                        text: "ngôn ngữ tiếng Việt",
                                        weight: "regular",
                                        size: "md",
                                    }, 
                                    {
                                        type: "text",
                                        text: "中文",
                                        weight: "regular",
                                        size: "md",
                                    }, 
                                ]
                            },
                            footer: {
                                type: "box",
                                layout: "vertical",
                                spacing: "sm",
                                contents: [
                                    {
                                        type: "text",
                                        text: "Let's GO !",
                                        size: "lg",
                                        weight: "bold",
                                        align: "center",
                                    },
                                ]
                            }
                        },
                        // Line 選單
                    ],


                    // type: "bubble",

                    // hero: {
                    //     type: "image",
                    //     // url: "https://gcp.i2csolution.com/media/clc_line.png",
                    //     url: "{{ config('app.url').'/image/line_share/share_'.$country_id.'.jpg' }}",
                    //     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: "md",
                    //             action: {
                    //                 type: "uri",
                    //                 label: "加入官方帳號",
                    //                 uri: "https://line.me/R/ti/p/{{ env('LINE_OFFICIAL_ID_'.strtoupper($country_id)) }}"
                    //             },
                    //         },
                    //         {
                    //             type: "button",
                    //             style: "link",
                    //             height: "sm",
                    //             action: {
                    //                 type: "uri",
                    //                 label: "前往官方網站",
                    //                 uri: "{{ config('app.url') }}"
                    //             },
                    //         },
                    //     ]
                    // }
                }
            },

            setRecommendUrl: function(mobile)
            {
                this.recommend_url+='promo_code='+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;

                // 多國語系選單
                var oaUrl = 'https://line.me/R/ti/p/';
                var lineMenu = [
                    // 印尼
                    { 
                        heroImg:'{{ asset('image/line_share/clc-line-id.jpg') }}',
                        title:'Klik "go" untuk daftar',
                        desc:[],
                        buttons:[
                            { title:'GO !!' , url: o.getRecommendUrl()+'&locale=id' },
                            { title:'Add Line CLC' , url: oaUrl+'{{ env('LINE_OFFICIAL_ID_ID') }}' },
                            { title:'Ke website CLC' , url:'{{ route('/', ['locale'=>'id']) }}' },
                        ] 
                    },
                    // 菲律賓
                    { 
                        heroImg:'{{ asset('image/line_share/clc-line-ph.jpg') }}',
                        title:'Click "go" to register',
                        desc:[],
                        buttons:[
                            { title:'GO !!' , url: o.getRecommendUrl()+'&locale=ph' },
                            { title:'Add Line CLC' , url: oaUrl+'{{ env('LINE_OFFICIAL_ID_PH') }}' },
                            { title:'Go to CLC website' , url:'{{ route('/', ['locale'=>'ph']) }}' },
                        ] 
                    },
                    // 越南
                    { 
                        heroImg:'{{ asset('image/line_share/clc-line-vn.jpg') }}',
                        title:'Chọn "Go" để đăng kí',
                        desc:[],
                        buttons:[
                            { title:'GO !!' , url: o.getRecommendUrl()+'&locale=vn' },
                            { title:'Chọn dấu "+" để nhập CLC Line' , url: oaUrl+'{{ env('LINE_OFFICIAL_ID_VN') }}' },
                            { title:'Vào trang web của CLC' , url:'{{ route('/', ['locale'=>'vn']) }}' },
                        ] 
                    },
                    // 台灣
                    { 
                        heroImg:'{{ asset('image/line_share/clc-line-tw.jpg') }}',
                        title:'CLC 會員註冊邀請',
                        desc:[
                            o.getRecommendName()+",推薦你成為最強電商",
                            "0成本！效益最高的電商平台 - CLC"
                        ],
                        buttons:[
                            { title:'GO !!' , url: o.getRecommendUrl()+'&locale=zh_TW' },
                            { title:'加入官方帳號' , url: oaUrl+'{{ env('LINE_OFFICIAL_ID_TW') }}' },
                            { title:'前往官方網站' , url:'{{ route('/', ['locale'=>'zh_TW']) }}' },
                        ] 
                    }
                ];

                for(var key in lineMenu)
                {
                    var menu = lineMenu[key];
                    var bubbleObj = {
                        type: 'bubble',
                        hero: {
                            type: 'image',
                            url: '',
                            size: 'full',
                            aspectMode: 'cover',
                            aspectRatio: '20:13',
                        },
                        body: {
                            type: 'box',
                            layout: 'vertical',
                            contents: [],
                        },
                        footer: {
                            type: 'box',
                            layout: 'vertical',
                            contents: [],
                        }
                    };
                    bubbleObj.hero.url = menu.heroImg;
                    bubbleObj.body.contents.push({
                        type: 'text',
                        text: menu.title,
                        weight: 'bold',
                        size: 'xl',
                        align: 'center',
                    });
                    for(var k in menu.desc)
                    {
                        bubbleObj.body.contents.push({
                            type: 'text',
                            text: menu.desc[k],
                            wrap: true,
                            margin: 'md',
                            color: '#666666',
                            align: 'center',
                        });
                    }
                    for(var b in menu.buttons) 
                    {
                        var tmp = {
                            type: 'button',
                            action: {
                                type: 'uri',
                                label: menu.buttons[b].title,
                                uri: menu.buttons[b].url,
                            },
                        };

                        if(b==0)
                        {
                            tmp.style = 'primary';
                        }

                        bubbleObj.footer.contents.push(tmp)
                    }

                    msg.contents.contents.push(bubbleObj);
                }
                // msg.contents.hero.action.uri = this.getRecommendUrl();
                // msg.contents.body.contents[1].text = this.getRecommendName()+', {{ __('line.SendInvitation') }}'+'!';
                // msg.contents.body.contents[1].text = this.getRecommendName()+', {{ __('line.SendInvitation') }}'+'!';
                // msg.contents.footer.contents[0].action.uri = this.getRecommendUrl();

                console.log('msg:',msg);

                // this.logger(msg);

                return msg;
            },

            // getMember: function(profile)
            // {
            //     var lineId = profile.userId;

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

            //             if(!data.status || data.data.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';
            //                 }));
            //                 // $('#loading_title').text('註冊會員中...');
            //                 // o.registerMember(profile);
            //                 return;
            //             }

            //             $('#loading_title').text('分享會員中...');

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

            //             o.setRecommendUrl(btoa(memRow.id));
            //             o.setRecommendName(memRow.name);
            //             o.sendMessage(o.getMessage());

            //         },
            //         error: function(jqXHR,textStatus,errorThrown){
            //             console.log('Ajax Error:')
            //             console.log(jqXHR.responseJSON.message);
            //             console.log(' in '+jqXHR.responseJSON.file+' line:'+jqXHR.responseJSON.line);
            //             Swal.fire({
            //                 text: '系統發生錯誤,請稍後再嘗試 (Code: Ajax Error)',
            //                 icon: "error",
            //                 buttonsStyling: !1,
            //                 confirmButtonText: "好",
            //                 customClass: {
            //                     confirmButton: "btn btn-primary"
            //                 }
            //             });

            //             $('.content').show();
            //             $('.loading').hide();
            //         }
            //     });
            // },

            // registerMember:function(profile)
            // {
                
            //     $.ajax({
            //         url: '{{ url('ajax/register') }}',
            //         data: {
            //             'contact_type_id':'line',
            //             'im_id':profile.userId,
            //             'name':profile.displayName,
            //             'email': profile.userId+'@clc.member',
            //             'uniform_number':'00000000',
            //             'account': profile.userId,
            //             'password':profile.userId,
            //             'join_sale_point_id': '{{ 'line_'.$country_id }}'
            //         },
            //         dataType: 'json',
            //         // contentType: false,
            //         // processData: false,
            //         success: function(resp, textStatus, jqXHR) {
            //             console.log(resp);
            //             if (resp.status) {
            //                 // Swal.fire({
            //                 //     title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessRegister') }}',
            //                 //     // text: ,
            //                 //     icon: 'success',
            //                 //     confirmButtonText: '{{ __('basic.OK') }}',
            //                 // }).then((function() {
            //                 //     memberObj.login($('#account').val(), $('#password').val());
            //                 // }))
            //                 $('#loading_title').text('分享會員中...');
            //                 o.setRecommendUrl(btoa(resp.data.id));
            //                 o.setRecommendName(resp.data.name);
            //                 o.sendMessage(o.getMessage());

            //             } 
            //         },
            //         error: function(jqXHR,textStatus,errorThrown){
            //             console.log('Ajax Error:')
            //             console.log(jqXHR.responseJSON.message);
            //             console.log(' in '+jqXHR.responseJSON.file+' line:'+jqXHR.responseJSON.line);
            //             Swal.fire({
            //                 text: '系統發生錯誤,請稍後再嘗試 (Code: Ajax Error)',
            //                 icon: "error",
            //                 buttonsStyling: !1,
            //                 confirmButtonText: "好",
            //                 customClass: {
            //                     confirmButton: "btn btn-primary"
            //                 }
            //             });

            //             $('.content').show();
            //             $('.loading').hide();
            //         }
            //     });
                    
            // },

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

                            $('.content').show();
                            $('.loading').hide();
                        }
                    }).catch(function (error) {
                        // something went wrong before sending a message
                        // alert(error.code+' '+error.message)
                        // console.log(error.code+' '+error.message)
                        o.logger({'sendMessageFailed':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: "{{ __('line.ThisDeviceNowNotSupportShare') }}" + "!",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "{{ __('basic.OK') }}",
                        customClass: {
                            confirmButton: "btn btn-primary"
                        }
                    }).then((function(t) {
                        liff.closeWindow();
                        window.close();
                    }));
                }
            },

            logger: function(obj) 
            {
                $.ajax({
                    url: '{{ url('ajax/logger') }}',
                    dataType: 'json',
                    data: obj,
                    success: function(data,textStatus,jqXHR) {
                        console.log('in');
                    },
                    error: function(jqXHR,textStatus,errorThrown){
                        console.log('Ajax Error:')
                        console.log(jqXHR.responseJSON.message);
                        console.log(' in '+jqXHR.responseJSON.file+' line:'+jqXHR.responseJSON.line);
                        Swal.fire({
                            text: '系統發生錯誤,請稍後再嘗試 (Code: Ajax Error)',
                            icon: "error",
                            buttonsStyling: !1,
                            confirmButtonText: "好",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });

                        $('.content').show();
                        $('.loading').hide();
                    }
                });

            }

        }

        
        

        $(function() {

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

                $('.content').hide();
                $('.loading').show();
            });

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

        });
    </script>
    <style>
        .loading{
            z-index: 1000;
        }
    </style>
    <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('image/logo/clc_logo.svg') }}" class="h-50px logo " />
            </div>
            <h1 class='text-center mb-3' id='title' >{{ __('member.MemberRegisterInvitation') }}</h1>
        </div>

        <div class='row content mt-5' style='display:none;' >
            <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 content mt-5' style='display:none;' >
            <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 class='row loading mt-5'>
            <div class='col-12 d-flex justify-content-center '>
                <div class="spinner-border" role="status">
                    <span class="sr-only"></span>
                </div>
                <h3 class='ms-3' id='loading_title' >{{ __('line.CheckMember') }}...</h3>
            </div>
        </div>

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