@using Biskilog_Accounting.Client.Pages.Dashboard.Elements
@using Biskilog_Accounting.Shared.Interfaces
@inject HttpClient m_http
@inject ITokenService m_tokenService
@page "/"

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-lg-8 mb-4 order-0">
            <WelcomeCard TradeSummary="@m_tradeSummary" Username="@m_username" />
        </div>
        <div class="col-lg-4 col-md-4 order-1">
            <div class="row">
                <div class="col-lg-6 col-md-12 col-6 mb-4">
                    <AnalyticsItemSmall Icon="../assets/img/icons/unicons/chart-success.png" Title="Transactions" Value="@m_tradeSummary.CurrentTradeSales" Percentage="@(((m_tradeSummary.CurrentTradeSales-m_tradeSummary.LastTradeSales)/m_tradeSummary.LastTradeSales)*100)" />
                </div>
                <div class="col-lg-6 col-md-12 col-6 mb-4">
                    <AnalyticsItemSmall Icon="../assets/img/icons/unicons/wallet-info.png" Title="Cancelled Sales" Value="@(m_cancelledWeeklySale)" Percentage="@(m_cancelledPercentage)" />
                </div>
            </div>
        </div>
        <!-- Total Revenue -->
        <div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4">
            <ChartElement Series="@m_weeklySaleItems" Title="Weekly Revenue" SubTitle="Sale Trend" IsLoading="@loadWeeklySales" />
        </div>
        <!--/ Total Revenue -->
        <div class="col-12 col-md-8 col-lg-4 order-3 order-md-2">
            <div class="row">
                <div class="col-6 mb-4">
                    <AnalyticsItemSmall Icon="../assets/img/icons/unicons/paypal.png" Title="Credit Sales" Value="2456" Percentage="-22" />
                </div>
                <div class="col-6 mb-4">
                    <AnalyticsItemSmall Icon="../assets/img/icons/unicons/cc-primary.png" Title="Debts To Collect" Value="@(m_totalDebt)" Percentage="-22" />
                </div>
                <!-- </div>
                <div class="row"> -->
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <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">
                                        <h5 class="text-nowrap mb-2">Profile Report</h5>
                                        <span class="badge bg-label-warning rounded-pill">Year 2021</span>
                                    </div>
                                    <div class="mt-sm-auto">
                                        <small class="text-success text-nowrap fw-semibold"><i class="bx bx-chevron-up"></i> 68.2%</small>
                                        <h3 class="mb-0">$84,686k</h3>
                                    </div>
                                </div>
                                <div id="profileReportChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Low stock items -->
        <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
            <LowStockItems LowStockProducts="@m_lowstock"/>
        </div>
        <!--/ Order Statistics -->
        <!-- Expense Overview -->
        <div class="col-md-6 col-lg-4 order-1 mb-4">
            <MostPurchasedElement MostPurchasedItems="@m_mostPurchased" IsLoading="@m_loadingMostPurchased" />
        </div>
        <!--/ Expense Overview -->
        <!-- Transactions -->
        <div class="col-md-6 col-lg-4 order-2 mb-4">
            <!-- Recent Transactions -->
            <TransactionCard Sales="@m_recentTransaction" />
            <!--/ Recent Transactions -->
        </div>
        <!--/ Transactions -->
    </div>
</div>