<ion-header mode="ios" class="ion-no-border">
    <ion-toolbar>
        <ion-buttons slot="start" (click)="onBack()">
            <ion-button>
                <ion-icon name="arrow-back-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <!--      <ion-button>-->
            <!--        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
            <!--      </ion-button>-->
        </ion-buttons>
        <ion-title>{{member_firstname}} {{member_lastname}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div class="boxed_contents">


  <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/family/'+family_uid+')'">
    <div class="ion-padding">
      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>
    </div>
  </div>

  <div class="ion-padding">
    <div class="flex">
      <ion-label class="bold_text">{{member_firstname}} {{member_lastname}}</ion-label>
<!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
    </div>

    <div class="row">
<!--      <ion-label class="bg_text">3D Design</ion-label>-->
<!--      <div class="rate">-->
<!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
<!--      </div>-->
    </div>

<!--    <ion-label class="color_text">$40</ion-label>-->

    <div class="items">
<!--      <div class="stud">-->
<!--        <ion-icon slot="start" name="people" color="primary"></ion-icon>-->
<!--        <ion-label>9876 Students</ion-label>-->
<!--      </div>-->
<!--      <div class="stud">-->
<!--        <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
<!--        <ion-label>2.5 hours</ion-label>-->
<!--      </div>-->
<!--      <div class="stud">-->
<!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
<!--        <ion-label>Certificate</ion-label>-->
<!--      </div>-->
    </div>

    <ion-segment class="common_segment" [(ngModel)]="tabs">
        <ion-segment-button value="lesson">
        <ion-label>Wallet</ion-label>
        </ion-segment-button>

        <ion-segment-button value="about">
        <ion-label>Task</ion-label>
        </ion-segment-button>

        <ion-segment-button value="profile">
        <ion-label>Profile</ion-label>
