@page "/"
@inject NavigationManager NavigationManager
<style>
    .mud-input-label {
        background-color: #FFFBE6;
    }

/*     .secondary-border>.mud-input-control-input-container>.mud-input.mud-input-outlined>input:focus~.mud-input-outlined-border {
        border-color: #FD5523;
        color: white;
    } */
</style>
<div class="flex flex-col w-screen h-screen">
    <div class="w-full overflow-hidden basis-2/4">

        <MudCarousel class="w-full h-full" ShowArrows="false" ShowBullets="false" EnableSwipeGesture="true"
            AutoCycle="true" TData="object">
            <MudCarouselItem>
                <div class="flex flex-col h-full mx-5">
                    <div class="my-auto">
                        <div class="-mt-8">
                            <dotlottie-player
                                src="https://lottie.host/752358b3-21b0-4448-b8f4-0f2a2acc998b/DZAZuyYyol.json"
                                background="transparent" speed="1" class="m-auto w-60 h-60" loop autoplay />
                        </div>
                        <p class="mx-auto text-lg font-extrabold text-center font-iranyekan">شرح حال نویسی بیمار راحت تر
                            از
                            همیشه</p>
                        <p class="mx-auto text-xs text-center font-iranyekan">نرم افزار داکیومد با امکانات بسیار زیاد
                            خود
                            مثل شرح حال نویسی همراه و همیار همیشگی پزشکان محترم</p>
                    </div>
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full mx-5">
                    <div class="my-auto">
                        <div class="-mt-8 -mb-3">
                            <dotlottie-player
                                src="https://lottie.host/9ca6089d-388f-4eef-8050-8181c1d945a1/B7oM9NN9O4.json"
                                background="transparent" speed="1" class="m-auto w-60 h-60" loop autoplay />
                        </div>
                        <p class="mx-auto text-lg font-extrabold text-center font-iranyekan">اوردر های شما همه در یک
                            اپلیکیشن</p>
                        <p class="mx-auto text-xs text-center font-iranyekan">نرم افزار داکیومد با امکانات بسیار زیاد
                            خود
                            مثل شرح حال نویسی همیار همیشگی پزشکان محترم</p>
                    </div>
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full mx-5">
                    <div class="my-auto">
                        <div class="-mt-8 -mb-10">
                            <dotlottie-player
                                src="https://lottie.host/87dfb50f-e91f-45c6-b8dc-d3a2436c533c/5DPvXG0W1t.json"
                                background="transparent" speed="1" class="m-auto w-72 h-72" loop autoplay />
                        </div>
                        <p class="mx-auto text-lg font-extrabold text-center font-iranyekan">نرم افزار جامع داکیـــــومد
                        </p>
                        <p class="mx-auto text-xs text-center font-iranyekan">نرم افزار داکیومد با امکانات بسیار زیاد
                            خود
                            مثل تهیه پیشنویس شرح حال همراه همیشگی پزشکان محترم</p>
                    </div>
                </div>
            </MudCarouselItem>
        </MudCarousel>
    </div>
    <MudPaper Elevation="10" class="w-full rounded-t-2xl bg-[#FFFBE6] basis-2/4">
        <MudCarousel class="w-full h-full overflow-x-hidden overflow-y-scroll" @ref="_carousel" ShowArrows="false"
            ShowBullets="false" EnableSwipeGesture="false" AutoCycle="false" TData="object">
            <MudCarouselItem>
                <div class="flex flex-col h-full p-5 font-iranyekan">
                    <MudStack class="my-auto">
                        <p class="text-lg font-extrabold font-iranyekan">ورود | ثبت نام</p>
                        <p class="text-xs text-justify">
                            برای ورود یا ثبت نام به اپلیکیشن داکیومد باید شماره تلفن همراه خود را
                            وارد کنید
                        </p>

                        <MudForm @ref="confirmPhoneNumberForm">
                            <MudTextField Required="true" RequiredError="لطفا شماره تلفن را وارد کنید"
                                @bind-Value="@phoneNumber" InputType="InputType.Telephone" T="string" Label="شماره تلفن همراه"
                                Variant="Variant.Outlined" />
                        </MudForm>
                        <BaseButtonUi OnClickCallback="ConfirmPhoneNumber" Content="ثبت شماره تلفن"
                            Icon="@Icons.Material.TwoTone.Phone" Color="Color.Secondary" Variant="Variant.Filled">
                        </BaseButtonUi>
                        <p class="mx-3 text-justify">
                            با تایید شماره تلفن همراه با همه شرایط <a class="text-blue-500">
                                حریم
                                خصوصی
                            </a> اپلیکیشن داکیومد موافقت می کنم
                        </p>
                    </MudStack>
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">

                    <MudStack class="p-5 my-auto font-iranyekan">
                        <p class="text-lg font-extrabold font-iranyekan">ورود | ثبت نام</p>
                        <p class="text-xs text-justify">
                            برای ورود یا ثبت نام به اپلیکیشن داکیومد باید شماره تلفن همراه خود را
                            وارد کنید
                        </p>

                        <MudTextField class="text-sm" T="string" Label="کد ارسال شده را وارد کنید"
                            Variant="Variant.Outlined" />

                        <BaseButtonUi OnClickCallback="ConfirmVerifyCode" Content="تایید کد"
                            Icon="@Icons.Material.TwoTone.Verified" Color="Color.Secondary" Variant="Variant.Filled">
                        </BaseButtonUi>

                        <div class="flex flex-row mr-5">
                            <MudStack class="my-auto">
                                <p class="text-lg font-extrabold">02:00</p>
                                <a class="-mt-5 font-bold text-blue-600">ارسال مجدد پیامک</a>
                            </MudStack>
                            <MudButton class="mr-auto rounded-full" EndIcon="@Icons.Material.Filled.ChevronLeft"
                                Variant="Variant.Outlined" @onclick="PhoneNumberRollBack" Color="Color.Primary"
                                Size="Size.Medium">
                                بازگشت
                            </MudButton>

                        </div>
                    </MudStack>
                </div>
            </MudCarouselItem>
            <MudCarouselItem>
                <div class="flex flex-col h-full">
                    <MudStack class="w-screen p-5 my-auto font-iranyekan">
                        <p class="text-lg font-extrabold font-iranyekan">ثبت نام</p>
                        <p class="text-xs text-justify">برای ثبت نام به اپلیکیشن داکیومد باید اطلاعات کامل خود را وارد
                            کنید
                        </p>

                        <MudTextField class="text-sm" T="string" Label="نام" Variant="Variant.Outlined" />
                        <MudTextField class="text-sm" T="string" Label="نام خانوادگی" Variant="Variant.Outlined" />
                        <MudTextField class="text-sm" T="string" @bind-Value="@phoneNumber" Label="شماره تلفن همراه"
                            Variant="Variant.Outlined" />
                        <MudAutocomplete T="string" Label="شهر شما" Variant="Variant.Outlined" />
                        <MudAutocomplete T="string" Label="دانشگاه" Variant="Variant.Outlined" />

                        <BaseButtonUi OnClickCallback="ConfirmSignUp" Content="تکمیل ثبت نام"
                            Icon="@Icons.Material.TwoTone.Login" Color="Color.Primary" Variant="Variant.Filled">
                        </BaseButtonUi>
                    </MudStack>
                </div>
            </MudCarouselItem>
        </MudCarousel>
    </MudPaper>
</div>

@code
{
    private MudCarousel<object>? _carousel;
    private int _currentSignOnStep = 0;
    MudForm? confirmPhoneNumberForm;

    private string phoneNumber = string.Empty;

    private void ConfirmPhoneNumber()
    {
        confirmPhoneNumberForm?.Validate();
        if (confirmPhoneNumberForm != null && confirmPhoneNumberForm.IsValid)
            _carousel?.MoveTo(++_currentSignOnStep);
    }
    private void ConfirmVerifyCode()
    {
        _carousel?.MoveTo(++_currentSignOnStep);
    }
    private void PhoneNumberRollBack()
    {
        _carousel?.MoveTo(--_currentSignOnStep);
    }
    private void ConfirmSignUp()
    {
        NavigationManager.NavigateTo("HomePage");
    }

}