@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Options
@model gehGassi.Web.Models.EditProfileViewModel
@inject IViewLocalizer Localizer
@inject IOptions<RequestLocalizationOptions> Options
@{
    var cultureItems = Options.Value.SupportedCultures.Select(c => new SelectListItem { Value = c.Name, Text = c.NativeName }).ToList();
    var timeZoneList = TimeZoneInfo.GetSystemTimeZones().Select(t => new SelectListItem { Text = t.DisplayName, Value = t.Id, Selected = Model != null && t.Id == Model.TimeZoneId }).ToList();
    ViewData["Title"] = Localizer["Profile_Edit_Title"];
    var image = string.Empty;
    if (!string.IsNullOrWhiteSpace(Model.Photo))
    {
        image = "/file/documents/" + Model.Photo;
    }
    var twoFactorEnableStyle = "display: none;";
    var twoFactorDisableStyle = "display: none;";
    if (Model.TwoFactorEnabled)
    {
        twoFactorDisableStyle = "";
    }
    else
    {
        twoFactorEnableStyle = "";
    }
}
@section pageTitle
{
    <div>@ViewData["Title"]</div>
}
<section id="editProfileContainer">
    <div>
        <div class="pageDesc">@Localizer["Profile_Edit_Desc"]</div>
        <form cb-preventsubmit id="frmEditProfile" class="form" asp-controller="Manage" asp-action="EditProfile" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#editProfileContainer">
            <div asp-validation-summary="ModelOnly"></div>
            <input type="hidden" asp-for="Photo" />
            <div class="row">
                <div class="col-md-4 col-12" style="margin-right: 25px;">
                    <label asp-for="Photo"></label>
                    <div class="text-center">
                        @if (!string.IsNullOrWhiteSpace(Model.Photo))
                        {
                            <img id="photoImage" class="img-fluid upload-image-container" style="height: auto !important; min-height: 200px;" src="/file/documents/@Model.Photo" alt="" />
                        }
                        else
                        {
                            <img id="photoImage" class="img-fluid upload-image-container" style="height: auto !important; min-height: 200px;" alt="" />
                        }
                    </div>
                    <div class="text-center">
                        <span asp-validation-for="Photo" class="invalid-feedback"></span>
                    </div>
                    <div class="text-center mt-2">
                        <button type="button" id="btnUploadImage" class="btn btn-primary btn-sm"><i class="fa fa-fw fa-edit"></i></button>
                        <button type="button" id="btnDeleteImage" class="btn btn-primary btn-sm" style="display: none;"><i class="fa fa-fw fa-trash"></i></button>
                    </div>
                </div>
                <div class="col-md-7 col-12">
	                <div class="row mb-2">
		                <div class="col-12">
			                <label class="form-label" asp-for="FirstName"></label>
			                <div class="input-group">
				                <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
				                <input asp-for="FirstName" class="form-control" />
				                <span asp-validation-for="FirstName" class="invalid-feedback"></span>
			                </div>
		                </div>
                        
	                </div>
	                <div class="row mb-2">
		                <div class="col-12">
			                <label class="form-label" asp-for="LastName"></label>
			                <div class="input-group">
				                <span class="input-group-text"><i class="fa fa-fw fa-user"></i></span>
				                <input asp-for="LastName" class="form-control" />
				                <span asp-validation-for="LastName" class="invalid-feedback"></span>
			                </div>
		                </div>
	                </div>
	                <div class="row mb-2">
		                <div class="col-12">
			                <label class="form-label" asp-for="PreferredLanguage"></label>
			                <div class="input-group">
				                <span class="input-group-text"><i class="fa fa-fw fa-globe"></i></span>
				                <select asp-for="PreferredLanguage" asp-items="@cultureItems" class="form-control"></select>
				                <span asp-validation-for="PreferredLanguage" class="invalid-feedback"></span>
			                </div>
		                </div>
	                </div>
	                <div class="row mb-4">
		                <div class="col-12">
			                <label class="form-label" asp-for="TimeZoneId"></label>
			                <div class="input-group">
				                <span class="input-group-text"><i class="fa fa-fw fa-clock"></i></span>
				                <select asp-for="TimeZoneId" asp-items="@timeZoneList" class="form-control"></select>
				                <span asp-validation-for="TimeZoneId" class="invalid-feedback"></span>
			                </div>
		                </div>
	                </div>
                    <div class="row mb-2">
                        <div class="col-12">
                            <button type="button" id="btnTwoFactorDeactivate" class="btn btn-danger" style="@twoFactorDisableStyle"><i class="fa fa-fw fa-credit-card-alt"></i> @Localizer["Button_TwoFactor_Deactivate"]</button>
                            <button type="button" id="btnTwoFactorActivate" class="btn btn-primary" style="@twoFactorEnableStyle"><i class="fa fa-fw fa-credit-card"></i> @Localizer["Button_TwoFactor_Activate"]</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row button-row">
                <div class="col-md-12">
                    <div class="">
                        <button type="button" id="btnEditProfileSave" class="btn btn-primary">@Localizer["Button_Save"]</button>
                        <a asp-controller="Home" asp-action="Index" id="btnEditProfileCancel" class="btn btn-primary">@Localizer["Button_Cancel"]</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
	@Html.Hidden("jsTwoFactorEnableUrl", Url.Action("TwoFactorEnable", "Manage"))
	@Html.Hidden("jsTwoFactorDisableUrl", Url.Action("TwoFactorDisable", "Manage"))
	@Html.Hidden("jsUploadUrl", Url.Action("UploadTempFile", "Manage"))
	@Html.Hidden("jsRemoveUrl", Url.Action("RemoveTempFile", "Manage"))

	@section ScriptsExternal{
        <environment names="Development">
            <script src="~/lib/uppload/index.umd.js" asp-append-version="false"></script>
        </environment>
        <environment names="Production,Staging,Live">
            <script src="~/lib/uppload/index.umd.min.js" asp-append-version="true"></script>
        </environment>
    }

    @section Scripts{
        <system-js url="~/scripts/Views/Manage/editprofile.js" fresh-import="true"></system-js>
    }

    @section Css
    {
        <environment names="Development">
            <link href="~/css/Uppload.css" rel="stylesheet" asp-append-version="false">
        </environment>
        <environment names="Production,Staging,Live">
            <link href="~/css/Uppload.min.css" rel="stylesheet" asp-append-version="true">
        </environment>
    }
</section>