@php
    $data = \App\Services\Setting\SettingService::getContent();
@endphp
@extends('backend.layouts.app')

@section('content')
    <div id="sign-in-button" style="visibility: hidden">
    </div>
    <div class="col-md-4 col-10 box-shadow-2 p-0">
        <div class="card border-grey border-lighten-3 px-1 py-1 m-0">
            <div class="card-header border-0">
                <div class="card-title text-center">
                    <img style="max-width: 271px" src="{{setting('logo')}}"
                         alt="branding logo">
                </div>
                <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2">
                    <span>Chúng tôi sẽ gửi mật khẩu mới tới SĐT của bạn.</span>
                </h6>
            </div>
            <div class="card-content">
                <form method="POST" id="Formchange" action=" " novalidate>
                    @csrf
                    <div id="phones" class="card-body">
                        {{--                        @error('email')--}}
                        {{--                        <div class="alert alert-danger">{{ $message }}</div>--}}
                        {{--                        @enderror--}}

                        <fieldset class="form-group position-relative has-icon-left">
                            <input type=""
                                   class="user-phone form-control form-control-lg @error('phone') is-invalid @enderror"
                                   id="phone" name="phone" placeholder="{{ __('Phone number') }}"
                                   value="{{ old('phone') }}" required autofocus>
                            <div class="form-control-position">
                                <i class="ft-mail"></i>
                            </div>
                        </fieldset>
                        <button id="forgot" type="button" class="btn btn-forgot btn-outline-primary btn-lg btn-block"><i
                                    class="ft-unlock"></i>Lấy
                            lại mật khẩu
                        </button>
                    </div>
                    <div id="otp" class="card-body" style="display: none">
                        <fieldset class="form-group position-relative has-icon-left">
                            <input type="" class="otp-code form-control form-control-lg "
                                   id="otp" name="otp" autofocus placeholder="{{ __('Nhập mã OTP') }}">
                            <div class="form-control-position">
                                <i class="ft-mail"></i>
                            </div>
                        </fieldset>
                        <button type="button" class="btn btn-otps btn-outline-primary btn-lg btn-block"><i
                                    class="ft-unlock"></i>HOÀN TẤT
                        </button>
                    </div>

                    <div id="change_password" class="card-body" style="display: none">
                        <fieldset class="form-group position-relative has-icon-left">
                            <input type="" class="form-control form-control-lg "
                                   id="password" name="password" autofocus placeholder="{{ __('Mật khẩu mới') }}">
                            <div class="form-control-position">
                                <i class="ft-mail"></i>
                            </div>
                        </fieldset>

                        <fieldset class="form-group position-relative has-icon-left">
                            <input type="" class="form-control form-control-lg "
                                   id="re_password" name="re_password" autofocus
                                   placeholder="{{ __('Nhập lại mật khẩu') }}">
                            <div class="form-control-position">
                                <i class="ft-mail"></i>
                            </div>
                        </fieldset>
                        <button type="button" class="btn btn-change btn-outline-primary btn-lg btn-block"><i
                                    class="ft-unlock"></i>ĐỔI MẬT KHẨU
                        </button>
                    </div>
                </form>
            </div>
            <div class="card-footer border-0">
                <p class="float-sm-left text-center"><a href="/login" class="card-link">Đăng nhập</a></p>
            </div>
        </div>
    </div>
    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    <script src="{{ asset('js/firebase-app.js') }}"></script>
    <script src="{{ asset('js/firebase-auth.js') }}"></script>


    <script>
        var firebaseConfig = {
            apiKey: "AIzaSyBBpOkzx6o7Ff4eu0xBWB_AwlOB9iAY43Y",
            authDomain: "training-adam.firebaseapp.com",
            databaseURL: "https://training-adam.firebaseio.com",
            projectId: "training-adam",
            storageBucket: "training-adam.appspot.com",
            messagingSenderId: "494435064899",
            appId: "1:494435064899:web:2604a67795476d8250c8f6",
            measurementId: "G-H85MGY40E8"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
            // 'size': 'normal',
            'size': 'invisible',
            'callback': function (response) {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
                // ...
            },
            'expired-callback': function () {
                // Response expired. Ask user to solve reCAPTCHA again.
                // ...
            }
        });
        recaptchaVerifier.render().then(function (widgetId) {
            window.recaptchaWidgetId = widgetId;
            // updateSignInButtonUI();
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#forgot').click(function () {
                $('#phones').hide();
                $('#otp').show();
                var phoneNumber = '+84' + $('.user-phone').val();
                var appVerifier = window.recaptchaVerifier;
                firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
                    .then(function (confirmationResult) {
                        // SMS sent. Prompt user to type the code from the message, then sign the
                        // user in with confirmationResult.confirm(code).
                        window.confirmationResult = confirmationResult;
                    }).catch(function (error) {
                    // Error; SMS not sent
                    // ...
                    console.log(error);
                });
            });
        })

        $('.btn-otps').click(function () {
            checkOtp();
        })

        function checkOtp() {
            var code = $('.otp-code').val();
            confirmationResult.confirm(code).then(function (result) {
                $('#otp').hide();
                $('#change_password').show();
                $('.btn-change').click(function () {
                    var data = {};
                    data.phone = $('.user-phone').val();
                    data.password = $('#password').val();
                    data._token = $('meta[name="csrf-token"]').attr('content');
                    if (data.password === $('#re_password').val()) {
                        $.ajax({
                            url: '/doi-mat-khau',
                            type: 'POST',
                            data: data,
                            async: false,
                            success: function (res) {
                                // $(".test").fadeOut("slow");
                                if (res == 1) {
                                    location.href = "/login";
                                } else {
                                    alert('Thất bại. Có lỗi gì đó sảy ra !!!');
                                }
                            }
                        });
                    }else{
                        window.alert('Không khớp mật khẩu');
                    }
                })
                // ...
            }).catch(function (error) {
                if (error.code == 'auth/invalid-verification-code') {
                    window.alert('Mã xác nhận otp không chính xác');
                } else {
                    // User couldn't sign in (bad verification code?)
                    console.error('Error while checking the verification code', error);
                    window.alert('Mã otp đã hết hạn vui lòng gửi lại');
                }
                // window.verifyingCode = false;
            });
        };

    </script>

@endsection