FrontOffice/src/FrontOffice.Main/Pages/DiscountStore/Cart.razor

@attribute [Route(RouteConstants.DiscountStore.Cart)]

<PageTitle>سبد خرید اعتباری</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudStack Spacing="3">
        <PageHeader Title="سبد خرید اعتباری" BackHref="@RouteConstants.DiscountStore.Products" />

        @if (DiscountCart.Items.Count == 0)
        {
            <MudAlert Severity="Severity.Info">سبد خرید اعتباری شما خالی است.</MudAlert>
            <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.ArrowBack"
                       OnClick="() => Navigation.NavigateTo(RouteConstants.DiscountStore.Products)">
                بازگشت به فروشگاه اعتباری
            </MudButton>
        }
        else
        {
            <!-- Desktop Table -->
            <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
                <MudPaper Elevation="1" Class="pa-4 rounded-lg">
                    <MudTable Items="DiscountCart.Items">
                        <HeaderContent>
                            <MudTh>محصول</MudTh>
                            <MudTh>قیمت واحد</MudTh>
                            <MudTh>سقف اعتبار</MudTh>
                            <MudTh>تعداد</MudTh>
                            <MudTh>اعتبار</MudTh>
                            <MudTh>قیمت نهایی</MudTh>
                            <MudTh></MudTh>
                        </HeaderContent>
                        <RowTemplate>
                            <MudTd>
                                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                    <AppImage Path="@GetImageUrl(context.ImageUrl)" Alt="@context.Title"
                                              ImgWidth="64" ImgHeight="64" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                    <MudText>@context.Title</MudText>
                                </MudStack>
                            </MudTd>
                            <MudTd>@FormatPrice(context.UnitPrice)</MudTd>
                            <MudTd>
                                <MudChip T="string" Color="Color.Error" Variant="Variant.Outlined" Size="Size.Small">
                                    @context.MaxDiscountPercent% اعتبار
                                </MudChip>
                            </MudTd>
                            <MudTd>
                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                                    <MudIconButton Icon="@Icons.Material.Filled.Remove" Color="Color.Default"
                                                   OnClick="@(() => DecrementQty(context.ProductId))" />
                                    <MudText>@context.Quantity</MudText>
                                    <MudIconButton Icon="@Icons.Material.Filled.Add" Color="Color.Default"
                                                   OnClick="@(() => IncrementQty(context.ProductId))" />
                                </MudStack>
                            </MudTd>
                            <MudTd>
                                @if (context.DiscountAmount > 0)
                                {
                                    <MudText Color="Color.Success">@FormatPrice(context.DiscountAmount)-</MudText>
                                }
                                else
                                {
                                    <MudText Class="mud-text-secondary">—</MudText>
                                }
                            </MudTd>
                            <MudTd>@FormatPrice(context.FinalPrice)</MudTd>
                            <MudTd>
                                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error"
                                               OnClick="() => Remove(context.ProductId)" />
                            </MudTd>
                        </RowTemplate>
                    </MudTable>
                </MudPaper>
            </MudHidden>

            <!-- Mobile Cards -->
            <MudHidden Breakpoint="Breakpoint.MdAndUp">
                <MudStack Spacing="2">
                    @foreach (var item in DiscountCart.Items)
                    {
                        <MudPaper Class="pa-3 rounded-lg w-100-mobile" Outlined="true">
                            <MudStack Spacing="1">
                                <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                        <AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title"
                                                  ImgWidth="50" ImgHeight="50" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
                                        <MudText Typo="Typo.subtitle2">@item.Title</MudText>
                                    </MudStack>
                                    <MudChip T="string" Color="Color.Error" Variant="Variant.Outlined" Size="Size.Small">
                                        @item.MaxDiscountPercent% اعتبار
                                    </MudChip>
                                </MudStack>

                                <MudStack Spacing="1">
                                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                        <MudText Class="mud-text-secondary">@FormatPrice(item.UnitPrice) واحد</MudText>
                                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                                            <MudIconButton
                                                Icon="@(item.Quantity <= 1 ? Icons.Material.Filled.Delete : Icons.Material.Filled.Remove)"
                                                Color="Color.Default"
                                                OnClick="@(() => DecrementQty(item.ProductId))" />
                                            <MudText>@item.Quantity</MudText>
                                            <MudIconButton Icon="@Icons.Material.Filled.Add"
                                                           Color="Color.Default"
                                                           OnClick="@(() => IncrementQty(item.ProductId))" />
                                        </MudStack>
                                    </MudStack>
                                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                        @if (item.DiscountAmount > 0)
                                        {
                                            <MudText Typo="Typo.caption" Color="Color.Success">اعتبار: @FormatPrice(item.DiscountAmount)-</MudText>
                                        }
                                        <MudText>جمع: @FormatPrice(item.FinalPrice)</MudText>
                                        <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error"
                                                       OnClick="() => Remove(item.ProductId)" />
                                    </MudStack>
                                </MudStack>
                            </MudStack>
                        </MudPaper>
                    }
                </MudStack>
            </MudHidden>

            <!-- Summary -->
            @if (DeviceDetector.IsMobile())
            {
                <MudStack Spacing="1" Class="mobile-actions-stack px-5">
                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.body2">جمع کل:</MudText>
                        <MudText Typo="Typo.body2">@FormatPrice(DiscountCart.TotalPrice) تومان</MudText>
                    </MudStack>
                    @if (DiscountCart.TotalDiscount > 0)
                    {
                        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.caption" Color="Color.Success">سقف اعتبار قابل اعمال:</MudText>
                            <MudText Typo="Typo.caption" Color="Color.Success">@FormatPrice(DiscountCart.TotalDiscount)- تومان</MudText>
                        </MudStack>
                    }
                    @if (VAT.IsEnabled)
                    {
                        <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">مالیات ارزش افزوده (@VAT.VatPercentage%):</MudText>
                            <MudText Typo="Typo.caption" Class="mud-text-secondary">@FormatPrice(VatAmount)+ تومان</MudText>
                        </MudStack>
                    }
                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                        <MudText Typo="Typo.h6" Class="fw-bold">حداقل پرداخت:</MudText>
                        <MudText Typo="Typo.h6" Color="Color.Primary" Class="fw-bold">@FormatPrice(TotalWithVat) تومان</MudText>
                    </MudStack>
                </MudStack>

                <MudStack Row="true" Justify="Justify.SpaceBetween" Spacing="2" Class="mobile-actions-stack">
                    <MudButton Variant="Variant.Filled" Color="Color.Primary"
                               OnClick="() => Navigation.NavigateTo(RouteConstants.DiscountStore.Products)">
                        افزودن محصول
                    </MudButton>
                    <MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="ProceedCheckout"
                               StartIcon="@Icons.Material.Filled.CreditCard">ادامه خرید</MudButton>
                </MudStack>
            }
            else
            {
                <MudPaper Class="pa-4 rounded-lg" Style="background-color: var(--mud-palette-background-grey);">
                    <MudStack Spacing="1">
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.body2">جمع کل:</MudText>
                            <MudText Typo="Typo.body2">@FormatPrice(DiscountCart.TotalPrice) تومان</MudText>
                        </MudStack>
                        @if (DiscountCart.TotalDiscount > 0)
                        {
                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.body2" Color="Color.Success">سقف اعتبار قابل اعمال:</MudText>
                                <MudText Typo="Typo.body2" Color="Color.Success">@FormatPrice(DiscountCart.TotalDiscount)- تومان</MudText>
                            </MudStack>
                        }
                        @if (VAT.IsEnabled)
                        {
                            <MudStack Row="true" Justify="Justify.SpaceBetween">
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">مالیات بر ارزش افزوده (@VAT.VatPercentage%):</MudText>
                                <MudText Typo="Typo.body2" Class="mud-text-secondary">@FormatPrice(VatAmount)+ تومان</MudText>
                            </MudStack>
                        }
                        <MudDivider Class="my-1" />
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.subtitle1" Class="fw-bold">حداقل مبلغ پرداخت درگاه:</MudText>
                            <MudText Typo="Typo.subtitle1" Color="Color.Primary" Class="fw-bold">@FormatPrice(TotalWithVat) تومان</MudText>
                        </MudStack>
                        <MudText Typo="Typo.caption" Class="mud-text-secondary">
                            مبلغ دقیق پرداخت در مرحله تسویه مشخص خواهد شد.
                        </MudText>
                    </MudStack>
                </MudPaper>

                <MudStack Row="true" Justify="Justify.FlexEnd" Spacing="2" Class="mt-3">
                    <MudButton Variant="Variant.Outlined" Color="Color.Primary"
                               OnClick="() => Navigation.NavigateTo(RouteConstants.DiscountStore.Products)">
                        افزودن محصول
                    </MudButton>
                    <MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="ProceedCheckout"
                               StartIcon="@Icons.Material.Filled.CreditCard">ادامه فرایند خرید</MudButton>
                </MudStack>
            }
        }
    </MudStack>
</MudContainer>