
<ion-content>
  <div class="head-title">
    <!-- <ion-toolbar  class="header-toolbar">
      <ion-buttons slot="start">
        <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
      </ion-buttons>
      <ion-title color="light" >{{ts.trPK('itemforsale','title')}}</ion-title>
    </ion-toolbar> -->

    <app-generic-header
  showImage="false"
  showBack="true"
  [headerText]="'itemforsale,title' | translate">
</app-generic-header>
  </div>
  <div class="header"></div>
  <div class="bottom"></div>
  <div class="md-stepper-horizontal ">
    <ion-row>
   <ion-col size="4"> <div class="md-step active " [ngClass]="step >1 ? 'green' : 'orange'">
      <div class="md-step-circle"><span style="content: url(/assets/imgs/check-white.svg)"></span></div>
      <div class="md-step-title">{{ts.trPK('itemforsale','select-category')}}</div>
      <div class="md-step-optional">{{ts.trPK('itemforsale','completed')}}</div>
      <div class="md-step-bar-left"></div>
      <!-- <div class="md-step-bar-right" [ngClass]="step ==1 ? 'orange-border' : 'green-border'"></div> -->
    </div>
  </ion-col>

  <ion-col size="4"> <div class="md-step" [ngClass]="step >2 ? 'green' : step ==2 ? 'orange' : 'grey'">
      <div class="md-step-circle"><span *ngIf="step==1" style="content: url(/assets/imgs/check.svg)"></span>
        <span *ngIf="step>2 || step==2" style="content: url(/assets/imgs/check-white.svg)">
      </span>
      </div>
      <div class="md-step-title">{{ts.trPK('itemforsale','add-details')}}</div>
      
      <div class="md-step-optional">{{step >2 ? "Completed" : "Locked"}}</div>
      <div class="md-step-bar-left"></div>
      
    </div></ion-col>
    <ion-col size="4"><div class="md-step" [ngClass]="step >3 ? 'green' : step ==3 ? 'orange' : 'grey'">
      <div class="md-step-circle"><span *ngIf="step==1 || step==2" style="content: url(/assets/imgs/check.svg)"></span>
        <span *ngIf="step>=3" style="content: url(/assets/imgs/check-white.svg)"></span></div>
      <div class="md-step-title">{{ts.trPK('itemforsale','review-sell')}}</div>
      <div class="md-step-optional">{{step >3 ? "Completed" : "Locked"}}</div>
      <div class="md-step-bar-left"></div>
      
    </div></ion-col>
  </ion-row>
    </div>
    <div class="content">
      
    

 <div class="offering" *ngIf="step==1">
  <h2>What are you offering?</h2>
 </div>
 <ion-grid *ngIf="step==1">
 <ion-row>
   <ion-col size="4">
     <div class="sale-icon" (click)="nextStep()">
     <div class="top">
      <img src="/assets/imgs/itemsforsale/mobile.svg">
     </div>
     <div class="bottom-icon">
       <p>Mobile & Tablets</p>
     </div>
    </div>
   </ion-col>
   <ion-col size="4">
    <div class="sale-icon" (click)="openItem()">
    <div class="top">
      <img src="/assets/imgs/itemsforsale/cars.svg">
    </div>
    <div class="bottom-icon">
      <p>Cars & Vehicles</p>
    </div>
   </div>
  </ion-col>
  <ion-col size="4">
    <div class="sale-icon">
    <div class="top">
      <img src="/assets/imgs/itemsforsale/electronic_appliances.svg">
    </div>
    <div class="bottom-icon">
      <p>Electronic Applicance</p>
    </div>
   </div>
  </ion-col>
 </ion-row>

 <ion-row>
  <ion-col size="4">
    <div class="sale-icon">
    <div class="top">
      <img src="/assets/imgs/itemsforsale/furniture.svg">
    </div>
    <div class="bottom-icon">
      <p>Furniture & Home Decor</p>
    </div>
   </div>
  </ion-col>
  <ion-col size="4">
   <div class="sale-icon">
   <div class="top">
    <img src="/assets/imgs/itemsforsale/fashion.svg">
   </div>
   <div class="bottom-icon">
     <p>Fashion & beauty</p>
   </div>
  </div>
 </ion-col>
 <ion-col size="4">
   <div class="sale-icon">
   <div class="top">
    <img src="/assets/imgs/itemsforsale/book and sports.svg">
   </div>
   <div class="bottom-icon">
     <p>Books, Sports & Hobbies</p>
   </div>
  </div>
 </ion-col>
