@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 Spacing="1">
                                    <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
                                        <MudImage Src="@GetProductImageUrl(context.ImageUrl)" Alt="@context.Title"
                                                  Width="64" Height="64" Class="product-thumb" />
                                        <MudText>@context.Title</MudText>
                                    </MudStack>
                                    @if (context.Discount > 0 || !string.IsNullOrWhiteSpace(context.Created) || !string.IsNullOrWhiteSpace(context.Description))
                                    {
                                        <MudStack Spacing="1">
                                            @if (context.Discount > 0)
                                            {
                                                <MudChip T="string" Color="Color.Error" Variant="Variant.Outlined"
                                                         Size="Size.Small">@($"{context.Discount}% تخفیف")</MudChip>
                                            }
                                            @if (!string.IsNullOrWhiteSpace(context.Description))
                                            {
                                                <MudText Typo="Typo.caption"
                                                         Class="mud-text-secondary">@context.Description</MudText>
                                            }
                                            @if (!string.IsNullOrWhiteSpace(context.Created))
                                            {
                                                <MudText Typo="Typo.caption" Class="mud-text-secondary">تاریخ
                                                    افزودن: @context.Created</MudText>
                                            }
                                        </MudStack>
                                    }
                                </MudStack>
                            </MudTd>
                            <MudTd>@FormatPrice(context.UnitPrice)</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>@FormatPrice(context.LineTotal)</MudTd>
                            <MudTd>
                                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error"
                                               OnClick="() => Remove(context.cartId)"/>
                            </MudTd>
                        </RowTemplate>
                    </MudTable>
                </MudPaper>
            </MudHidden>

            <MudHidden Breakpoint="Breakpoint.MdAndUp">
                <MudStack Spacing="2">
                    @foreach (var item in CartData.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">
                                        <MudImage Src="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title"
                                                  Width="50" Height="50" Class="rounded-circle" />
                                        <MudText Typo="Typo.subtitle2">@item.Title</MudText>
                                    </MudStack>
                                    @if (item.Discount > 0)
                                    {
                                        <MudChip T="string" Color="Color.Error" Variant="Variant.Outlined"
                                                 Size="Size.Small">@($"{item.Discount}% ")</MudChip>
                                    }
                                </MudStack>

                                @if (item.Discount > 0 || !string.IsNullOrWhiteSpace(item.Created) || !string.IsNullOrWhiteSpace(item.Description))
                                {
                                    <MudStack Spacing="1">

                                        @* @if (!string.IsNullOrWhiteSpace(item.Description)) *@
                                        @* { *@
                                        @*     <MudText Typo="Typo.caption" *@
                                        @*              Class="mud-text-secondary">@item.Description</MudText> *@
                                        @* } *@
                                        @* @if (!string.IsNullOrWhiteSpace(item.Created)) *@
                                        @* { *@
                                        @*     <MudText Typo="Typo.caption" Class="mud-text-secondary">تاریخ افزودن: @item.Created</MudText> *@
                                        @* } *@
                                    </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">
                                        <MudText>جمع: @FormatPrice(item.LineTotal)</MudText>
                                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                       Color="Color.Error"
                                                       OnClick="() => Remove(item.cartId)"/>
                                    </MudStack>
                                </MudStack>
                            </MudStack>
                        </MudPaper>
                    }
                </MudStack>
            </MudHidden>
            @if (DeviceDetector.IsMobile())
            {
                <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"
                          Class="mobile-actions-stack px-5">
                    <MudText Typo="Typo.subtitle2"> تخفیف کل: <b>@FormatPrice(CartData.TotalDiscount)</b></MudText>
                    <MudText Typo="Typo.h5"> مبلغ کل: <b>@FormatPrice(CartData.Total)</b></MudText>

                </MudStack>

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

                    <MudButton Variant="Variant.Filled" Color="Color.Primary"
                               OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Products)">افزودن محصول
                    </MudButton>
                    <MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="ProceedCheckout"
                               StartIcon="@Icons.Material.Filled.CreditCard">ادامه فرایند خرید
                    </MudButton>
                </MudStack>
            }
        }
    </MudStack>
</MudContainer>