@extends('backpack::layout_guest')

@php
$IS_CHECK_IS2 = true;
$IS_STATUS_LOGOUT = ($status == "logout")? true : false;
if(!empty($errors->all())) {
    $IS_CHECK_IS2 = false;
}
$IS2_API = env('IS20_BASE_URL')."/en/sso/slientLogin?clientID=".env('IS20_CLIENT_ID');
$login_server_url = env('IS20_BASE_URL') . '/b5/sso/slientLogin?clientID=' . env('IS20_CLIENT_ID') . '&success_callback=' . route('admin.login.redirect') . '&cancel_callback=' . route('admin.login');

@endphp

@section('content')
    <div class="container-fluid">

        <div class="row">{{-- row --}}

            <div class="leftarea col-sm-12 col-md">{{--    left--}}

                <div id="login_title">
                    <a href="{{ url("") }}">
                        <img src="../images/logo.png" class="left_logo img-fluid" alt="logo.png">
                    </a>

                    <h1 id="system_title">「校易網」(EasySchoolConnect)</h1>
                </div>

                <div id="selecter_state">
                    <i class="fa fa-spinner fa-pulse fa-2x laoading-icon"></i>

                    <button class="btn btn-normal-2 btn-re-login" style="display: none;">
                        使用內聯網帳戶登入
                    </button>
                </div>

                <div id="ldap" style="display: none;">{{-- form_ldap --}}

                    <p id="login_type">使用內聯網帳戶登入</p>

                    <form role="form"
                          method="POST"
                          action="{{ route('admin.login') }}"
                          class="ml-3 ldap_form">
                        @csrf

                        <div class="row form-group">
                            <div class="input_context" style="width: 7px;"><i class="fa fa-user" id="icon" aria-hidden="true"></i></div>
                            <div class="input_context col">
                                <input type="text" class="form-control form_input_person_id" name="person_id" placeholder="ID name" required value="{{old('person_id')}}"  {{ !empty(old('person_id')) ? 'autofocus' : '' }} >
                            </div>
                            <!-- person_id = username -->
                        </div>

                        <div class="row form-group{{ $errors->any() ? ' has-error' : '' }} form_input_userpassword_group">
                            <div class="input_context " style="width: 13px;"><i class="fa fa-lock" id="icon" aria-hidden="true"></i></div>
                            <div class="input_context col">
                                <input type="password" class="form-control form_input_userpassword" name="userpassword" placeholder="Password" required autocomplete="off">
                            </div>

                        </div>

                        <div class="error_message">
                            @foreach($errors->all() as $error)
                                <span class="help-block">
                                    <strong>{{ $error }}</strong>
                                </span>
                            @endforeach
                        </div>

                        <div class="form-group">
                            <button type="button" class="btn btn-main-1" id="btn_login">
                                <i class="fa fa-key" aria-hidden="true"></i>
                                {{ trans('backpack::base.login') }}
                            </button>
                        </div>
                    </form>{{--       end  form_ldap--}}
                </div>{{--       end ldap area --}}
            </div>{{-- end left area --}}


        </div>{{--    row--}}
    </div>{{--    container-fluid--}}

    <style>
        .btn_sso, .rightarea {
            padding: 0;
        }

        .right_bg {
            position: static;
            width: 100%;
            max-width: 1500px;
        }

        #login_title, #selecter_state, #ldap {
            margin-left: 13.5%;
        }

        @media only screen and (max-width: 576px) {
            #login_title, #selecter_state, #ldap {
                margin-left: 0;
            }
        }

        #login_title {
            margin-top: 210px;
        }

        #system_title {
            font-weight: 600;

        }

        .btn_sso:first-child {
            margin-top: 25px;
            margin-bottom: 10px;

        }

        input[type=text], input[type=password],
        input[type=text]:focus, input[type=password]:focus {
            border: none;
        }

        .input_context {
            display: inline-block;
        }

        .form-group {
            border-bottom: 2px solid #DDC98A;
            margin-bottom: 40px;
            width: 73.5%;
        }

        @media only screen and (max-width: 576px) {
            .form-group {
                width: 100%;
            }
        }

        .form-group.has-error {
            margin-bottom: 10px;
        }
        .help-block {
            display: block;
            margin-bottom: 20px;
        }

        .form-group:last-child {
            border-bottom: none;
            /*margin-top: 40px;*/
        }

        .form-group > .input_context {
            font-size: 25px;
        }

        ::placeholder {
            font-size: 20px;
        }


        #icon {
            color: #DDC98A;
        }

        #selecter_state .btn {
            font-size: 20px;
        }

        #login_ldap {
            padding: 8px 15px;
            white-space: unset;
        }

        .form-control:focus {
            box-shadow: none;
        }



        #btn_login {
            margin-left: -15px;
        }
        input:-webkit-autofill,
        input:-webkit-autofill:visited,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active  {
            -webkit-box-shadow: 0 0 0 30px white inset !important;
        }

        /* change by window size */
        @media only screen and (max-width: 992px) {
            #system_title {
                font-size: 25px;
            }

            .rightarea {
                display: none !important;
            }
        }
    </style>
