@{
    ViewData["Title"] = "ProfileInfo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Models;
@using LotteryWebApp.Common;
@using System.Globalization;

@model ProfileProfileInfo_ViewModel

@{
    DateTime oDateTo = DateTime.ParseExact(Model.profile.birthday, "dd/MM/yyyy", CultureInfo.InvariantCulture);
    String dateTo = oDateTo.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture);
}
@*//<img src="@(Model.profile.picture != null && Model.profile.picture != "" ? Model.profile.picture : "/img/8b6f5f94a53dbc3c8240347693830120.jpg")" />*@

<div class="app-content content">

    @{
        <div class="card-title text-center ">
            <div class="news-button-header-container" style="text-align: start; margin: 0 10px;">
                @await Component.InvokeAsync("SmallHeader", new { title = Lang.profile.ToUpper()})
            </div>
        </div>
    }

    <div class="content-wrapper" style="margin-top:80px;">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <section class="flexbox-container">
                <div class="col-12 align-items-center justify-content-center">
                    <div class="">
                        @{
                            if (Model.code != Code.SUCCESS)
                            {
                                <form id="login-form" class="form-horizontal" action="@ViewBag.MyConfig.MyValue/Profile/ChangePassword" method="post">

                                    <div style="text-align: center;">
                                        <div class="account-header-image" style="width:100px; height:100px;    margin-bottom: 10px; position:relative;">
                                            <img id="personal-picture" src="@(Model.profile.realPicture != null && Model.profile.realPicture != "" ? Model.profile.picture : "/img/8b6f5f94a53dbc3c8240347693830120.jpg")" />
                                            <label for="user_avatar" class="label-input-data"></label>
                                            <input type="file" id="user_avatar" name="user_avatar" class="shifted" style="display: none" />
                                        </div>
                                    </div>


                                    <fieldset class="form-group position-relative has-icon-left">
                                        <label>@Lang.phone_number</label>
                                        <input type="number" class="data-input-box form-control" id="phonenumber"
                                           name="phonenumber" value="@Model.profile.users" disabled>

                                        <div class="form-control-position" style="top: 35px;">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group position-relative has-icon-left">
                                        <label>@Lang.name</label>

                                        <input type="text" class="data-input-box form-control" id="fullname"
                                           placeholder="@Lang.enter_name" name="fullname" required value="@Model.profile.fullName">

                                        <div class="form-control-position" style="top: 35px;">
                                            <i class="fa fa-key"></i>
                                        </div>
                                    </fieldset>

                                    <fieldset class="form-group position-relative has-icon-left">
                                        <label>@Lang.dateOfBirth</label>

                                        <input type="date" class="data-input-box form-control" id="birthday"
                                           placeholder="@Lang.enter_birthday" name="birthday" required value="@dateTo">

                                        <div class="form-control-position" style="top: 35px;">
                                            <i class="fa fa-key"></i>
                                        </div>
                                    </fieldset>

                                    <div class="row" style="margin-top:2rem;">
                                        <div class="col-12">
                                            <button type="button" class="btn btn-outline-primary btn-block  login-button"
                                                onclick="updateProfileButtonAction_Click()">
                                                <i class="ft-unlock"></i> @Lang.update.ToUpper()
                                            </button>
                                        </div>
                                    </div>

                                </form>
                            }
                            else
                            {
                                <div class="card-header border-0 card-box">
                                    <div class="card-title text-center ">
                                        <div>
                                            <div style="    margin-top: 50px;">
                                                <img class="logo-app" src="~/img/Group854.png" />
                                            </div>

                                            <div style="position: relative; margin-top: 10px;">
                                                <h2 class="text-style-main-large">
                                                    @Lang.success
                                                </h2>
                                            </div>

                                            <div style="position: relative; margin-top: 10px;">
                                                <h4 class="text-style-blue-normal">
                                                    @Lang.update_successful
                                                </h4>
                                            </div>
                                            <hr class="line-2">
                                        </div>
                                    </div>
                                </div>
                            }
                        }
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<script>
    stopLoading();
</script>