<ni-alert [color]="'success'" *ngIf="showGroupAlert === true"><strong>Group has been created!</strong></ni-alert>
<div *ngIf="showGroupList">
  <div class="row members-header">
    <div class="col-sm-6">
      <ni-breadcrumb [menu]="breadcrumb" [style]="'custom2'" class="mb-4"></ni-breadcrumb>        
    </div>
    <div class="col-sm-6 text-right">
      <md-input-container class="search-group md-icon-left">
        <md-icon>search</md-icon>
        <input mdInput value="">
      </md-input-container>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <ni-card [refreshIndex]="1" [title]="'Groups' | translate" (refresh)="doRefresh($event)">
        <ni-table [headers]="groupHeaders" [data]="groups"></ni-table>
        <ni-alert *ngIf="groups.length === 0" [color]="'warning'" [outline]="true"><strong>{{'nogroup' | translate}}</strong></ni-alert>
        <ni-pagination [totalItems]="totalGroup" [itemPerPage]="maxGroup" [currentPage]="pageGroup" *ngIf="groups.length > 0" (changePage)="changeGroupPage($event)"></ni-pagination>
      </ni-card>
    </div>
  </div>
</div>

<div *ngIf="!showGroupList">
  <ni-breadcrumb [menu]="breadcrumb" [style]="'custom2'" class="mb-4"></ni-breadcrumb>
  <md-tab-group>
    <md-tab>
      <ng-template md-tab-label>
        <md-icon>home</md-icon> {{'Home' | translate}}
      </ng-template>
      <div class="row p-2">
        <div class="col-md-7 mb-3">
          <button md-raised-button color="primary" *ngIf="groupInfo && groupInfo.group_info && groupInfo.group_info.status === 'PENDING_FOR_KICK_OFF'" (click)="openStartDialog()">Start</button>
          <button md-raised-button color="primary" *ngIf="groupInfo && groupInfo.group_info && groupInfo.group_info.status === 'PENDING_FOR_KICK_OFF'" (click)="openDialog()">Add a member</button>
          <button md-raised-button color="primary" *ngIf="groupInfo && groupInfo.group_info && groupInfo.group_info.status === 'PENDING_FOR_KICK_OFF'">Save changes</button>
          <md-card class="example-card mt-3" *ngIf="groupInfo && groupInfo.group_info">
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Name:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="text" value="{{groupInfo.group_info.name}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Description:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="text" value="{{groupInfo.group_info.description}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">First Payment:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="text" value="{{groupInfo.group_info.date_first_payment}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT' && groupInfo.group_info.status_code !== 'REQUEST_FOR_POSITION_VALIDATION_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Date creation:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="text" [mdDatepicker]="picker" value="{{groupInfo.group_info.date_creation}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                  <button mdSuffix [mdDatepickerToggle]="picker" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'"></button>
                </md-input-container>
                <md-datepicker #picker></md-datepicker>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Type:</label>
              <div class="col-sm-8 col-md-8">
                <md-select [(ngModel)]="groupInfo.group_info.g_type_text" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                  <md-option [value]="groupInfo.group_info.g_type_text">{{groupInfo.group_info.g_type_text}}</md-option>
                </md-select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Currency:</label>
              <div class="col-sm-8 col-md-8">
                <md-select [(ngModel)]="groupInfo.group_info.currency" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                  <md-option [value]="groupInfo.group_info.currency">{{groupInfo.group_info.currency}}</md-option>
                </md-select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Creator:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="text" value="{{groupInfo.group_info.creator}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Status:</label>
              <div class="col-sm-8 col-md-8">
                <md-select [(ngModel)]="groupInfo.group_info.status_text" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                  <md-option [value]="groupInfo.group_info.status_text">{{groupInfo.group_info.status_text}}</md-option>
                </md-select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Position selection:</label>
              <div class="col-sm-8 col-md-8">
                <md-select [(ngModel)]="groupInfo.group_info.position_selection_type_text" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                  <md-option [value]="groupInfo.group_info.position_selection_type_text">{{groupInfo.group_info.position_selection_type_text}}</md-option>
                </md-select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Rate:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="number" value="{{groupInfo.group_info.rate}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Frequency:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="number" value="{{groupInfo.group_info.frequency}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">Due date:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="number" value="{{groupInfo.group_info.due_day}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-md-4 col-form-label mb-0">nb members:</label>
              <div class="col-sm-8 col-md-8">
                <md-input-container class="mb-0">
                  <input mdInput type="number" value="{{groupInfo.group_info.nb_members}}" [disabled]="groupInfo.group_info.status_code !== 'CREATED' && groupInfo.group_info.status_code !== 'REQUEST_TO_JOIN_SENT'">
                </md-input-container>
              </div>
            </div>
          </md-card>
        </div>
        <div class="col-md-5 pt-3" *ngIf="groupInfo.group_info.g_type !== 'PUBLIC'">
          <ni-card [outline]="true" [bgColor]="'warning'" class="info-card" *ngIf="groupInfo && groupInfo.group_info && groupInfo.group_info.g_type === 'PRIVATE'">
            <div class="title text-uppercase">{{'Amount' | translate}}</div>
            <div class="count">2,543</div>
          </ni-card>
          <ni-card [title]="'timeline' | translate" [customBgColor]="'transparent'">
            <ni-h-timeline [data]="timelineData"></ni-h-timeline>
          </ni-card>
        </div>
        <div class="col-md-6">
          <md-card class="example-card" *ngIf="groupInfo && groupInfo.previous_rotation_data">
            <md-card-header>
              <md-card-title><strong>Previous Rotation</strong></md-card-title>
            </md-card-header>
            <ul>
              <li>First name: {{groupInfo.previous_rotation_data.first_name}}</li>
              <li>Email: {{groupInfo.previous_rotation_data.email}}</li>
              <li>Position: {{groupInfo.previous_rotation_data.position}}</li>
              <li>Position Date: {{groupInfo.previous_rotation_data.user_position_date}}</li>
            </ul>
          </md-card>
        </div>
        <div class="col-md-6">
          <md-card class="example-card" *ngIf="groupInfo && groupInfo.next_rotation_data">
            <md-card-header>
              <md-card-title><strong>Next Rotation</strong></md-card-title>
            </md-card-header>
            <ul>
              <li>First name: {{groupInfo.next_rotation_data.first_name}}</li>
              <li>Email: {{groupInfo.next_rotation_data.email}}</li>
              <li>Position: {{groupInfo.next_rotation_data.position}}</li>
              <li>Position Date: {{groupInfo.next_rotation_data.user_position_date}}</li>
            </ul>
          </md-card>
        </div>
      </div>
    </md-tab>
    <md-tab>
      <ng-template md-tab-label>
        <md-icon>card_membership</md-icon> {{'Members' | translate}}
      </ng-template>
      <div class="row members-header">
        <div class="col-sm-6 p-3">
          <button md-raised-button color="primary" (click)="openDialog()">{{'Add a member' | translate}}</button>
          <button md-raised-button color="primary" (click)="removeAll()">{{'Remove all members' | translate}}</button>
        </div>
        <div class="col-sm-6 text-right p-3">
          <md-input-container class="search-group md-icon-left">
            <md-icon>search</md-icon>
            <input mdInput value="">
          </md-input-container>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 pl-3 pr-3">
          <ni-card [refreshIndex]="2" [title]="'Members' | translate" (refresh)="doRefresh($event)">
            <ni-table [headers]="memberHeaders" [data]="members"></ni-table>
            <ni-alert *ngIf="members.length === 0" [color]="'warning'" [outline]="true"><strong>{{'nomember' | translate}}</strong></ni-alert>
            <ni-pagination [totalItems]="totalMember" [itemPerPage]="maxMember" [currentPage]="pageMember" *ngIf="members.length > 0" (changePage)="changeMemberPage($event)"></ni-pagination>
          </ni-card>
        </div>
      </div>
    </md-tab>
    <md-tab>
      <ng-template md-tab-label>
        <md-icon>check_box</md-icon> {{'Obligation' | translate}}
      </ng-template>
      <div class="row members-header">
        <div class="col-sm-6 p-3">
          <button md-raised-button color="primary" (click)="cancelAll()">{{'Cancel all outstanding request' | translate}}</button>
        </div>
        <div class="col-sm-6 text-right p-3">
          <md-input-container class="search-group md-icon-left">
            <md-icon>search</md-icon>
            <input mdInput value="">
          </md-input-container>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 pl-3 pr-3">
          <ni-card [refreshIndex]="3" [title]="'Obligation' | translate" (refresh)="doRefresh($event)">
            <ni-table [headers]="obligationHeaders" [data]="obligations"></ni-table>
            <ni-alert *ngIf="obligations.length === 0" [color]="'warning'" [outline]="true"><strong>{{'noobligation' | translate}}</strong></ni-alert>
            <ni-pagination [totalItems]="totalObligation" [itemPerPage]="maxObligation" [currentPage]="pageObligation" *ngIf="obligations.length > 0" (changePage)="changeObligationPage($event)"></ni-pagination>
          </ni-card>
        </div>
      </div>
    </md-tab>
    <md-tab>
      <ng-template md-tab-label>
        <md-icon>sms_failed</md-icon> {{'Requests' | translate}}
      </ng-template>
      <div class="row members-header">
        <div class="col-sm-12 text-right p-3">
          <md-input-container class="search-group md-icon-left">
            <md-icon>search</md-icon>
            <input mdInput value="">
          </md-input-container>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 pl-3 pr-3">
          <ni-card [refreshIndex]="4" [title]="'Requests' | translate" (refresh)="doRefresh($event)">
            <ni-table [headers]="requestHeaders" [data]="requests"></ni-table>
            <ni-alert *ngIf="requests.length === 0" [color]="'warning'" [outline]="true"><strong>{{'norequest' | translate}}</strong></ni-alert>
            <ni-pagination [totalItems]="totalRequest" [itemPerPage]="maxRequest" [currentPage]="pageRequest" *ngIf="requests.length > 0" (changePage)="changeRequestPage($event)"></ni-pagination>
          </ni-card>
        </div>
      </div>
    </md-tab>
    <md-tab>
      <ng-template md-tab-label>
        <md-icon>event</md-icon> {{'Event' | translate}}
      </ng-template>
      <div class="row members-header">
        <div class="col-sm-12 text-right p-3">
          <md-input-container class="search-group md-icon-left">
            <md-icon>search</md-icon>
            <input mdInput value="">
          </md-input-container>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 pl-3 pr-3">
          <ni-card [refreshIndex]="5" [title]="'Event' | translate" (refresh)="doRefresh($event)">
            <ni-table [headers]="eventHeaders" [data]="events"></ni-table>
            <ni-alert *ngIf="events.length === 0" [color]="'warning'" [outline]="true"><strong>{{'noevent' | translate}}</strong></ni-alert>
            <ni-pagination [totalItems]="totalEvent" [itemPerPage]="maxEvent" [currentPage]="pageEvent" *ngIf="events.length > 0" (changePage)="changeEventPage($event)"></ni-pagination>
          </ni-card>
        </div>
      </div>
    </md-tab>
    <md-tab>
      <ng-template md-tab-label>
        <md-icon>local_atm</md-icon> {{'transaction' | translate}}
      </ng-template>
      <div class="row members-header">
        <div class="col-sm-12 text-right p-3">
          <md-input-container class="search-group md-icon-left">
            <md-icon>search</md-icon>
            <input mdInput value="">
          </md-input-container>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 pl-3 pr-3">
          <ni-card [refreshIndex]="6" [title]="'transaction' | translate" (refresh)="doRefresh($event)">
            <!-- <ni-table [headers]="transactionHeaders" [data]="transactions"></ni-table>
            <ni-alert *ngIf="transactions.length === 0" [color]="'warning'" [outline]="true"><strong>{{'notransaction' | translate}}</strong></ni-alert>
            <ni-pagination [totalItems]="transactions.length" *ngIf="transactions.length > 0" (changePage)="changeTransactionPage($event)"></ni-pagination> -->
          </ni-card>
        </div>
      </div>
    </md-tab>
  </md-tab-group>
</div>

<ni-loading></ni-loading>