@page "/PublicPrintingPage"
<style>
    .mud-input-label {
        background-color: #356859;
        color: #eee !important;
    }

    .secondary-border > .mud-input-control-input-container > .mud-input.mud-input-outlined > input:focus ~ .mud-input-outlined-border {
        border-color: rgba(253, 85, 35, 1);
        color: white !important;
    }

    inpute {
        color: white !important
    }
</style>
<div class="w-screen h-screen bg-[#EEEEEE] p-0 flex flex-col-reverse md:flex-row overflow-hidden">
    <div class="bg-[#356859] h-full basis-full md:basis-1/2 md:rounded-tr-none md:rounded-bl-xl md:rounded-tl-xl flex md:px-10 lg:px-20 py-8 px-4">
        <MudStack class="text-white my-auto mx-auto">
            <div class="hidden sm:flow-root">
                <p class="text-lg text-center font-extrabold">دریافتـــ فایل شرح حال</p>
                <p class="text-center text-md">اطلاعات هر بخش شرح حال را میتوانید به صورت پیش نویس وارد کنید و در شرح حال نویسی خود را سریع و کارامد کنید </p>
            </div>
            <p class="text-lg sm:mt-6 mb-3 font-extrabold">شماره تلفن شما</p>
            
            <input class="bg-transparent text-[1.8rem] sm:py-3 font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                   type="text"
                   maxlength="11"
                   pattern="[0-9]"
                   inputmode="numeric"
                   autocomplete="one-time-code" required>
            <p class="text-lg mt-6 mb-3 font-extrabold">کد 6 رقمی شرح حال</p>
            <MudFocusTrap>
                <div class="flex flex-row-reverse justify-between gap-2 mb-6">

                    <input class="bg-transparent w-12 h-12 md:w-20 md:h-20 text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                           type="text"
                           @oninput="async(e)=>await OTPTextChangedAsync(e,0)"
                           @ref="_otpAInput"
                           maxlength="1"
                           pattern="[0-9]"
                           inputmode="numeric"
                           autocomplete="one-time-code" required>

                    <input class="bg-transparent w-12 h-12 md:w-20 md:h-20  text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                           type="text"
                           @ref="_otpBInput"
                           @oninput="async(e)=>await OTPTextChangedAsync(e,1)"
                           maxlength="1"
                           pattern="[0-9]"
                           inputmode="numeric"
                           autocomplete="one-time-code" required>

                    <input class="bg-transparent w-12 h-12 md:w-20 md:h-20  text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                           type="text"
                           @ref="_otpCInput"
                           @oninput="async(e)=>await OTPTextChangedAsync(e,2)"
                           maxlength="1"
                           pattern="[0-9]"
                           inputmode="numeric"
                           autocomplete="one-time-code" required>

                    <input class="bg-transparent w-12 h-12 md:w-20 md:h-20  text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                           type="text"
                           maxlength="1"
                           @ref="_otpDInput"
                           @oninput="async(e)=>await OTPTextChangedAsync(e,3)"
                           pattern="[0-9]"
                           inputmode="numeric"
                           autocomplete="one-time-code" required>

                    <input class="bg-transparent w-12 h-12 md:w-20 md:h-20  text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                           type="text"
                           @ref="_otpEInput"
                           @oninput="async(e)=>await OTPTextChangedAsync(e,4)"
                           maxlength="1"
                           pattern="[0-9]"
                           inputmode="numeric"
                           autocomplete="one-time-code" required>

                    <input class="bg-transparent w-12 h-12 md:w-20 md:h-20  text-[2rem] sm:text-[2.3rem] font-extrabold text-center border rounded-md shadow-sm focus:border-teal-500 focus:ring-teal-500"
                           type="text"
                           @ref="_otpFInput"
                           @oninput="async(e)=>await OTPTextChangedAsync(e,5)"
                           maxlength="1"
                           pattern="[0-9]"
                           inputmode="numeric"
                           autocomplete="one-time-code" required>
                </div>
            </MudFocusTrap>
            <BaseButtonUi Variant="Variant.Filled" Color="Color.Info" Icon="@Icons.Material.TwoTone.DocumentScanner" class="text-lg" Content="ثبت و تایید"></BaseButtonUi>
        </MudStack>

    </div>
    <div class="h-full md:basis-1/2">
        <div class="collapse h-0 sm:h-auto sm:visible">
            <MudStack class="mx-auto px-8 lg:px-20 my-auto">
                <div class="-mb-10">
                    <dotlottie-player src="https://lottie.host/e7dc67f6-baa3-44c1-b136-3b6e04685fb1/pb8uFg7FnQ.json"
                                      background="transparent" speed="1" class="m-auto w-64 h-64 lg:w-80 lg:h-80" loop autoplay />
                </div>
                <p class="text-xl text-center font-extrabold">افزودن پیش نویس شرح حال جدید</p>
                <p class="text-center text-md">اطلاعات هر بخش شرح حال را میتوانید به صورت پیش نویس وارد کنید و در شرح حال نویسی خود را سریع و کارامد کنید </p>

                <div class="mt-3 overflow-y-hidden">
                    
                    <MudTimeline TimelinePosition="TimelinePosition.Right">
                        <MudTimelineItem Color="Color.Info" Size="Size.Small">
                            <ItemOpposite>
                                <MudText Color="Color.Info" Typo="Typo.h5">1</MudText>
                            </ItemOpposite>
                            <ItemContent>
                                <MudText Color="Color.Info" Typo="Typo.h6" GutterBottom="true">وارد کردن شماره تلفن</MudText>
                                <MudText>شماره تلفن شخصی که شرح حال بیمار را در برنامه خود وارد کرده است را وارد کنید</MudText>
                            </ItemContent>
                        </MudTimelineItem>
                        <MudTimelineItem Color="Color.Success" Size="Size.Small">
                            <ItemOpposite>
                                <MudText Color="Color.Success" Typo="Typo.h5">2</MudText>
                            </ItemOpposite>
                            <ItemContent>
                                <MudText Color="Color.Success" Typo="Typo.h6" GutterBottom="true">وارد کردن کد شرح حال</MudText>
                                <MudText>کد شرح حال که در برنامه داکیومد ثبت شده است را وارد کنید</MudText>
                            </ItemContent>
                        </MudTimelineItem>
                        <MudTimelineItem Color="Color.Error" Size="Size.Small">
                            <ItemOpposite>
                                <MudText Color="Color.Error" Typo="Typo.h5">3</MudText>
                            </ItemOpposite>
                            <ItemContent>
                                <MudText Color="Color.Error" Typo="Typo.h6" GutterBottom="true">دریافت فایل شرح حال</MudText>
                                <MudText>دریافت فایل قابل چاپ شرح حال طبق بیمارستان و بخش بیمار ثبت شده</MudText>
                            </ItemContent>
                        </MudTimelineItem>
                    </MudTimeline>
                </div>
            </MudStack>
        </div>
        <div class="visible h-auto sm:h-0 sm:collapse px-5 mb-2 h-full">
            <MudStack class="mt-14">
                <div class="-mb-7 -mt-7">
                    <dotlottie-player src="https://lottie.host/e7dc67f6-baa3-44c1-b136-3b6e04685fb1/pb8uFg7FnQ.json"
                                      background="transparent" speed="1" class="m-auto w-48 h-48" loop autoplay />
                </div>
                <p class="text-lg text-center font-extrabold">دریافتـــ فایل شرح حال</p>
                <p class="text-center text-md">شماره تلفن فردی که شرح حال را ایجاد کرده است و کد شرح حال را وارد کنید تا فایل قابل چاپ شرح حال را دریافت کنید </p>
            </MudStack>
        </div>
    </div>
