@using Microsoft.AspNetCore.Builder
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using Microsoft.Extensions.Localization
@using Microsoft.Extensions.Options
@using gehGassi.Web.Helper
@using gehGassi.Web.Models
@model gehGassi.Web.Models.AppUserCrudVm
@inject IViewLocalizer Localizer
@{
	ViewData["Title"] = Localizer["Button_Edit"];
}

<section id="appUserEditContainer">
	<div>
		<div id="pageTitleAdd" style="display: none;">@ViewData["Title"]</div>
		
		<form cb-preventsubmit id="frmEditAppUser" class="form" asp-controller="AppUser" asp-action="Edit" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#appUserEditContainer">
			<div asp-validation-summary="ModelOnly"></div>
			<input type="hidden" asp-for="Id" />
			<input type="hidden" asp-for="Version" />
			<input type="hidden" asp-for="UpdatedAt" />
			<input type="hidden" asp-for="Deleted" />
			<input type="hidden" asp-for="Address.CountryCode" class="validateAlways" />
			<input type="hidden" asp-for="Address.State" class="validateAlways" />
			<input type="hidden" asp-for="Photo" />
            <input type="hidden" asp-for="Locked" />
            <input type="hidden" asp-for="LockedCount" />
            <input type="hidden" asp-for="Anonymized" />
            <input type="hidden" asp-for="AnonymizedDate" />
            <input type="hidden" asp-for="NationalityCode" />
            <input type="hidden" asp-for="MainResidenceCode" />

			<div id="tabContainer">
				<div class="e-tab-header">
					<div>@Localizer["Common_Tab_Details"]</div>
					<div>@Localizer["Common_Tab_Address"]</div>
					<div>@Localizer["Customer_Tab_Photo"]</div>
                    <div>@Localizer["Customer_Tab_SocialMedia"]</div>
                    <div>@Localizer["Common_Tab_LockInfo"]</div>
				</div>
				<div class="e-content">
					<div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Number"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-hashtag"></i></span>
                                    <input asp-for="Number" class="form-control" readonly="readonly" />
                                    <span asp-validation-for="Number" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Type"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-bone"></i></span>
                                    <select asp-for="Type" class="form-control" asp-items="Html.GetEnumSelectList<AppUserTypeVm>()"></select>
                                    <span asp-validation-for="Type" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="Verified"></label>
								<input type="checkbox" asp-for="Verified" class="switch" />
								<span asp-validation-for="Verified" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="TermsAccepted"></label>
                                <input type="checkbox" asp-for="TermsAccepted" class="switch" />
                                <span asp-validation-for="TermsAccepted" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="PrivacyAccepted"></label>
                                <input type="checkbox" asp-for="PrivacyAccepted" class="switch" />
                                <span asp-validation-for="PrivacyAccepted" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label d-block" asp-for="PaymentTermsAccepted"></label>
                                <input type="checkbox" asp-for="PaymentTermsAccepted" class="switch" />
                                <span asp-validation-for="PaymentTermsAccepted" class="invalid-feedback"></span>
                            </div>
                        </div>
						<div class="row mb-2">
							<div class="col-sm-4">
								<label class="form-label" asp-for="Title"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-graduation-cap"></i></span>
									<input asp-for="Title" class="form-control" />
									<span asp-validation-for="Title" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-4">
								<label class="form-label" asp-for="FirstName"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-signature"></i></span>
									<input asp-for="FirstName" class="form-control" />
									<span asp-validation-for="FirstName" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-4">
								<label class="form-label" asp-for="LastName"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-signature"></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-sm-4">
								<label class="form-label" asp-for="Sex"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-mars-and-venus"></i></span>
									<select asp-for="Sex" class="form-control" asp-items="Html.GetEnumSelectList<SexVm>()"></select>
									<span asp-validation-for="Sex" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-4">
								<label class="form-label" asp-for="BirthDate"></label>
								<div class="e-input-group">
									<div class="e-input-group-icon"><i class="fa fa-fw fa-calendar"></i></div>
									<input asp-for="BirthDate" class="form-control" />
								</div>
								<span asp-validation-for="BirthDate" class="invalid-feedback"></span>
							</div>
						</div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Contact.Email"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-envelope"></i></span>
                                    <input asp-for="Contact.Email" class="form-control"/>
                                    <span asp-validation-for="Contact.Email" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Contact.Mobile"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-mobile-screen"></i></span>
                                    <input asp-for="Contact.Mobile" class="form-control"/>
                                    <span asp-validation-for="Contact.Mobile" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="Contact.Phone"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-phone"></i></span>
                                    <input asp-for="Contact.Phone" class="form-control"/>
                                    <span asp-validation-for="Contact.Phone" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="NationalityCode"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
                                    <input asp-for="NationalityName" class="form-control" />
                                </div>
                                <span asp-validation-for="NationalityCode" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label" asp-for="MainResidenceCode"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
                                    <input asp-for="MainResidenceName" class="form-control" />
                                </div>
                                <span asp-validation-for="MainResidenceCode" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-2">
                                <label class="form-label d-block" asp-for="KycPassed"></label>
                                <input type="checkbox" asp-for="KycPassed" class="switch" />
                                <span asp-validation-for="KycPassed" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-2">
                                <label class="form-label d-block" asp-for="AutoPayout"></label>
                                <input type="checkbox" asp-for="AutoPayout" class="switch" />
                                <span asp-validation-for="AutoPayout" class="invalid-feedback"></span>
                            </div>
                        </div>
						<div class="row mb-2 mt-2">
							<div class="col-12">
								<label class="form-label" asp-for="Comment"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
									<textarea asp-for="Comment" class="form-control" rows="5"></textarea>
									<span asp-validation-for="Comment" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="pt-3 ">
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="Address.AddressLine1"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
									<input asp-for="Address.AddressLine1" class="form-control" />
									<span asp-validation-for="Address.AddressLine1" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="Address.AddressLine2"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-road"></i></span>
									<input asp-for="Address.AddressLine2" class="form-control" />
									<span asp-validation-for="Address.AddressLine2" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="Address.Zip"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-signs-post"></i></span>
									<input asp-for="Address.Zip" class="form-control" />
									<span asp-validation-for="Address.Zip" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="Address.City"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-city"></i></span>
									<input asp-for="Address.City" class="form-control" />
									<span asp-validation-for="Address.City" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="Address.CountryCode"></label>
								<div class="e-input-group">
									<div class="e-input-group-icon"><i class="fa fa-fw fa-globe"></i></div>
									<input asp-for="CountryName" class="form-control" />
								</div>
								<span asp-validation-for="Address.CountryCode" class="invalid-feedback"></span>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="Address.State"></label>
								<div class="e-input-group">
									<div class="e-input-group-icon"><i class="fa fa-fw fa-map"></i></div>
									<input asp-for="StateName" class="form-control" />
								</div>
								<span asp-validation-for="Address.State" class="invalid-feedback"></span>
							</div>
						</div>
					</div>
					<div class="pt-3 ">
						<div class="row mb-2">
							<div class="col-12 col-sm-12 col-md-6 col-lg-5">
								<div class="text-center">
									@if (!string.IsNullOrWhiteSpace(Model.Photo))
									{
										<img id="photo" src="/file/documents/@Model.Photo" class="upload-image-container" alt="" />
									}
									else
									{
										<img id="photo" class="upload-image-container" 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="btnUploadPhoto" class="btn btn-primary btn-sm"><i class="fa fa-fw fa-edit"></i></button>
									<button type="button" id="btnDeletePhoto" class="btn btn-primary btn-sm" style="display: none;"><i class="fa fa-fw fa-trash"></i></button>
								</div>
							</div>
							<div class="col-12 col-sm-12 col-md-6 col-lg-7">
								<div class="alert alert-info">
									<p>@Localizer["Common_Photo_Desc"]</p>
								</div>
							</div>
						</div>
					</div>
					<div class="pt-3 ">
						
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Twitter"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-twitter"></i></span>
									<input asp-for="SocialMedia.Twitter" class="form-control" />
									<span asp-validation-for="SocialMedia.Twitter" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Facebook"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-facebook"></i></span>
									<input asp-for="SocialMedia.Facebook" class="form-control" />
									<span asp-validation-for="SocialMedia.Facebook" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.LinkedIn"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-linkedin"></i></span>
									<input asp-for="SocialMedia.LinkedIn" class="form-control" />
									<span asp-validation-for="SocialMedia.LinkedIn" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Xing"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-xing"></i></span>
									<input asp-for="SocialMedia.Xing" class="form-control" />
									<span asp-validation-for="SocialMedia.Xing" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Instagram"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-instagram"></i></span>
									<input asp-for="SocialMedia.Instagram" class="form-control" />
									<span asp-validation-for="SocialMedia.Instagram" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Pinterest"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-pinterest"></i></span>
									<input asp-for="SocialMedia.Pinterest" class="form-control" />
									<span asp-validation-for="SocialMedia.Pinterest" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Blog"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa fa-fw fa-square-rss"></i></span>
									<input asp-for="SocialMedia.Blog" class="form-control" />
									<span asp-validation-for="SocialMedia.Blog" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.YouTube"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-youtube"></i></span>
									<input asp-for="SocialMedia.YouTube" class="form-control" />
									<span asp-validation-for="SocialMedia.YouTube" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Vimeo"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-vimeo"></i></span>
									<input asp-for="SocialMedia.Vimeo" class="form-control" />
									<span asp-validation-for="SocialMedia.Vimeo" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.SnapChat"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-snapchat"></i></span>
									<input asp-for="SocialMedia.SnapChat" class="form-control" />
									<span asp-validation-for="SocialMedia.SnapChat" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
						<div class="row mb-2">
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.TikTok"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-tiktok"></i></span>
									<input asp-for="SocialMedia.TikTok" class="form-control" />
									<span asp-validation-for="SocialMedia.TikTok" class="invalid-feedback"></span>
								</div>
							</div>
							<div class="col-sm-6">
								<label class="form-label" asp-for="SocialMedia.Reddit"></label>
								<div class="input-group">
									<span class="input-group-text"><i class="fa-brands fa-fw fa-reddit"></i></span>
									<input asp-for="SocialMedia.Reddit" class="form-control" />
									<span asp-validation-for="SocialMedia.Reddit" class="invalid-feedback"></span>
								</div>
							</div>
						</div>
					</div>
                    <div class="pt-3 ">
                        <div class="row mb-2">
                            <div class="col-sm-2">
                                <label class="form-label d-block" asp-for="Locked"></label>
                                <input type="checkbox" checked="@Model.Locked" class="switch" disabled="disabled"/>
                                <span asp-validation-for="Locked" class="invalid-feedback"></span>
                            </div>
                            <div class="col-sm-2">
                                <label class="form-label" asp-for="LockedCount"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa-brands fa-fw fa-hashtag"></i></span>
									<input asp-for="LockedCount" class="form-control" disabled="disabled" />
									<span asp-validation-for="LockedCount" class="invalid-feedback"></span>
                                </div>
                            </div>
                            <div class="col-sm-8">
                                <label class="form-label" asp-for="LockedUntil"></label>
                                <div class="e-input-group">
                                    <div class="e-input-group-icon"><i class="fa fa-fw fa-calendar"></i></div>
                                    <input class="form-control" value="@Model.LockedUntil" disabled="disabled" />
                                </div>
                                <span asp-validation-for="LockedUntil" class="invalid-feedback"></span>
                            </div>
                        </div>
                        <div class="row mb-2 mt-2">
                            <div class="col-12">
                                <label class="form-label" asp-for="LockedReason"></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
                                    <textarea class="form-control" rows="5" disabled="disabled">@Model.LockedReason</textarea>
                                    <span asp-validation-for="LockedReason" class="invalid-feedback"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
			</div>

			<div class="row button-row">
				<div class="col-12">
					<div class="">
						<button type="button" id="btnSave" class="btn btn-primary">@Localizer["Button_Save"]</button>
						<button type="button" id="btnCancel" class="btn btn-primary">@Localizer["Button_Cancel"]</button>
					</div>
				</div>
			</div>
		</form>
	</div>

	@Html.Hidden("jsLookupCountriesUrl", Url.Action("LookupCountries", "Country"))
	@Html.Hidden("jsLookupStatesUrl", Url.Action("LookupStates", "Country"))
	@Html.Hidden("jsUploadUrl", Url.Action("UploadTempFile", "Common"))
	@Html.Hidden("jsRemoveUrl", Url.Action("RemoveTempFile", "Common"))
	<system-js url="~/scripts/Views/AppUser/edit.js" fresh-import="true"></system-js>
</section>