@extends('quanlynhatro.layout')

@section('title')
    <title>quanlynhatro.com - Đăng ký</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ọ - Đăng ký"/>
    <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')
    <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 class="si-top-action">
                            <a href="/login" class="#">Đăng nhập</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">Đăng ký hệ thống quản lý ITRO</h2>
                                    <div class="si-main__subtitle">Bạn có 30 ngày dùng thử miễn phí</div>
                                </div>
                                <div class="si-main__body">
                                    <div class="si-main__form">
                                        <form action="#" id="form-register">
                                            <div class="form-group">
                                                <label class="form-label">Họ tên <span
                                                            class="h-c-red">(*)</span></label>
                                                <input type="text" class="form-control" placeholder="Nhập họ tên"
                                                       name="name" value="{{ optional($user)->name }}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Số điện thoại <span class="h-c-red">(*)</span></label>
                                                <input type="text" class="form-control" placeholder="0123 456 789"
                                                       id="phone"
                                                       name="phone" value="{{ optional($user)->phone }}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Email</label>
                                                <input type="text" class="form-control" placeholder="Nhập email"
                                                       id="email"
                                                       name="email" value="{{ optional($user)->email }}">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Mật khẩu <span
                                                            class="h-c-red">(*)</span></label>
                                                <input type="password" class="form-control" placeholder="********"
                                                       name="password" id="password">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">Xác nhận mật khẩu <span
                                                            class="h-c-red">(*)</span></label>
                                                <input type="password" class="form-control" placeholder="********"
                                                       name="confirm_password">
                                            </div>
                                            <div class="form-group">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                           id="Checkbox__RegisterNews" name="is_accept_news">
                                                    <label class="form-check-label" for="Checkbox__RegisterNews">Đăng ký
                                                        nhận bản tin, khuyến mãi từ ITRO</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                           id="Checkbox__PolicyAccept" name="accept_policy">
                                                    <label class="form-check-label" for="Checkbox__PolicyAccept">Tôi đã
                                                        đọc và chấp nhận với <a href="/termofuse" target="_blank">Chính
                                                            sách sử dụng</a> và <a
                                                                href="/privacy">Điều khoản bảo mật</a> của ITRO</label>

                                                </div>
                                                <div class="text-err"></div>
                                            </div>
                                            <input type="hidden" name="token_active"
                                                   value="{{ optional($user)->token_active }}">
                                            @if(request()->hasCookie('affiliate_id'))
                                                <input type="hidden" name="refer_id"
                                                       value="{{ request()->cookie('affiliate_id') }}">
                                            @endif

                                            <button class="btn btn-primary btn-block" id="btn-register" type="button">
                                                Đăng ký
                                            </button>
                                        </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="https://quanlynhatro.com/huong-dan-su-dung" 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-register").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: {
                        password: "required",
                        accept_policy: "required",
                        name: "required",
                        confirm_password: {
                            equalTo: "#password"
                        },
                        phone: {
                            required: true,
                            remote: {
                                url: "{{ url('admin/check-unique-phone') }}",
                                type: "post",
                                data: {
                                    phone: function () {
                                        return $("#phone").val();
                                    },
                                    type_user: function () {
                                        return '{{ App\User::OWNER }}'
                                    },
                                    @if(!empty($user))
                                    token_active: function () {
                                        return '{{ $user->token_active }}'
                                    }
                                    @endif
                                }
                            }
                        },
                        email: {
                            email: true,
                            remote: {
                                url: "{{ url('admin/check-unique-email') }}",
                                type: "post",
                                data: {
                                    email: function () {
                                        return $("#email").val();
                                    },
                                    type_user: function () {
                                        return '{{ App\User::OWNER }}'
                                    },
                                    @if(!empty($user))
                                    token_active: function () {
                                        return '{{ $user->token_active }}'
                                    }
                                    @endif
                                }
                            }
                        }
                    },
                    messages: {
                        name: "Vui lòng không bỏ trống Tên",
                        accept_policy: "Vui lòng đồng ý với các điều khoản ITRO",
                        phone: {
                            required: "Vui lòng không bỏ trống số điện thoại",
                            remote: jQuery.validator.format("{0} đã được sử dụng")
                        },
                        email: {
                            remote: jQuery.validator.format("{0} đã được sử dụng"),
                            email: "Vui lòng nhập đúng định dạng email",
                        },
                        password: "Vui lòng không bỏ trống mật khẩu",
                        //    confirm_password: "Vui lòng không bỏ trống loại tài khoản",
                        confirm_password: {
                            required: "Vui lòng nhập lại mật khẩu",
                            equalTo: "Vui lòng nhập lại chính xác mật khẩu"
                        },
                    },
                    errorPlacement: function (error, element) {
                        if (element.attr("name") == "accept_policy") {
                            error.appendTo(".text-err");
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }
            ).form();
            return formStatus;
        }

        $(document).ready(function () {
            $('#btn-register').click(function () {
                register();
            });
        });

        $('input').keypress(function (e) {
            if (e.keyCode == 13) {
                register();
            }
        });

        function register() {
            var formStatus = validate();
            if (formStatus) {
                var data = $('#form-register').serialize();

                $.ajax({
                    url: '{{ url('process-register-qlnt') }}',
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    success: function (response) {
                        if (response.status == 0) {
                            swal('Thông báo', response.message, 'info');
                            return;
                        }

                        window.location.href = response.url;
                    }
                });
            }
        }
    </script>
@endpush