FrontOffice/src/FrontOffice.Main/Pages/Store/ProductDetail.razor

@attribute [Route(RouteConstants.Store.ProductDetail + "{id:long}")]
@* Injection is handled in code-behind *@

<PageTitle>جزئیات محصول</PageTitle>

@if (_loading)
{
    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
        <LoadingState />
    </MudContainer>
}
else if (_product is null)
{
    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
        <EmptyState Icon="@Icons.Material.Filled.SearchOff"
                    Title="محصول یافت نشد."
                    ActionText="بازگشت"
                    ActionHref="@RouteConstants.Store.Products" />
    </MudContainer>
}
else
{
    <MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
        <PageHeader Title="جزئیات محصول" BackHref="@RouteConstants.Store.Products" />
        <MudGrid Spacing="3">
            <MudItem xs="12" md="6">
                @if (_product is not null)
                {
                    <MudBreadcrumbs Items="_breadcrumbItems" SeparatorIcon="@Icons.Material.Filled.ChevronRight" Class="mb-2" />
                }
                <MudPaper Class="rounded-lg pa-2">
                    @if (!string.IsNullOrWhiteSpace(MainImageUrl))
                    {
                        <AppImage Path="@MainImageUrl" Alt="@MainImageAlt"
                                  ObjectFit="ObjectFit.Cover"
                                  Style="width:100%; aspect-ratio:1/1; border-radius:12px;" />
                    }
                    else
                    {
                        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="360px" />
                    }

                    @if (_galleryItems.Count > 1)
                    {
                        <MudStack Row="true" Spacing="1" Class="mt-3" Style="overflow-x:auto;flex-wrap:wrap;">
                            @foreach (var item in _galleryItems)
                            {
                                <MudButton Variant="Variant.Text" Class="p-0" Style="min-width:0;" OnClick="() => SelectGalleryImage(item)">
                                    <AppImage Path="@GetThumbnailUrl(item)" Alt="@item.Title" Class="rounded-sm" Style="@GetThumbnailStyle(item)" />
                                </MudButton>
                            }
                        </MudStack>
                    }
                </MudPaper>
            </MudItem>
            <MudItem xs="12" md="6">
                <MudStack Spacing="2">
                    <MudText Typo="Typo.h4">@_product.Title</MudText>
                    <MudText Typo="Typo.body1" Class="mud-text-secondary">@_product.Description</MudText>
                    @if (!string.IsNullOrWhiteSpace(_product.FullInformation))
                    {
                        <MudText Typo="Typo.body2" Class="mud-text-secondary" GutterBottom="true">
                            @((MarkupString)_product.FullInformation)
                        </MudText>
                    }
                    @* @if (_categoryPaths.Count > 0) *@
                    @* { *@
                    @*     <MudStack Spacing="1"> *@
                    @*         <MudText Typo="Typo.caption" Class="mud-text-secondary">دسته‌بندی‌ها</MudText> *@
                    @*         <MudStack Row="true" Spacing="1" Wrap="Wrap.Wrap"> *@
                    @*             @foreach (var categoryPath in _categoryPaths) *@
                    @*             { *@
                    @*                 <MudChip T="string" Variant="Variant.Outlined" Color="Color.Primary" OnClick="() => NavigateToCategory(categoryPath)"> *@
                    @*                     @GetCategoryLabel(categoryPath) *@
                    @*                 </MudChip> *@
                    @*             } *@
                    @*         </MudStack> *@
                    @*     </MudStack> *@
                    @* } *@
                    <MudDivider Class="my-2"/>
                    <MudStack Spacing="1">
                        <MudText Typo="Typo.h5" Color="Color.Primary">@FormatPrice(_product.Price)</MudText>
                        @if (VAT.IsEnabled)
                        {
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">
                                (شامل @VAT.VatPercentage% مالیات بر ارزش افزوده)
                            </MudText>
                        }
                    </MudStack>
                    
                    <!-- نمایش وضعیت موجودی -->
                    @if (IsInStock)
                    {
                        <MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">
                            <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Class="me-1" />
                            موجود در انبار (@_product.RemainingCount عدد)
                        </MudChip>
                    }
                    else
                    {
                        <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small">
                            <MudIcon Icon="@Icons.Material.Filled.Cancel" Size="Size.Small" Class="me-1" />
                            ناموجود
                        </MudChip>
                    }

                    <!-- Desktop/tablet actions -->
                    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
                        @if (IsInStock)
                        {
                            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
                                <MudNumericField T="int" @bind-Value="_qty" Min="@MinQty" Max="@MaxQty" Immediate="true"
                                                 HideSpinButtons="true" Style="max-width:120px"/>
                                <MudButton Variant="Variant.Filled" Color="Color.Primary"
                                           StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">افزودن به
                                    سبد
                                </MudButton>
                            </MudStack>
                        }
                        else
                        {
                            <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Dense="true">
                                این محصول در حال حاضر موجود نیست.
                            </MudAlert>
                        }
                    </MudHidden>

                    <!-- Mobile actions use sticky bar rendered below -->
                </MudStack>

            </MudItem>

        </MudGrid>

    </MudContainer>
    <MudHidden Breakpoint="Breakpoint.MdAndUp">
        <MudPaper Class="mud-width-full mud-elevation-3 pa-3"
                  Style="position:sticky;bottom:0;left:0;z-index:9;border-top-left-radius:1rem;border-top-right-radius:1rem;">

            @if (IsInStock)
            {
                <MudGrid Class="align-center" Justify="Justify.SpaceBetween">
                    <MudItem xs="6">
                        <MudStack Spacing="1">
                            @if (HasDiscount && OriginalPrice is not null)
                            {
                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                                    <MudText Typo="Typo.caption"
                                             Class="mud-text-secondary mud-line-through">@FormatPrice(OriginalPrice.Value)</MudText>
                                    <MudChip T="string" Color="Color.Error" Variant="Variant.Filled" Size="Size.Small"
                                             Label="true">@($"٪{_product!.Discount}")</MudChip>
                                </MudStack>
                            }
                            <MudText Typo="Typo.h6" Color="Color.Primary">@FormatPrice(TotalPrice)</MudText>
                        </MudStack>
                    </MudItem>

                    @if (IsInCart)
                    {
                        <MudItem xs="5" Class="">
                            <MudPaper Class="mud-width-full d-flex align-center justify-space-between px-2"
                                      Elevation="1" Style="border-radius:1rem;">
                                <MudIconButton
                                    Icon="@(CurrentCartQuantity == 1 ? Icons.Material.Filled.Delete : Icons.Material.Filled.Remove)"
                                    Color="Color.Error" Variant="Variant.Text" OnClick="RemoveFromCart"/>
                                <MudText Typo="Typo.subtitle2" Class="mud-font-weight-bold">@CurrentCartQuantity</MudText>
                                <MudIconButton Icon="@Icons.Material.Filled.Add" Color="Color.Primary"
                                               Variant="Variant.Text" Disabled="@(CurrentCartQuantity >= MaxQty)"
                                               OnClick="AddToCart"/>
                            </MudPaper>
                        </MudItem>
                    }
                    else
                    {
                        <MudItem xs="6" >
                            <MudStack Spacing="1">
                                <MudButton Variant="Variant.Filled" Size="Size.Large" Color="Color.Error" Class="mud-width-full"
                                           StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">
                                    افزودن به سبد 
                                </MudButton>
                            </MudStack>
                        </MudItem>
                    }
                </MudGrid>
            }
            else
            {
                <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" Dense="true" Class="mb-0">
                    این محصول ناموجود است
                </MudAlert>
            }

        </MudPaper>
    </MudHidden>
}