
<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> {{'addforex.Forex Delivery Service Provider' | translate}}</h4>
    </div>
    <div class="col-md-6 textRight relative">
        <button class="logout" (click)="goToPage('maker/home')">
            <img src="assets/images/asset_home.png">
            {{'addforex.Home' | translate}}
          </button>
        <button class="logout" (click)="logout()">
            <img src="assets/images/asset_logout.png">
            {{'addforex.Logout' | translate}}</button>
        <img src="assets/images/asset_logo1.png">
        <span (click)="goToPage('delivery/changepin')"> {{'addforex.Change PIN' | translate}}</span>
    </div>
  </div>
</header>
<section>
  <div class="provider_content">
    
    <h3> {{'addforex.Add Delivery 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>{{'addforex.Success!' | translate}}</strong>  {{'addforex.Provider created 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>{{'addforex.Warning!' | translate}}</strong> {{responseError}}
          </div>
      <form [formGroup]="providerForm" (ngSubmit)="regProcess()" autocomplete="off">
        <div class="row">
          <div class="col">
            <div class="provider_data_content">
                <p> {{'addforex.Provider Name' | translate}}</p>
                <input class="provider_input" placeholder="" type="text" formControlName="name" tabindex="1">
            </div>
              <div class="s_error" *ngIf="!providerForm.controls['name'].valid && providerSubmit">
                  <div class="s_validation" *ngIf="providerForm.controls['name'].hasError('required')">{{error_msg.required}} </div>
              </div>
          </div>
          <div class="col">
              <div class="provider_data_content">
                  <p> {{'addforex.Pin' | translate}}</p>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin m0" placeholder="" type="password" maxlength="1" value="0" readonly>
              </div>
          </div>
          <div class="col">
              <!-- <div class="provider_data_content">
                  <p> {{'addforex.Confirm Pin' | translate}}</p>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin" placeholder="" type="password" maxlength="1" value="0" readonly>
                  <input class="provider_pin m0" placeholder="" type="password" maxlength="1" value="0" readonly>
              </div> -->
              <div class="provider_data_content">
                  <p> {{'addforex.Location' | translate}}</p>
                  <input class="provider_input" placeholder="" type="text" formControlName="location" tabindex="2">
              </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>
        <div class="row">
            <div class="col">
                <div class="provider_data_content">
                    <p> {{'addforex.CR ID' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text" formControlName="cr_id" tabindex="3">
                </div>
                <div class="s_error" *ngIf="!providerForm.controls['cr_id'].valid && providerSubmit">
                    <div class="s_validation" *ngIf="providerForm.controls['cr_id'].hasError('required')">{{error_msg.required}} </div>
                </div>
                <div class="s_error" *ngIf="!providerForm.controls['cr_id'].valid && providerForm.controls['cr_id'].touched">
                    <div class="s_validation" *ngIf="providerForm.controls['cr_id'].hasError('pattern')">{{error_msg.crId}}</div>
                </div>
            </div>
            <div class="col">
                <div class="provider_data_content">
                    <p>  {{'addforex.CR Manager' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text"  formControlName="cr_manager" tabindex="4">
                </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> {{'addforex.Contact Name' | translate}}</p>
                    <input class="provider_input" placeholder="" type="text" formControlName="contact" tabindex="5">
                </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>
          

            <div class="row">
                
                <div class="col">
                    <div class="provider_data_content">
                        <p> {{'addforex.Phone' | translate}}</p>
                        <input class="provider_input" placeholder="" type="number" formControlName="phone" tabindex="6">
                    </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}} 10</div>
                        <div class="s_validation" *ngIf="providerForm.controls['phone'].hasError('minlength')">{{error_msg.minLength}} 10</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 class="col">
                    <div class="provider_data_content">
                        <p> {{'addforex.Email id' | translate}}</p>
                        <input class="provider_input" placeholder="" type="mail" formControlName="email_id" tabindex="7">
                    </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> {{'addforex.Delivery Provider' | translate}}</p>
                        <select class="provider_input" formControlName="deli_provider_id" tabindex="8">
                          <option disabled hidden> {{'addforex.Status' | translate}}</option>
                          <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>

              <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 class="provider_data_content">
                        <p> {{'addforex.Status' | translate}}</p>
                        <select class="provider_input" formControlName="online_status" tabindex="9">
                          <option disabled hidden>{{'addforex.Status' | translate}}</option>
                          <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>                 
                </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"> {{'addforex.Save' | translate}}</button>
                  <button class="cancel_btn floatRight" (click)="cancelClick()"> {{'addforex.Cancel' | translate}}</button>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
        </form>
    </div>
  </div>
</section>