@extends('index')

@section('content')
    <section class="mb-5">
        <div class="container">
            <ul class="d-flex my-5 color_808080">
                <li>{{__('custom.登入')}}</li>
            </ul>

            <div class="LoginBox">
                <div class="LoginTitle">
                    <h1>{{__('custom.登入')}}</h1>
                    <div class="WireBox"></div>
                </div>
                <div class="LogInContentAll d-flex flex-column align-items-center">
                    <h2>{{__('custom.還沒有帳號？請先')}}<a style="color: red" href="/register">&nbsp{{__('custom.註冊')}}</a>{{__('custom.。')}}</h2>
                    <div class="logInContent mt-5">
                        <form action="/login" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label for="" class="form-label">{{__('custom.帳號')}}</label>
                                <input name="login_account" value="{{ old('login_account') }}" type="text" class="form-control" id="login_account" placeholder="{{__('custom.例如')}}：demo@gmail.com">

                                @if ($errors->has('login_account'))
                                    <div class="text-danger mt-1">{{ $errors->first('login_account') }}</div>
                                @endif
                            </div>
                            <div class="mb-4">
                                <label for="login_password" class="form-label">{{__('custom.密碼')}}</label>
                                <input name="login_password" value="{{ old('login_password') }}" type="password" class="form-control" id="login_password" placeholder="{{__('custom.請輸入您的密碼')}}">

                                @if ($errors->has('login_password'))
                                    <div class="text-danger mt-1">{{ $errors->first('login_password') }}</div>
                                @endif
                            </div>

                            <div class="text-end mb-4"><a class="btn_text_77832A fz_13" href="#">{{__('custom.忘記密碼？')}}</a></div>
                            <button type="submit" class="btn_black w-100">{{__('custom.登入')}}</button>
                        </form>
                        <div class="ThirdPartyLoginBox mt-5">
                            <div class="OrBox">{{__('custom.或')}}</div>
                            <a id="btnLine" href="javascript:"><img src="{{asset('images/icons_lineBtn.svg')}}" alt="">&nbsp{{__('custom.LINE 登入')}}</a>
                            <a href="/auth/google_login"><img src="{{asset('images/icons_googleBtn.svg')}}" alt="">&nbsp{{__('custom.Google 登入')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        @if(session('error_msg'))
            Swal.fire({
                title: '小提示',
                icon: 'warning',
                html: `{!! session('error_msg') !!}`,
                confirmButtonText: '確定',
                allowOutsideClick: false
            });
        @endif

        /*line登入*/
        var line_channel_id = "{{ env('LINE_CHANNEL_ID') }}";
        var line_redirect_uri = "{{ env('LINE_REDIRECT_URI') }}";

        $('#btnLine').on('click', function () {
            let URL = 'https://access.line.me/oauth2/v2.1/authorize?';
            // 必填
            URL += 'response_type=code'; // 希望LINE回應什麼  但是目前只有code能選
            URL += `&client_id=${line_channel_id}`; // 你的頻道ID
            URL += `&redirect_uri=${line_redirect_uri}`; // 要接收回傳訊息的網址
            URL += '&state=43dfa0b56892ac23b189a4ee87d23304'; // 用來防止跨站請求的 之後回傳會傳回來給你驗證 通常設亂數 這邊就先放123456789
            URL += '&scope=openid%20profile'; // 跟使用者要求的權限 目前就三個能選 openid profile email
            // 選填
            URL += '&nonce=838142dda1e05cdc98796e5faad35152';
            URL += '&prompt=consent';
            URL += '&max_age=3600';
            URL += '&ui_locales=zh-TW';
            URL += '&bot_prompt=normal';
            window.open(URL, '_self'); // 轉跳到該網址
        });
    </script>
@endsection