<div [@routerTransition]>
 
    <div id="HostDashboard">
        <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
            <div class="kt-subheader kt-grid__item">
                <div [class]="containerClass">
                    <div class="kt-subheader__main">
                        <h3 class="kt-subheader__title">
                            <span>{{"Dashboard" | localize}}</span>
                        </h3>
                        <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                        <span class="kt-subheader__desc">
                            {{"HostDashboardHeaderInfo" | localize}}
                        </span>
                    </div>
                    <div class="kt-subheader__toolbar">
                        <div class="kt-subheader__wrapper">
                            <button name="RefreshButton" class="btn btn-primary btn-brand btn-pill" (click)="getDashboardStatisticsData()">
                                <i class="la la-refresh"></i>
                                <span class="d-none d-sm-inline-block">
                                    {{"Refresh" | localize}}
                                </span>
                            </button>
                            <a href="javascript:;" #DashboardDateRangePicker
                                class="btn btn-primary dashboard-report-range" (click)="dateRangePicker.toggle()">
                                <i class="la la-calendar" [attr.aria-label]="l('Expand')"></i>
                                <span class="d-none d-sm-inline-block">
                                    {{selectedDateRange[0] | momentFormat: 'LL'}} -
                                    {{selectedDateRange[1] | momentFormat: 'LL'}}
                                </span>
                            </a>
                            <input type="text" class="btn btn-primary date-range-filter"
                                #dateRangePicker="bsDaterangepicker" readonly="readonly" placement="left"
                                style="visibility: hidden;" bsDaterangepicker dateRangePickerMomentModifier
                                [(date)]="selectedDateRange" />
                        </div>
                    </div>
                </div>
            </div>
            <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
                <div class="kt-portlet kt-portlet--height-fluid">
                    <div class="kt-portlet__body  kt-portlet__body--fit">
                        <div class="row row-no-padding row-col-separator-xl">
                            <div class="col-md-12 col-lg-6 col-xl-3">
                                <div class="kt-widget24 new-subscription-statistics">
                                    <div class="kt-widget24__details">
                                        <div class="kt-widget24__info">
                                            <h4 class="kt-widget24__title">
                                                {{"NewSubscriptionAmount" | localize}}
                                            </h4>
                                            <span class="kt-widget24__desc">
                                                {{("Subscriptions")}}
                                            </span>
                                        </div>
                                        <span class="kt-widget24__stats kt-font-brand">
                                            <span *ngIf="!hostDashboardData">...</span>
                                            <span *ngIf="hostDashboardData" counto [step]="30"
                                                [countTo]="hostDashboardData.newSubscriptionAmount" [countFrom]="0"
                                                [duration]="5"
                                                (countoChange)="countoNewSubscriptionAmount = $event">{{countoNewSubscriptionAmount | currency:'USD':'symbol':'1.0-0'}}</span>
                                        </span>
                                    </div>
                                    <div class="progress progress--sm">
                                        <div class="progress-bar kt-bg-brand" role="progressbar" style="width: 100%;"
                                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div class="kt-widget24__action">
                                        <span class="kt-widget24__change">
                                            <div class="status-title">
                                                {{selectedDateRange[0] | momentFormat: 'L'}} -
                                                {{selectedDateRange[1] | momentFormat: 'L'}}
                                            </div>
                                        </span>
                                        <span class="kt-widget24__number">
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6 col-xl-3">
                                <div class="kt-widget24 new-tenants-statistics">
                                    <div class="kt-widget24__details">
                                        <div class="kt-widget24__info">
                                            <h4 class="kt-widget24__title">
                                                {{"NewTenants" | localize}}
                                            </h4>
                                            <span class="kt-widget24__desc">
                                                {{"Tenants" | localize}}
                                            </span>
                                        </div>
                                        <span class="kt-widget24__stats kt-font-info new-tenants-count">
                                            <span *ngIf="!hostDashboardData">...</span>
                                            <span *ngIf="hostDashboardData" counto [step]="10"
                                                [countTo]="hostDashboardData.newTenantsCount" [countFrom]="0"
                                                [duration]="5"
                                                (countoChange)="countoNewTenantsCount = $event">{{countoNewTenantsCount | number:'1.0-0' }}</span>
                                        </span>
                                    </div>
                                    <div class="progress progress--sm">
                                        <div class="progress-bar kt-bg-info" role="progressbar" style="width: 100%;"
                                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div class="kt-widget24__action">
                                        <span class="kt-widget24__change">
                                            <div class="status-title">
                                                {{selectedDateRange[0] | momentFormat: 'L'}} -
                                                {{selectedDateRange[1] | momentFormat: 'L'}}
                                            </div>
                                        </span>
                                        <span class="kt-widget24__number">
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6 col-xl-3">
                                <div class="kt-widget24 dashboard-statistics1">
                                    <div class="kt-widget24__details">
                                        <div class="kt-widget24__info">
                                            <h4 class="kt-widget24__title">
                                                {{"DashboardSampleStatistics" | localize}} 1
                                            </h4>
                                            <span class="kt-widget24__desc">
                                                {{"DashboardSampleStatistics" | localize}}
                                            </span>
                                        </div>
                                        <span class="kt-widget24__stats kt-font-danger dashboard-placeholder1">
                                            <span *ngIf="!hostDashboardData">...</span>
                                            <span *ngIf="hostDashboardData" counto [step]="100"
                                                [countTo]="hostDashboardData.dashboardPlaceholder1" [countFrom]="0"
                                                [duration]="5"
                                                (countoChange)="countoDashboardPlaceholder1 = $event">{{countoDashboardPlaceholder1 | number:'1.0-0' }}</span>
                                        </span>
                                    </div>
                                    <div class="progress progress--sm">
                                        <div class="progress-bar kt-bg-danger" role="progressbar" style="width: 45%;"
                                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div class="kt-widget24__action">
                                        <span class="kt-widget24__change">
                                            {{"DashboardSampleStatisticsHelpText" | localize}}
                                        </span>
                                        <span class="kt-widget24__number">
                                            <span class="counterup">45</span>%
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6 col-xl-3">
                                <div class="kt-widget24 dashboard-statistics2">
                                    <div class="kt-widget24__details">
                                        <div class="kt-widget24__info">
                                            <h4 class="kt-widget24__title">
                                                {{"DashboardSampleStatistics" | localize}} 2
                                            </h4>
                                            <span class="kt-widget24__desc">
                                                {{"DashboardSampleStatistics" | localize}}
                                            </span>
                                        </div>
                                        <span class="kt-widget24__stats kt-font-success dashboard-placeholder2">
                                            <span *ngIf="!hostDashboardData">...</span>
                                            <span *ngIf="hostDashboardData" counto [step]="100"
                                                [countTo]="hostDashboardData.dashboardPlaceholder2" [countFrom]="0"
                                                [duration]="5"
                                                (countoChange)="countoDashboardPlaceholder2 = $event">{{countoDashboardPlaceholder2 | number:'1.0-0' }}</span>
                                        </span>
                                    </div>
                                    <div class="progress progress--sm">
                                        <div class="progress-bar kt-bg-success" role="progressbar" style="width: 65%;"
                                            aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                    <div class="kt-widget24__action">
                                        <span class="kt-widget24__change">
                                            {{"DashboardSampleStatisticsHelpText" | localize}}
                                        </span>
                                        <span class="kt-widget24__number">
                                            <span class="counterup">65</span>%
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <div class="kt-portlet kt-portlet--height-fluid income-statistics">
                            <div class="kt-portlet__head">
                                <div class="kt-portlet__head-label">
                                    <h3 class="kt-portlet__head-title">
                                        <i class="la la-line-chart kt-font-info"></i>
                                        <span
                                            class="caption-subject font-blue bold uppercase">{{"IncomeStatistics" | localize}}</span>
                                        <small>
                                            <span class="caption-helper">
                                                {{selectedDateRange[0] | momentFormat: 'L'}} -
                                                {{selectedDateRange[1] | momentFormat: 'L'}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                                <div class="kt-portlet__head-toolbar">
                                    <div class="btn-group btn-group-devided" data-toggle="buttons">
                                        <label class="btn m-btn--pill btn-secondary"
                                            [ngClass]="{'active': selectedIncomeStatisticsDateInterval ==  appIncomeStatisticsDateInterval.Daily}"
                                            (click)="incomeStatisticsDateIntervalChange(appIncomeStatisticsDateInterval.Daily)">
                                            <input type="radio" name="IncomeStatisticsDatePeriod" class="toggle"
                                                [value]="appIncomeStatisticsDateInterval.Daily">
                                            {{"Daily" | localize}}
                                        </label>
                                        <label class="btn m-btn--pill btn-secondary"
                                            [ngClass]="{'active': selectedIncomeStatisticsDateInterval ==  appIncomeStatisticsDateInterval.Weekly}"
                                            (click)="incomeStatisticsDateIntervalChange(appIncomeStatisticsDateInterval.Weekly)">
                                            <input type="radio" name="IncomeStatisticsDatePeriod" class="toggle"
                                                [value]="appIncomeStatisticsDateInterval.Weekly">
                                            {{"Weekly" | localize}}
                                        </label>
                                        <label class="btn m-btn--pill btn-secondary"
                                            [ngClass]="{'active': selectedIncomeStatisticsDateInterval ==  appIncomeStatisticsDateInterval.Monthly}"
                                            (click)="incomeStatisticsDateIntervalChange(appIncomeStatisticsDateInterval.Monthly)">
                                            <input type="radio" name="IncomeStatisticsDatePeriod" class="toggle"
                                                [value]="appIncomeStatisticsDateInterval.Monthly">
                                            {{"Monthly" | localize}}
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="kt-portlet__body">
                                <ngx-charts-area-chart *ngIf="incomeStatisticsHasData"
                                    [busyIf]="loadingIncomeStatistics" [results]="incomeStatisticsData"
                                    [showXAxisLabel]="true" showYAxisLabel="true" [xAxis]="true" [yAxis]="true"
                                    [showGridLines]="true">
                                    <ng-template #tooltipTemplate let-model="model">
                                        <span>{{model.name}}</span>
                                        <br />
                                        <span>{{'IncomeWithAmount' | localize:model.value + ' ' + currency}}</span>
                                    </ng-template>
                                </ngx-charts-area-chart>
                                <div class="note note-info text-center chart" [hidden]="incomeStatisticsHasData">
                                    <small class="text-muted">{{"NoData" | localize}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <div class="kt-portlet kt-portlet--height-fluid edition-statistics">
                            <div class="kt-portlet__head">
                                <div class="kt-portlet__head-label">
                                    <h3 class="kt-portlet__head-title">
                                        <i class="la la-pie-chart kt-font-success"></i>
                                        <span
                                            class="caption-subject font-green-seagreen">{{"EditionStatistics" | localize}}</span>
                                        <small>
                                            <span class="caption-helper">
                                                {{selectedDateRange[0] | momentFormat: 'L'}} -
                                                {{selectedDateRange[1] | momentFormat: 'L'}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="kt-portlet__body">
                                <ngx-charts-pie-chart *ngIf="editionStatisticsHasData" [results]="editionStatisticsData"
                                    [legend]="true" [doughnut]="true" [arcWidth]="0.75">
                                </ngx-charts-pie-chart>
                                <div class="note note-info text-center chart" [hidden]="editionStatisticsHasData">
                                    <small class="text-muted">{{"NoData" | localize}}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 col-xs-12 col-sm-12">
                        <div class="kt-portlet kt-portlet--height-fluid expiring-tenants">
                            <div class="kt-portlet__head">
                                <div class="kt-portlet__head-label">
                                    <h3 class="kt-portlet__head-title">
                                        <i class="far fa-clock kt-font-danger"></i>
                                        <span
                                            class="caption-subject kt-font-danger font-bold uppercase">{{"SubscriptionExpiringTenants" | localize}}</span><br />
                                        <small>
                                            <span class="caption-helper" *ngIf="hostDashboardData">
                                                {{"ExpiringTenantsHelpText" | localize:hostDashboardData.subscriptionEndAlertDayCount : hostDashboardData.maxExpiringTenantsShownCount}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="kt-portlet__body">
                                <div class="scroller chart kt-scroll" [perfectScrollbar]="{wheelPropagation: false}">
                                    <div class="primeng-datatable-container expiring-tenants-table"
                                        >
                                        <p-table #ExpiringTenantsTable [value]="expiringTenantsData"
                                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                            [lazy]="false" [responsive]="primengTableHelper.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th>{{'TenantName' | localize}}</th>
                                                    <th>{{'RemainingDay' | localize}}</th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record="$implicit">
                                                <tr>
                                                    <td>
                                                        <span class="ui-column-title">{{'TenantName' | localize}}</span>
                                                        {{record.tenantName}}
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="ui-column-title">{{'RemainingDay' | localize}}</span>
                                                        {{record.remainingDayCount}}
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-no-data" *ngIf="expiringTenantsData.length == 0">
                                            {{'NoData' | localize}}
                                        </div>
                                    </div>
                                </div>
                                <div class="scroller-footer">
                                    <div class="btn-arrow-link pull-right">
                                        <a href="javascript:;" class="see-all-expiring-tenants"
                                            (click)="gotoAllExpiringTenants()">{{"SeeAllRecords" | localize}}</a>
                                        <i class="icon-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-xs-12 col-sm-12">
                        <div class="kt-portlet kt-portlet--height-fluid recent-tenants">
                            <div class="kt-portlet__head">
                                <div class="kt-portlet__head-label">
                                    <h3 class="kt-portlet__head-title">
                                        <i class="fas fa-user-plus kt-font-primary"></i>
                                        <span
                                            class="caption-subject kt-font-primary">{{"RecentTenants" | localize}}</span><br />
                                        <small>
                                            <span class="caption-helper" *ngIf="hostDashboardData">
                                                {{"RecentTenantsHelpText" | localize:hostDashboardData.recentTenantsDayCount : hostDashboardData.maxRecentTenantsShownCount}}
                                            </span>
                                        </small>
                                    </h3>
                                </div>
                            </div>
                            <div class="kt-portlet__body">
                                <div class="scroller chart kt-scroll" [perfectScrollbar]="{wheelPropagation: false}">
                                    <div class="primeng-datatable-container recent-tenants-table"
                                        >
                                        <p-table #RecentTenantsTable [value]="recentTenantsData"
                                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                            [lazy]="false" [responsive]="primengTableHelper.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th>{{'TenantName' | localize}}</th>
                                                    <th>{{'CreationTime' | localize}}</th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record="$implicit">
                                                <tr>
                                                    <td>
                                                        <span class="ui-column-title">{{'TenantName' | localize}}</span>
                                                        {{record.name}}
                                                    </td>
                                                    <td>
                                                        <span
                                                            class="ui-column-title">{{'CreationTime' | localize}}</span>
                                                        {{ record.creationTime | momentFormat:'L LT'}}
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-no-data" *ngIf="recentTenantsData.length == 0">
                                            {{'NoData' | localize}}
                                        </div>
                                    </div>
                                </div>
                                <div class="scroller-footer">
                                    <div class="btn-arrow-link pull-right">
                                        <a href="javascript:;" class="see-all-recent-tenants"
                                            (click)="gotoAllRecentTenants()">{{"SeeAllRecords" | localize}}</a>
                                        <i class="icon-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>