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

<PageTitle>جزئیات سفارش</PageTitle>

@if (_loading)
{
    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
        <MudStack AlignItems="AlignItems.Center">
            <MudProgressCircular Indeterminate="true" Color="Color.Primary" />
        </MudStack>
    </MudContainer>
}
else if (_order is null)
{
    <MudContainer MaxWidth="MaxWidth.Medium" Class="py-6">
        <MudAlert Severity="Severity.Warning">سفارش یافت نشد.</MudAlert>
        <MudButton Variant="Variant.Text" StartIcon="@Icons.Material.Filled.ArrowBack" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Orders)">بازگشت</MudButton>
    </MudContainer>
}
else
{
    <MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
        <MudPaper Elevation="2" Class="pa-4 rounded-lg">
            <MudStack Spacing="2">
                <MudText Typo="Typo.h5">سفارش #@_order.Id</MudText>
                <MudText Typo="Typo.body2" Class="mud-text-secondary">تاریخ: @_order.PaymentDate.ToDateTime().MiladiToJalaliWithTime()</MudText>
                <MudText Typo="Typo.body2">وضعیت: @GetStatusText(_order.PaymentStatus)</MudText>
                <MudText Typo="Typo.body2">روش پرداخت: @GetPaymentMethodText(_order.PaymentMethod)</MudText>
                <MudText Typo="Typo.body2">آدرس: @_order.UserAddressText</MudText>
                <MudDivider Class="my-2" />
                <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
                <MudTable Items="_order.FactorDetails">
                    <HeaderContent>
                        <MudTh>محصول</MudTh>
                        <MudTh>قیمت واحد</MudTh>
                        <MudTh>تعداد</MudTh>
                        <MudTh>قیمت کل</MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTd>
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudImage Src="@GetProductImageUrl(context.ProductThumbnailPath)" Alt="@context.ProductTitle"
                                          Width="60" Height="60" Class="rounded-circle" />
                                <MudText>@context.ProductThumbnailPath</MudText>
                            </MudStack>
                        </MudTd>
                        <MudTd>@FormatPrice(context.UnitPrice.Value)</MudTd>
                        <MudTd>@context.Count</MudTd>
                        <MudTd>@FormatPrice(context.UnitPrice.Value*context.Count.Value)</MudTd>
                    </RowTemplate>
                </MudTable>
                </MudHidden>

                <MudHidden Breakpoint="Breakpoint.MdAndUp">
                    <MudStack Spacing="2">
                        @foreach (var it in _order.FactorDetails)
                        {
                            <MudPaper Class="pa-3 rounded-lg" Outlined="true">
                                <MudStack Spacing="1">
                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                        <MudImage Src="@GetProductImageUrl(it.ProductThumbnailPath)" Alt="@it.ProductTitle"
                                                  Width="60" Height="60" Class="rounded-circle" />
                                        <MudText>@it.ProductTitle</MudText>
                                    </MudStack>
                                    <MudStack Row="true" Justify="Justify.SpaceBetween">
                                        <MudText Class="mud-text-secondary">@FormatPrice(it.UnitPrice.Value) واحد</MudText>
                                        <MudText>تعداد: @it.Count</MudText>
                                    </MudStack>
                                    <MudText>جمع: @FormatPrice(it.UnitPrice.Value*it.Count.Value)</MudText>
                                </MudStack>
                            </MudPaper>
                        }
                    </MudStack>
                </MudHidden>
                <MudDivider Class="my-2" />
                
                @* نمایش جزئیات مالی *@
                @{
                    var subtotal = _order.FactorDetails.Sum(s => s.UnitPrice.Value * s.Count.Value);
                }
                <MudStack Spacing="1" Class="pa-2" Style="background-color: var(--mud-palette-background-grey); border-radius: 8px;">
                    <MudStack Row="true" Justify="Justify.SpaceBetween">
                        <MudText Typo="Typo.body2">جمع کالاها:</MudText>
                        <MudText Typo="Typo.body2">@FormatPrice(subtotal)</MudText>
                    </MudStack>
                    
                    @if (_order.VatInfo is not null)
                    {
                        var vatPercent = (int)(_order.VatInfo.VatRate * 100);
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">مالیات بر ارزش افزوده (@vatPercent%):</MudText>
                            <MudText Typo="Typo.body2" Class="mud-text-secondary">@FormatPrice(_order.VatInfo.VatAmount)</MudText>
                        </MudStack>
                        <MudDivider Class="my-1" />
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.subtitle1" Style="font-weight: bold;">مبلغ قابل پرداخت:</MudText>
                            <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: bold;">@FormatPrice(_order.VatInfo.TotalAmount)</MudText>
                        </MudStack>
                    }
                    else
                    {
                        <MudStack Row="true" Justify="Justify.SpaceBetween">
                            <MudText Typo="Typo.subtitle1" Style="font-weight: bold;">مبلغ قابل پرداخت:</MudText>
                            <MudText Typo="Typo.subtitle1" Color="Color.Primary" Style="font-weight: bold;">@FormatPrice(subtotal)</MudText>
                        </MudStack>
                    }
                </MudStack>
            </MudStack>
        </MudPaper>
    </MudContainer>
}