<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-title>In Review</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>


  <div class="ion-padding">
    <div class="boxed_contents">

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

      <div class="flex">
<!--        <ion-label class="bold_text_green">In Review</ion-label>-->
<!--        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
      </div>
      <div class="flex">
        <ion-label class="bold_text">{{jobData.title}}</ion-label>
      </div>

<!--      <div class="row">-->
<!--        <ion-label class="bg_text">{{jobData.contract}}</ion-label>-->
<!--        <div class="rate">-->
<!--          &lt;!&ndash;        <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
<!--          <ion-label class="review"> Due date : {{jobData.delivery_date |date}} </ion-label>-->
<!--        </div>-->
<!--      </div>-->

      <ion-label class="color_text">Price: {{jobData.price*0.01| number : '1.2-2'}} {{jobData.currency}}</ion-label>

      <div class="items">
        <div class="stud">
          <ion-icon slot="start" name="time" color="primary"></ion-icon>
          <ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
        </div>
          <div class="stud">
              <ion-icon slot="start" name="document-text" color="primary"></ion-icon>
              <ion-label>By:{{jobData.job_to}}</ion-label>
          </div>
      </div>

    <div style=" margin-bottom: 30px;">
        <ion-card  style="background-color: lavender;">
            <ion-card-content>
                This job is in review, you can accept or reject completion.
            </ion-card-content>
            <ion-grid style="background-color: white;">
                <ion-row>
                    <ion-col> <ion-button color="danger" expand="block" fill="outline" (click)="rejectCompletetion()">Reject</ion-button></ion-col>
                    <ion-col></ion-col>
                    <ion-col><ion-button color="secondary" expand="block" fill="solid" (click)="acceptCompletetion()">Accept</ion-button></ion-col>
                </ion-row>
            </ion-grid>
            <div style="color: red; width: 100%; text-align: center;">{{response_result}}</div>
        </ion-card>
    </div>



      <ion-segment  class="common_segment" [(ngModel)]="tabs">
        <ion-segment-button value="message">
          <ion-label>Response</ion-label>
        </ion-segment-button>
        <ion-segment-button value="activities">
        <ion-label>Activities</ion-label>
        </ion-segment-button>
      </ion-segment>

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

      </div>

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

          <ion-card>
              <ion-card-content  style="padding: 1px;">
                  <ion-textarea
                          style="background-color: aliceblue; margin: 0px; min-height: 120px"
                          label="Your Response"
                          placeholder="Enter your response message here"
                          [(ngModel)]='yourmessage' ></ion-textarea>
              </ion-card-content>
              <ion-grid>
                  <ion-row>
                      <ion-col style="text-align: left;">
                          <ion-button fill="outline"  color="secondary" (click)="startCamera(100)">
                              <ion-icon slot="icon-only" name="camera-reverse-outline"></ion-icon>
                          </ion-button>
                          <ion-button fill="outline" style="margin-left: 10px;" (click)="startCamera(0)">
                              <ion-icon slot="icon-only" name="folder-outline"></ion-icon>
                          </ion-button>
                      </ion-col>
                      <ion-col>
                          <ion-button style="margin-left: 20px;"
                                      color="secondary"
                                      expand="block"
                                      (click)="sendActiveJobMessage()">Send Response</ion-button>
                      </ion-col>
                  </ion-row>
              </ion-grid>

              <ion-label class="description">{{interest_msg_status}}
              </ion-label>
          </ion-card>

      </div>

      <app-taskactivities [jobData]="jobData"></app-taskactivities>

    </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>-->

