@extends('template')

@section('content')
    <script type="text/javascript">
        liff.init({ liffId: liffId }).then(()=>{
            if(liff.isLoggedIn()){

                liff.getProfile()
                    .then(function(profile) {
                      // console.log(profile);
                      $('#user_id').val(profile.userId);
                    });

                
                // $('.not-login').hide();
                // $('.logged-in').show();
                // liff.logout();
            }else{
                // liff.login();
            }
        }).catch((err) => {
            // Error happens during initialization
            // console.log(err.code, err.message);
            alert(err.message);
        });


        $(function () {
            $('.register-btn').click(function(){
                $('.spinner-border').show();
                $(this).prop('disabled',true);
                $('.sb').click();
                // if(!$('.fm')[0].checkValidity()){
                //     return;
                // }
                // if (!liff.isLoggedIn()) {


                //     var loginConfig = {};
                //     loginConfig.redirectUri=websiteUrl+'?mobile='+$('.mobile').val();
                //     // console.log(loginConfig);
                //     liff.login(loginConfig);
                // }else{
                //     openNotify();
                // }

            });

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

        function openNotify()
        {
            const idToken = liff.getDecodedIDToken();
            line_id = idToken.sub;

            // $('.sb').submit();

            console.log(idToken)

            var url = 'https://notify-bot.line.me/oauth/authorize?'
                    +'client_id='+notifyClientId
                    +'&response_type=code'
                    +'&redirect_uri='+websiteUrl
                    +'&scope=notify'
                    +'&state='+line_id;

            // liff.openWindow({
            //     url: url,
            //     external: false
            // });

            window.location.href = url;

        }

    </script>
    <div class='col-auto not-login mt-3 '>
        {{-- @if($mobile=='') --}}
            {{-- <div class=''> --}}
                {{-- <div class="spinner-grow text-light" role="status">
                  <span class="sr-only">Loading...</span>
                </div>
                <div class="spinner-grow text-light" role="status">
                  <span class="sr-only">Loading...</span>
                </div>
                <div class="spinner-grow text-light" role="status">
                  <span class="sr-only">Loading...</span>
                </div> --}}

              {{--   <div class="spinner-border text-light" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div> --}}
        {{-- @else --}}

                <form class='fm' action='' method="post" enctype="multipart/form-data">
                    @csrf @method('GET')
                    <input type='hidden' class='form-control user_id' id="user_id" name='user_id' required  value='U3917b970862ba854d055734beb53aa43' />
                    <div class='form-group'>
                        <label for='mobile'>姓名</label>
                        <input type='text' class='form-control mobile' name='name' placeholder='' required  value='' />
                    </div>
                    <div class='form-group'>
                        <label for='mobile'>電話</label>
                        <input type='tel' class='form-control mobile' name='mobile' placeholder='0912345678' required  value='' />
                    </div>
                    <div class='form-group'>
                        <label for='mobile'>密碼</label>
                        <input type='password' class='form-control password' name='password' placeholder='五碼以上數字或英文字母' required  value='' />
                    </div>
                    <div class='form-group'>
                        <label for='mobile'>電子郵件</label>
                        <input type='email' class='form-control email' name='email' placeholder='' value='' />
                    </div>
                    <button type="button" class="btn w-100 register-btn">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style='display:none'></span>
                        註冊
                    </button>
                    <button type="submit" class="d-none sb">註冊</button>
                </form>
        {{-- @endif --}}
    </div>

    <div class='col-auto logged-in mt-3 ' style='display: none;' >
        {{-- <h4>已登入</h4> --}}
        <button type="button" class="btn w-100 loggout-btn">登出</button>
    </div>
@endsection