@model NEducation.Models.ProfileModel

@{
    ViewBag.Title = "ChangePassView";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}
@using NEducation.Content.Texts;
<link rel="stylesheet" href="~/Content/assets/css/profile/personal.css" />
<script src="~/Content/assets/js/profile/personal.js" type="text/javascript"></script>
@*
    <link rel="stylesheet" href="~/Content/assets/css/profile/main.css" />*@
<!-- Show notification -->
<!-- Header -->
<!-- Body -->
<div class="main-body">

    <div class="setting-container">
        <div class="setting-body">
            <div class="setting-left">
                <div class="setting-left-content">
                    <div class="left-item">
                        <a href="javascript:void(0)" class="left-item-menu menu-item-course">@Lang.Course <i class="fa fa-angle-up"></i></a>
                        <ul>
                            @*<li class="menu-order">*@
                            <li class="menu-course">
                                <a href="/Individual">@Lang.CourseManager</a>
                            </li>
                        </ul>
                    </div>

                    <div class="left-item">
                        <a href="javascript:void(0)" class="left-item-menu menu-item-information">Cá nhân <i class="fa fa-angle-up"></i></a>
                        <ul>
                            <li class="menu-information">
                                <a href="/Home/Profile">
                                @Lang.Information
                                @*Thông tin chung*@
                                </a>
                            </li>
                            <li class="menu-security">
                                <a href="/Home/ChangePass">
                                    @Lang.ChangePassword
                                @*Thay đổi mật khẩu*@
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="setting-right">
                <div class="setting-right-content">

                    <style>
                        .setting-security .info-label {
                            display: block;
                            font-weight: 300;
                            font-size: 15px;
                            color: var(--color-default-text);
                            margin-bottom: 10px;
                        }

                        .setting-security .info-input {
                            width: 100%;
                            height: 35px;
                            position: relative;
                            border-bottom: 2px solid #E3E4E5;
                            margin-bottom: 15px;
                        }

                            .setting-security .info-input .input-text {
                                width: 100%;
                                height: 100%;
                                border: 0px;
                                outline: 0px;
                                padding: 0px;
                                background: transparent;
                                font-weight: 400;
                                font-size: 15px;
                                color: var(--color-default-title);
                            }

                                .setting-security .info-input .input-text::placeholder {
                                    font-weight: 400;
                                    font-size: 15px;
                                    color: #AFAFAF;
                                }

                            .setting-security .info-input .input-select {
                                width: 100%;
                                height: 100%;
                                border: 0px;
                                outline: 0px;
                                padding: 0px;
                                background: transparent;
                                font-weight: 400;
                                font-size: 16px;
                                color: var(--color-default-title);
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                position: relative;
                                z-index: 2;
                            }

                            .setting-security .info-input .input-arrow {
                                font-size: 20px;
                                color: var(--color-blue-text);
                                position: absolute;
                                right: 20px;
                                top: 50%;
                                transform: translate(0px, -50%);
                                z-index: 1;
                                transition: 0.3s all linear;
                            }

                            .setting-security .info-input .input-select:focus ~ .input-arrow {
                                transform: translate(0px, -50%) rotate(180deg);
                            }

                            .setting-security .info-input .input-line {
                                position: absolute;
                                left: 0px;
                                bottom: -2px;
                                width: 0%;
                                height: 2px;
                                background: var(--color-blue-bg);
                                transition: all 0.3s ease;
                            }

                            .setting-security .info-input .input-text:focus + .input-line,
                            .setting-security .info-input .input-select:focus + .input-line {
                                width: 100%;
                            }

                            .setting-security .info-input .input-validation {
                                position: absolute;
                                top: calc(100% + 2px);
                                font-size: 12px;
                                color: var(--color-wrong);
                                margin: 0px;
                            }

                        .setting-button-save {
                            display: block;
                            width: 140px;
                            height: 48px;
                            line-height: 47px;
                            border: 0px;
                            outline: 0px;
                            margin: 0px;
                            border-radius: 30px;
                            text-align: center;
                            text-decoration: none;
                            font-weight: 500;
                            font-size: 15px;
                            color: white;
                            background: #337ab7;
                            transition: 0.2s all linear;
                        }

                            .setting-button-save.button-active {
                                background: var(--color-blue-bg);
                                color: #fff;
                            }

                        .setting-security .setting-default.setting-security {
                            padding-top: 40px;
                        }

                        .setting-security #security-email {
                            font-weight: 400;
                        }

                        .setting-security .info-input .input-text.input-password {
                            font-size: 33px;
                            font-family: cursive;
                        }

                        .setting-security .security-modal {
                            display: block;
                            margin-top: -5px;
                            margin-bottom: 35px;
                            font-weight: 500;
                            font-size: 13px;
                            color: var(--color-blue-text);
                            outline: 0px;
                            text-decoration: none;
                        }

                        .setting-security .security-confirm-email {
                            font-weight: 300;
                            font-size: 13px;
                            color: var(--color-red);
                            margin-bottom: 25px;
                            margin-top: -10px;
                        }

                            .setting-security .security-confirm-email.email-send {
                                color: var(--color-green-text);
                            }

                            .setting-security .security-confirm-email .confirm-link {
                                font-weight: 400;
                                text-decoration: underline;
                                outline: 0px;
                                color: inherit;
                            }


                        @@media (min-width: 768px) {
                            #modal-update-password .modal-dialog {
                                width: 460px;
                                margin-top: 70px;
                            }
                        }

                        #modal-update-password .modal-content {
                            border-radius: 6px;
                            padding: 40px 30px 30px;
                        }

                        #modal-update-password .modal-button-close {
                            display: inline-block;
                            width: 25px;
                            height: 25px;
                            background: url('https://home.voca.vn/assets/img/general/main-icon-bg.svg') 0px -455px;
                            text-decoration: none;
                            outline: 0px;
                            padding: 0px;
                            position: absolute;
                            right: -9px;
                            top: -9px;
                            cursor: pointer;
                        }

                        .setting-modal-title {
                            font-weight: 300;
                            font-size: 25px;
                            color: var(--color-default-text);
                            margin-bottom: 25px;
                            text-align: center;
                        }

                        #modal-update-password .setting-button-save {
                            margin: auto;
                            margin-top: 40px;
                            width: 210px;
                        }
                    </style>

                    <h1>@Lang.MyInformation</h1>

                    <div class="right-item">
                        <div class="setting-default setting-security">



                            <label for="security-email" class="info-label">@Lang.FullName</label>
                            <div class="info-input">
                                <input disabled class="input-text" placeholder="@Lang.FullName" readonly="" type="email" id="security-email" valueOld="@Model.profileDetail.fullName" value="@Model.profileDetail.fullName" />
                                <span class="input-line"></span>
                            </div>


                            <label class="info-label">@Lang.Password</label>
                            <div class="info-input">
                                <input class="input-text input-password" placeholder="@Lang.Password" type="password" id="personal-password" readonly="" value="*******" />
                            </div>

                            <a href="#" data-toggle="modal" data-target="#modal-update-password" class="security-modal">@Lang.ChangePassword</a>


                            <div class="clearfix"></div>
                            <div id="modal-update-password" class="modal fade" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">

                                        <a class="modal-button-close" href="javascript:void(0)" data-dismiss="modal"></a>

                                        <div class="setting-tab-pane">

                                            <p class="setting-modal-title">@Lang.ChangePassword</p>
                                            <label for="new-password" class="info-label">@Lang.OldPassword</label>
                                            <div class="info-input">
                                                <input class="input-text" placeholder="@Lang.EnterYourPassword" type="password" id="old-password" />
                                                <span class="input-line"></span>
                                            </div>
                                            <label for="new-password" class="info-label">@Lang.NewPassword</label>
                                            <div class="info-input">
                                                <input class="input-text" placeholder="@Lang.EnterYourPassword" type="password" id="new-password" />
                                                <span class="input-line"></span>
                                            </div>

                                            <label for="confirm-password" class="info-label">@Lang.EnterYourPassword</label>
                                            <div class="info-input">
                                                <input class="input-text" placeholder="@Lang.EnterYourPassword" type="password" id="confirm-password" />
                                                <span class="input-line"></span>
                                            </div>

                                            <div id="change-pass-result" class="text-red"></div>
                                            <button id="update-pass-button" class="setting-button-save" type="button">@Lang.Submit</button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('#update-pass-button').click(function () {
                            var password = $('#new-password').val();
                            var oldPassword = $('#old-password').val();
                            $.ajax({
                                url: urlConfig("/Home/UpdatePass"),
                                type: "POST",
                                data: {
                                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                                    oldPassword: oldPassword,
                                    password: password,
                                }
                            }).success(function (data) {
                                if (data.error_code != "0") {
                                    // fail
                                    //$('#message-dialog').modal('show');
                                    $('#change-pass-result').html(data.error_content);
                                } else {
                                    console.log(data.error_content);
                                    $('#message-dialog').modal('show');
                                    $('#message-content').html("Update password successful");
                                    //$('#change-pass-result').html("Update password successful");
                                    //if (data.href != null) {
                                    //    location.href = data.href;
                                    //} else {
                                    //    location.reload();
                                    //}
                                }
                            });
                        });
                    </script>
                    <script>
                        $('.menu-item-information').addClass('menu-active');
                        $('.menu-security').addClass('menu-active');
                    </script>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>