@page "/Login"
@using Common.Enums
@using Common.Models.Auth.CompanySide
@using HushianWebApp.Components
@using HushianWebApp.Service
@layout BeforeLayout
<Modal @ref="modal" />
@inject AuthService auth;
@inject NavigationManager navigationManager;
<PageTitle>هوشیان / ورود بخش مدیریت</PageTitle>
<ConfirmDialog @ref="dialog" />

<div class="header-form">
    <img src="/before/assets/images/logofilehushian.png" width="130" alt="Hushian" class="lg:hidden mb-3">

    <span>ورود</span>
    <span>بخش مدیریت</span>
</div>

<EditForm id="primary_form" class="form" Model="model" OnSubmit="onClick" FormName="LoginForm">
    <div class=" group w-full">
        <label for="user-name" class="block mb-2 text-slate-600 font-bold">
            شماره همراه / نام کاربری
        </label>
        <div class="container-input">
            <input style="text-align:center" type="text" @bind-value="model.Username" id="user-name" maxlength="64" title="نام کاربری را وارد کنید." class="input-form input_vk_1" required="" data-val="true" data-val-required="شماره همراه  / نام کاربری را وارد کنید." name="Username">
        </div>
    </div>
    <div class="relative group">
        <label for="password" class="block mb-2 text-slate-600 font-bold">
            کلمه عبور
        </label>
        <div class="container-input">
            <input style="text-align:center" @bind-value=model.Password type="password" id="password" title="کلمه عبور را وارد کنید." maxlength="36" class="input-form input_vk_2" autocomplete="off" required="" data-val="true" data-val-required="کلمه عبور را وارد کنید." name="Password">
            <div class=" flex gap-1 px-1">
                <div class="cursor-pointer hover:text-black hover:bg-primary hover:bg-opacity-10 rounded transition-all p-1 bg-slate-50 z-10 text-slate-500" onclick="showPassword(event, 'password')">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M20.1364 8.4628C18.0615 5.45328 15.063 3.88257 12.0001 3.88257C8.93711 3.88257 5.93861 5.45326 3.86353 8.46277L3.8635 8.46275L3.85865 8.46991L1.17195 12.4394C0.862392 12.8968 0.982214 13.5185 1.43959 13.8281C1.89696 14.1377 2.51868 14.0178 2.82825 13.5605L5.51247 9.5946C7.25051 7.07601 9.65752 5.88257 12.0001 5.88257C14.3426 5.88257 16.7495 7.07601 18.4874 9.59458L21.172 13.5605C21.4816 14.0179 22.1033 14.1377 22.5607 13.8281C23.018 13.5185 23.1378 12.8968 22.8282 12.4394L20.1413 8.46988L20.1413 8.46986L20.1364 8.4628ZM8.5001 12.9999C8.5001 11.0669 10.0671 9.49994 12.0001 9.49994C13.9331 9.49994 15.5001 11.0669 15.5001 12.9999C15.5001 14.9329 13.9331 16.4999 12.0001 16.4999C10.0671 16.4999 8.5001 14.9329 8.5001 12.9999ZM12.0001 7.49994C8.96253 7.49994 6.5001 9.96238 6.5001 12.9999C6.5001 16.0375 8.96253 18.4999 12.0001 18.4999C15.0377 18.4999 17.5001 16.0375 17.5001 12.9999C17.5001 9.96238 15.0377 7.49994 12.0001 7.49994Z" fill="currentColor"></path>
                    </svg>
                </div>
            </div>
        </div>
        <NavLink href="ForgetPassword">
            <div class=" cursor-pointer font-light left-0 py-2 text-end w-full  text-primary hover:text-black hover:underline flex items-center justify-end">
                <div>
                    فراموشی کلمه‌ عبور
                </div>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 6.29289C15.0976 6.68342 15.0976 7.31658 14.7071 7.70711L11.4042 11.0101C11.0955 11.3187 10.9071 11.5083 10.7772 11.6612C10.7167 11.7325 10.6836 11.7791 10.6651 11.809C10.6563 11.8232 10.6515 11.8325 10.6491 11.8377C10.6467 11.8427 10.6459 11.8451 10.6458 11.8455C10.6132 11.9459 10.6132 12.0541 10.6458 12.1545C10.6459 12.1549 10.6467 12.1573 10.6491 12.1623C10.6515 12.1675 10.6563 12.1768 10.6651 12.191C10.6836 12.2209 10.7167 12.2675 10.7772 12.3388C10.9071 12.4917 11.0955 12.6813 11.4042 12.9899L14.7071 16.2929C15.0976 16.6834 15.0976 17.3166 14.7071 17.7071C14.3166 18.0976 13.6834 18.0976 13.2929 17.7071L9.98997 14.4042L9.96446 14.3787C9.68931 14.1035 9.44171 13.856 9.25255 13.6331C9.04997 13.3945 8.85638 13.1193 8.7437 12.7725C8.58055 12.2704 8.58055 11.7296 8.7437 11.2275C8.85638 10.8807 9.04997 10.6055 9.25254 10.3669C9.44171 10.144 9.6893 9.89647 9.96445 9.62135C9.97293 9.61287 9.98143 9.60437 9.98997 9.59584L13.2929 6.29289C13.6834 5.90237 14.3166 5.90237 14.7071 6.29289Z" fill="currentColor"></path>
                </svg>
            </div>
        </NavLink>
    </div>
    <div class=" space-y-5 flex flex-col items-center">

        <Button Loading=Loading LoadingText="در حال ورود ..." Color="ButtonColor.Primary" Type="ButtonType.Submit" class="btn-primary w-full mb-4 lg:mb-0">
            ورود
        </Button>
    </div>
    <div class=" space-y-5 flex flex-col items-center">
        <NavLink class="btn btn-outline w-full mb-4 lg:mb-0" href="Register">
            ثبت نام
        </NavLink>

    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8P2efyfpaLFHon15HCO5GnTcqzVeJClceMnnP99o04SA4Jbau0j_wcgDQBvHrI3oVb7JTofciu8lxPVwkHOn85rf9-vWzZefUXIBfzQb9upg_bF2ZDxTduIs62mLs07I48u7WZpLohGSjdmJTjjcCQY">
</EditForm>
@code {
    [Inject] protected ToastService ToastService { get; set; } = default!;
    private ConfirmDialog dialog = default!;
    [SupplyParameterFromForm]
    AuthRequestFromCompanySide model { get; set; } = new();
    private Modal modal = default!;
    public bool Loading { get; set; }
}
@functions {



    async Task onClick()
    {
        if (string.IsNullOrEmpty(model.Username) || string.IsNullOrEmpty(model.Password)) return;
        Loading = true;
        var msg = await auth.login(model);
        if (msg == "ok") navigationManager.NavigateTo("/");
       
        Loading = false;
    }
   
}
