<!-- Begin page -->
<div class="wrapper">
  <app-sidebar></app-sidebar>

  <!-- ============================================================== -->
  <!-- Start Page Content here -->
  <!-- ============================================================== -->

  <div id="content">
    <app-topbar></app-topbar>
    <!-- Start Content-->
    <div class="container-fluid" appMenuSelection>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
          <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
          <li *ngIf="account" class="breadcrumb-item active" aria-current="page">{{account?.vcard?.fn[0].value}}</li>
        </ol>
      </nav>
      <div *ngIf="!account" class="text-center">
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="spinner-grow text-primary m-1" role="status" style="width: 3rem; height: 3rem;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div *ngIf="account" class="card mb-3">
        <div class="row card-body">
          <h3>
            <strong> {{account?.vcard?.fn[0].value}} </strong>
          </h3>
          <span class="ml-auto"><strong>Balance:</strong> {{account?.balance | tokenRatio}} SRF</span>
          <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | date}}</span>
          <span class="ml-2"><strong>Address:</strong>
            <a href="{{bloxbergLink}}" target="_blank"> {{accountAddress}} </a>
            <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress()" alt="Copy">
          </span>
        </div>
      </div>
      <div *ngIf="account" class="card mt-3 mb-3">
        <div class="card-body">
          <form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()">
            <div class="row form-inline">

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Name(s): *</mat-label>
                  <input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
                         value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Phone Number: </mat-label>
                  <input matInput type="text" id="phoneNumber" placeholder="{{account?.vcard?.tel[0].value}}"
                         value="{{account?.vcard?.tel[0].value}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Age: </mat-label>
                  <input matInput type="text" id="age" placeholder="{{account?.age}}"
                         value="{{account?.age}}" formControlName="age" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.age.errors">Age is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE: </mat-label>
                  <mat-select id="accountType" [(value)]="account.type" formControlName="type"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
                      {{accountType | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.type.errors">Type is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>Bio: </mat-label>
                  <input matInput type="text" id="bio" placeholder="{{account?.products}}" value="{{account?.products}}"
                         formControlName="bio" [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> GENDER: </mat-label>
                  <mat-select id="gender" [(value)]="account.gender" formControlName="gender"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let gender of genders" [value]="gender">
                      {{gender | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.gender.errors">Gender is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> BUSINESS CATEGORY: </mat-label>
                  <mat-select id="businessCategory" [(value)]="account.category" formControlName="businessCategory"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let category of categories" [value]="category">
                      {{category | titlecase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.businessCategory.errors">
                    Category is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label>User Location: </mat-label>
                  <input matInput type="text" id="userLocation" placeholder="{{account?.location.area_name}}"
                         value="{{account?.location.area_name}}" formControlName="userLocation"
                         [errorStateMatcher]="matcher">
                  <mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors">
                    User Location is required.
                  </mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> LOCATION: </mat-label>
                  <mat-select id="location" [(value)]="account.location.area" formControlName="location"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let area of areaNames" [value]="area">
                      {{area | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.location.errors">Location is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <mat-form-field appearance="outline">
                  <mat-label> LOCATION TYPE: </mat-label>
                  <mat-select id="locationType" [(value)]="account.location.area_type" formControlName="locationType"
                              [errorStateMatcher]="matcher">
                    <mat-option *ngFor="let type of areaTypes" [value]="type">
                      {{type | uppercase}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="submitted && accountInfoFormStub.locationType.errors">Location Type is required.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary mb-3">
                  Add User KYC
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-success mb-3"
                        (click)="resetPin()">
                  Reset Pin
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger mb-3">
                  Delete User
                </button>
              </div>

              <div class="col-md-6 col-lg-4">
                <button mat-raised-button color="primary" type="submit" class="btn btn-outline-primary">
                  SAVE DETAILS
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="card mb-3">
        <mat-card-title class="card-header">
          USER
        </mat-card-title>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
              <caption> 1 user </caption>
              <thead class="thead-dark">
              <tr>
                <th scope="col">NAME</th>
                <th scope="col">BALANCE</th>
                <th scope="col">CREATED</th>
                <th scope="col">STATUS</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{account?.vcard?.fn[0].value}}</td>
                <td>{{account?.balance | tokenRatio}}</td>
                <td>{{account?.date_registered | date}}</td>
                <td>
                  <span *ngIf="accountStatus === 'active'" class="badge badge-success badge-pill">
                    {{accountStatus}}
                  </span>
                  <span *ngIf="accountStatus === 'blocked'" class="badge badge-danger badge-pill">
                    {{accountStatus}}
                  </span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
        <mat-tab label="Transactions">
          <app-transaction-details [transaction]="transaction"></app-transaction-details>
          <div class="card mt-1">
            <div class="card-header">
              <div class="row">
                <mat-form-field appearance="outline">
                  <mat-label> TRANSACTION TYPE </mat-label>
                  <mat-select id="transferSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
                    <mat-option value="all">ALL TRANSFERS</mat-option>
                    <mat-option *ngFor="let transactionType of transactionsTypes" [value]="transactionType">
                      {{transactionType | uppercase}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(transactions, 'transactions')"> EXPORT </button>
              </div>
            </div>

            <div class="card-body">
              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input matInput type="text" (keyup)="doTransactionFilter($event.target.value)" placeholder="Filter">
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
                         #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>

                <ng-container matColumnDef="sender">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
                  <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
                </ng-container>

                <ng-container matColumnDef="recipient">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
                  <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
                </ng-container>

                <ng-container matColumnDef="value">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
                  <td mat-cell *matCellDef="let transaction">
                    <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
                    <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="created">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
                  <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
                </ng-container>

                <ng-container matColumnDef="type">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
                  <td mat-cell *matCellDef="let transaction">
                    <span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
                  </td>
                </ng-container>

                <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
                <mat-row *matRowDef="let transaction; columns: transactionsDisplayedColumns" matRipple
                         (click)="viewTransaction(transaction)"></mat-row>
              </mat-table>

              <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
                             [pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>

            </div>
          </div>
        </mat-tab>

        <mat-tab label="Users">
          <div class="card mt-1">
            <mat-card-title class="card-header">
              Accounts
            </mat-card-title>
            <div class="card-body">
              <div class="row card-header">
                <mat-form-field appearance="outline">
                  <mat-label> ACCOUNT TYPE </mat-label>
                  <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
                    <mat-option value="all">ALL</mat-option>
                    <mat-option *ngFor="let accountType of accountTypes" [value]="accountType">
                      {{accountType | uppercase}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
                <button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto mr-2" (click)="downloadCsv(accounts, 'accounts')"> EXPORT </button>
              </div>

              <mat-form-field appearance="outline">
                <mat-label> Filter </mat-label>
                <input matInput type="text" (keyup)="doUserFilter($event.target.value)" placeholder="Filter">
                <mat-icon matSuffix>search</mat-icon>
              </mat-form-field>

              <mat-table class="mat-elevation-z10" [dataSource]="userDataSource" matSort #UserTableSort="matSort"
                         matSortActive="created" matSortDirection="desc" matSortDisableClear>

                <ng-container matColumnDef="name">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="phone">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="created">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.date_registered | date}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="balance">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.balance}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="location">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
                  <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
                <mat-row *matRowDef="let account; columns: userDisplayedColumns" (click)="viewAccount(account)"
                         matRipple></mat-row>
              </mat-table>

              <mat-paginator #UserTablePaginator="matPaginator" [pageSize]="usersDefaultPageSize"
                             [pageSizeOptions]="usersPageSizeOptions" showFirstLastButtons></mat-paginator>
            </div>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
    <app-footer appMenuSelection></app-footer>
  </div>
  <!-- ============================================================== -->
  <!-- End Page content -->
  <!-- ============================================================== -->
</div>

./account-details.component.scss