</div>

@code {
    ElementReference? _otpAInput;
    ElementReference? _otpBInput;
    ElementReference? _otpCInput;
    ElementReference? _otpDInput;
    ElementReference? _otpEInput;
    ElementReference? _otpFInput;
    char[] _otpKey = new[] { '0', '0', '0', '0', '0', '0' };

    public async Task OTPTextChangedAsync(ChangeEventArgs e, int step)
    {
        switch (step)
        {
            case 0:
                if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
                {
                    _otpKey[0] = (e.Value.ToString())[0]; 
                    await _otpBInput!.Value.FocusAsync();
                }
                break;
            case 1:
                if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
                {
                    _otpKey[1] = (e.Value.ToString())[0];
                    await _otpCInput!.Value.FocusAsync();
                }
                else
                {
                    await _otpAInput!.Value.FocusAsync();
                }
                break;
            case 2:
                if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
                {
                    _otpKey[2] = (e.Value.ToString())[0];
                    await _otpDInput!.Value.FocusAsync();
                }
                else
                {
                    await _otpBInput!.Value.FocusAsync();
                }
                break;
            case 3:
                if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
                {
                    _otpKey[3] = (e.Value.ToString())[0];
                    await _otpEInput!.Value.FocusAsync();
                }
                else
                {
                    await _otpCInput!.Value.FocusAsync();
                }
                break;
            case 4:
                if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
                {
                    _otpKey[4] = (e.Value.ToString())[0];
                    await _otpFInput!.Value.FocusAsync();
                }
                else
                {
                    await _otpDInput!.Value.FocusAsync();
                }
                break;
            case 5:
                if (e.Value != null && !e.Value.ToString().IsNullOrEmpty())
                {
                    _otpKey[5] = (e.Value.ToString())[0];
                }
                else
                {
                    await _otpEInput!.Value.FocusAsync();
                }
                break;
        }
    }

}