</ion-row>
</ion-grid>
<div class="offering" *ngIf="step==2">
  <h2>Add Details</h2>
 </div>
<div class="add-details" *ngIf="step==2">
<ion-grid>
  <ion-row>
    <p>Item Info</p>
    <ion-col size="12">
     <ion-item lines="none">
      <ion-input placeholder="Item Info"></ion-input>
     </ion-item>
    </ion-col>
  </ion-row>

  <ion-row>
   
    <ion-col size="12">
      <ion-item lines="none">
     
        
        <ion-textarea rows="6" cols="20" placeholder="Description"></ion-textarea>
      </ion-item>
    </ion-col>
  </ion-row>

<ion-row>
  <ion-col>
    <p>Item Condition</p>
    <ion-radio-group value="new">
     
  
   
       <ion-col>
        <ion-radio value="new"></ion-radio>
        <ion-label>New</ion-label>
         </ion-col>
         <ion-col>
        <ion-radio  value="used"></ion-radio>
        <ion-label>Used</ion-label>
      </ion-col>
  
     
      </ion-radio-group>
  </ion-col>
</ion-row>

<ion-row>
 
  <ion-col size="12">
    <p>Item Price</p>
    <ion-item lines="none">
    <ion-input placeholder="Item Price"></ion-input>
   </ion-item>
  </ion-col>
</ion-row>
 <ion-row>
  
    <p>Item Photos</p>
 </ion-row>
 <ion-row>
    <ion-col lines="none" size="3">
      <div class="image-container">
      <div class="uploaded">
        <div class="closed">X</div>
      <img src="assets/imgs/itemsforsale/fashion.svg" />
    </div>
   
  </div>
   </ion-col>
   <ion-col lines="none" size="3">
    <div class="image-container">
    <div class="uploaded">
      <div class="closed">X</div>
    <img src="assets/imgs/itemsforsale/fashion.svg" />
  </div>
 
</div>
 </ion-col>
 <ion-col lines="none" size="3">
  <div class="image-container uploader-box">
  <div class="uploaded">
    <ion-icon name="camera" class="camera-icon"></ion-icon>
   
</div>

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



</ion-grid>
</div>

<div class="offering" *ngIf="step==3">
  <h2>Review & Sell</h2>
 </div>


  <div class="add-details" *ngIf="step==3">
    <h2 class="review-title">Furniture Table</h2>

     
      
        <p>
          Consectetur adipiscing elit. Donec blandit diam nulla, non euismod eros efficitur imperdiet. Fusce erat enim, volutpat at enim in, venenatis iaculis risus.
        </p>
        <div class="description-details">
    <p class="orange">Used</p>

    <img src="assets/imgs/itemsforsale/fashion.svg" />
    <img src="assets/imgs/itemsforsale/fashion.svg" />
   <div class="selling">


    <strong>Selling for </strong> <h2>500 SAR</h2>
  </div>
  <div class="waring">
    <img src="/assets/imgs/itemsforsale/alert.svg"> <label>This ad will be valid for 2 week after approval</label>
  </div>
  </div>

  </div>

</div>

<ion-footer  *ngIf="step==1">
  <div class="centerDiv">
    <ion-button  class="footer-button red-button" ion-button>
    cancel </ion-button>
  
    
  </div>
  </ion-footer>


<ion-footer  *ngIf="step>1">
<div class="centerDiv">
  <ion-button  class="footer-button  red-button small-btn" ion-button (click)="step =3" *ngIf="step ==2 || step ==3">
    cancel </ion-button>
  <ion-button  class="footer-button  small-btn" ion-button (click)="step =3" *ngIf="step ==2">
    {{ts.trPK('general','next')}} </ion-button>
   
    <ion-button  class="footer-button small-btn"  ion-button (click)="openItem()" *ngIf="step ==3">
      Confirm </ion-button>
</div>
</ion-footer>

</ion-content>