@using HushianWebApp.Service
@inject AuthService AuthService
<div class="login-form">
    <div class="text-center mb-4">
        <span class="badge bg-info p-2 rounded-pill">نیاز برای ارتباط با کارشناسان وارد شود</span>
    </div>
    <div class="form-container">
    <Spinner Class="me-3" Type="SpinnerType.Dots" Color="SpinnerColor.Primary" Visible="@visible" />

    @if (ID==0)
    {
        <label for="user-name" class="block mb-2 text-slate-600 font-bold">
            شماره همراه / نام کاربری
        </label>
        <div class="d-flex">

            <div class="container-input" style="width:150px;margin-left:5px">
                <input disabled="@visible" style="text-align:center;height:30px" type="number" id="user-name" maxlength="64"
                @bind-value=Username title="نام کاربری را وارد کنید." class="input-form input_vk_1" required="" data-val="true" data-val-required="شماره همراه  / نام کاربری را وارد کنید." name="Username">

            </div>
            <Button disabled="visible" Color="ButtonColor.Primary" Type="ButtonType.Submit" @onclick="Login" class="btn-primary"
            style="text-align:center;height:30px">
                ورود
            </Button>
        </div>
    }
    else{
        <label for="user-name" class="block mb-2 text-slate-600 font-bold">
            جهت احراز کد ارسال شده را وارد کنید
        </label>

        <div class="d-flex justify-content-center">

            <div class="verification-inputs" style="display: flex; gap: 8px; direction: ltr;">
                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code1" @oninput="MoveNext"
                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                       @ref="input1" autoFocus />

                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code2" @oninput="MoveNext"
                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                       @ref="input2" />

                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code3" @oninput="MoveNext"
                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                       @ref="input3" />

                <input maxlength="1" type="text" inputmode="numeric" pattern="[0-9]*"
                       @bind="code4" @oninput="OnLastInput"
                       style="width: 45px; height: 45px; text-align: center; border: 2px solid #ccc; border-radius: 8px; font-size: 18px; font-weight: bold;"
                       @ref="input4" />

            </div>
   
        </div>
    }
    </div>
</div>


@code {
    private bool visible = false;
    [Parameter] public EventCallback OnMultipleOfThree { get; set; }
    public string Username { get; set; }
    public int ID { get; set; } = 0;
    public string Code { get; set; } = string.Empty;   
    //-----------------
    private string code1, code2, code3, code4;
    private ElementReference input1, input2, input3, input4;
}
@functions{
    async Task Login()
    {
        visible = true;
        ID= await  AuthService.login(new Common.Models.Auth.UserSide.AuthRequestFromUserSide()
        {
            Mobile=Username
        });
    
        visible = false;
    }
    async Task ver()
    {
        visible = true;
       if(await AuthService.Verificationlogin(ID, Code))
           await OnMultipleOfThree.InvokeAsync();
        visible = false;
    }
    private async Task MoveNext(ChangeEventArgs e)
    {
        if (e.Value?.ToString()?.Length == 1)
        {
            if (input1.Context == null) return;

            if (string.IsNullOrEmpty(code1))
                await input2.FocusAsync();
            else if (string.IsNullOrEmpty(code2))
                await input3.FocusAsync();
            else if (string.IsNullOrEmpty(code3))
                await input4.FocusAsync();
            else if (string.IsNullOrEmpty(code4))
            {
                Code = $"{code1}{code2}{code3}{code4}";
            }
        }
    }
    private async Task OnLastInput(ChangeEventArgs e)
    {
        code4 = e.Value?.ToString();

        if (!string.IsNullOrEmpty(code4) && code4.Length == 1)
        {
            Code = $"{code1}{code2}{code3}{code4}";
          
            await ver();
        }
    }
}

<style>
    .login-form {
        width: 100%;
    }

    .form-container {
        width: 100%;
    }

    .form-container label {
        display: block;
        margin-bottom: 0.75rem;
        font-weight: 600;
        color: #495057;
    }

    .form-container .d-flex {
        gap: 0.75rem;
        align-items: center;
    }

    .container-input {
        flex: 1;
    }

    .container-input input {
        width: 100%;
        border: 2px solid #e9ecef;
        border-radius: 0.5rem;
        transition: border-color 0.2s ease;
    }

    .container-input input:focus {
        border-color: #0d6efd;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    .form-container input[type="text"] {
        margin: 0 0.25rem;
        transition: all 0.2s ease;
    }

    .form-container input[type="text"]:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }

    .badge {
        font-size: 0.875rem;
        font-weight: 500;
    }

    .verification-inputs {
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .verification-inputs input {
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .verification-inputs input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        transform: scale(1.05);
    }
</style>