@attribute [Route(RouteConstants.Store.Cart)]
@* Injection is handled in code-behind *@

<PageTitle>سبد خرید</PageTitle>

<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
    <MudStack Spacing="3">
        <MudText Typo="Typo.h4">سبد خرید</MudText>

        @if (CartData.Items.Count == 0)
        {
            <MudAlert Severity="Severity.Info">سبد خرید شما خالی است.</MudAlert>
            <MudButton Variant="Variant.Outlined" StartIcon="@Icons.Material.Filled.ArrowBack" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Products)">بازگشت به محصولات</MudButton>
        }
        else
        {
            <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
            <MudPaper Elevation="1" Class="pa-4 rounded-lg">
                <MudTable Items="CartData.Items">
                    <HeaderContent>
                        <MudTh>محصول</MudTh>
                        <MudTh>قیمت واحد</MudTh>
                        <MudTh>تعداد</MudTh>
                        <MudTh>قیمت کل</MudTh>
                        <MudTh></MudTh>
                    </HeaderContent>
                    <RowTemplate>
                        <MudTd>
                            <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                <MudAvatar Image="@context.ImageUrl" Size="Size.Medium" />
                                <MudText>@context.Title</MudText>
                            </MudStack>
                        </MudTd>
                        <MudTd>@FormatPrice(context.UnitPrice)</MudTd>
                        <MudTd>
                            <MudNumericField T="int" Value="@context.Quantity" Min="1" Max="50" Immediate="true" HideSpinButtons="true" ValueChanged="(v) => ChangeQty(context.ProductId, v)" Style="max-width:120px" />
                        </MudTd>
                        <MudTd>@FormatPrice(context.LineTotal)</MudTd>
                        <MudTd>
                            <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => Remove(context.ProductId)" />
                        </MudTd>
                    </RowTemplate>
                </MudTable>
            </MudPaper>
            </MudHidden>

            <MudHidden Breakpoint="Breakpoint.MdAndUp">
                <MudStack Spacing="2">
                    @foreach (var item in CartData.Items)
                    {
                        <MudPaper Class="pa-3 rounded-lg" Outlined="true">
                            <MudStack Spacing="1">
                                <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                    <MudAvatar Image="@item.ImageUrl" />
                                    <MudText Typo="Typo.subtitle2">@item.Title</MudText>
                                </MudStack>
                                <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                    <MudText Class="mud-text-secondary">@FormatPrice(item.UnitPrice) واحد</MudText>
                                    <MudNumericField T="int" Value="@item.Quantity" Min="1" Max="50" Immediate="true" HideSpinButtons="true" ValueChanged="(v) => ChangeQty(item.ProductId, v)" Class="qty-input" />
                                </MudStack>
                                <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                    <MudText>جمع: @FormatPrice(item.LineTotal)</MudText>
                                    <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => Remove(item.ProductId)" />
                                </MudStack>
                            </MudStack>
                        </MudPaper>
                    }
                </MudStack>
            </MudHidden>

            <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mobile-actions-stack">
                <MudText Typo="Typo.h6">مبلغ قابل پرداخت: <b>@FormatPrice(CartData.Total)</b></MudText>
                <MudStack Row="true" Spacing="2" Class="mobile-actions-stack">
                    <MudButton Variant="Variant.Text" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Products)">افزودن محصول</MudButton>
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ProceedCheckout" StartIcon="@Icons.Material.Filled.CreditCard">ادامه فرایند خرید</MudButton>
                </MudStack>
            </MudStack>
        }
    </MudStack>
</MudContainer>