FrontOffice/src/FrontOffice.Main/Pages/Package/Packages.razor

@attribute [Route(RouteConstants.Package.List)]

<PageTitle>پکیج‌ها</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
    <!-- Header -->
    <MudStack Class="mb-6">
        <MudText Typo="Typo.h4">پکیج‌های سرمایه‌گذاری</MudText>
        <MudText Typo="Typo.body1" Class="mud-text-secondary">
            با خرید پکیج طلایی، به باشگاه مشتریان بپیوندید و از مزایای ویژه بهره‌مند شوید.
        </MudText>
    </MudStack>

    @if (_isLoading)
    {
        <MudStack AlignItems="AlignItems.Center" Class="py-16">
            <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
            <MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">در حال بارگذاری پکیج‌ها...</MudText>
        </MudStack>
    }
    else if (!_packages.Any())
    {
        <MudStack AlignItems="AlignItems.Center" Class="py-16">
            <MudIcon Icon="@Icons.Material.Filled.Inventory2" Size="Size.Large" Color="Color.Default" />
            <MudText Typo="Typo.h6" Class="mt-2">هیچ پکیجی یافت نشد</MudText>
            <MudText Typo="Typo.body2" Class="mud-text-secondary">در حال حاضر پکیجی برای نمایش وجود ندارد.</MudText>
        </MudStack>
    }
    else
    {
        <!-- User Status Card (if logged in) -->
        @if (_userStatus != null && _userStatus.HasPurchasedPackage)
        {
            <MudAlert Severity="Severity.Success" Class="mb-6" Icon="@Icons.Material.Filled.CheckCircle">
                <MudText>
                    شما قبلاً پکیج طلایی را خریداری کرده‌اید.
                    @if (_userStatus.IsClubMemberActive)
                    {
                        <span>عضویت باشگاه شما فعال است.</span>
                    }
                    else
                    {
                        <MudLink Href="@RouteConstants.Club.Membership" Class="mx-2">فعالسازی باشگاه</MudLink>
                    }
                </MudText>
            </MudAlert>
        }

        <!-- Packages Grid -->
        <MudGrid Spacing="4">
            @foreach (var package in _packages)
            {
                <MudItem xs="12" sm="6" md="4">
                    <MudCard Class="h-100 package-card" Elevation="3">
                        <!-- Package Image -->
                        <MudCardMedia Image="@package.ImageUrl"
                                      Title="@package.Title"
                                      Height="200" />

                        <MudCardContent>
                            <MudStack Spacing="2">
                                <MudText Typo="Typo.h5">@package.Title</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary" Style="min-height: 60px;">
                                    @TruncateDescription(package.Description)
                                </MudText>

                                <!-- Price -->
                                <MudStack Row="true" AlignItems="AlignItems.Center" Class="mt-2">
                                    <MudIcon Icon="@Icons.Material.Filled.Sell" Color="Color.Success" Size="Size.Small" />
                                    <MudText Typo="Typo.h6" Color="Color.Success">@package.FormattedPrice</MudText>
                                </MudStack>

                                <!-- Features Preview -->
                                <MudStack Spacing="1" Class="mt-2">
                                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                        <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Primary" />
                                        <MudText Typo="Typo.caption">عضویت در باشگاه مشتریان</MudText>
                                    </MudStack>
                                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                        <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Primary" />
                                        <MudText Typo="Typo.caption">دریافت پاداش هفتگی</MudText>
                                    </MudStack>
                                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                        <MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Primary" />
                                        <MudText Typo="Typo.caption">تیم‌سازی نامحدود</MudText>
                                    </MudStack>
                                </MudStack>
                            </MudStack>
                        </MudCardContent>

                        <MudCardActions Class="pa-4">
                            <MudButton Variant="Variant.Outlined"
                                       Color="Color.Primary"
                                       FullWidth="true"
                                       OnClick="@(() => ViewPackageDetails(package.Id))">
                                مشاهده جزئیات
                            </MudButton>
                        </MudCardActions>
                    </MudCard>
                </MudItem>
            }
        </MudGrid>

        <!-- Info Section -->
        <MudPaper Elevation="0" Class="pa-6 mt-8 rounded-xl" Style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <MudGrid Spacing="4">
                <MudItem xs="12" md="8">
                    <MudStack Spacing="2">
                        <MudText Typo="Typo.h5" Style="color: white;">چرا پکیج طلایی؟</MudText>
                        <MudText Typo="Typo.body1" Style="color: rgba(255,255,255,0.9);">
                            با خرید پکیج طلایی، علاوه بر دسترسی به محصولات ویژه، می‌توانید تیم فروش خود را بسازید
                            و از پاداش‌های هفتگی بهره‌مند شوید. هر چه تیم شما گسترده‌تر، درآمد شما بیشتر!
                        </MudText>
                    </MudStack>
                </MudItem>
                <MudItem xs="12" md="4" Class="d-flex align-center justify-center">
                    <MudButton Variant="Variant.Filled"
                               Color="Color.Default"
                               Size="Size.Large"
                               StartIcon="@Icons.Material.Filled.HelpOutline"
                               OnClick="@(() => Navigation.NavigateTo(RouteConstants.FAQ.Index))">
                        سوالات متداول
                    </MudButton>
                </MudItem>
            </MudGrid>
        </MudPaper>
    }
</MudContainer>

<style>
    .package-card {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .package-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    }
</style>