<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>{{'editprovider.Forex Provider' | translate}}</h4>
      </div>
      <div class="col-md-6 textRight relative">
          <button class="logout" (click)="goToPage('forex')">
              <img src="assets/images/asset_home.png">
            {{'editprovider.Home' | translate}}</button>
          <button class="logout" (click)="logout()">
              <img src="assets/images/asset_logout.png">
            {{'editprovider.Logout' | translate}}</button>
          <img src="assets/images/asset_logo1.png">
          <span (click)="goToPage('forex/changepin')">{{'editprovider.Change PIN' | translate}}</span>
      </div>
    </div>
  </header>
<section>
    <div class="provider_content">
      <h3>{{'editprovider.Edit Forex Provider' | 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>{{'editprovider.Success' | translate}}!</strong> {{'editprovider.Provider 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>{{'editprovider.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>{{'editprovider.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>{{'editprovider.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" *ngIf="provider">
                  <p>{{'editprovider.CR ID' | translate}}</p>
                  <input class="provider_input" placeholder="" type="text" disabled [value]="provider.cr_id">
              </div>
          </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="provider_data_content">
                    <p>{{'editprovider.CR Manager' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text"  formControlName="cr_manager">
                </div>
                <div class="s_error" *ngIf="!providerForm.controls['cr_manager'].valid && providerSubmit">
                    <div class="s_validation" *ngIf="providerForm.controls['cr_manager'].hasError('required')">{{error_msg.required}} </div>
                </div>
            </div>
            <div class="col">
                <div class="provider_data_content">
                    <p>{{'editprovider.Contact Name' | translate}} </p>
                    <input class="provider_input" placeholder="" type="text" formControlName="contact">
                </div>
                <div class="s_error" *ngIf="!providerForm.controls['contact'].valid">
                    <div class="s_validation" *ngIf="providerForm.controls['contact'].hasError('pattern')">{{error_msg.pattern}}</div>
                    </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>{{'editprovider.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>{{'editprovider.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 class="provider_data_content">
                        <p>{{'editprovider.Status' | translate}}</p>
                        <select class="provider_input" formControlName="online_status">
                          <option value="1">Online</option>
                          <option value="0">Offline</option>
                        </select>
                    </div>
                    <div class="s_error" *ngIf="!providerForm.controls['online_status'].valid && providerSubmit">
                        <div class="s_validation" *ngIf="providerForm.controls['online_status'].hasError('required')">{{error_msg.required}} </div>
                    </div>
                  </div>

                  <div class="col">
                      <div class="provider_data_content">
                          <p>{{'editprovider.Delivery Provider' | translate}}</p>
                          <select class="provider_input" formControlName="deli_provider_id">
                            <option *ngFor="let provider of providerList" [value]="provider.id">{{provider.name}}</option>
                          </select>
                      </div>
                      <div class="s_error" *ngIf="!providerForm.controls['deli_provider_id'].valid && providerSubmit">
                          <div class="s_validation" *ngIf="providerForm.controls['deli_provider_id'].hasError('required')">{{error_msg.required}} </div>
                      </div>
                    </div>
              <!-- <div class="col">
                  <div class="provider_data_content">
                      <p></p>
                    <div class="edit_delivery">Edit Delivery Driver</div>
                    </div>
              </div> -->
            </div>
            <div class="row">
                <div class="col">
                    <div class="provider_data_content">
                        <p>{{'editprovider.Merchant ID' | translate}}</p>
                        <input class="provider_input" placeholder="" type="text" formControlName="merchant_id">
                    </div>
                    <div class="s_error" *ngIf="!providerForm.controls['merchant_id'].valid && providerSubmit">
                        <div class="s_validation" *ngIf="providerForm.controls['merchant_id'].hasError('required')">{{error_msg.required}} </div>
                    </div>
                </div>
                    <div class="col"></div>
  
                    <div class="col"></div>
                <!-- <div class="col">
                    <div class="provider_data_content">
                        <p></p>
                      <div class="edit_delivery">Edit Delivery Driver</div>
                      </div>
                </div> -->
              </div>
            <div class="row">
              <div class="col">
                <div class="add_provider_btn_bay">
                  <button class="save_btn floatRight">{{'editprovider.Save' | translate}}</button>
                  <button class="cancel_btn floatRight" (click)="cancelClick()">{{'editprovider.Cancel' | translate}}</button>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
            </form>
      </div>
    </div>
  </section>