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

@if (!IsLoading)
{
    <div class="card">
        <div class="row row-bordered g-0">
            <div class="col-md-8">
                <h5 class="card-header m-0 me-2 pb-3">@Title</h5>
                <ApexChart TItem="WeeklySaleItem" Options=m_options>

                    <ApexPointSeries TItem="WeeklySaleItem"
                                 Items="@Series"
                                 Name="Sales"
                                 YValue="@(e => e.Total)"
                                 XValue="@(e => e.Date.ToShortDateString())"
                                 SeriesType="SeriesType.Bar" />
                </ApexChart>
            </div>
            <div class="col-md-4">
                <div class="text-center fw-semibold pt-3 mb-2">@SubTitle</div>
                <ApexChart TItem="WeeklySaleItem">
                    <ApexPointSeries TItem="WeeklySaleItem"
                                 Items="@Series"
                                 Name="Sales"
                                 YValue="@(e => e.Total)"
                                 XValue="@(e => e.Date.Day)"
                                 SeriesType="SeriesType.Area" />
                </ApexChart>
                <div class="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between">
                    <div class="d-flex">
                        <div class="me-2">
                            <span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span>
                        </div>
                        <div class="d-flex flex-column">
                            <small>Best Day</small>
                            <small class="mb-0">@m_bestDay</small>
                            <small class="mb-0">@m_bestSales</small>
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="me-2">
                            <span class="badge bg-label-info p-2"><i class="bx bx-wallet text-info"></i></span>
                        </div>
                        <div class="d-flex flex-column">
                            <small>Worst Day</small>
                            <small class="mb-0">@m_worstDay</small>
                            <small class="mb-0">@m_worstSales</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}else{

}