@page "/transactions/receipt/{receiptID}"
@using Biskilog_Accounting.Shared.Interfaces;
@using Biskilog_Accounting.Shared.POSModels;
@inject ICalculator m_calculator
@inject IProduct m_productRepo
@inject ISalesInterface m_saleInterface
@inject ICompanyInfo m_companyInfo

<div class="container" style="padding-top:10px;">
    <div class="row">
        <div class="row" style="display:grid;justify-content:center;">
            <small>@(m_companyName)</small>
        </div>
        <div class="row" style="display:grid;justify-content:center;">
            <small>@m_branch?.BranchName</small>
        </div>
        <div class="row" style="display:grid;justify-content:center;">
            <small>@m_branch?.City</small>
        </div>
        <div class="row" style="display:grid;justify-content:center;">
            <small>@m_branch?.BranchTelephone</small>
        </div>
        <hr />
        <div class="row" style="display:block;justify-content:space-between;">
            <small> <em>Date</em> </small>
            <small> @m_date </small>
        </div>
        <div class="row" style="display:block;justify-content:space-between;">
            <small> <em>Cashier</em> </small>
            <small> @m_cashier </small>
        </div>
        <div class="row" style="display:block;justify-content:space-between;">
            <small> <em>Receipt Number</em> </small>
            <small> <em>@ReceiptId</em> </small>
        </div>
        <hr />
        <RadzenDataGrid TItem="Tblcart" Data="ReceiptDetail" GridLines="DataGridGridLines.Horizontal" Style="padding:0px;">
            <Columns>
                <RadzenDataGridColumn TItem="Tblcart" Property="Transno" Title="Item" Width="60%">
                    <Template Context="detail">
                        <small>@detail.Id <br />x@(detail.Quantity) @(detail.Unit)</small>
                    </Template>
                </RadzenDataGridColumn>
                <RadzenDataGridColumn TItem="Tblcart" Property="Total" Title="Total" Width="40%">
                    <Template Context="detail">
                        <small>@(m_calculator.FormatMoneyWithCurrency((double)detail.Total))</small>
                    </Template>
                </RadzenDataGridColumn>
            </Columns>
        </RadzenDataGrid>
        <div class="row" style="display:grid;justify-content:end;">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal">
                <small> <em>Sub Total</em> </small>
                <small> <em>@m_subtotal</em> </small>
            </RadzenStack>
        </div>
        <div class="row" style="display:grid;justify-content:end;">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal">
                <small> <em>Discount</em> </small>
                <small> <em>@m_discount</em> </small>
            </RadzenStack>
        </div>
        <div class="row" style="display:grid;justify-content:end;">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal">
                <small> <em>VAT</em> </small>
                <small> <em>@m_vat</em> </small>
            </RadzenStack>
        </div>
        <hr />
        <div class="row" style="display:grid;justify-content:end;">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal">
                <small> <em>Bill Total</em> </small>
                <small> <em>@m_total</em> </small>
            </RadzenStack>
        </div>
        <div class="row" style="display:grid;justify-content:end;">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal">
                <small> <em>Balance</em> </small>
                <small> <em>@m_balance</em> </small>
            </RadzenStack>
        </div>
        <div class="row" style="display:grid;justify-content:end;">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal">
                <small> <em>Tendered</em> </small>
                <small> <em>@m_tendered</em> </small>
            </RadzenStack>
        </div>
        <hr />
        <div class="row" style="display:grid;justify-content:center;">
            <small style="margin-bottom: 5px;margin-left: 20px"><em>COME BACK SOON !!! CHEERS</em> </small>
            <div id="barcode">@barcode</div>
            <div id="barcode_text">@barcode_text</div>
        </div>
    </div>
</div>