@extends('quanlynhatro.layout')

@section('title')
    <title>quanlynhatro.com - Quên mật khẩu</title>
@endsection

@section('meta')
    <meta property="og:url" content="{{ url()->current() }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Quản lý nhà trọ - Quên mật khẩu"/>
    <meta property="og:description"
          content="iTro.vn - Tìm là thấy, ở là thích"/>
    <meta property="og:image" content="https://quanlynhatro.com/ogimage_qlnt.jpg"/>
@endsection
@section('content')
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>
    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "AIzaSyDzyVgQ6Z6rqTZ6WnKjaR2uuv_hizsySjk",
            authDomain: "itro-b9c1a.firebaseapp.com",
            databaseURL: "https://itro-b9c1a.firebaseio.com",
            projectId: "itro-b9c1a",
            storageBucket: "itro-b9c1a.appspot.com",
            messagingSenderId: "761922008105",
            appId: "1:761922008105:web:dffaa82661365b98d89838"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
    </script>

    <div class="page-si">
        <div class="page-si__wrap">
            <div class="block-si-form shadow-sm">
                <div class="block-si-form__wrap">
                    <div class="block-si-form__header">
                        <div class="si-top-logo">
                            <a href="/"><img src="/quanlynhatro/assets/img/itro-logo-colored.png" alt="" height="32px"></a>
                        </div>
                    </div>
                    <div class="block-si-form__body">
                        <div class="si-main">
                            <div class="si-main__wrap">
                                <div class="si-main__top">
                                    <h2 class="si-main__title">Quên mật khẩu?</h2>
                                    <div class="si-main__subtitle">
                                        Không sao, chúng tôi sẽ giúp bạn lấy lại <br>
                                        Hãy nhập địa chỉ email hoặc SĐT vào ô bên dưới nhé!
                                    </div>
                                </div>
                                <div class="si-main__body">
                                    <div class="si-main__form">
                                        <form action="#" id="form-reset">
                                            <div class="form-group">
                                                <label class="form-label">Email / SĐT</label>
                                                <input type="text" class="form-control" name="email"
                                                       placeholder="Nhập email / SĐT của bạn" id="email">
                                            </div>
                                            <button class="btn btn-primary btn-block" id="btn-reset" type="button">Lấy
                                                lại mật khẩu
                                            </button>
                                            <div class="mt-2 text-center">
                                                Quay lại
                                                <a href="/login" class="link-forgot-pass">Đăng nhập</a>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block-si-intro">
                <div class="block-si-intro__wrap">
                    <div class="si-intro-header text-center">
                        <h1 class="si-intro-title c-section-title">iTro tự hào là hệ thống quản lý nhà cho thuê tốt nhất
                            với đầy đủ nền tảng từ Web đến App</h1>
                        <p class="si-intro-subtitle c-section-subtitle">Với ITRO, bạn có thể quản lý và vận hành nhà cho
                            thuê một cách đầy đủ nhất, từ việc theo dõi tình hình thanh toán tiền thuê của khách đến
                            việc quản lý tình hình kinh doanh và theo dõi tất cả thông tin, hình ảnh của khách thuê thật
                            dễ dàng.</p>
                        <div class="si-intro-action">
                            <a href="#" class="btn btn-primary btn-md">Xem hướng dẫn sử dụng</a>
                        </div>
                    </div>
                    <div class="si-intro-divider"></div>
                    <div class="si-intro-main">
                        <div class="si-intro-app">
                            <div class="si-intro-app__screen">
                                <img src="/quanlynhatro/mockups/iphone-login-screen.svg" alt="">
                            </div>
                            <div class="si-intro-app__content text-center">
                                <h3 class="si-intro-app__title text-uppercase">Đâu chỉ mình website, <br> chúng tôi có
                                    cả app dành cho bạn</h3>
                                <p class="si-intro-app__subtitle"></p>
                                <div class="si-intro-app__download">
                                    <a target="_blank"
                                       href="https://itunes.apple.com/us/app/itro-qu%E1%BA%A3n-l%C3%BD-tr%E1%BB%8D-th%C3%B4ng-minh/id1352848785?ls=1&mt=8"><img
                                                src="/quanlynhatro/assets/img/download-app-store.png" alt=""
                                                height="48"></a>
                                    <br>
                                    <a target="_blank"
                                       href="https://play.google.com/store/apps/details?id=com.blue.hoantran.itro_host"><img
                                                src="/quanlynhatro/assets/img/download-google-play.png" alt=""
                                                height="48"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="si-intro-footer text-center">
                        <div class="si-intro-footer__copyright">© 2020 ITRO</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function validate() {
            var formStatus = $("#form-reset").validate(
                {
                    ignore: ".ignore",
                    errorElement: "span",
                    errorClass: "help-block help-block-error",

                    highlight: function (e) {
                        $(e).closest(".form-group").addClass("has-error")
                    },
                    unhighlight: function (e) {
                        $(e).closest(".form-group").removeClass("has-error")
                    },
                    success: function (e) {
                        e.closest(".form-group").removeClass("has-error")
                    },
                    rules: {
                        email: "required",
                    },
                    messages: {
                        email: "Vui lòng không bỏ trống email / SĐT",
                    },
                    errorPlacement: function (error, element) {
                        if (element.attr("name") == "accept_policy") {
                            error.appendTo(".text-err");
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }
            ).form();
            return formStatus;
        }

        window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('btn-reset', {
            'size': 'invisible',
            'callback': function (response) {
                // reCAPTCHA solved, allow signInWithPhoneNumber.
             //   submitPhoneNumberAuth();
            }
        });

        $('#btn-reset').click(function () {
            var formStatus = validate();
            if (formStatus) {
                var phone = $('#email').val();
                if (phone.indexOf('@') !== -1) {
                    submitEmailAuth();
                } else {
                    submitPhoneNumberAuth();
                }
            }
        });

        function submitEmailAuth() {
            var email = $('#email').val();
            $.ajax({
                url: '{{ url('reset-password-email') }}',
                type: 'post',
                data: {
                    email: email
                },
                dataType: 'json',
                success: function (response) {
                    if (response.status == 1) {
                        swal('Thông báo', 'Hệ thống đã gửi email đặt lại mật khẩu vào email của bạn. Bạn vui lòng kiểm tra email (bao gồm cả hòm thư spam) và làm theo hướng dẫn', 'success');
                    } else {
                        swal('Thông báo', response.message, 'warning');
                    }
                }
            });

        }


        function submitPhoneNumberAuth() {

            var phoneNumber = '+84' + $('#email').val();
            if (phoneNumber.indexOf('@') !== -1) {
                //swal('Thông báo', 'Dữ liệu không hợp lệ', 'info');
                return;
            }
            var appVerifier = window.recaptchaVerifier;
            firebase
                .auth()
                .signInWithPhoneNumber(phoneNumber, appVerifier)
                .then(function (confirmationResult) {
                    console.log('here');
                    window.confirmationResult = confirmationResult;
                    // SMS sent. Prompt user to type the code from the message, then sign the
                    // user in with confirmationResult.confirm(code).
                    swal({
                        title: "Thông báo",
                        text: "Vui lòng nhập mã được gửi đến SĐT của bạn",
                        type: "input",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        inputPlaceholder: "Mã xác nhận"
                    }, function (inputValue) {
                        if (inputValue === false) return false;
                        if (inputValue === "") {
                            swal.showInputError("Bạn chưa nhập mã xác nhận");
                            return false
                        }
                        submitPhoneNumberAuthCode(inputValue);
                    });
                }).catch(function (error) {
                swal('Thông báo', 'Tin nhắn không thể gửi. Bạn vui lòng thử lại sau', 'info')
                // Error; SMS not sent
                // ...
            });
        }

        function submitPhoneNumberAuthCode(code) {
            confirmationResult
                .confirm(code)
                .then(function (result) {
                    var user = result.user;
                    var phoneNumber = user.phoneNumber;
                    $.ajax({
                        url: '{{ url('reset-password-phone-firebase') }}',
                        type: 'post',
                        data: {
                            phoneNumber: phoneNumber
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                window.location.href = response.url;
                            } else {
                                swal('Thông báo', response.message, 'warning');
                            }
                        }
                    });
                })
                .catch(function (error) {
                    console.log(error);
                    swal('Thông báo', 'Lỗi xác nhận, bạn vui lòng thử lại sau', 'info')
                });
        }

    </script>
@endpush