@endsection

@section('after_scripts')
    <script>
        let success_login = false;
        let ldap_submit_form_status = false;
        let is_status_logout = {{ ($IS_STATUS_LOGOUT || !$IS_CHECK_IS2)? "true" :  "false" }};
        let is2_token = "";

        function hidden_login($toggle) {
            if ($toggle) {
                $('#selecter_state').hide();
                $('#ldap').show();
            } else {
                $('#selecter_state').show();
                $('#ldap').hide();
            }
        }

        function hidden_loading($toggle) {
            if ($toggle) {
                $("#selecter_state .laoading-icon").hide();
                $("#selecter_state .btn-re-login").show();
            } else {
                $("#selecter_state .laoading-icon").show();
                $("#selecter_state .btn-re-login").hide();
            }
        }

        function login_with_o365() {
            $(".login_o365_form").submit();
        }

        function ldap_click_submit_form() {
            // remove all error message
            $(".ldap_form .help-block").remove();
            $(".ldap_form .form_input_userpassword_group").removeClass("has-error");

            // Get post data
            let person_id = $(".form_input_person_id").val();
            let password = $(".form_input_userpassword").val();

            // Check user input the user name and password
            if (!person_id || !password) {
                show_error_message('{{ __('auth.miss_username_password') }}');

                return;
            }

            // Submit SSO login
            let sso_login_form = $(".sso_login_form");
            sso_login_form.find('[name="username"]').val(person_id);
            sso_login_form.find('[name="password"]').val(password);
            sso_login_form.submit();

            ldap_submit_form_status = true;
            is_status_logout = false;

            @if(env('IS20_BASE_URL') == env('APP_URL') . '/local_login/')
            console.log('B');
            login_redirect('987');
            @endif

        }

        function show_error_message(message) {
            let error_message = '<span class="help-block">' +
                '<strong>'+message+'</strong>' +
                '</span>';

            $(".error_message").append(error_message);
            $(".ldap_form .form_input_userpassword_group").addClass("has-error");
        }

        function ldap_submit_form() {
            $(".ldap_form").submit();
        }

        function login_redirect(redirect_token) {
            location.href='/admin/login/redirect?accessToken='+encodeURIComponent(redirect_token);
        }

        window.addEventListener('message', function(event) {

            @if(env('IS20_BASE_URL') == env('APP_URL') . '/local_login/')
                hidden_loading(true);
            @endif

            if ( event.origin == '{{ env('IS20_BASE_URL') }}' ) {
                if ( event.data.accessToken ) {
                    success_login = true;

                    if (is_status_logout) {
                        is2_token = event.data.accessToken;
                        hidden_loading(true);
                    }
                    else {
                        login_redirect(event.data.accessToken);
                    }
                }
                else if (is_status_logout) {
                    hidden_loading(true);
                }
                else {

                    if (ldap_submit_form_status) {
                        if (event.data.code == 6) {
                            show_error_message('{{ __('auth.failed') }}');
                        }
                        else if (event.data.code == 11) {
                            show_error_message('{{ __('auth.blocked') }}');
                        }
                        else {
                            show_error_message('{{ __('auth.unknow_error') }}');
                        }
                    }

                    hidden_login(true);
                }
            }
        });

        $(document).ready(function () {

            $('#login_o365').click(function () {
                login_with_o365();
            });

            $('#login_ldap').click(function () {
                hidden_login(true);
            });

            hidden_loading(true);
            $('#selecter_state .btn-re-login').click(function () {

                window.location.href = '{!! $login_server_url !!}';

                return ;
                // hide other function
                if (is2_token) {
                    hidden_loading(false);
                    login_redirect(is2_token);
                }
                else {
                    is_status_logout = false;
                    hidden_login(true);
                }
            });

            $('#btn_login').click(function () {
                ldap_click_submit_form();
            });

            $(".form_input_person_id, .form_input_userpassword").keydown(function( event ) {
                if (event.which == 13) {
                    ldap_click_submit_form();
                }
            });

            $('#btn_back').click(function () {
                hidden_login(false);
            });

            @if (!$IS_CHECK_IS2)
                hidden_login( true );
            @endif
        });
    </script>
@endsection