@page "/transactions/sales"
@using Biskilog_Accounting.Shared.CustomModels;
@using Biskilog_Accounting.Shared.Interfaces;
@using Biskilog_Accounting.Client.Pages.Transactions.Elements;
@using BlazorDateRangePicker
@using Faso.Blazor.SpinKit
@inject ICalculator m_calculator
@inject ISalesInterface m_salesRepo
@inject ContextMenuService ContextMenuService
@inject DialogService m_dialogService
@inject ISearchService m_searchControl
@implements IDisposable
@inject IMainInterface m_mainInterface

<h3>Sales</h3>
<div class="row" style="display:grid;justify-content:end;margin:5px;">
    <DateRangePicker @bind-StartDate="m_startDate" @bind-EndDate="m_endDate" Ranges="m_ranges" ShowCustomRangeLabel="true" OnRangeSelect="@LoadTransactions">
        <PickerTemplate>
            <div id="@context.Id" @onclick="context.Toggle" style="background: #fff; cursor: pointer; padding: 5px 10px; width: 250px; border: 1px solid #ccc;">
                <i class="tf-icons bx bx-calendar"></i>&nbsp;
                <span>@context.FormattedRange @(string.IsNullOrEmpty(context.FormattedRange) ? "Choose dates..." : "")</span>
                <i class="oi oi-chevron-bottom float-right"></i>
            </div>
        </PickerTemplate>
        <ButtonsTemplate>
            <button class="cancelBtn btn btn-sm btn-default"
                    @onclick="@context.ClickCancel" type="button">
                Cancel
            </button>
            <button class="cancelBtn btn btn-sm btn-default"
                    @onclick="@(e => ResetClick(e, context))" type="button">
                Reset
            </button>
            <button class="applyBtn btn btn-sm btn-primary" @onclick="@context.ClickApply"
                    disabled="@(context.TStartDate == null || context.TEndDate == null)"
                    type="button">
                Apply
            </button>
        </ButtonsTemplate>
    </DateRangePicker>
</div>
@if (!m_lookUpMode)
{
    <SaleSummary StartRange="m_startDate.Value.LocalDateTime" EndRange="m_endDate.Value.LocalDateTime" 
    TotalRevenue="m_totalRevenue" TotalNbrTransactions="m_totalNbrRevenue" TotalCancelledRevenue="m_totalCancelledRevenue" 
    TotalNbrCancelledRevenue="m_totalNbrCancelled" RecentTrans="m_recent"/>
}
<RadzenDataGrid AllowPaging="true" PageSize="50" AllowSorting="true" Data="@m_salesItems" TItem="SaleItem"
                GridLines="DataGridGridLines.Horizontal" RowClick="@(args => m_mainInterface.ShowReceipt(args.Data.Transno))">
    <Columns>
        <RadzenDataGridColumn TItem="SaleItem" Property="Transno" Title="Transaction ID" />
        <RadzenDataGridColumn TItem="SaleItem" Property="Date" Title="Timestamp" />
        <RadzenDataGridColumn TItem="SaleItem" Property="Cashier" Title="Cashier" />
        <RadzenDataGridColumn TItem="SaleItem" Property="Customer" Title="Customer" />
        <RadzenDataGridColumn TItem="SaleItem" Property="Status" Title="Status" Width="10%" />
        <RadzenDataGridColumn TItem="SaleItem" Property="Total" Title="Total">
            <Template Context="detail">
                @(
                    m_calculator.FormatMoneyWithCurrency((double)detail.Total)
                    )
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="SaleItem" Property="BranchId" Title="Branch" Resizable Reorderable />
    </Columns>
</RadzenDataGrid>

@if (m_fetching)
{
    <div id="loading-div-background">
        <div id="loading-div" class="ui-corner-all">
            <div class="spinnermain-container">
                <SpinKitChasingDots />
            </div>
            <h6 style="color:#fff;font-weight:normal;">Please wait fetching transaction details....</h6>
        </div>
    </div>
}