@attribute [Route(RouteConstants.Registration.Wizard)]

<PageTitle>ثبت‌نام سریع</PageTitle>

<section class="py-12 wizard-section">
    <MudContainer MaxWidth="MaxWidth.Large" Class="px-1">
        <MudGrid Spacing="4" Justify="Justify.Center">
            <MudItem xs="12" md="5" Class="d-none d-sm-block">
                <MudStack Spacing="3" Class="mb-6">
                    <MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small" Class="rounded-pill">
                        ثبت‌نام سه مرحله‌ای
                    </MudChip>
                    <MudText Typo="Typo.h3" Class="mb-1">
                        فقط در چند دقیقه حساب خود را فعال کنید
                    </MudText>
                    <MudText Typo="Typo.body1" Class="mud-text-secondary">
                        اطلاعات اولیه را وارد کنید، مشخصات هویتی را تکمیل کنید و بعد از مطالعه قوانین و دانلود قرارداد،
                        درخواست خود را ارسال کنید.
                    </MudText> 
                </MudStack>

                <MudPaper Elevation="0" Class="pa-5 rounded-xl" Style="border:1px solid var(--mud-palette-divider);">
                    <MudStack Spacing="3">
                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                            <MudAvatar Size="Size.Small" Color="Color.Primary" Variant="Variant.Filled">
                                <MudIcon Icon="@Icons.Material.Outlined.Verified" Size="Size.Small" />
                            </MudAvatar>
                            <MudText Typo="Typo.subtitle1">مزایای ثبت‌نام آنلاین</MudText>
                        </MudStack>
                        <MudStack Spacing="2">
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudIcon Icon="@Icons.Material.Outlined.PhoneAndroid" Size="Size.Small" Color="Color.Primary" />
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">تایید سریع و آنلاین شماره موبایل</MudText>
                            </MudStack>
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudIcon Icon="@Icons.Material.Outlined.Badge" Size="Size.Small" Color="Color.Primary" />
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">تکمیل اطلاعات هویتی بدون مراجعه حضوری</MudText>
                            </MudStack>
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudIcon Icon="@Icons.Material.Outlined.Description" Size="Size.Small" Color="Color.Primary" />
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">دریافت نسخه‌ی دیجیتال قرارداد برای بررسی دقیق</MudText>
                            </MudStack>
                        </MudStack>
                    </MudStack>
                </MudPaper>
            </MudItem>

            <MudItem xs="12" md="7">
                <MudPaper Elevation="1" Class="pa-5 pa-md-6 wizard-card">
                    @if (_completed)
                    {
                        <MudStack Spacing="3" AlignItems="AlignItems.Center" Class="text-center py-6">
                            <MudAvatar Size="Size.Large" Color="Color.Success" Variant="Variant.Filled">
                                <MudIcon Icon="@Icons.Material.Outlined.CheckCircle" Size="Size.Large" />
                            </MudAvatar>
                            <MudText Typo="Typo.h4">درخواست شما ثبت شد</MudText>
                            <MudText Typo="Typo.body1" Class="mud-text-secondary" Style="max-width:400px;">
                                تیم ما پس از بررسی اطلاعات با شما تماس خواهد گرفت. می‌توانید از طریق داشبورد وضعیت ثبت‌نام
                                را دنبال کنید.
                            </MudText>
                            <MudStack Row="true" Spacing="2" Justify="Justify.Center">
                                <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-lg"
                                    OnClick="@(() => Navigation.NavigateTo(RouteConstants.Main.MainPage))">بازگشت به صفحه
                                    اصلی</MudButton>
                                <MudButton Variant="Variant.Outlined" Color="Color.Primary"
                                    OnClick="@(() => Navigation.NavigateTo(RouteConstants.Profile.Index))">مشاهده پروفایل
                                </MudButton>
                            </MudStack>
                        </MudStack>
                    }
                    else
                    {
                        <MudStack Spacing="3">
                            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                <MudText Typo="Typo.h5">مراحل ثبت‌نام</MudText>
                                <MudChip T="string" Color="Color.Primary" Variant="Variant.Outlined" Size="Size.Small" Class="rounded-pill">
                                    مرحله @(_activeStep + 1) از ۳
                                </MudChip>
                            </MudStack>

                            @if (_isSubmitting)
                            {
                                <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="rounded" />
                            }

                            <MudStepper @bind-ActiveIndex="_activeStep" @ref="_mudStepper" Elevation="0" DisableClick="true" Class="mb-4" id="registration-stepper">
                                <ChildContent>
                                    <MudStep Label="تأیید موبایل" Icon="@Icons.Material.Outlined.PhoneAndroid">
                                        @* Inline AuthDialog with captcha enabled *@
                                        <AuthDialog @ref="_authDialog" InlineMode="true" HideCancelButton="true" OnLoginSuccess="@(async () => { OnPhoneVerified(); })" />
                                    </MudStep>

                                    <MudStep Label="اطلاعات هویتی" Icon="@Icons.Material.Outlined.Badge">
                                        <MudForm @ref="_stepTwoForm">
                                            <MudStack Spacing="3">
                                                <MudTextField Label="نام" Variant="Variant.Outlined" Immediate="true"
                                                    @bind-Value="_model.FirstName" For="@(() => _model.FirstName)" />
                                                <MudTextField Label="نام خانوادگی" Variant="Variant.Outlined" Immediate="true"
                                                    @bind-Value="_model.LastName" For="@(() => _model.LastName)" />
                                                <MudTextField Label="کد ملی" Variant="Variant.Outlined" Immediate="true"
                                                    MaxLength="10" @bind-Value="_model.NationalCode"
                                                    For="@(() => _model.NationalCode)" InputType="InputType.Number" />
                                            </MudStack>
                                        </MudForm>
                                    </MudStep>

                                    <MudStep Label="قوانین و قرارداد" Icon="@Icons.Material.Outlined.Rule">
                                        <MudForm @ref="_stepThreeForm">
                                            <MudAlert Variant="Variant.Outlined" Severity="Severity.Info" Class="mb-3 rounded-lg">
                                                لطفاً قوانین و شرایط همکاری را با دقت مطالعه کنید و در صورت موافقت، تیک
                                                تایید را فعال نمایید.
                                            </MudAlert>
                                            <MudPaper Elevation="0" Class="terms-box pa-4 mb-3">
                                                <MudText Typo="Typo.subtitle2" Class="mb-2">بخشی از قوانین:</MudText>
                                                <MudList T="string" Dense="true">
                                                    <MudListItem T="string">استفاده از اطلاعات کاربری صرفاً برای ثبت نام و
                                                        احراز هویت مجاز است.</MudListItem>
                                                    <MudListItem T="string">تمامی فعالیت‌ها مطابق قوانین جمهوری اسلامی ایران
                                                        انجام می‌شود.</MudListItem>
                                                    <MudListItem T="string">مسئولیت صحت اطلاعات وارد شده بر عهده متقاضی است.
                                                    </MudListItem>
                                                </MudList>
                                            </MudPaper>

                                            <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="rounded-lg mb-3"
                                                StartIcon="@Icons.Material.Outlined.Download" Disabled="_isSubmitting"
                                                OnClick="DownloadContract">
                                                دانلود قرارداد نمونه (PDF)
                                            </MudButton>

                                            <MudCheckBox @bind-Checked="_model.AcceptTerms" Color="Color.Primary"
                                                For="@(() => _model.AcceptTerms)"
                                                Label="قوانین و مقررات را مطالعه کرده‌ام و می‌پذیرم" />
                                        </MudForm>
                                    </MudStep>
                                </ChildContent>
                                <ActionContent Context="stepper">
                                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mt-2">
                                        @if (_isAuthenticated && _activeStep == 1)
                                        {
                                            <MudButton Variant="Variant.Text" Color="Color.Error" Size="Size.Small"
                                                       OnClick="@AuthService.LogoutAsync">خروج از حساب</MudButton>
                                        }
                                        else
                                        {
                                            <MudButton Variant="Variant.Text" Color="Color.Secondary" Size="Size.Small"
                                                       Disabled="_activeStep == 0 || _isSubmitting"
                                                       OnClick="@(async () => { await GoBack(); })">مرحله قبل</MudButton>
                                        }
                                        <MudSpacer/>
                                        <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-lg"
                                                   Disabled="_isSubmitting"
                                                   OnClick="@(async () => { await GoNextAsync(); })">
                                            @if (_isSubmitting)
                                            {
                                                <MudProgressCircular Size="Size.Small" Indeterminate="true" Class="me-2" />
                                            }
                                            @_nextButtonText
                                        </MudButton>
                                    </MudStack>
                                </ActionContent>
                            </MudStepper>
                        </MudStack>
                    }
                </MudPaper>
            </MudItem>
        </MudGrid>
    </MudContainer>
</section>