</ion-segment-button>
    </ion-segment>

    <div *ngIf="tabs =='about'" class="lesson">

        <div class="sec">
            <ion-label class="grey">Currently Active</ion-label>
            <ion-label class="color">0</ion-label>
        </div>


        <div class="video" *ngFor="let item of jobManagerActiveData"  (click)="jobActive(item)">
            <div class="left">
                <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/task-list.svg)'"></div>

                <div class="text">
                    <ion-label class="bold_text">{{item.title}}</ion-label>
                    <ion-label class="grey_text">{{item.job_description}}</ion-label>
                    <ion-label class="price_line">{{item.contract}}   {{item.price*0.01}} {{item.currency}}  </ion-label>
                    <ion-label class="due_date">Due Date: {{item.delivery_date |date}}</ion-label>
                </div>
            </div>
            <div class="right">
                <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
            </div>
        </div>


    </div>

    <div *ngIf="tabs =='lesson'" class="lesson">
        <div class="video" *ngFor="let item of familyMemberWalletData" >

            <ion-grid class="wallet-tools">
                <ion-row>
                    <ion-col>
                        <div class="left">
                            <div class="bg_image men_image"  [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/currency/'+item.description.toLowerCase()+'.svg)'"></div>
                            <div class="text">
                                <ion-label class="bold_text"> {{item.amount*0.01 | number : '1.2-2'}} {{item.description}}</ion-label>
                            </div>
                        </div>

                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col>
                        <ion-toolbar *ngIf="toolBarShow == '1' ">
                            <ion-buttons class="actions" slot="end">
                                <ion-button size="small"  fill="solid" color="secondary" shape="round" (click)="startAddfund(item)">
                                    Reward
                                    <ion-icon name="chevron-forward-circle-outline"></ion-icon>
                                </ion-button>
                                <ion-button size="small" fill="solid" shape="round" (click)="startWalletPlan()">Plan Account
                                    <ion-icon name="chevron-forward-circle-outline"></ion-icon>
                                </ion-button>
                            </ion-buttons>
                        </ion-toolbar>

                        <div *ngIf="toolBarShow == item.wallet_uid ">
                             <ion-grid class="send-grid">
                                    <ion-row>
                                        <ion-col class="intr">Amount ({{send_cuurency}})</ion-col>
                                        <ion-col>
                                            <ion-input   type="number" label="Amount(ggg)" placeholder="Enter Amount"  [(ngModel)]='amount'></ion-input>
                                        </ion-col>
                                    </ion-row>
                                <ion-row>
                                    <ion-col class="intr">From ({{send_cuurency}})</ion-col>
                                    <ion-col>
                                        <ion-input
                                                type="text"
                                                [readonly]="true"
                                                value="{{origing_current_balance*0.01| number : '1.2-2' }}">
                                        </ion-input>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col class="intr">To</ion-col>
                                    <ion-col>
                                        <ion-input
                                                type="text"
                                                [readonly]="true"
                                                value="{{member_firstname}} {{member_lastname}}">
                                        </ion-input>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col class="intr">Comment</ion-col>
                                    <ion-col>
                                        <ion-textarea class="txta"
                                                label="Outline textarea"
                                                labelPlacement="floating"
                                                fill="outline"
                                                      [(ngModel)]='description'
                                                placeholder="Comment">
                                        </ion-textarea>

                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col>
                                        <ion-button
                                                (click)="backToToolBar()"
                                                color="danger"
                                                shape="round"
                                                size="small">Cancel</ion-button>
                                    </ion-col>
                                    <ion-col class="sendpart">
                                        <ion-button
                                                (click)="sendReward(item)"
                                                color="secondary"
                                                shape="round"
                                                size="small">Send</ion-button>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>

                        </div>
                    </ion-col>
                </ion-row>
            </ion-grid>

        </div>
    </div>

    <div *ngIf="tabs =='profile'" class="review_tab">

        <div class="bg_white">
            <div class="flex">
                <ion-label class="grey_text">Username</ion-label>
                <ion-label class="dark_text">{{member_username}}</ion-label>
            </div>
            <div class="flex">
                <ion-label class="grey_text">PIN</ion-label>
                <ion-label class="dark_text">{{member_pin}}</ion-label>
            </div>
            <div class="flex">
                <div class="qr-div">
                    <qrcode
                            [qrdata]="member_qr_string"
                            [width]="256"
                            [errorCorrectionLevel]="'M'">
                    </qrcode>
                </div>
            </div>

        </div>

        <div class="item_line" >
            <div class="left">
                <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/family/'+family_uid+')'"></div>

                <div class="text">
                    <ion-label class="bold_text name_bg_text">Change Picture</ion-label>
<!--                    &lt;!&ndash;              <ion-label class="grey_text"> {{item.last_login}}</ion-label>&ndash;&gt;-->
<!--                    <ion-label class="extra_text"><span class="title">Last Login:</span>{{item.last_login | date}}</ion-label>-->
                </div>
            </div>
            <div class="right">
<!--                <ion-icon name="images-outline" color="medium"></ion-icon>-->
<!--                <ion-icon name="camera-reverse-outline" color="medium"></ion-icon>-->
                <ion-button size="small" class="media_but" (click)="startCamera(0)">
                    Photos
                    <ion-icon slot="end" name="images-outline" ></ion-icon>
                </ion-button>
                <ion-button  size="small" class="media_but"  (click)="startCamera(100)">
                    Camera
                    <ion-icon slot="end" name="camera-reverse-outline"></ion-icon>
                </ion-button>
            </div>
        </div>

        <div class="bg_white">


        </div>

        <div class="bg_white">
            
        </div>

    </div>

  </div>
    </div>
</ion-content>

<!--<ion-footer>-->
<!--  <ion-toolbar>-->
<!--    <div class="button" (click)="onBack()">-->
<!--      <ion-label class="text">Return</ion-label>-->
<!--    </div>-->
<!--  </ion-toolbar>-->
<!--</ion-footer>-->
