@using NEducation.Controllers;
@using NEducation.Content.Texts
@{
    ViewBag.Title = "Profiles";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}
@model NEducation.Models.ProfileModel
<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
                            @*Khóa học*@
                            <i class="fa fa-angle-up"></i>
                        </a>
                        <ul>
                            @*<li class="menu-order">*@
                            <li class="menu-course">
                                <a href="/Individual">
                                    @Lang.CourseManager
                                    @*Quản lý khóa học*@
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="left-item">
                        <a href="javascript:void(0)" class="left-item-menu menu-item-information">
                            @Lang.Personal
                            @*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>
                        @@media (min-width: 768px) {
                            #modal-update-password .modal-dialog {
                                width: 460px;
                                margin-top: 70px;
                            }
                        }

                        @@media(max-width: 768px) {
                            .setting-personal .personal-avatar-group {
                                float: none;
                                width: 100%;
                                margin-left: 0px;
                            }

                            .setting-personal .personal-info {
                                width: 100%;
                                float: left;
                                margin-top: 20px;
                            }
                        }
                    </style>

                    <h1>
                        @Lang.MyInformation
                        @*Thông tin của tôi*@
                    </h1>
                    <div class="right-item">
                        <div class="setting-default setting-personal">
                            <div class="personal-avatar-group">
                                <p class="update-avatar-label">
                                    @Lang.ChooseYourPicture
                                    @*Chọn ảnh của bạn*@
                                </p>

                                <div class="personal-image" style="margin: 10px 0 50px 0;">
                                    @*<span class="image-text" style="background: #FEBF10">H</span>*@
                                    @*<span class="image-text" style="background: #FEBF10">H</span>
                                        <img src="~/Content/assets/imgs/picture/course/1grammar.jpg" />
                                        <img src="~/Content/assets/imgs/post/1523464517.jpeg" />*@
                                    @{
                                        System.Diagnostics.Debug.WriteLine("image: " + Model.profileDetail.picture);

                                        if (Model.profileDetail.picture == "")
                                        {
                                            <span class="image-text" style="background: #FEBF10">H</span>
                                        }
                                        else
                                        {
                                            <img id="personal-picture" src="@Model.profileDetail.picture" />
                                        }
                                    }
                                    <div style="margin:20px 0px 100px 0px">

                                        @using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, new { id = "myForm", enctype = "multipart/form-data" }))
                                        {
                                            @*<label for="file">Upload Image:</label>*@

                                            <input type="file" name="file" id="file" />
                                            <input type="submit" id="submit" value="Upload Image" style="margin: 10px 0px 10px 0px; display: none;" />

                                            <script>
                                                var oFReader = null;
                                                $(document).ready(function () {
                                                    $('#file').change(function (e) {
                                                        $('#submit').css('display', "block");
                                                        $('#file').css('display', "none");

                                                        var fileLoad = document.getElementById("file").files[0];
                                                        var fileExt = fileLoad.name.match(/(.*)\??/i).shift().replace(/\?.*/, '').split('.').pop();
                                                        if (fileExt != "png" && fileExt != "jpg") {
                                                            $('#message-dialog').modal('show');
                                                            $('#message-content').html("File Extension Is InValid - Only Upload PNG/JPG File");
                                                        } else if (fileLoad.size >= 5 * 1024 * 1024 || fileLoad.size < 100) {
                                                            $('#message-dialog').modal('show');
                                                            $('#message-content').html("File size Should Be UpTo 5MB and min size is 100KB");
                                                        } else {
                                                            var oFReader = new FileReader();
                                                            oFReader.readAsDataURL(fileLoad);
                                                            oFReader.onload = function (oFREvent) {
                                                                document.getElementById("personal-picture").src = oFREvent.target.result;
                                                            };
                                                            var control = $("#file");
                                                            control.replaceWith(control = control.clone(true));
                                                        }

                                                        //var oFReader = new FileReader();
                                                        //oFReader.readAsDataURL(document.getElementById("file").files[0]);
                                                        //oFReader.onload = function (oFREvent) {
                                                        //    document.getElementById("personal-picture").src = oFREvent.target.result;
                                                        //    $('#file').reset();
                                                        //};
                                                    });
                                                });
                                            </script>
                                            @*@ViewBag.Message*@
                                        }
                                    </div>
                                </div>
                                <div class="image-group">

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Determination" data-toggle="tooltip" data-placement="right" title="@Lang.Determination" src="~/Content/assets/imgs/post/avatar_aspiration.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Hope" data-toggle="tooltip" data-placement="right" title="@Lang.Hope" src="~/Content/assets/imgs/post/avatar_hope.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Clever" data-toggle="tooltip" data-placement="right" title="@Lang.Clever" src="~/Content/assets/imgs/post/avatar_intelligent.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Active" data-toggle="tooltip" data-placement="right" title="@Lang.Active" src="~/Content/assets/imgs/post/avatar_creation.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Strong" data-toggle="tooltip" data-placement="right" title="@Lang.Strong" src="~/Content/assets/imgs/post/avatar_strong.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Passion" data-toggle="tooltip" data-placement="right" title="@Lang.Passion" src="~/Content/assets/imgs/post/avatar_passion.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Enthusiasm" data-toggle="tooltip" data-placement="right" title="@Lang.Enthusiasm" src="~/Content/assets/imgs/post/avatar_enthusiasm.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Aspiration" data-toggle="tooltip" data-placement="right" title="@Lang.Aspiration" src="~/Content/assets/imgs/post/avatar_aspiration.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Secret" data-toggle="tooltip" data-placement="right" title="@Lang.Secret" src="~/Content/assets/imgs/post/avatar_secret.png" />
                                    </div>

                                    <div class="image-item avatar-item">
                                        <img alt="@Lang.Confident" data-toggle="tooltip" data-placement="right" title="@Lang.Confident" src="~/Content/assets/imgs/post/avatar_confidence.png" />
                                    </div>
                                </div>
                            </div>


                            <div class="personal-info">

                                @*<form method="post" action="/Home/UpdateProfile">*@
                                <input type="hidden" name="_token" value="uBG5dtnM0z92gZHHm9CESPZY7ImlOEj3zh7c3Yen">
                                <label for="personal-name" class="info-label">
                                    @Lang.Name
                                    @*Họ và tên*@
                                </label>
                                <div class="info-input">
                                    <input class="input-text" placeholder="@Lang.Name" type="text" id="personal-name" value="@Model.profileDetail.fullName" name="name" />
                                    <span class="input-line"></span>
                                </div>

                                <label for="personal-phone" class="info-label">@Lang.PhoneNumber</label>
                                <div class="info-input">
                                    <input disabled class="input-text" placeholder="@Lang.PhoneNumber" type="text" id="personal-phone" value="@Model.profileDetail.users" name="phone_number" />
                                    <span class="input-line"></span>
                                </div>

                                <label for="personal-name" class="info-label">@Lang.Birthday</label>
                                <div class="info-input">
                                    <input type="hidden" id="birthday-data" value="@Model.profileDetail.birthday" />
                                    <input type="date" onchange="changeDate()" id="personal-birthday" name="birthday" style=" display: block; width: 100%; border-radius: 5px; border: 0px; font-size: 15px;" value="@Model.profileDetail.birthday">
                                    @*<a class="input-text" placeholder="Birthday" id="personal-birthday" value="@Model.profileDetail.birthday" name="birthday">@Model.profileDetail.birthday</a>*@
                                    <span class="input-line"></span>
                                    <script>
                                        // convert birthday
                                        var birthday = $("#birthday-data").val();
                                        var splitBirthday = birthday.split('/').reverse();

                                        var result = "";
                                        for (var i = 0; i < splitBirthday.length; i++) {
                                            if (i == 0) result = splitBirthday[i];
                                            else result += ("-" + splitBirthday[i]);
                                        }
                                        document.getElementById('personal-birthday').value = result;
                                    </script>
                                </div>

                                <button id="update-info-button" class="setting-button-save" type="submit" onclick="return checkUpdateInformation();">@Lang.Submit</button>
                                @*</form>*@
                                <script>
                                    function changeDate() {
                                        var newBirthday = document.getElementById('personal-birthday').value;
                                        var oldBirthday = document.getElementById('birthday-data').value;

                                        if (newBirthday != oldBirthday) {
                                            $('.setting-personal .personal-info .setting-button-save').addClass('button-active');
                                        } else {
                                        }
                                    }
                                </script>
                            </div>


                            <div class="clearfix"></div>

                        </div>
                    </div>
                    <script>
                        $('.menu-item-information').addClass('menu-active');
                        $('.menu-information').addClass('menu-active');
                        $(function () {
                            $('[data-toggle="tooltip"]').tooltip()
                        })
                        $(document).on("click", ".avatar-item img", function () {
                            console.log("avatar click");
                            var linkAvatar = $(this).attr('src');
                            console.log(linkAvatar);

                            document.getElementById("personal-picture").src = linkAvatar;
                            $.ajax({
                                url: urlConfig("/Home/UploadExistedImage"),
                                type: "POST",
                                data: {
                                    __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                                    picture: linkAvatar,
                                }
                            }).success(function (data) {
                                if (data.error_code != "0") {
                                    // fail
                                    $('#message-dialog').modal('show');
                                    $('#message-content').html(data.error_content);
                                } else {
                                    console.log(data.error_content);
                                    $('#message-dialog').modal('show');
                                    $('#message-content').html(data.error_content);
                                }
                            });

                        });

                        $('#update-info-button').click(function () {

                            var check = $("#update-info-button").hasClass("button-active");
                            if (check == true) {

                                var fullname = $('#personal-name').val();
                                var phone = $('#personal-phone').val();
                                var birthdayDate = $('#personal-birthday').val();
                                // convert birthday
                                var splitBirthday = birthdayDate.split('-').reverse();

                                var birthday = "";
                                for (var i = 0; i < splitBirthday.length; i++) {
                                    if (i == 0) birthday = splitBirthday[i];
                                    else birthday += ("/" + splitBirthday[i]);
                                }

                                $.ajax({
                                    url: urlConfig("/Home/UpdateProfile"),
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                                        fullname: fullname,
                                        phone: phone,
                                        birthday: birthday,
                                    }
                                }).success(function (data) {
                                    if (data.error_code != "0") {
                                        // fail
                                        $('#message-dialog').modal('show');
                                        $('#message-content').html(data.error_content);
                                    } else {
                                        console.log(data.error_content);
                                        if (data.href != null) {
                                            location.href = data.href;
                                        } else {
                                            location.reload();
                                        }
                                    }
                                });
                            } else {
                                console.log("not update");
                            }
                        });
                    </script>

                    @*<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">Thay đổi mật khẩu</p>
                                        <label for="new-password" class="info-label">Mật khẩu mới</label>
                                        <div class="info-input">
                                            <input class="input-text" placeholder="Nhập mật khẩu" type="password" id="new-password" />
                                            <span class="input-line"></span>
                                        </div>

                                        <label for="confirm-password" class="info-label">Nhập lại mật khẩu</label>
                                        <div class="info-input">
                                            <input class="input-text" placeholder="Nhập mật khẩu" type="password" id="confirm-password" />
                                            <span class="input-line"></span>
                                        </div>


                                        <button id="update-pass-button" class="setting-button-save" type="button" onclick="return checkUpdatePassword();">Lưu thay đổi</button>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <script>
                            $('#update-pass-button').click(function () {
                                var password = $('#new-password').val();

                                $.ajax({
                                    url: urlConfig("/Home/UpdatePass"),
                                    type: "POST",
                                    data: {
                                        __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                                        password: password,
                                    }
                                }).success(function (data) {
                                    if (data.error_code != "0") {
                                        // fail
                                        $('#message-dialog').modal('show');
                                        $('#message-content').html(data.error_content);
                                    } else {
                                        console.log(data.error_content);
                                        $('#message-dialog').modal('show');
                                        $('#message-content').html("Update password successful");
                                        //if (data.href != null) {
                                        //    location.href = data.href;
                                        //} else {
                                        //    location.reload();
                                        //}
                                    }
                                });
                            });
                        </script>*@
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>




</div>