<div [@routerTransition] id="TenantDashboard">
    <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">
                        {{"DashboardHeaderInfo" | localize}}
                    </span>
                </div>
            </div>
        </div>
                    
        <div *ngIf="gettingStarted" [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet kt-portlet--height-fluid" style="background-color: #F2F3F8">
                <!-- background-image: url('/assets/metronic/common/images/bg/bg-sprinthub.jpg'); -->
                <div class="kt-portlet__body kt-portlet__body--fit">
                    <div class="row align-items-center">
                        <div class="col-md-12 text-center" style="margin-top: 8%;">
                            
                        <span class="flaticon-rocket" style="font-size: 150px; color: #000000;"></span>
                        </div>
                        <div class="col-md-12 text-center" style="color: #000000 !important;">
                               <h3 style="font-weight: 550 !important; color: #000000 !important;">Let's Get Started</h3>  
                        </div>
                        <div class="col-md-12 text-center" style="margin-top: 2%;">
                               <h5 style="font-weight: 100 !important; color: #000000 !important;">Setup required configurations and have a blast!</h5>
                               
                        </div>
                        
                        <div id="getting_started_toggle" class="kt_quick_panel col-md-12 text-center" style="margin-top: 2%; margin-bottom: 12%;">
                            <button class="btn btn-primary btn-elevate btn-pill" style="font-weight: 550 !important; width: 250px;">GET STARTED</button>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        
        <div *ngIf="!gettingStarted" [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">
                                <div class="kt-widget24__details">
                                    <div class="kt-widget24__info">
                                        <h4 class="kt-widget24__title">
                                            Total Profit
                                        </h4>
                                        <span class="kt-widget24__desc">
                                            All Customs Value
                                        </span>
                                    </div>
                                    <span class="kt-widget24__stats kt--font-brand">
                                        $<span counto [step]="30" [duration]="1" [countFrom]="0"
                                            [countTo]="dashboardHeaderStats.totalProfit"
                                            (countoChange)="dashboardHeaderStats.totalProfitCounter = $event">
                                            {{dashboardHeaderStats.totalProfitCounter.toFixed(0)}}
                                        </span>
                                    </span>
                                </div>
                                <div class="progress progress--sm">
                                    <div class="progress-bar kt-bg-brand" role="progressbar" style="width: 76%;"
                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="kt-widget24__action">
                                    <span class="kt-widget24__change">
                                        Change
                                    </span>
                                    <span class="kt-widget24__number">
                                        <span class="counterup">{{dashboardHeaderStats.totalProfitChange}}</span>%
                                    </span>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="kt-widget24">
                                <div class="kt-widget24__details">
                                    <div class="kt-widget24__info">
                                        <h4 class="kt-widget24__title">
                                            New Feedbacks
                                        </h4>
                                        <span class="kt-widget24__desc">
                                            Customer Review
                                        </span>
                                    </div>
                                    <span class="kt-widget24__stats kt--font-info" counto [step]="30" [duration]="1"
                                        [countFrom]="0" [countTo]="dashboardHeaderStats.newFeedbacks"
                                        (countoChange)="dashboardHeaderStats.newFeedbacksCounter = $event">
                                        {{dashboardHeaderStats.newFeedbacksCounter.toFixed(0)}}
                                    </span>
                                </div>
                                <div class="progress progress--sm">
                                    <div class="progress-bar kt-bg-info" role="progressbar" style="width: 85%;"
                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <div class="kt-widget24__action">
                                    <span class="kt-widget24__change">
                                        Change
                                    </span>
                                    <span class="kt-widget24__number">
                                        <span class="counterup">{{dashboardHeaderStats.newFeedbacksChange}}</span>%
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="kt-widget24">
                                <div class="kt-widget24__details">
                                    <div class="kt-widget24__info">
                                        <h4 class="kt-widget24__title">
                                            New Orders
                                        </h4>
                                        <span class="kt-widget24__desc">
                                            Fresh Order Amount
                                        </span>
                                    </div>
                                    <span class="kt-widget24__stats kt--font-info" counto [step]="30" [duration]="1"
                                        [countFrom]="0" [countTo]="dashboardHeaderStats.newOrders"
                                        (countoChange)="dashboardHeaderStats.newOrdersCounter = $event">
                                        {{dashboardHeaderStats.newOrdersCounter.toFixed(0)}}
                                    </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">
                                        Change
                                    </span>
                                    <span class="kt-widget24__number">
                                        <span class="counterup">{{dashboardHeaderStats.newOrdersChange}}</span>%
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6 col-xl-3">
                            <div class="kt-widget24">
                                <div class="kt-widget24__details">
                                    <div class="kt-widget24__info">
                                        <h4 class="kt-widget24__title">
                                            New Users
                                        </h4>
                                        <span class="kt-widget24__desc">
                                            Joined New User
                                        </span>
                                    </div>
                                    <span class="kt-widget24__stats kt--font-info" counto [step]="30" [duration]="1"
                                        [countFrom]="0" [countTo]="dashboardHeaderStats.newUsers"
                                        (countoChange)="dashboardHeaderStats.newUsersCounter = $event">
                                        {{dashboardHeaderStats.newUsersCounter.toFixed(0)}}
                                    </span>
                                </div>
                                <div class="progress progress--sm">
                                    <div class="progress-bar kt-bg-success" role="progressbar" style="width: 57%;"
                                        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span class="kt-widget24__change">
                                    Change
                                </span>
                                <span class="kt-widget24__number">
                                    <span class="counterup">{{dashboardHeaderStats.newUsersChange}}</span>%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <div class="kt-portlet kt-portlet--height-fluid sales-summary-chart">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">
                                    Sales Summary
                                </h3>
                            </div>
                            <div class="kt-portlet__head-toolbar">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-secondary active"
                                        [ngClass]="{'active': salesSummaryChart.selectedDatePeriod ==  appSalesSummaryDateInterval.Daily}"
                                        (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Daily)">
                                        <input type="radio" name="SalesSummaryDateInterval"
                                            [value]="appSalesSummaryDateInterval.Daily">
                                        {{"Daily" | localize}}
                                    </label>
                                    <label class="btn btn-secondary"
                                        [ngClass]="{'active': salesSummaryChart.selectedDatePeriod ==  appSalesSummaryDateInterval.Weekly}"
                                        (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Weekly)">
                                        <input type="radio" name="SalesSummaryDateInterval"
                                            [value]="appSalesSummaryDateInterval.Weekly">
                                        {{"Weekly" | localize}}
                                    </label>
                                    <label class="btn btn-secondary"
                                        [ngClass]="{'active': salesSummaryChart.selectedDatePeriod ==  appSalesSummaryDateInterval.Monthly}"
                                        (click)="salesSummaryChart.reload(appSalesSummaryDateInterval.Monthly)">
                                        <input type="radio" name="SalesSummaryDateInterval"
                                            [value]="appSalesSummaryDateInterval.Monthly">
                                        {{"Monthly" | localize}}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="kt-portlet__body" [busyIf]="salesSummaryChart.loading">
                            <div class="row list-separated text-center">
                                <div class="col-md-3 col-sm-3 col-xs-6">
                                    <h6>
                                        Total Sales
                                    </h6>
                                    <div>
                                        <span counto class="kt-font-danger kt-font-bolder" [step]="30" [duration]="1"
                                            [countFrom]="0" [countTo]="salesSummaryChart.totalSales"
                                            (countoChange)="salesSummaryChart.totalSalesCounter = $event">
                                            {{salesSummaryChart.totalSalesCounter.toFixed(0)}}
                                        </span>
                                        <span class="kt-font-danger kt-font-bolder">$</span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-6">
                                    <h6>
                                        Revenue
                                    </h6>
                                    <div class="uppercase font-hg font-green-haze">
                                        <span counto class="kt-font-warning kt-font-bolder" [step]="30" [duration]="1"
                                            [countFrom]="0" [countTo]="salesSummaryChart.revenue"
                                            (countoChange)="salesSummaryChart.revenuesCounter = $event">
                                            {{salesSummaryChart.revenuesCounter.toFixed(0)}}
                                        </span>
                                        <span class="kt-font-warning kt-font-bolder">$</span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-6">
                                    <h6>
                                        Expenses
                                    </h6>
                                    <div class="uppercase font-hg font-purple">
                                        <span counto class="kt--font-info kt-font-bolder" [step]="30" [duration]="1"
                                            [countFrom]="0" [countTo]="salesSummaryChart.expenses"
                                            (countoChange)="salesSummaryChart.expensesCounter = $event">
                                            {{salesSummaryChart.expensesCounter.toFixed(0)}}
                                        </span>
                                        <span class="kt-font-success kt-font-bolder">$</span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-xs-6">
                                    <h6>
                                        Growth
                                    </h6>
                                    <div class="uppercase font-hg font-blue-sharp">
                                        <span counto class="kt--font-info kt-font-bolder" [step]="30" [duration]="1"
                                            [countFrom]="0" [countTo]="salesSummaryChart.growth"
                                            (countoChange)="salesSummaryChart.growthCounter = $event">
                                            {{salesSummaryChart.growthCounter.toFixed(0)}}
                                        </span>
                                        <span class="kt--font-info kt-font-bolder">$</span>
                                    </div>
                                </div>
                            </div>
                            <div style="height: 260px; min-height: 260px;">
                                <ngx-charts-area-chart-stacked [results]="salesSummaryChart.data"
                                    [showXAxisLabel]="true" showYAxisLabel="true" [xAxis]="true" [yAxis]="true"
                                    [showGridLines]="false" [tooltipDisabled]="false">
                                </ngx-charts-area-chart-stacked>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="kt-portlet m-portlet--full-height">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">

                                <h3 class="kt-portlet__head-title">
                                    Regional Stats
                                </h3>

                            </div>
                        </div>
                        <div class="kt-portlet__body">
                            <div id="region_statistics_content">
                                <div class="table-responsive">
                                    <!--begin::Table-->
                                    <table class="table">
                                        <!--begin::Thead-->
                                        <thead>
                                            <tr>
                                                <td class="m-widget11__label">#</td>
                                                <td class="m-widget11__app">Country</td>
                                                <td class="m-widget11__sales">Sales</td>
                                                <td class="m-widget11__change">Change</td>
                                                <td class="m-widget11__price">Avg Price</td>
                                                <td class="m-widget11__total">Total</td>
                                            </tr>
                                        </thead>
                                        <!--end::Thead-->
                                        <!--begin::Tbody-->
                                        <tbody>
                                            <tr *ngFor="let stat of regionalStatsTable.stats; let index = index">
                                                <td>
                                                    <label class="kt-checkbox">
                                                        <input class="form-control" type="checkbox" />
                                                        <span></span>
                                                    </label>
                                                </td>
                                                <td>{{stat.countryName}}</td>
                                                <td>{{stat.sales | currency}}</td>
                                                <td>
                                                    <div class="m-widget11__chart" style="height:50px; width: 100px">
                                                        <ngx-charts-line-chart [results]="stat.changeData"
                                                            [showGridLines]="false" [animations]="false"
                                                            [tooltipDisabled]="true"
                                                            [customColors]="regionalStatsTable.customColors"
                                                            [curve]="regionalStatsTable.curve"></ngx-charts-line-chart>
                                                    </div>
                                                </td>
                                                <td>{{stat.averagePrice | currency}}</td>
                                                <td>{{stat.totalPrice | currency}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </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 ">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">
                                    General Stats
                                </h3>
                            </div>
                            <div class="kt-portlet__head-toolbar">
                                <a href="javascript:;" class="btn btn-primary btn-brand btn-pill" (click)="generalStatsPieChart.reload()">
                                    <i class="fa fa-redo"></i> Refresh
                                </a>
                            </div>
                        </div>
                        <div class="kt-portlet__body">
                            <div class="row">
                                <ngx-charts-pie-grid [results]="generalStatsPieChart.data">
                                </ngx-charts-pie-grid>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12">
                    <div class="kt-portlet kt-portlet--height-fluid ">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">
                                    Daily Sales
                                </h3>
                            </div>
                        </div>
                        <div class="kt-portlet__body">
                            <div class="row">
                                <div class="col-md-12">
                                    <ngx-charts-bar-vertical [results]="dailySalesLineChart.chartData"
                                        [scheme]="dailySalesLineChart.scheme">
                                        <ng-template #tooltipTemplate let-model="model">
                                            <span>Day {{model.name}}</span>
                                            <br />
                                            <span>{{model.value}}</span>
                                        </ng-template>
                                    </ngx-charts-bar-vertical>
                                </div>
                            </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">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">
                                <h3 class="kt-portlet__head-title">
                                    <span class="caption-subject font-blue bold uppercase"> Profit Share</span>
                                    <small>
                                        Profit Share between customers
                                    </small>
                                </h3>
                            </div>
                            <div class="kt-portlet__head-toolbar" dropdown>
                                <a href="javascript:void(0)" class="btn btn-primary btn-sm dropdown-toggle"
                                    data-toggle="dropdown" dropdownToggle>
                                    Actions
                                </a>
                                <div class="dropdown-menu dropdown-menu-fit dropdown-menu-right" *dropdownMenu>
                                    <ul class="kt-nav">
                                        <li class="kt-nav__item">
                                            <a href="javascript:void(0)" class="kt-nav__link">
                                                <i class="kt-nav__link-icon flaticon-share"></i>
                                                <span class="kt-nav__link-text">
                                                    Action 1
                                                </span>
                                            </a>
                                        </li>
                                        <li class="kt-nav__item">
                                            <a href="javascript:void(0)" class="kt-nav__link">
                                                <i class="kt-nav__link-icon flaticon-chat-1"></i>
                                                <span class="kt-nav__link-text">
                                                    Action 2
                                                </span>
                                            </a>
                                        </li>
                                        <li class="kt-nav__item">
                                            <a href="javascript:void(0)" class="kt-nav__link">
                                                <i class="kt-nav__link-icon flaticon-info"></i>
                                                <span class="kt-nav__link-text">
                                                    Action 3
                                                </span>
                                            </a>
                                        </li>
                                        <li class="kt-nav__item">
                                            <a href="javascript:void(0)" class="kt-nav__link">
                                                <i class="kt-nav__link-icon flaticon-lifebuoy"></i>
                                                <span class="kt-nav__link-text">
                                                    Action 4
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                        <div class="kt-portlet__body">
                            <div class="kt-widget14">
                                <div class="row kt-widget14__content">
                                    <div class="col-lg-6 col-md-12">
                                        <ngx-charts-pie-chart [results]="profitSharePieChart.chartData"
                                            [doughnut]="true" [legend]="false" [labels]="false"
                                            [scheme]="profitSharePieChart.scheme" [animations]="false"
                                            [tooltipDisabled]="true">
                                        </ngx-charts-pie-chart>
                                    </div>
                                    <div class="col-lg-6 col-md-12 kt-widget14__legends"
                                        *ngIf="profitSharePieChart.chartData.length">
                                        <div class="kt-widget14__legend">
                                            <span class="kt-widget14__bullet kt-bg-success"></span>
                                            <span class="kt-widget14__stats" ng-if="profitSharePieChart.chartData">
                                                {{profitSharePieChart.chartData[0].value}}
                                            </span>
                                        </div>
                                        <div class="kt-widget14__legend">
                                            <span class="kt-widget14__bullet kt-bg-warning"></span>
                                            <span class="kt-widget14__stats">
                                                22% Online Courses
                                            </span>
                                        </div>
                                        <div class="kt-widget14__legend">
                                            <span class="kt-widget14__bullet kt-bg-brand"></span>
                                            <span class="kt-widget14__stats">
                                                33% Custom Development
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xs-12 col-sm-12">
                    <div class="kt-portlet kt-portlet--height-fluid ">
                        <div class="kt-portlet__head">
                            <div class="kt-portlet__head-label">

                                <h3 class="kt-portlet__head-title">
                                    Member Activity
                                </h3>

                            </div>
                            <div class="kt-portlet__head-toolbar">
                                <button (click)="memberActivityTable.reload()" class="btn btn-primary btn-brand btn-pill"><i
                                        class="fa fa-sync"></i> Refresh</button>
                            </div>
                        </div>
                        <div class="kt-portlet__body">
                            <div class="table-scrollable table-scrollable-borderless">
                                <table class="table table-hover table-light">
                                    <thead>
                                        <tr class="uppercase">
                                            <th colspan="2">
                                                MEMBER
                                            </th>
                                            <th>
                                                Earnings
                                            </th>
                                            <th>
                                                CASES
                                            </th>
                                            <th>
                                                CLOSED
                                            </th>
                                            <th>
                                                RATE
                                            </th>
                                        </tr>
                                    </thead>
                                    <tr *ngFor="let m of memberActivityTable.memberActivities; let index = index">
                                        <td class="fit">
                                            <div class="kt-user-card-v2">
                                                <div class="kt-user-card-v2__pic">
                                                    <img alt="photo"
                                                        src="/assets/metronic/common/images/users/100_{{index + 1}}.jpg">
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a href="javascript:;" class="primary-link">{{m.name}}</a>
                                        </td>
                                        <td>
                                            {{m.earnings}}
                                        </td>
                                        <td>
                                            {{m.cases}}
                                        </td>
                                        <td>
                                            {{m.closed}}
                                        </td>
                                        <td>
                                            <span class="bold font-green-haze">{{m.rate}}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <flyOutLocationModalComponent #flyOutLocationModalComponent (iconChange)="flyOutComponent.iconChangesLocation()"></flyOutLocationModalComponent>
        <flyOutPackageTypeModalComponent #flyOutPackageTypeModalComponent (iconChange)="flyOutComponent.iconChangesPackageType()"></flyOutPackageTypeModalComponent>
        <flyOutFleetModalComponent #flyOutFleetModalComponent (iconChange)="flyOutComponent.iconChangesFleet()" ></flyOutFleetModalComponent>
        <flyOutDriverModalComponent #flyOutDriverModalComponent (iconChange)="flyOutComponent.iconChangesDriver()"></flyOutDriverModalComponent>
        <flyOutContactsModalComponent #flyOutContactsModalComponent  (iconChange)="flyOutComponent.iconChangesContacts()"></flyOutContactsModalComponent>
        <flyOutComponent #flyOutComponent 
            (locationModal)="flyOutLocationModalComponent.show()" 
            (packageTypeModal)="flyOutPackageTypeModalComponent.show()"
            (fleetModal)="flyOutFleetModalComponent.show()"
            (driverModal)="flyOutDriverModalComponent.show()"
            (contactsModal)="flyOutContactsModalComponent.show()">
        </flyOutComponent>
    </div>
</div>
