@using Biskilog_Accounting.Shared.CustomModels;
@using Biskilog_Accounting.Shared.Interfaces;
@inject ICalculator m_calculator

@if (!IsLoading)
{
    @if (MostPurchasedItems.Count() > 5)
    {
        <div class="card h-100">
            <div class="card-body" style="padding:5px !important;">
                <div class="d-flex justify-content-between flex-sm-row flex-column gap-3">
                    <div class="d-flex flex-sm-column flex-row align-items-start justify-content-between">
                        <div class="card-title" style="padding:10px;">
                            <h5 class="text-nowrap mb-2">Top 50 most purchased items</h5>
                        </div>
                        <div class="mt-sm-auto">
                            @foreach (MostPurchasedItem purchasedItem in m_items.Take(5))
                            {
                                <small class="text-nowrap fw-semibold">
                                    @($"{purchasedItem.ProductName} x{purchasedItem.NbrTimesSold}")
                                </small> <br />
                            }
                        </div>
                    </div>
                    <ApexChart TItem="MostPurchasedItem" Options="@m_options" Width="150" Height="150">

                        <ApexPointSeries TItem="MostPurchasedItem"
                                 Items="m_items"
                                 SeriesType="SeriesType.Donut"
                                 Name="Top 5 performers"
                                 XValue="@(e => e.ProductName)"
                                 YValue="@(e => e.NbrTimesSold)"
                                 OrderByDescending="e=>e.Y" />
                    </ApexChart>
                </div>
                <div class="card-body" style="padding:5px !important;">
                    <RadzenDataGrid Data="@MostPurchasedItems" TItem="MostPurchasedItem" AllowPaging="true" AllowSorting="true" PageSize="5">
                        <Columns>
                            <RadzenDataGridColumn TItem="MostPurchasedItem" Property="Revenue" Title="Product">
                                <Template Context="detail">
                                    <RadzenRow>
                                        <RadzenColumn>
                                            <span> <b>@detail.ProductName</b></span> <br />
                                            <span> @detail.ProductId</span>
                                        </RadzenColumn>
                                        <RadzenColumn style="justify-content:end !important;">
                                            <span><b>Revenue:</b> @m_calculator.FormatMoneyWithCurrencyKilo((double)detail.Revenue)</span> <br />
                                            <span><b>Quantity Sold:</b> @detail.NbrTimesSold</span>
                                        </RadzenColumn>
                                    </RadzenRow>
                                </Template>
                            </RadzenDataGridColumn>
                        </Columns>
                    </RadzenDataGrid>
                </div>
            </div>
        </div>
    }
}
else
{
    <div class="card h-100">
        <div class="card-body" style="padding:5px !important;">
        </div>
    </div>
}
<style>
    .rz-datatable-thead th, .rz-grid-table thead th {
        background-color: #a4d5d3;
        padding: 0;
        color: white;
    }

    .rz-paginator {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
</style>