@if ((query | async)?.data?.rider?.transactions; as transactions) {
  <nz-table #table nzTitle="Transactions Records" nzShowSizeChanger [nzFrontPagination]="false"
    [nzData]="transactions.nodes"
    [nzTotal]="transactions.totalCount" (nzQueryParams)="tableService.onTableQueryParamsChange($event)" nzBordered>
    <thead>
      <tr>
        <th [nzSortFn]="true" nzColumnKey="createdAt">
          {{ 'profile.dateTime' | translate }}
        </th>
        <th>
          {{ 'profile.transactionType' | translate }}
        </th>
        <th>
          {{ 'profile.amount' | translate }}
        </th>
        <th class="hidden lg:table-cell">
          {{ 'profile.documentNumber' | translate }}
        </th>
        <th class="hidden xl:table-cell">
          {{ 'profile.details' | translate }}
        </th>
        <th>{{ 'profile.actions' | translate }}</th>
      </tr>
    </thead>
    <tbody>
      @for (data of table.data; track data) {
        <tr>
          <td [nz-tooltip]="data.createdAt | date:'short'">{{ data.createdAt | timeago }}</td>
          <td>{{ data.action === 'Deduct' ? ('enum.transactionType.' + data.deductType | translate) :
            ('enum.transactionType.' + data.rechargeType | translate) }}
            @if (data.status != 'Done') {
              <nz-tag [nzColor]="tagColor.getTransactionStatusStatusColor(data.status)"
              [nzBordered]="false" class="ml-1">{{ 'enum.transactionStatus.' + data.status | translate }}</nz-tag>
            }
          </td>
          <td [ngClass]="data.action === 'Recharge' ? 'text-green-500' : 'text-red-500'">{{data.action === 'Recharge' ? '+'
          : ''}}{{ data.amount | currency: data.currency }}</td>
          <td class="hidden lg:table-cell">{{ data.refrenceNumber }}</td>
          <td class="hidden xl:table-cell">{{ data.description }}</td>
          <td>
            @if (data.operatorId !== null) {
              <a [routerLink]="'/management/users/view/' + data.operatorId">{{
                'table.viewOperator' | translate
              }}</a>
            }
            @if (data.paymentGatewayId !== null) {
              <a
                [routerLink]="'/management/payment-gateways/view/' + data.paymentGatewayId">{{ 'table.viewGateway' |
              translate }}</a>
            }
            @if (data.requestId !== null) {
              <a [routerLink]="'/requests/view/' + data.requestId">{{ 'table.viewRequest'
              | translate }}</a>
            }
          </td>
        </tr>
      }
    </tbody>
  </nz-table>
}
@if ((query | async)?.data?.rider?.wallet; as riderWallets) {
  <nz-table #walletTable nzTitle="Wallet Summary"
    [nzFrontPagination] [nzData]="riderWallets" [nzTotal]="riderWallets.length" nzBordered>
    <thead>
      <tr>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      @for (item of walletTable.data; track item) {
        <tr>
          <td>{{ item.balance | currency: item.currency }}</td>
        </tr>
      }
    </tbody>
  </nz-table>
}
<nz-card nzTitle="{{ 'profile.insertTransaction' | translate }}">
  <form nz-form [formGroup]="formTransaction" (ngSubmit)="onSubmitTransaction()">
    <div class="lg:grid lg:grid-cols-2 lg:gap-2">
      <nz-form-item>
        <nz-form-label nzRequired>Type</nz-form-label>
        <nz-form-control>
          <nz-select formControlName="action" nzRequired>
            <nz-option nzLabel="Deduct" nzValue="Deduct"></nz-option>
            <nz-option nzLabel="Recharge" nzValue="Recharge"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      @if (formTransaction.value.action === null) {
        <div></div>
      }
      @if (formTransaction.value.action === 'Recharge') {
        <nz-form-item>
          <nz-form-label>Recharge Type</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="rechargeType">
              @for (type of rechargeTypes; track type) {
                <nz-option [nzLabel]="('enum.transactionType.' + type) | translate"
                [nzValue]="type"></nz-option>
              }
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      }
      @if (formTransaction.value.action === 'Deduct') {
        <nz-form-item>
          <nz-form-label>Deduct Type</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="deductType">
              @for (type of deductTypes; track type) {
                <nz-option [nzLabel]="('enum.transactionType.' + type) | translate"
                [nzValue]="type"></nz-option>
              }
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      }
      <nz-form-item>
        <nz-form-label nzRequired nzFor="amount">Amount</nz-form-label>
        <nz-form-control>
          <nz-input-number formControlName="amount" id="amount" required class="w-full"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired>Currency</nz-form-label>
        <nz-form-control>
          <nz-select formControlName="currency" id="currency" required>
            @for (currency of getUniquieCurrencies((query | async)?.data?.regions?.nodes); track currency) {
              <nz-option
              [nzLabel]="currency.currency" [nzValue]="currency.currency"></nz-option>
            }
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="refrenceNumber">Document Number</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="refrenceNumber" id="refrenceNumber">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="description">Description</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="description" id="description">
        </nz-form-control>
      </nz-form-item>
    </div>
    <button class="float-right mt-2" nz-button nzType="primary" type="submit" [disabled]="!formTransaction.valid">{{
    'profile.submit' | translate }}</button>
  </form>

</nz-card>