@model Hims.Shared.Library.UserAccount
<!DOCTYPE html>
<html>
<head>
    <title>Create Password | Careaxes</title>
    <meta content="Careaxes" name="description">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="application-name" content="Careaxes REST API" />
    <link rel="shortcut icon" href="@Url.Content("~/assets/images/favicon.png")">
    <link type="text/css" href="@Url.Content("~/assets/fonts/style.css")" rel="stylesheet">
    <link type="text/css" href="@Url.Content("~/assets/css/bootstrap.min.css")" rel="stylesheet">
    <link type="text/css" href="@Url.Content("~/assets/css/style.css")" rel="stylesheet">
    <link type="text/css" href="@Url.Content("~/assets/css/custom.css")" rel="stylesheet">
</head>
<body>
    <div id="form-section" class="container-fluid">
        <div class="row">
            <div class="info-slider-holder">
                <div class="info-holder">
                    <div class="icon" style="background-image: url(@Url.Content("~/assets/images/icon-white.png")"></div>
                    <h6>A Service you can anytime modify.</h6>
                    <div class="bold-title">
                        Connect your <span>doctor,</span><br>anywhere, anytime.
                    </div>
                </div>
            </div>
            <div class="form-holder">
                <div class="signin-signup-form">
                    <div class="form-items">
                        <img alt="Careaxes" class="form-logo" src="@Url.Content("~/assets/images/logo_dark.png")" />
                        <div class="form-title">Create your password</div>
                        <div class="details-holder">
                            <div>
                                @{
                                    if (string.IsNullOrEmpty(Model.ThumbnailUrl))
                                    {
                                        <img alt="@Model.FullName" class="photo" src="@Url.Content("~/assets/images/avatar.png")">
                                    }
                                    else
                                    {
                                        <img alt="@Model.FullName" class="photo" src="@Model.ThumbnailUrl">
                                    }

                                }
                            </div>
                            <div>
                                <h4>@Model.FullName</h4>
                                <h5 class="text-muted">@Model.RoleName - @(string.IsNullOrEmpty(Model.Email) ? ("(+" + Model.CountryCode + ") " + Model.Mobile) : Model.Email)</h5>
                            </div>
                        </div>
                        <div class="alert alert-danger" id="dvError" style="display: none">
                            <strong>Oh no!</strong> Sorry error occurred. Please try again later.
                        </div>
                        <div class="alert alert-success" id="dvSuccess" style="display: none">
                            <strong>Congratulations!</strong> Your password has been created successfully.
                        </div>
                        <form id="signinform">
                            <div class="form-text">
                                <label>Password</label>
                                <input type="password" id="password" name="password" autocomplete="nope" maxlength="50" placeholder="Your passsword">
                            </div>
                            <div class="form-text">
                                <label>Confirm Password</label>
                                <input type="password" id="confirmPassword" name="confirmPassword" autocomplete="nope" maxlength="50" placeholder="Confirm your passsword">
                            </div>
                            <div class="form-button">
                                <button id="submit" type="submit" class="ybtn ybtn-accent-color">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="@Url.Content("~/assets/js/jquery.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/js/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/js/additional-methods.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/js/bootstrap.min.js")"></script>
    <script type="text/javascript">
    $(function() {
        var passwordRegex = /(?=^.{9,}$)(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9]).*/;
        window.$.validator.addMethod('regex', function(value) { return value.match(passwordRegex) }, '');

        window.$("#signinform").validate({
            rules: {
                password: {
                    required: true,
                    minlength: 4,
                    regex: false
                },
                confirmPassword: {
                    required: true,
                    minlength: 4,
                    equalTo: "#password"
                }
            },
            messages: {
                password: {
                    required: "Password is required",
                    minlength: "Your password must be at least 4 characters long",
                    regex: "Your password must contain 1 special character, 1 number, 1 lowercase letter and 1 uppercase letter"
                },
                confirmPassword: {
                    required: "Confirm password is required",
                    minlength: "Your confirm password must be at least 4 characters long",
                    equalTo: "Passwords are not matched"
                }
            },
            submitHandler: function(form) {
                window.$.ajax({
                    type: 'POST',
                    url: '@Url.Action("Create")',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ "accountId": @Model.AccountId, "password": form.elements[0].value }),
                    beforeSend: function() {
                        window.$("#submit").prop("disabled", "disabled");
                        window.$("#submit").text("Loading...");
                    },
                    success: function(response) {
                        if (response) {
                            window.$("#dvError").hide();
                            window.$("#signinform").hide();
                            window.$("#dvSuccess").show();
                        } else {
                            window.$("#dvError").show();
                            window.$("#dvSuccess").hide();
                        }
                    },
                    error: function() {
                        window.$("#dvError").show();
                        window.$("#dvSuccess").hide();
                    },
                    complete: function() {
                        window.$("#submit").removeProp("disabled");
                        window.$("#submit").text("Submit");
                    }
                });
            }
        });
    });
    </script>
</body>
</html>