247 lines
14 KiB
Plaintext
247 lines
14 KiB
Plaintext
@attribute [Route(RouteConstants.Package.Detail + "{id:long}")]
|
|
|
|
<PageTitle>@(_package?.Title ?? "جزئیات پکیج")</PageTitle>
|
|
|
|
@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 (_package == null)
|
|
{
|
|
<MudStack AlignItems="AlignItems.Center" Class="py-16">
|
|
<MudIcon Icon="@Icons.Material.Filled.Error" Size="Size.Large" Color="Color.Error" />
|
|
<MudText Typo="Typo.h5" Class="mt-2">پکیج یافت نشد</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">پکیج مورد نظر وجود ندارد یا حذف شده است.</MudText>
|
|
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="mt-4" OnClick="() => Navigation.NavigateTo(RouteConstants.Main.MainPage)">
|
|
بازگشت به صفحه اصلی
|
|
</MudButton>
|
|
</MudStack>
|
|
}
|
|
else
|
|
{
|
|
<!-- Breadcrumb -->
|
|
<MudContainer MaxWidth="MaxWidth.Large" Class="py-4">
|
|
<MudBreadcrumbs Items="_breadcrumbItems" />
|
|
</MudContainer>
|
|
|
|
<!-- Package Details -->
|
|
<MudContainer MaxWidth="MaxWidth.Large" Class="pb-8">
|
|
<MudGrid Spacing="4">
|
|
<!-- Sidebar (Mobile First) -->
|
|
<MudItem xs="12" lg="4" Class="order-1 order-lg-2">
|
|
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface sticky-top">
|
|
<MudStack Class="mb-4">
|
|
<!-- Package Image -->
|
|
<MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
|
|
<MudImage Src="@_package.Image"
|
|
Alt="@_package.Title"
|
|
Height="250"
|
|
ObjectFit="ObjectFit.Cover"
|
|
ObjectPosition="ObjectPosition.Center"
|
|
Style="width:100%"
|
|
Class="rounded-xl" />
|
|
</MudPaper>
|
|
|
|
<MudText Typo="Typo.h4" Class="px-2">@(_package.Title)</MudText>
|
|
</MudStack>
|
|
|
|
|
|
<!-- Pricing -->
|
|
<MudStack Spacing="3">
|
|
@if (_package.Pricing.HasDiscount)
|
|
{
|
|
<div>
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
|
<MudText Typo="Typo.h5" Class="text-decoration-line-through mud-text-secondary">@_package.Pricing.OriginalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
|
<MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">@_package.Pricing.DiscountPercent% تخفیف</MudChip>
|
|
</MudStack>
|
|
<MudText Typo="Typo.h4" Color="Color.Success" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<MudText Typo="Typo.h4" Color="Color.Primary" Class="fw-700">@_package.Pricing.FinalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
|
}
|
|
|
|
<!-- Purchase Button -->
|
|
<MudButton Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
FullWidth="true"
|
|
Size="Size.Large"
|
|
OnClick="PurchasePackage"
|
|
Disabled="_isPurchasing">
|
|
@(_isPurchasing ? "در حال پردازش..." : "خرید پکیج")
|
|
</MudButton>
|
|
|
|
<!-- Package Features -->
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2 fw-600">شامل:</MudText>
|
|
<MudStack Spacing="1">
|
|
@foreach (var feature in _package.Features)
|
|
{
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
|
|
<MudIcon Icon="@Icons.Material.Filled.Check" Size="Size.Small" Color="Color.Success" Class="mt-1" />
|
|
<MudText Typo="Typo.body2">@feature</MudText>
|
|
</MudStack>
|
|
}
|
|
</MudStack>
|
|
</div>
|
|
|
|
<!-- Support Info -->
|
|
<MudDivider Class="my-2" />
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
|
<MudIcon Icon="@Icons.Material.Filled.Support" Size="Size.Small" Color="Color.Info" />
|
|
<MudText Typo="Typo.body2">پشتیبانی ۲۴ ساعته</MudText>
|
|
</MudStack>
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudItem>
|
|
|
|
<!-- Main Content -->
|
|
<MudItem xs="12" lg="8" Class="order-2 order-lg-1">
|
|
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface">
|
|
<!-- Package Header -->
|
|
<MudStack Spacing="4">
|
|
|
|
<!-- Package Description -->
|
|
<div>
|
|
<MudText Typo="Typo.h6" Class="mb-3 mud-typography-subtitle1">توضیحات پکیج</MudText>
|
|
@((MarkupString)_package.Body)
|
|
</div>
|
|
|
|
<!-- Package Specifications -->
|
|
<div>
|
|
<MudText Typo="Typo.h6" Class="mb-3 mud-typography-subtitle1">مشخصات پکیج</MudText>
|
|
<MudGrid Spacing="2">
|
|
@foreach (var spec in _package.Specifications)
|
|
{
|
|
<MudItem xs="12" sm="6">
|
|
<MudPaper Outlined="true" Class="pa-3 rounded-lg">
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
|
<MudIcon Icon="@spec.Icon" Size="Size.Small" Color="Color.Primary" />
|
|
<div>
|
|
<MudText Typo="Typo.body2" Class="fw-600">@spec.Name</MudText>
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">@spec.Value</MudText>
|
|
</div>
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</div>
|
|
</MudStack>
|
|
</MudPaper>
|
|
|
|
<!-- Reviews Section -->
|
|
<MudPaper Elevation="2" Class="pa-6 rounded-2xl mud-theme-surface mt-4">
|
|
|
|
<!-- Comment Submission Form (only for authenticated users) -->
|
|
@if (_isAuthenticated)
|
|
{
|
|
<MudPaper Outlined="true" Class="pa-4 rounded-lg mb-4">
|
|
<MudStack Row="true" AlignItems="AlignItems.Center">
|
|
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">نظر خود را ثبت کنید</MudText>
|
|
<MudSpacer />
|
|
<MudRating @bind-Value="_newComment.Rating" Size="Size.Medium" />
|
|
</MudStack>
|
|
<MudStack Spacing="3">
|
|
<MudTextField @bind-Value="_newComment.Comment"
|
|
Label="نظر شما"
|
|
Variant="Variant.Outlined"
|
|
Lines="3"
|
|
Placeholder="نظر خود را درباره این پکیج بنویسید..." />
|
|
<MudStack AlignItems="AlignItems.Start">
|
|
<MudButton Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
OnClick="SubmitComment"
|
|
Disabled="_isSubmittingComment"
|
|
StartIcon="@Icons.Material.Filled.Send">
|
|
@(_isSubmittingComment ? "در حال ارسال..." : "ارسال نظر")
|
|
</MudButton>
|
|
</MudStack>
|
|
</MudStack>
|
|
</MudPaper>
|
|
}
|
|
else
|
|
{
|
|
<MudPaper Outlined="true" Class="pa-4 rounded-lg mb-4">
|
|
<MudStack AlignItems="AlignItems.Center" Spacing="2">
|
|
<MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Medium" Color="Color.Default" />
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
|
برای ثبت نظر ابتدا
|
|
<MudLink OnClick="OpenAuthDialog" Class="text-primary">وارد حساب کاربری</MudLink>
|
|
شوید.
|
|
</MudText>
|
|
</MudStack>
|
|
</MudPaper>
|
|
}
|
|
<MudText Typo="Typo.h6" Class="my-4 mud-typography-subtitle1">نظرات کاربران</MudText>
|
|
<!-- Reviews List -->
|
|
@if (_reviews.Any())
|
|
{
|
|
<MudStack Spacing="3">
|
|
@foreach (var review in _reviews)
|
|
{
|
|
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
|
|
<MudStack Spacing="2">
|
|
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
|
|
<MudAvatar Size="Size.Small">
|
|
<MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Small" />
|
|
</MudAvatar>
|
|
<div>
|
|
<MudText Typo="Typo.body2" Class="fw-600">@(review.UserName)</MudText>
|
|
<MudRating ReadOnly="true" Value="review.Rating" Size="Size.Small" />
|
|
</div>
|
|
<MudSpacer />
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">@(review.Date)</MudText>
|
|
</MudStack>
|
|
<MudText Typo="Typo.body2">@(review.Comment)</MudText>
|
|
</MudStack>
|
|
</MudPaper>
|
|
}
|
|
</MudStack>
|
|
}
|
|
else
|
|
{
|
|
<MudStack AlignItems="AlignItems.Center" Class="py-8">
|
|
<MudIcon Icon="@Icons.Material.Filled.Chat" Size="Size.Large" Color="Color.Default" />
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary mt-2">هنوز نظری ثبت نشده است.</MudText>
|
|
</MudStack>
|
|
}
|
|
</MudPaper>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</MudContainer>
|
|
|
|
<!-- Related Packages -->
|
|
@if (_relatedPackages.Any())
|
|
{
|
|
<section class="py-8 bg-grey-50">
|
|
<MudContainer MaxWidth="MaxWidth.Large">
|
|
<MudText Typo="Typo.h5" Align="Align.Center" Class="mb-6 mud-typography-subtitle1">پکیجهای پیشنهادی</MudText>
|
|
<MudGrid Spacing="3" Justify="Justify.Center">
|
|
@foreach (var relatedPackage in _relatedPackages)
|
|
{
|
|
<MudItem xs="12" md="4">
|
|
<MudPaper Elevation="2" Class="pa-4 rounded-2xl d-flex flex-column h-100 cursor-pointer"
|
|
OnClick="() => NavigateToPackage(relatedPackage.Id)">
|
|
<MudImage Src="@relatedPackage.Image"
|
|
Alt="@relatedPackage.Title"
|
|
Height="200"
|
|
ObjectFit="ObjectFit.Cover"
|
|
Class="rounded-xl mb-3" />
|
|
<MudText Typo="Typo.h6" Class="mb-2">@relatedPackage.Title</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary mb-3 line-clamp-2">@relatedPackage.ShortDescription</MudText>
|
|
<MudSpacer />
|
|
<MudText Typo="Typo.h6" Color="Color.Primary">@relatedPackage.Pricing.FinalPrice.ToString("N0") تومان</MudText>
|
|
</MudPaper>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudContainer>
|
|
</section>
|
|
}
|
|
} |