@page "/seller/customers"
@using Website.Client.Pages.Seller.CustomersPage.Components
@using Website.Components.Alerts
@using Website.Components.DataTable

<Title Value="@($"Customers Seller - Unturned Store")"></Title>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Seller</li>
        <li class="breadcrumb-item active" aria-current="page">Customers</li>
    </ol>
</nav>

@if (Customers != null)
{
    <div>
        <AlertBox ID="customers-main" Group="productspage" />
    </div>
    
    <div>
        <DataTable TItem="MProductCustomer" Data="OrderedCustomers">
            <DataTableTitle TItem="MProductCustomer" ValueFunc="@(x => $"Customers ({x.Items.Count()})")">
                <div class="d-flex align-items-center">
                    <div class="fs-5">
                        Customers (@context.Items.Count())
                    </div>
                    <div class="ms-2">
                        <button class="btn btn-sm btn-primary" @onclick="ShowAddModalAsync">
                            Add Customer
                        </button>
                    </div>
                </div>        
            </DataTableTitle>
            <DataTableColumn TItem="MProductCustomer" Name="ID" Field="x => x.Id" IsSearchable="true" SearchType="ESearchType.Exact" Context="customer">
                <div class="d-flex align-items-center">
                    <div>
                        @customer.Id
                    </div>
                    @if (customer.Product.IsLoaderEnabled && customer.IsBlocked)
                    {
                        <div class="ms-auto">
                            <Tooltip Text="License Suspended" OnHover="true">
                                <div class="alert alert-danger p-1 px-2 mb-0">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                            </Tooltip>                            
                        </div>
                    }
                </div>
            </DataTableColumn>
            <DataTableColumn TItem="MProductCustomer" Name="User" Field="x => x.User.Name" IsSearchable="true" SearchType="ESearchType.Contains" Context="customer">
                <div class="d-flex align-items-center">
                    <div>
                        <img class="rounded-circle" src="@customer.User.AvatarUrl()" width="30" height="30" />
                    </div>
                    <div class="ms-2">
                        <a href="/users/@customer.User.Id" class="text-decoration-none">
                            @customer.User.Name
                        </a>
                    </div>
                </div>
            </DataTableColumn>
            <DataTableColumn TItem="MProductCustomer" Name="Product" Field="x => x.Product.Name" Context="customer" IsSearchable="true" SearchType="ESearchType.Contains">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="api/images/@customer.Product.ImageId" width="30" height="30" />
                    </div>
                    <div class="ms-2">
                        <a href="/seller/products/@customer.ProductId" class="text-decoration-none">
                            @customer.Product.Name
                        </a>
                    </div>
                </div>
            </DataTableColumn>
            <DataTableColumn TItem="MProductCustomer" Name="" Context="customer" Field="x => string.Empty" IsSearchable="false">
                <div class="d-flex">
                    @if (customer.Product.IsLoaderEnabled)
                    {
                        <div class="ms-2">
                            <button class="btn btn-outline-primary btn-sm" @onclick="() => ShowDetailsModalAsync(customer)">
                                <i class="fas fa-info-circle"></i>
                            </button>
                        </div>
                    }                    
                    <div class="ms-2">
                        <button class="btn btn-outline-danger btn-sm" @onclick="() => ShowDeleteCustomerAsync(customer)">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </div>
                </div>
            </DataTableColumn>
        </DataTable>
    </div>
    
    <ConfirmModal @ref="DeleteConfirmModal" Title="Delete customer?" TItem="MProductCustomer" ModalId="DeleteReviewConfirm" BtnClass="btn-outline-danger" BtnText="Delete" OnConfirm="DeleteCustomerAsync">
        Are you sure you want to delete customer <span class="fw-bold">@DeleteConfirmModal.Item.Id?</span> This means they will lose access to the product.
    </ConfirmModal>
    <AddCustomerModal Customers="Customers" @ref="AddModal" OnCustomerAdded="AddCustomer" />
    <DetailsCustomerModal Customers="Customers" @ref="DetailsModal" OnStateChanged="() => StateHasChanged()" />
} else 
{
    <Progressbar />
}


