<section class="content">
	<div class="content-block">
		<div class="block-header">
			<!-- breadcrumb -->
			<app-breadcrumb [title]="'MENUITEMS.DASHBOARD.LIST.OUTCOME'" [items]="['HOME']" [active_item]="'MENUITEMS.DASHBOARD.LIST.OUTCOME'"></app-breadcrumb>
		</div>

		<div class="row">
			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
				<div class="card">
					<div class="header">
						<h2>{{'PERIOD' | translate}}</h2>
					</div>
					<div class="body">
						<div class="example-container">
							<app-date-period [from]="dateFrom" [to]="dateTo" (onChange)="onChangePeriod($event)"></app-date-period>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row clearfix">
			<!-- Bar chart with line -->
			<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
				<div class="card">
					<div class="header">
						<h2>{{'OUTCOME' | translate}}</h2>
						<!--
						<button mat-icon-button [matMenuTriggerFor]="menu" class="header-dropdown">
							<mat-icon>more_vert</mat-icon>
						</button>
						<mat-menu #menu="matMenu">
							<button mat-menu-item>Action</button>
							<button mat-menu-item>Another action</button>
							<button mat-menu-item>Something else here</button>
						</mat-menu>
						-->
					</div>
					<div class="body">
						<apx-chart #chart *ngIf="chartOptions" class="apex-pie-center" (contextmenu)="onRightClick($event)"
								   [series]="chartOptions.series!"
								   [chart]="chartOptions.chart!"
								   [dataLabels]="chartOptions.dataLabels!"
								   [plotOptions]="chartOptions.plotOptions!"
								   [title]="chartOptions.title!"
								   [legend]="chartOptions.legend!">
						</apx-chart>
						<div class="table-responsive m-t-15" *ngIf="dashboardModel">
							<table class="table align-items-center">
								<tbody>
								<tr *ngFor="let item of dashboardModel!.details">
									<td><i class="fa fa-circle col-cyan msr-2"></i> {{item.name}}</td>
									<td [ngClass]="{ 'col-green': item.value != 0, 'col-red': item.value == 0}" style="text-align: right;">{{item.valueRaw | number: '1.2'}}</td>
									<td [ngClass]="{ 'col-green': item.value != 0, 'col-red': item.value == 0}" style="text-align: right;">{{item.value | number: '1.2'}}</td>
								</tr>
								<tr>
									<td class="col-cyan">{{'TOTAL' | translate}}</td>
									<td class="col-cyan" style="text-align: right;"></td>
									<td class="col-cyan" style="text-align: right;">{{total | number: '1.2'}}</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>


	</div>
</section>
