
<div class="custom_loader_wrapper" *ngIf="loader">
    <div class="custom_loader_ring"></div>
</div>
<header class="provider_header">
  <div class="row">
    <div class="col-md-6">
      <h4>{{'service.Configuration' | translate}}</h4>
    </div>
    <div class="col-md-6 textRight relative">
        <button class="logout" (click)="goToPage('forex/home')">
          <img src="assets/images/asset_home.png">
         {{'service.Home' | translate}}</button>
        <button class="logout" (click)="logout()">
            <img src="assets/images/asset_logout.png">
           {{'service.Logout' | translate}}</button>
        <img src="assets/images/asset_logo1.png">
        <span (click)="goToPage('forex/changepin')">{{'service.Change PIN' | translate}}</span>
    </div>
  </div>
</header>
<section>
  <div class="provider_content">
    
    <h3> {{'service.Service Charge Management' | translate}}</h3>
    <div class="provider_inner_content">
          <div class="alert alert-success alert-dismissible" *ngIf="success">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong> {{'service.Success' | translate}}!</strong> {{'service.Configuration saved successfully' | translate}}
          </div>
          <div class="alert alert-danger alert-dismissible" *ngIf="error">
              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
              <strong> {{'service.Warning!' | translate}}</strong> {{responseError}}
          </div>
      <form [formGroup]="configForm" (ngSubmit)="configProcess()" autocomplete="off">        
        <div class="row">
            <div class="col">
              <div class="provider_data_content">
                  <p> {{'service.Tax' | translate}}</p>
                  <input class="provider_input" placeholder="" type="number" formControlName="tax">
              </div>
              <div class="s_error" *ngIf="!configForm.controls['tax'].valid && configSubmit">
                  <div class="s_validation" *ngIf="configForm.controls['tax'].hasError('required')">{{error_msg.required}} </div>
              </div>
            </div>
            <div class="col">
                <div class="provider_data_content">
                    <p> {{'service.Hand Delivery' | translate}}</p>
                    <input class="provider_input" placeholder="" type="number" formControlName="hand">
                </div>
                <div class="s_error" *ngIf="!configForm.controls['hand'].valid && configSubmit">
                    <div class="s_validation" *ngIf="configForm.controls['hand'].hasError('required')">{{error_msg.required}} </div>
                </div>
            </div>
            <div class="col">              
                <div class="provider_data_content">
                    <p> {{'service.Airport Delivery' | translate}}</p>
                    <input class="provider_input" placeholder="" type="number" formControlName="airport">
                </div>
                <div class="s_error" *ngIf="!configForm.controls['airport'].valid && configSubmit">
                    <div class="s_validation" *ngIf="configForm.controls['airport'].hasError('required')">{{error_msg.required}} </div>
                </div>
                <div class="s_error" *ngIf="!configForm.controls['airport'].valid && configSubmit">
                    <div class="s_validation" *ngIf="configForm.controls['airport'].hasError('required')">{{error_msg.required}} </div>
                </div>
            </div>
          </div>
          <div class="row">
              <div class="col">
                <div class="provider_data_content">
                    <p> {{'service.Cancellation Time' | translate}}</p>
                    <input class="provider_input" placeholder="" type="number" formControlName="cancel_time">
                </div>
                <div class="s_error" *ngIf="!configForm.controls['cancel_time'].valid && configSubmit">
                    <div class="s_validation" *ngIf="configForm.controls['cancel_time'].hasError('required')">{{error_msg.required}} </div>
                </div>
              </div>

              <div class="col">
                  <div class="provider_data_content">
                      <p> {{'service.Waiting Time' | translate}}</p>
                      <input class="provider_input" placeholder="" type="number" formControlName="waiting_time">
                  </div>
                  <div class="s_error" *ngIf="!configForm.controls['waiting_time'].valid && configSubmit">
                      <div class="s_validation" *ngIf="configForm.controls['waiting_time'].hasError('required')">{{error_msg.required}} </div>
                  </div>
                </div> 
                <div class="col"></div>
          </div>             
            <!-- <div class="row">
                <div class="col">
                  <div class="add_provider_btn_bay p0">
                      <button class="edit_btn floatRight" (click)="goToPage('maker/editprovider')">Edit</button>
                    <div class="clear"></div>
                  </div>
                </div>
              </div> -->
            <div class="row">
              <div class="col">
                <div class="add_provider_btn_bay">
                  <button class="save_btn floatRight"> {{'service.Save' | translate}}</button>
                  <button class="cancel_btn floatRight" (click)="cancelClick()"> {{'service.Cancel' | translate}}</button>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
        </form>
    </div>
  </div>
</section>