<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> {{'editdriver.Forex Delivery Driver' | translate}}</h4>
      </div>
      <div class="col-md-6 textRight relative">
          <button class="logout" (click)="goToPage('delivery')">
              <img src="assets/images/asset_home.png">
             {{'editdriver.Home' | translate}}</button>
            <button class="logout" (click)="logout()">
                    <img src="assets/images/asset_logout.png">
                   {{'editdriver.Logout' | translate}}</button>
          <img src="assets/images/asset_logo1.png">
          <span (click)="goToPage('maker/changepin')"> {{'editdriver.Change PIN' | translate}}</span>
      </div>
    </div>
  </header>
<section>
    <div class="provider_content">
      <h3> {{'editdriver.Edit Forex Delivery Driver' | 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> {{'editdriver.Success!' | translate}}</strong>  {{'editdriver.Forex Delivery Driver updated 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> {{'editdriver.Warning!' | translate}}</strong> {{responseMsg}}
            </div>
        <form [formGroup]="providerForm" (ngSubmit)="editProcess()" autocomplete="off">
        <div class="row">
          <div class="col">
            <div class="provider_data_content" *ngIf="provider">
                <p> {{'editdriver.Provider Name' | translate}}</p>
                <input class="provider_input" placeholder="" type="text" disabled [value]="provider.name">
            </div>
          </div>
          <div class="col">
              <div class="provider_data_content">
                  <p>{{'editdriver.Location' | translate}}</p>
                  <input class="provider_input" placeholder="" type="text" formControlName="location">
              </div>
              <div class="s_error" *ngIf="!providerForm.controls['location'].valid && providerSubmit">
                  <div class="s_validation" *ngIf="providerForm.controls['location'].hasError('required')">{{error_msg.required}} </div>
              </div>
            </div>

            <div class="col">
                <div class="provider_data_content">
                    <p> {{'adddriver.Postal Code' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text" formControlName="postal">
                </div>
                  <div class="s_error" *ngIf="!providerForm.controls['postal'].valid && providerSubmit">
                      <div class="s_validation" *ngIf="providerForm.controls['postal'].hasError('required')">{{error_msg.required}} </div>
                  </div>  
            </div>          
          
        </div>
        <div class="row">
            <div class="col">
                <div class="provider_data_content" *ngIf="provider">
                    <p> {{'editdriver.National ID' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text" disabled [value]="provider.national_id">
                </div>
            </div>
            <div class="col">
                <div class="provider_data_content">
                    <p> {{'editdriver.Manager ID' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text"  formControlName="manager_id">
                </div>
                <div class="s_error" *ngIf="!providerForm.controls['manager_id'].valid && providerSubmit">
                    <div class="s_validation" *ngIf="providerForm.controls['manager_id'].hasError('required')">{{error_msg.required}} </div>
                </div>
            </div>
              <div class="col">
                  <div class="provider_data_content">
                      <p> {{'editdriver.Phone' | translate}}</p>
                      <input class="provider_input" placeholder="" type="number" formControlName="phone">
                  </div>
                  <div class="s_error" *ngIf="!providerForm.controls['phone'].valid && providerForm.controls['phone'].touched">
                      <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('pattern')">{{error_msg.phone}}</div>
                  </div>
                  <div class="s_error" *ngIf="!providerForm.controls['phone'].valid && providerForm.controls['phone'].touched && !providerForm.controls['phone'].hasError('pattern')">

                    <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('maxlength')">{{error_msg.maxLength}} 15</div>
                      <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('minlength')">{{error_msg.minLength}} 8</div>
                  </div>
                  <div class="s_error" *ngIf="!providerForm.controls['phone'].valid && providerSubmit">
                      <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('required')">{{error_msg.required}} </div>
                  </div>
              </div>              
          </div>
          <div class="row">
              <div class="col">
                  <div class="provider_data_content">
                      <p> {{'editdriver.Email id' | translate}}</p>
                      <input class="provider_input" placeholder="" type="mail" formControlName="email_id">
                  </div>
                  <div class="s_error" *ngIf="!providerForm.controls['email_id'].valid && providerForm.controls['email_id'].touched">
                      <div class="s_validation" *ngIf="providerForm.controls['email_id'].hasError('pattern')">{{error_msg.email}} </div>
                      <div class="s_validation" *ngIf="providerForm.controls['email_id'].hasError('maxlength')">{{error_msg.maxLength}} 50</div>
                  </div>
                  <div class="s_error" *ngIf="!providerForm.controls['email_id'].valid && providerSubmit">
                      <div class="s_validation" *ngIf="providerForm.controls['email_id'].hasError('required')">{{error_msg.required}} </div>
                  </div>
              </div>
              <div class="col"></div>
              <div class="col"></div>
          </div>

          <hr/>

              <h6>Forex Amount Manage</h6><br/>

              <div class="row">
                  <!-- <div class="col">
                    <div class="provider_data_content">
                        <p>Contact</p>
                        <input class="provider_input" placeholder="" type="text" formControlName="contact">
                    </div>
                    <div class="s_error" *ngIf="!providerForm.controls['contact'].valid && providerSubmit">
                        <div class="s_validation" *ngIf="providerForm.controls['contact'].hasError('required')">{{error_msg.required}} </div>
                    </div>
                  </div> -->
                  <div class="col">
                      <div class="provider_data_content">
                          <p> {{'adddriver.Maximum Amount' | translate}}</p>
                          <input class="provider_input" placeholder="" type="number" formControlName="max_amount">
                      </div>
                      <div class="s_error" *ngIf="!providerForm.controls['max_amount'].valid && providerSubmit">
                          <div class="s_validation" *ngIf="providerForm.controls['max_amount'].hasError('required')">{{error_msg.required}} </div>
                      </div>
                  </div>
                  <div class="col">
                      <div class="provider_data_content">
                          <p> {{'adddriver.Maximum Limit' | translate}}</p>
                          <input class="provider_input" placeholder="" type="mail" formControlName="max_limit">
                      </div>
                      <div class="s_error" *ngIf="!providerForm.controls['max_limit'].valid && providerSubmit">
                          <div class="s_validation" *ngIf="providerForm.controls['max_limit'].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">
                  <button class="save_btn floatRight"> {{'editdriver.Save' | translate}}</button>
                  <button class="cancel_btn floatRight" (click)="cancelClick()"> {{'editdriver.Cancel' | translate}}</button>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
            </form>
      </div>
    </div>
  </section>