<app-all-menus></app-all-menus>
<div class="topDiv">
  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <i class="fas fa-arrow-circle-left" (click)="goback()" title="Go Back" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
      <!-- <button style="background-color: #f9f6f6; font-size: 10px; color: black; float: left; margin-left: 10px;" md-raised-button (click)="addexpense()">{{'ADD EXPENSE' | translate}}</button> --> 
      <h4>{{'Add Product' | translate}}</h4>
    </div>
  </div> 
  <div class="row" style="margin: 0;  padding: 0 200px 0 200px;height: 86vh; overflow: auto;">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="row" style="background: white;box-shadow: 0px 1px 5px 0px #b2b0ae;padding: 40px;">
        <div class="col-sm-12 col-md-12 col-lg-12"> 
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <md-form-field class="example-full-width width" style="width:100%">
                <input mdInput type="text" [(ngModel)]="productId" placeholder="{{'Enter Product id' | translate}}" name="product_id" required>
                <md-error class="pattern">{{'Please Enter Product ID' | translate}}</md-error>
            </md-form-field>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <md-form-field class="example-full-width width" style="width:100%">
                <input mdInput type="text" [(ngModel)]="Product_name" placeholder="{{'Enter Product Name' | translate}}" name="productname" required>
                <md-error class="pattern">{{'Please Enter Product Name' | translate}}</md-error>
            </md-form-field>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <md-form-field class="example-full-width width" style="width:100%">
                <input mdInput type="number" [(ngModel)]="price" placeholder="{{'Enter Price' | translate}}" name="price" required>
                <md-error class="pattern">{{'Please Enter Price' | translate}}</md-error>
            </md-form-field>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <md-form-field class="example-full-width width" style="width:100%">
                <input mdInput type="number" [(ngModel)]="discount" placeholder="{{'Enter Discount' | translate}}" name="productname" >
                <md-error class="pattern">{{'Please Enter Discount' | translate}}</md-error>
            </md-form-field>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <md-select class="example-full-width width" style="width:100%" [(ngModel)]="productStatus" placeholder="{{'Product Status' | translate}}">
                <md-option *ngFor="let status of pStatus" [value]="status">{{status}}</md-option>
            </md-select>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <md-select class="example-full-width width" style="width:100%" [(ngModel)]="productCategory" placeholder="{{'Product Category' | translate}}">
                <md-option *ngFor="let catgry of category" [value]="catgry">{{catgry}}</md-option>
            </md-select>
            </div>
          </div>
          <div class="row" style="max-height: 250px; overflow: auto; overflow-x: hidden;"> 
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 30px 100px 0 100px;">
              <div class="row">
                <div class="col-sm-6 col-md-6 col-lg-6" style="padding: 0px 100px 0 15px;">
                  <p style="font-weight:500">Upload Product Image</p>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-6"  style="padding: 0px 0px 0 100px;">
                       <button mdTooltip="upload Documents"  style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right;padding-right: 12px;" (click)="AddDocumentsField('addedrow')"><md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button> 
                </div>
              </div>
              <div class="row" *ngFor="let data of imageuploadObject; let i = index">
                <div class="col-sm-8 col-md-8 col-lg-8" style="display: flex;">     
                  <input type="file" class="btn btn btn-success" style ="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:55%;" (change)="onFileChanged($event)" >
                  <i class="material-icons" (click)="onUpload(i)" style="font-size:30px;color: green;cursor:pointer;margin-left: 50px;"> cloud_upload </i>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-top:10px">
                  <md-icon style="float: right;width:25px;height:25px;color:red; cursor:pointer" (click)="DeleteDocumentsField(i)" mdTooltip="Delete Image">delete</md-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 30px 100px 0 100px; font-size: 16px; font-weight: 500;">
              <p>Product Specifications </p>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <md-form-field class="example-full-width width" style="width:100%">
                    <input mdInput type="number" [(ngModel)]="currentStock" placeholder="{{'Enter Current Stock' | translate}}" name="currentStock" required>
                </md-form-field>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <md-form-field class="example-full-width width" style="width:100%">
                    <input mdInput type="text" [(ngModel)]="itmeWeight" placeholder="{{' Item Weight' | translate}}" name="itemWeight" >
                </md-form-field>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <md-form-field class="example-full-width width" style="width:100%">
                    <input mdInput type="text" [(ngModel)]="packageDimension" placeholder="{{'Package Dimension' | translate}}" name="itemWeight" >
                </md-form-field>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <md-form-field class="example-full-width width" style="width:100%">
                    <input mdInput type="text" [(ngModel)]="battery" placeholder="{{'Battery' | translate}}" name="Battery" >
                </md-form-field>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <md-form-field class="example-full-width width" style="width:100%">
                    <input mdInput type="text" [(ngModel)]="model_number" placeholder="{{'Model Number' | translate}}" name="modelnumber" >
                </md-form-field>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">       
                <div class="col-sm-12 col-md-12 col-lg-12">
                  <md-form-field class="example-full-width width" style="width:100%">
              <!-- <input mdInput type="text" [(ngModel)]="additionalSpec" placeholder="{{'Additional Specifications' | translate}}" name="addspec" > -->
                    <textarea mdInput type="text" [(ngModel)]="additionalSpec" placeholder="{{'Additional Specifications' | translate}}" name="addspec"></textarea>
                </md-form-field>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">   
                <div class="col-sm-12 col-md-12 col-lg-12"></div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">          
                <div class="col-sm-12 col-md-12 col-lg-12"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">
               
                <div class="col-sm-12 col-md-12 col-lg-12"></div>
              </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
              <div class="row">    
                <div class="col-sm-12 col-md-12 col-lg-12"></div>
              </div>
            </div>
          </div>
          <div class="row" style="text-align: center;padding-top: 20px;margin:0px">
            <div class="col-sm-12 col-md-12 col-lg-12" >
                <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="ProductSave()">{{'SAVE' | translate}}</button>
                <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="goback()">{{'CANCEL' | translate}}</button>
            </div>
        </div>
        </div>  
      </div> 
    </div>
  </div> 
</div>